Merge branch '285634-Fix-confusion-button-text-when-importing-from-github' into 'master'

Fix confusing button text when importing from GitHub

See merge request gitlab-org/gitlab!49684

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',
@@ -60,13 +61,17 @@ export default {
     },
 
     importAllButtonText() {
-      return this.hasIncompatibleRepos
-        ? n__(
-            'Import %d compatible repository',
-            'Import %d compatible repositories',
-            this.importAllCount,
-          )
-        : n__('Import %d repository', 'Import %d repositories', this.importAllCount);
+      if (this.isImportingAnyRepo) {
+        return n__('Importing %d repository', 'Importing %d repositories', this.importingRepoCount);
+      }
+
+      if (this.hasIncompatibleRepos)
+        return n__(
+          'Import %d compatible repository',
+          'Import %d compatible repositories',
+          this.importAllCount,
+        );
+      return n__('Import %d repository', 'Import %d repositories', this.importAllCount);
     },
 
     emptyStateText() {

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

changelogs/unreleased/285634-Fix-confusion-button-text-when-importing-from-github.yml

+---
+title: Fix confusing button text when importing from GitHub
+merge_request: 49684
+author: Kev @KevSlashNull
+type: fixed

locale/gitlab.pot

@@ -14701,6 +14701,11 @@ msgstr ""
 msgid "Imported requirements"
 msgstr ""
 
+msgid "Importing %d repository"
+msgid_plural "Importing %d repositories"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Improve Merge Requests and customer support with GitLab Enterprise Edition."
 msgstr ""
 

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

@@ -142,6 +142,29 @@ describe('ImportProjectsTable', () => {
     },
   );
 
+  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(buttonMessage);
+    },
+  );
+
   it('renders an empty state if there are no repositories available', () => {
     createComponent({ state: { repositories: [] } });
 
@@ -168,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);
   });