Add latest changes from gitlab-org/gitlab@master

9 files changed, 102 insertions, 8 deletions

diff --git a/app/assets/javascripts/import_entities/components/import_status.vue b/app/assets/javascripts/import_entities/components/import_status.vue
index 5455a034106..bd69165f0ca 100644
--- a/app/assets/javascripts/import_entities/components/import_status.vue
+++ b/app/assets/javascripts/import_entities/components/import_status.vue
@@ -49,7 +49,7 @@ const STATUS_MAP = {
     text: __('Timeout'),
     variant: 'danger',
   },
-  [STATUSES.CANCELLED]: {
+  [STATUSES.CANCELED]: {
     icon: 'status-stopped',
     text: __('Cancelled'),
     variant: 'neutral',
diff --git a/app/assets/javascripts/import_entities/constants.js b/app/assets/javascripts/import_entities/constants.js
index d0a23f88ee7..48b7febca4b 100644
--- a/app/assets/javascripts/import_entities/constants.js
+++ b/app/assets/javascripts/import_entities/constants.js
@@ -9,7 +9,7 @@ export const STATUSES = {
   STARTED: 'started',
   NONE: 'none',
   SCHEDULING: 'scheduling',
-  CANCELLED: 'cancelled',
+  CANCELED: 'canceled',
   TIMEOUT: 'timeout',
 };
 
diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index d82acfa3f05..63a36f1a79f 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
@@ -37,6 +37,11 @@ export default {
       required: false,
       default: false,
     },
+    cancelable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     optionalStages: {
       type: Array,
       required: false,
@@ -97,7 +102,6 @@ export default {
   },
 
   mounted() {
-    this.fetchNamespaces();
     this.fetchJobs();
 
     if (!this.paginatable) {
@@ -114,7 +118,6 @@ export default {
     ...mapActions([
       'fetchRepos',
       'fetchJobs',
-      'fetchNamespaces',
       'stopJobsPolling',
       'clearJobsEtagPoll',
       'setFilter',
@@ -197,6 +200,7 @@ export default {
               :repo="repo"
               :user-namespace="defaultTargetNamespace"
               :optional-stages="optionalStagesSelection"
+              :cancelable="cancelable"
             />
           </template>
         </tbody>
diff --git a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
index 371373d9f2b..b8faf349375 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
@@ -8,13 +8,15 @@ import {
   GlDropdownItem,
   GlDropdownDivider,
   GlDropdownSectionHeader,
+  GlTooltip,
 } from '@gitlab/ui';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { __ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import ImportGroupDropdown from '../../components/group_dropdown.vue';
 import ImportStatus from '../../components/import_status.vue';
 import { STATUSES } from '../../constants';
-import { isProjectImportable, isIncompatible, getImportStatus } from '../utils';
+import { isProjectImportable, isImporting, isIncompatible, getImportStatus } from '../utils';
 
 export default {
   name: 'ProviderRepoTableRow',
@@ -29,6 +31,7 @@ export default {
     GlIcon,
     GlBadge,
     GlLink,
+    GlTooltip,
   },
   props: {
     repo: {
@@ -43,6 +46,11 @@ export default {
       type: Object,
       required: true,
     },
+    cancelable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   computed: {
@@ -69,6 +77,14 @@ export default {
       return getImportStatus(this.repo);
     },
 
+    isImporting() {
+      return isImporting(this.repo);
+    },
+
+    isCancelable() {
+      return this.cancelable && this.isImporting && this.importStatus !== STATUSES.SCHEDULING;
+    },
+
     stats() {
       return this.repo.importedProject?.stats;
     },
@@ -92,7 +108,7 @@ export default {
   },
 
   methods: {
-    ...mapActions(['fetchImport', 'setImportTarget']),
+    ...mapActions(['fetchImport', 'cancelImport', 'setImportTarget']),
     updateImportTarget(changedValues) {
       this.setImportTarget({
         repoId: this.repo.importSource.id,
@@ -100,6 +116,8 @@ export default {
       });
     },
   },
+
+  helpUrl: helpPagePath('/user/project/import/github.md'),
 };
 </script>
 
@@ -160,6 +178,26 @@ export default {
       <import-status :status="importStatus" :stats="stats" />
     </td>
     <td data-testid="actions" class="gl-vertical-align-top gl-pt-4">
+      <gl-tooltip :target="() => $refs.cancelButton.$el">
+        <div class="gl-text-left">
+          <p class="gl-mb-5 gl-font-weight-bold">{{ s__('ImportProjects|Cancel import') }}</p>
+          {{
+            s__(
+              'ImportProjects|Imported files will be kept. You can import this repository again later.',
+            )
+          }}
+          <gl-link :href="$options.helpUrl" target="_blank">{{ __('Learn more.') }}</gl-link>
+        </div>
+      </gl-tooltip>
+      <gl-button
+        v-show="isCancelable"
+        ref="cancelButton"
+        variant="danger"
+        category="secondary"
+        icon="cancel"
+        :aria-label="__('Cancel')"
+        @click="cancelImport({ repoId: repo.importSource.id })"
+      />
       <gl-button
         v-if="isFinished"
         class="btn btn-default"
diff --git a/app/assets/javascripts/import_entities/import_projects/index.js b/app/assets/javascripts/import_entities/import_projects/index.js
index c7e5a424add..197fb03af2c 100644
--- a/app/assets/javascripts/import_entities/import_projects/index.js
+++ b/app/assets/javascripts/import_entities/import_projects/index.js
@@ -19,6 +19,7 @@ export function initStoreFromElement(element) {
     reposPath,
     jobsPath,
     importPath,
+    cancelPath,
     defaultTargetNamespace,
     paginatable,
   } = element.dataset;
@@ -34,6 +35,7 @@ export function initStoreFromElement(element) {
       reposPath,
       jobsPath,
       importPath,
+      cancelPath,
     },
     hasPagination: parseBoolean(paginatable),
   });
@@ -45,6 +47,7 @@ export function initPropsFromElement(element) {
     filterable: parseBoolean(element.dataset.filterable),
     paginatable: parseBoolean(element.dataset.paginatable),
     optionalStages: JSON.parse(element.dataset.optionalStages),
+    cancelable: Boolean(element.dataset.cancelPath),
   };
 }
 
diff --git a/app/assets/javascripts/import_entities/import_projects/store/actions.js b/app/assets/javascripts/import_entities/import_projects/store/actions.js
index ba51e1aacd3..51ac8c273c7 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/actions.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/actions.js
@@ -159,6 +159,42 @@ const fetchImportFactory = (importPath = isRequired()) => (
     });
 };
 
+export const cancelImportFactory = (cancelImportPath) => ({ state, commit }, { repoId }) => {
+  const existingRepo = state.repositories.find((r) => r.importSource.id === repoId);
+
+  if (!existingRepo?.importedProject) {
+    throw new Error(`Attempting to cancel project which is not started: ${repoId}`);
+  }
+
+  const { id } = existingRepo.importedProject;
+
+  return axios
+    .post(cancelImportPath, {
+      project_id: id,
+    })
+    .then(() => {
+      commit(types.CANCEL_IMPORT_SUCCESS, {
+        repoId,
+      });
+    })
+    .catch((e) => {
+      const serverErrorMessage = e?.response?.data?.errors;
+      const flashMessage = serverErrorMessage
+        ? sprintf(
+            s__('ImportProjects|Cancelling project import failed: %{reason}'),
+            {
+              reason: serverErrorMessage,
+            },
+            false,
+          )
+        : s__('ImportProjects|Cancelling project import failed');
+
+      createAlert({
+        message: flashMessage,
+      });
+    });
+};
+
 export const fetchJobsFactory = (jobsPath = isRequired()) => ({ state, commit, dispatch }) => {
   if (eTagPoll) {
     stopJobsPolling();
@@ -211,5 +247,6 @@ export default ({ endpoints = isRequired() }) => ({
   importAll,
   fetchRepos: fetchReposFactory({ reposPath: endpoints.reposPath }),
   fetchImport: fetchImportFactory(endpoints.importPath),
+  cancelImport: cancelImportFactory(endpoints.cancelPath),
   fetchJobs: fetchJobsFactory(endpoints.jobsPath),
 });
diff --git a/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js b/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js
index 360582de2db..74832a03ac1 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/mutation_types.js
@@ -6,6 +6,8 @@ export const REQUEST_IMPORT = 'REQUEST_IMPORT';
 export const RECEIVE_IMPORT_SUCCESS = 'RECEIVE_IMPORT_SUCCESS';
 export const RECEIVE_IMPORT_ERROR = 'RECEIVE_IMPORT_ERROR';
 
+export const CANCEL_IMPORT_SUCCESS = 'CANCEL_IMPORT_SUCCESS';
+
 export const RECEIVE_JOBS_SUCCESS = 'RECEIVE_JOBS_SUCCESS';
 
 export const SET_FILTER = 'SET_FILTER';
diff --git a/app/assets/javascripts/import_entities/import_projects/store/mutations.js b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
index ae1c9de7411..8b2e0364d7a 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/mutations.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/mutations.js
@@ -56,7 +56,9 @@ export default {
       // https://gitlab.com/gitlab-org/gitlab/-/issues/27370#note_379034091
 
       const newImportedProjects = processLegacyEntries({
-        newRepositories: repositories.importedProjects,
+        newRepositories: repositories.importedProjects.filter(
+          (p) => p.importStatus !== STATUSES.CANCELED,
+        ),
         existingRepositories: state.repositories,
         factory: makeNewImportedProject,
       });
@@ -127,6 +129,11 @@ export default {
     });
   },
 
+  [types.CANCEL_IMPORT_SUCCESS](state, { repoId }) {
+    const existingRepo = state.repositories.find((r) => r.importSource.id === repoId);
+    existingRepo.importedProject.importStatus = STATUSES.CANCELED;
+  },
+
   [types.SET_IMPORT_TARGET](state, { repoId, importTarget }) {
     const existingRepo = state.repositories.find((r) => r.importSource.id === repoId);
 
diff --git a/app/assets/javascripts/import_entities/import_projects/utils.js b/app/assets/javascripts/import_entities/import_projects/utils.js
index 38bd529321a..c4c9e544c1e 100644
--- a/app/assets/javascripts/import_entities/import_projects/utils.js
+++ b/app/assets/javascripts/import_entities/import_projects/utils.js
@@ -9,7 +9,10 @@ export function getImportStatus(project) {
 }
 
 export function isProjectImportable(project) {
-  return !isIncompatible(project) && getImportStatus(project) === STATUSES.NONE;
+  return (
+    !isIncompatible(project) &&
+    [STATUSES.NONE, STATUSES.CANCELED].includes(getImportStatus(project))
+  );
 }
 
 export function isImporting(repo) {