Merge branch '322755-lazy-import-bulk-edit-in-issues-page-refactor' into 'master'

Lazy import bulk edit in issues page refactor

See merge request gitlab-org/gitlab!60662

app/assets/javascripts/issues_list/components/issues_list_app.vue

@@ -353,7 +353,18 @@ export default {
         eventHub.$emit('issuables:updateBulkEdit');
       });
     },
-    handleBulkUpdateClick() {
+    async handleBulkUpdateClick() {
+      if (!this.hasInitBulkEdit) {
+        const initBulkUpdateSidebar = await import('~/issuable_init_bulk_update_sidebar');
+        initBulkUpdateSidebar.default.init('issuable_');
+
+        const usersSelect = await import('~/users_select');
+        const UsersSelect = usersSelect.default;
+        new UsersSelect(); // eslint-disable-line no-new
+
+        this.hasInitBulkEdit = true;
+      }
+
       eventHub.$emit('issuables:enableBulkEdit');
     },
     handleClickTab(state) {

app/assets/javascripts/issues_list/index.js

@@ -7,7 +7,7 @@ import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_
 import IssuablesListApp from './components/issuables_list_app.vue';
 import JiraIssuesImportStatusRoot from './components/jira_issues_import_status_app.vue';
 
-function mountJiraIssuesListApp() {
+export function mountJiraIssuesListApp() {
   const el = document.querySelector('.js-jira-issues-import-status');
 
   if (!el) {
@@ -37,7 +37,7 @@ function mountJiraIssuesListApp() {
   });
 }
 
-function mountIssuablesListApp() {
+export function mountIssuablesListApp() {
   if (!gon.features?.vueIssuablesList) {
     return;
   }
@@ -66,7 +66,7 @@ function mountIssuablesListApp() {
   });
 }
 
-export function initIssuesListApp() {
+export function mountIssuesListApp() {
   const el = document.querySelector('.js-issues-list');
 
   if (!el) {
@@ -157,8 +157,3 @@ export function initIssuesListApp() {
     render: (createComponent) => createComponent(IssuesListApp),
   });
 }
-
-export default function initIssuablesList() {
-  mountJiraIssuesListApp();
-  mountIssuablesListApp();
-}

app/assets/javascripts/pages/groups/issues/index.js

 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 import issuableInitBulkUpdateSidebar from '~/issuable_init_bulk_update_sidebar';
-import initIssuablesList from '~/issues_list';
+import { mountIssuablesListApp } from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
@@ -12,8 +12,6 @@ IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
 IssuableFilteredSearchTokenKeys.removeTokensForKeys('release');
 issuableInitBulkUpdateSidebar.init(ISSUE_BULK_UPDATE_PREFIX);
 
-initIssuablesList();
-
 initFilteredSearch({
   page: FILTERED_SEARCH.ISSUES,
   isGroupDecendent: true,
@@ -22,3 +20,7 @@ initFilteredSearch({
 });
 projectSelect();
 initManualOrdering();
+
+if (gon.features?.vueIssuablesList) {
+  mountIssuablesListApp();
+}

app/assets/javascripts/pages/projects/issues/index/index.js

-/* eslint-disable no-new */
-
 import IssuableFilteredSearchTokenKeys from 'ee_else_ce/filtered_search/issuable_filtered_search_token_keys';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import initCsvImportExportButtons from '~/issuable/init_csv_import_export_buttons';
 import initIssuableByEmail from '~/issuable/init_issuable_by_email';
 import IssuableIndex from '~/issuable_index';
-import initIssuablesList, { initIssuesListApp } from '~/issues_list';
+import { mountIssuablesListApp, mountIssuesListApp, mountJiraIssuesListApp } from '~/issues_list';
 import initManualOrdering from '~/manual_ordering';
 import { FILTERED_SEARCH } from '~/pages/constants';
 import { ISSUABLE_INDEX } from '~/pages/projects/constants';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
 import UsersSelect from '~/users_select';
 
-IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
-
-initFilteredSearch({
-  page: FILTERED_SEARCH.ISSUES,
-  filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
-  useDefaultState: true,
-});
-
 if (gon.features?.vueIssuesList) {
-  new IssuableIndex();
+  mountIssuesListApp();
 } else {
-  new IssuableIndex(ISSUABLE_INDEX.ISSUE);
+  IssuableFilteredSearchTokenKeys.addExtraTokensForIssues();
+
+  initFilteredSearch({
+    page: FILTERED_SEARCH.ISSUES,
+    filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
+    useDefaultState: true,
+  });
+
+  new IssuableIndex(ISSUABLE_INDEX.ISSUE); // eslint-disable-line no-new
+  new UsersSelect(); // eslint-disable-line no-new
+
+  initCsvImportExportButtons();
+  initIssuableByEmail();
+  initManualOrdering();
+
+  if (gon.features?.vueIssuablesList) {
+    mountIssuablesListApp();
+  }
 }
 
-new ShortcutsNavigation();
-new UsersSelect();
+new ShortcutsNavigation(); // eslint-disable-line no-new
 
-initManualOrdering();
-initIssuablesList();
-initIssuableByEmail();
-initCsvImportExportButtons();
-initIssuesListApp();
+mountJiraIssuesListApp();

app/assets/javascripts/pages/projects/issues/service_desk/index.js

-import initIssuablesList from '~/issues_list';
+import { mountIssuablesListApp } from '~/issues_list';
 import FilteredSearchServiceDesk from './filtered_search';
 
 const supportBotData = JSON.parse(
@@ -11,5 +11,5 @@ if (document.querySelector('.filtered-search')) {
 }
 
 if (gon.features?.vueIssuablesList) {
-  initIssuablesList();
+  mountIssuablesListApp();
 }

spec/frontend/issues_list/components/issues_list_app_spec.js

@@ -170,13 +170,15 @@ describe('IssuesListApp component', () => {
         expect(findGlButtons().filter((button) => button.text() === 'Edit issues')).toHaveLength(0);
       });
 
-      it('emits "issuables:enableBulkEdit" event to legacy bulk edit class', () => {
+      it('emits "issuables:enableBulkEdit" event to legacy bulk edit class', async () => {
         wrapper = mountComponent({ provide: { canBulkUpdate: true }, mountFn: mount });
 
         jest.spyOn(eventHub, '$emit');
 
         findGlButtonAt(2).vm.$emit('click');
 
+        await waitForPromises();
+
         expect(eventHub.$emit).toHaveBeenCalledWith('issuables:enableBulkEdit');
       });
     });