1 files changed, 41 insertions, 11 deletions

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 458e0fb1cb1..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: {
@@ -39,14 +42,15 @@ export default {
       type: String,
       required: true,
     },
-    availableNamespaces: {
-      type: Array,
-      required: true,
-    },
     optionalStages: {
       type: Object,
       required: true,
     },
+    cancelable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   computed: {
@@ -73,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;
     },
@@ -96,7 +108,7 @@ export default {
   },
 
   methods: {
-    ...mapActions(['fetchImport', 'setImportTarget']),
+    ...mapActions(['fetchImport', 'cancelImport', 'setImportTarget']),
     updateImportTarget(changedValues) {
       this.setImportTarget({
         repoId: this.repo.importSource.id,
@@ -104,6 +116,8 @@ export default {
       });
     },
   },
+
+  helpUrl: helpPagePath('/user/project/import/github.md'),
 };
 </script>
 
@@ -127,11 +141,7 @@ export default {
       <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template>
       <template v-else-if="isImportNotStarted">
         <div class="import-entities-target-select gl-display-flex gl-align-items-stretch gl-w-full">
-          <import-group-dropdown
-            #default="{ namespaces }"
-            :text="importTarget.targetNamespace"
-            :namespaces="availableNamespaces"
-          >
+          <import-group-dropdown #default="{ namespaces }" :text="importTarget.targetNamespace">
             <template v-if="namespaces.length">
               <gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
               <gl-dropdown-item
@@ -168,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"