1 files changed, 54 insertions, 51 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 63524d61146..d8cffc6a7d5 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,8 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { GlIcon } from '@gitlab/ui';
 import Select2Select from '~/vue_shared/components/select2_select.vue';
 import { __ } from '~/locale';
-import eventHub from '../event_hub';
-import { STATUSES } from '../constants';
 import ImportStatus from './import_status.vue';
 
 export default {
@@ -11,25 +10,26 @@ export default {
   components: {
     Select2Select,
     ImportStatus,
+    GlIcon,
   },
   props: {
     repo: {
       type: Object,
       required: true,
     },
-  },
-
-  data() {
-    return {
-      targetNamespace: this.$store.state.defaultTargetNamespace,
-      newName: this.repo.sanitizedName,
-    };
+    availableNamespaces: {
+      type: Array,
+      required: true,
+    },
   },
 
   computed: {
-    ...mapState(['namespaces', 'reposBeingImported', 'ciCdOnly']),
+    ...mapState(['ciCdOnly']),
+    ...mapGetters(['getImportTarget']),
 
-    ...mapGetters(['namespaceSelectOptions']),
+    importTarget() {
+      return this.getImportTarget(this.repo.importSource.id);
+    },
 
     importButtonText() {
       return this.ciCdOnly ? __('Connect') : __('Import');
@@ -37,37 +37,36 @@ export default {
 
     select2Options() {
       return {
-        data: this.namespaceSelectOptions,
-        containerCssClass:
-          'import-namespace-select js-namespace-select qa-project-namespace-select w-auto',
+        data: this.availableNamespaces,
+        containerCssClass: 'import-namespace-select qa-project-namespace-select w-auto',
       };
     },
 
-    isLoadingImport() {
-      return this.reposBeingImported.includes(this.repo.id);
+    targetNamespaceSelect: {
+      get() {
+        return this.importTarget.targetNamespace;
+      },
+      set(value) {
+        this.updateImportTarget({ targetNamespace: value });
+      },
     },
 
-    status() {
-      return this.isLoadingImport ? STATUSES.SCHEDULING : STATUSES.NONE;
+    newNameInput: {
+      get() {
+        return this.importTarget.newName;
+      },
+      set(value) {
+        this.updateImportTarget({ newName: value });
+      },
     },
   },
 
-  created() {
-    eventHub.$on('importAll', this.importRepo);
-  },
-
-  beforeDestroy() {
-    eventHub.$off('importAll', this.importRepo);
-  },
-
   methods: {
-    ...mapActions(['fetchImport']),
-
-    importRepo() {
-      return this.fetchImport({
-        newName: this.newName,
-        targetNamespace: this.targetNamespace,
-        repo: this.repo,
+    ...mapActions(['fetchImport', 'setImportTarget']),
+    updateImportTarget(changedValues) {
+      this.setImportTarget({
+        repoId: this.repo.importSource.id,
+        importTarget: { ...this.importTarget, ...changedValues },
       });
     },
   },
@@ -75,35 +74,39 @@ export default {
 </script>
 
 <template>
-  <tr class="qa-project-import-row js-provider-repo import-row">
+  <tr class="qa-project-import-row import-row">
     <td>
       <a
-        :href="repo.providerLink"
+        :href="repo.importSource.providerLink"
         rel="noreferrer noopener"
         target="_blank"
-        class="js-provider-link"
-      >
-        {{ repo.fullName }}
+        data-testid="providerLink"
+        >{{ repo.importSource.fullName }}
+        <gl-icon v-if="repo.importSource.providerLink" name="external-link" />
       </a>
     </td>
     <td class="d-flex flex-wrap flex-lg-nowrap">
-      <select2-select v-model="targetNamespace" :options="select2Options" />
-      <span class="px-2 import-slash-divider d-flex justify-content-center align-items-center"
-        >/</span
-      >
-      <input
-        v-model="newName"
-        type="text"
-        class="form-control import-project-name-input js-new-name qa-project-path-field"
-      />
+      <template v-if="repo.target">{{ repo.target }}</template>
+      <template v-else>
+        <select2-select v-model="targetNamespaceSelect" :options="select2Options" />
+        <span class="px-2 import-slash-divider d-flex justify-content-center align-items-center"
+          >/</span
+        >
+        <input
+          v-model="newNameInput"
+          type="text"
+          class="form-control import-project-name-input qa-project-path-field"
+        />
+      </template>
+    </td>
+    <td>
+      <import-status :status="repo.importStatus" />
     </td>
-    <td><import-status :status="status" /></td>
     <td>
       <button
-        v-if="!isLoadingImport"
         type="button"
-        class="qa-import-button js-import-button btn btn-default"
-        @click="importRepo"
+        class="qa-import-button btn btn-default"
+        @click="fetchImport(repo.importSource.id)"
       >
         {{ importButtonText }}
       </button>