1 files changed, 42 insertions, 6 deletions

diff --git a/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue
index d8cffc6a7d5..18971313dfe 100644
--- a/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue
+++ b/app/assets/javascripts/import_projects/components/provider_repo_table_row.vue
@@ -1,9 +1,11 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlBadge } from '@gitlab/ui';
 import Select2Select from '~/vue_shared/components/select2_select.vue';
 import { __ } from '~/locale';
 import ImportStatus from './import_status.vue';
+import { STATUSES } from '../constants';
+import { isProjectImportable, isIncompatible, getImportStatus } from '../utils';
 
 export default {
   name: 'ProviderRepoTableRow',
@@ -11,6 +13,7 @@ export default {
     Select2Select,
     ImportStatus,
     GlIcon,
+    GlBadge,
   },
   props: {
     repo: {
@@ -27,6 +30,26 @@ export default {
     ...mapState(['ciCdOnly']),
     ...mapGetters(['getImportTarget']),
 
+    displayFullPath() {
+      return this.repo.importedProject.fullPath.replace(/^\//, '');
+    },
+
+    isFinished() {
+      return this.repo.importedProject?.importStatus === STATUSES.FINISHED;
+    },
+
+    isImportNotStarted() {
+      return isProjectImportable(this.repo);
+    },
+
+    isIncompatible() {
+      return isIncompatible(this.repo);
+    },
+
+    importStatus() {
+      return getImportStatus(this.repo);
+    },
+
     importTarget() {
       return this.getImportTarget(this.repo.importSource.id);
     },
@@ -85,9 +108,9 @@ export default {
         <gl-icon v-if="repo.importSource.providerLink" name="external-link" />
       </a>
     </td>
-    <td class="d-flex flex-wrap flex-lg-nowrap">
-      <template v-if="repo.target">{{ repo.target }}</template>
-      <template v-else>
+    <td class="d-flex flex-wrap flex-lg-nowrap" data-testid="fullPath">
+      <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template>
+      <template v-else-if="isImportNotStarted">
         <select2-select v-model="targetNamespaceSelect" :options="select2Options" />
         <span class="px-2 import-slash-divider d-flex justify-content-center align-items-center"
           >/</span
@@ -98,18 +121,31 @@ export default {
           class="form-control import-project-name-input qa-project-path-field"
         />
       </template>
+      <template v-else-if="repo.importedProject">{{ displayFullPath }}</template>
     </td>
     <td>
-      <import-status :status="repo.importStatus" />
+      <import-status :status="importStatus" />
     </td>
-    <td>
+    <td data-testid="actions">
+      <a
+        v-if="isFinished"
+        class="btn btn-default"
+        :href="repo.importedProject.fullPath"
+        rel="noreferrer noopener"
+        target="_blank"
+        >{{ __('Go to project') }}
+      </a>
       <button
+        v-if="isImportNotStarted"
         type="button"
         class="qa-import-button btn btn-default"
         @click="fetchImport(repo.importSource.id)"
       >
         {{ importButtonText }}
       </button>
+      <gl-badge v-else-if="isIncompatible" variant="danger">{{
+        __('Incompatible project')
+      }}</gl-badge>
     </td>
   </tr>
 </template>