From fde3ebb96cb69ccc7be3574ed8b6e3808c23c56c Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 1 Nov 2023 07:01:35 +0000
Subject: [PATCH] Refactor import_details_app translations
Avoid using $options for i18n translations
---
.../components/bulk_import_details_app.vue | 15 ++++++++
.../details/components/import_details_app.vue | 6 +--
.../import/bulk_imports/details/index.js | 25 +++++++++++++
.../import/bulk_imports_controller.rb | 4 ++
.../import/bulk_imports/details.html.haml | 5 +++
.../development/bulk_import_details_page.yml | 8 ++++
config/routes/import.rb | 1 +
locale/gitlab.pot | 3 ++
.../import/bulk_imports_controller_spec.rb | 27 ++++++++++++++
.../bulk_import_details_app_spec.js | 18 +++++++++
.../components/import_details_app_spec.js | 2 +-
.../import/bulk_imports/details/index_spec.js | 37 +++++++++++++++++++
12 files changed, 145 insertions(+), 6 deletions(-)
create mode 100644 app/assets/javascripts/import/details/components/bulk_import_details_app.vue
create mode 100644 app/assets/javascripts/pages/import/bulk_imports/details/index.js
create mode 100644 app/views/import/bulk_imports/details.html.haml
create mode 100644 config/feature_flags/development/bulk_import_details_page.yml
create mode 100644 spec/frontend/import/details/components/bulk_import_details_app_spec.js
create mode 100644 spec/frontend/pages/import/bulk_imports/details/index_spec.js
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 000000000000..d6c160754824
--- /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 13483fa8ba2d..3aa60c00ff81 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 000000000000..ca5de576536e
--- /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 a8ec738caf4c..443eb37e1d71 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 000000000000..0efe71362a6c
--- /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 000000000000..2e4576656c53
--- /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 26843b4bc8d5..274611283b5b 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 48df831f014c..eac20a61dde4 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 c5e5aa036694..57c723829e3c 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 000000000000..d32afb7ddcbd
--- /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 6e748a57a1d1..cc3d9dd5e5e6 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 000000000000..0fefa3017f7c
--- /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);
+ });
+ });
+});
--
GitLab