Make import button show number of currently importing projects

Ensures the import button shows the number of
projects that are currently being imported.

app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue

@@ -35,6 +35,7 @@ export default {
     ...mapGetters([
       'isLoading',
       'isImportingAnyRepo',
+      'importingRepoCount',
       'hasImportableRepos',
       'hasIncompatibleRepos',
       'importAllCount',
@@ -61,7 +62,7 @@ export default {
 
     importAllButtonText() {
       if (this.isImportingAnyRepo) {
-        return __('Importing...');
+        return n__('Importing %d repository', 'Importing %d repositories', this.importingRepoCount);
       }
 
       if (this.hasIncompatibleRepos)

app/assets/javascripts/import_entities/import_projects/store/getters.js

-import { STATUSES } from '../../constants';
-import { isProjectImportable, isIncompatible } from '../utils';
+import { isProjectImportable, isIncompatible, isImporting } from '../utils';
 
 export const isLoading = (state) => state.isLoadingRepos || state.isLoadingNamespaces;
 
-export const isImportingAnyRepo = (state) =>
-  state.repositories.some((repo) =>
-    [STATUSES.SCHEDULING, STATUSES.SCHEDULED, STATUSES.STARTED].includes(
-      repo.importedProject?.importStatus,
-    ),
-  );
+export const importingRepoCount = (state) =>
+  state.repositories.filter(isImporting).length;
+
+export const isImportingAnyRepo = (state) => state.repositories.some(isImporting);
 
 export const hasIncompatibleRepos = (state) => state.repositories.some(isIncompatible);
 

app/assets/javascripts/import_entities/import_projects/utils.js

@@ -11,3 +11,9 @@ export function getImportStatus(project) {
 export function isProjectImportable(project) {
   return !isIncompatible(project) && getImportStatus(project) === STATUSES.NONE;
 }
+
+export function isImporting(repo) {
+  return [STATUSES.SCHEDULING, STATUSES.SCHEDULED, STATUSES.STARTED].includes(
+    repo.importedProject?.importStatus,
+  );
+}

spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js

@@ -142,20 +142,28 @@ describe('ImportProjectsTable', () => {
     },
   );
 
-  it('sets the button text to "Importing..." when importing repos', () => {
-    createComponent({
-      state: {
-        providerRepos: [providerRepo],
-      },
-      getters: {
-        hasIncompatibleRepos: () => false,
-        importAllCount: () => 10,
-        isImportingAnyRepo: () => true,
-      },
-    });
+  it.each`
+    importingRepoCount | buttonMessage
+    ${1}               | ${'Importing 1 repository'}
+    ${5}               | ${'Importing 5 repositories'}
+  `(
+    'sets the button text to "$buttonMessage" when importing repos',
+    ({ importingRepoCount, buttonMessage }) => {
+      createComponent({
+        state: {
+          providerRepos: [providerRepo],
+        },
+        getters: {
+          hasIncompatibleRepos: () => false,
+          importAllCount: () => 10,
+          isImportingAnyRepo: () => true,
+          importingRepoCount: () => importingRepoCount,
+        },
+      });
 
-    expect(findImportAllButton().text()).toBe('Importing...');
-  });
+      expect(findImportAllButton().text()).toBe(buttonMessage);
+    },
+  );
 
   it('renders an empty state if there are no repositories available', () => {
     createComponent({ state: { repositories: [] } });
@@ -183,7 +191,7 @@ describe('ImportProjectsTable', () => {
   });
 
   it('shows loading spinner when import is in progress', () => {
-    createComponent({ getters: { isImportingAnyRepo: () => true } });
+    createComponent({ getters: { isImportingAnyRepo: () => true, importallCount: () => 1 } });
 
     expect(findImportAllButton().props().loading).toBe(true);
   });