diff --git a/app/assets/javascripts/import/details/components/bulk_import_details_app.vue b/app/assets/javascripts/import/details/components/bulk_import_details_app.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6c1607548248734da2cb698a9dd89be96c90bf6
--- /dev/null
+++ b/app/assets/javascripts/import/details/components/bulk_import_details_app.vue
@@ -0,0 +1,15 @@
+<script>
+import ImportDetailsTable from '~/import/details/components/import_details_table.vue';
+
+export default {
+ name: 'BulkImportDetailsApp',
+ components: { ImportDetailsTable },
+};
+</script>
+
+<template>
+ <div>
+ <h1>{{ s__('Import|GitLab Migration details') }}</h1>
+ <import-details-table />
+ </div>
+</template>
diff --git a/app/assets/javascripts/import/details/components/import_details_app.vue b/app/assets/javascripts/import/details/components/import_details_app.vue
index 13483fa8ba2de47328c8933543259799b0bbe363..3aa60c00ff8134b1597b72aaf8bc97d4a749dbf3 100644
--- a/app/assets/javascripts/import/details/components/import_details_app.vue
+++ b/app/assets/javascripts/import/details/components/import_details_app.vue
@@ -1,18 +1,14 @@
<script>
-import { s__ } from '~/locale';
import ImportDetailsTable from './import_details_table.vue';
export default {
components: { ImportDetailsTable },
- i18n: {
- pageTitle: s__('Import|GitHub import details'),
- },
};
</script>
<template>
<div>
- <h1>{{ $options.i18n.pageTitle }}</h1>
+ <h1>{{ s__('Import|GitHub import details') }}</h1>
<import-details-table />
</div>
</template>
diff --git a/app/assets/javascripts/pages/import/bulk_imports/details/index.js b/app/assets/javascripts/pages/import/bulk_imports/details/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca5de576536e88799bf9e02614cf4eb172a80a67
--- /dev/null
+++ b/app/assets/javascripts/pages/import/bulk_imports/details/index.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import BulkImportDetailsApp from '~/import/details/components/bulk_import_details_app.vue';
+
+export const initBulkImportDetails = () => {
+ const el = document.querySelector('.js-bulk-import-details');
+
+ if (!el) {
+ return null;
+ }
+
+ const { failuresPath } = el.dataset;
+
+ return new Vue({
+ el,
+ name: 'BulkImportDetailsRoot',
+ provide: {
+ failuresPath,
+ },
+ render(createElement) {
+ return createElement(BulkImportDetailsApp);
+ },
+ });
+};
+
+initBulkImportDetails();
diff --git a/app/controllers/import/bulk_imports_controller.rb b/app/controllers/import/bulk_imports_controller.rb
index a8ec738caf4c8b5e802a846a9ac52733e5b99a40..443eb37e1d7157825d77d8c5216b437b70ecdb19 100644
--- a/app/controllers/import/bulk_imports_controller.rb
+++ b/app/controllers/import/bulk_imports_controller.rb
@@ -49,6 +49,10 @@ def status
end
end
+ def details
+ render_404 unless Feature.enabled?(:bulk_import_details_page)
+ end
+
def create
return render json: { success: false }, status: :too_many_requests if throttled_request?
return render json: { success: false }, status: :unprocessable_entity unless valid_create_params?
diff --git a/app/views/import/bulk_imports/details.html.haml b/app/views/import/bulk_imports/details.html.haml
new file mode 100644
index 0000000000000000000000000000000000000000..0efe71362a6c5edcce8133c5d57c072925a4d686
--- /dev/null
+++ b/app/views/import/bulk_imports/details.html.haml
@@ -0,0 +1,5 @@
+- add_to_breadcrumbs _('New group'), new_group_path
+- add_to_breadcrumbs _('Import group'), new_group_path(anchor: 'import-group-pane')
+- page_title s_('Import|GitLab Migration details')
+
+.js-bulk-import-details{ data: { failures_path: '' } }
diff --git a/config/feature_flags/development/bulk_import_details_page.yml b/config/feature_flags/development/bulk_import_details_page.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2e4576656c53ca7cd8e0970b239993f04ead467e
--- /dev/null
+++ b/config/feature_flags/development/bulk_import_details_page.yml
@@ -0,0 +1,8 @@
+---
+name: bulk_import_details_page
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/135004
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/429109
+milestone: '16.6'
+type: development
+group: group::import and integrate
+default_enabled: false
diff --git a/config/routes/import.rb b/config/routes/import.rb
index 26843b4bc8d567fc1ba02878cf737313d3895f81..274611283b5b3a99d1549f07ff55741201d1ed33 100644
--- a/config/routes/import.rb
+++ b/config/routes/import.rb
@@ -74,6 +74,7 @@
get :status
get :realtime_changes
get :history
+ get :details
end
resource :manifest, only: [:create, :new], controller: :manifest do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 48df831f014c9c92d3dfb540825f2c526d4a547d..eac20a61dde49435b23477d4b24f961a7e85b521 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -24703,6 +24703,9 @@ msgstr ""
msgid "Import|GitHub import details"
msgstr ""
+msgid "Import|GitLab Migration details"
+msgstr ""
+
msgid "Import|Maximum decompressed file size for archives from imports (MiB)"
msgstr ""
diff --git a/spec/controllers/import/bulk_imports_controller_spec.rb b/spec/controllers/import/bulk_imports_controller_spec.rb
index c5e5aa0366941b2dc8ebf3d588f6ed6ef6fd9720..57c723829e3c5b6c19586570ff9520f182f30654 100644
--- a/spec/controllers/import/bulk_imports_controller_spec.rb
+++ b/spec/controllers/import/bulk_imports_controller_spec.rb
@@ -300,6 +300,33 @@ def get_status(params_override = {}, format = :json)
end
end
+ describe 'GET details' do
+ subject(:request) { get :details }
+
+ context 'when bulk_import_details_page feature flag is enabled' do
+ before do
+ stub_feature_flags(bulk_import_details_page: true)
+ request
+ end
+
+ it 'responds with a 200 and shows the template', :aggregate_failures do
+ expect(response).to have_gitlab_http_status(:ok)
+ expect(response).to render_template(:details)
+ end
+ end
+
+ context 'when bulk_import_details_page feature flag is disabled' do
+ before do
+ stub_feature_flags(bulk_import_details_page: false)
+ request
+ end
+
+ it 'responds with a 404' do
+ expect(response).to have_gitlab_http_status(:not_found)
+ end
+ end
+ end
+
describe 'GET realtime_changes' do
let_it_be(:bulk_import) { create(:bulk_import, :created, user: user) }
diff --git a/spec/frontend/import/details/components/bulk_import_details_app_spec.js b/spec/frontend/import/details/components/bulk_import_details_app_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..d32afb7ddcbd38c9f18d787c72f31541f8e0557f
--- /dev/null
+++ b/spec/frontend/import/details/components/bulk_import_details_app_spec.js
@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils';
+import BulkImportDetailsApp from '~/import/details/components/bulk_import_details_app.vue';
+
+describe('Bulk import details app', () => {
+ let wrapper;
+
+ const createComponent = () => {
+ wrapper = shallowMount(BulkImportDetailsApp);
+ };
+
+ describe('template', () => {
+ it('renders heading', () => {
+ createComponent();
+
+ expect(wrapper.find('h1').text()).toBe('GitLab Migration details');
+ });
+ });
+});
diff --git a/spec/frontend/import/details/components/import_details_app_spec.js b/spec/frontend/import/details/components/import_details_app_spec.js
index 6e748a57a1d1dea3ffda3a50b08ea8fa5d5fc24b..cc3d9dd5e5e6985d466e8f1086c56caa079eff24 100644
--- a/spec/frontend/import/details/components/import_details_app_spec.js
+++ b/spec/frontend/import/details/components/import_details_app_spec.js
@@ -12,7 +12,7 @@ describe('Import details app', () => {
it('renders heading', () => {
createComponent();
- expect(wrapper.find('h1').text()).toBe(ImportDetailsApp.i18n.pageTitle);
+ expect(wrapper.find('h1').text()).toBe('GitHub import details');
});
});
});
diff --git a/spec/frontend/pages/import/bulk_imports/details/index_spec.js b/spec/frontend/pages/import/bulk_imports/details/index_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..0fefa3017f7cd66711572739993e0409fb6afc5b
--- /dev/null
+++ b/spec/frontend/pages/import/bulk_imports/details/index_spec.js
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import { initBulkImportDetails } from '~/pages/import/bulk_imports/details/index';
+
+jest.mock('~/import/details/components/bulk_import_details_app.vue');
+
+describe('initBulkImportDetails', () => {
+ let appRoot;
+
+ const createAppRoot = () => {
+ appRoot = document.createElement('div');
+ appRoot.setAttribute('class', 'js-bulk-import-details');
+ document.body.appendChild(appRoot);
+ };
+
+ afterEach(() => {
+ if (appRoot) {
+ appRoot.remove();
+ appRoot = null;
+ }
+ });
+
+ describe('when there is no app root', () => {
+ it('returns null', () => {
+ expect(initBulkImportDetails()).toBeNull();
+ });
+ });
+
+ describe('when there is an app root', () => {
+ beforeEach(() => {
+ createAppRoot();
+ });
+
+ it('returns a Vue instance', () => {
+ expect(initBulkImportDetails()).toBeInstanceOf(Vue);
+ });
+ });
+});