Refactor import_details_app translations

Avoid using $options for i18n translations

app/assets/javascripts/import/details/components/bulk_import_details_app.vue

+<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>

app/assets/javascripts/import/details/components/import_details_app.vue

 <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>

app/assets/javascripts/pages/import/bulk_imports/details/index.js

+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();

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?

app/views/import/bulk_imports/details.html.haml

+- 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: '' } }

config/feature_flags/development/bulk_import_details_page.yml

+---
+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

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

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 ""

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) }
 

spec/frontend/import/details/components/bulk_import_details_app_spec.js

+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');
+    });
+  });
+});

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');
     });
   });
 });

spec/frontend/pages/import/bulk_imports/details/index_spec.js

+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);
+    });
+  });
+});