1 files changed, 25 insertions, 59 deletions

diff --git a/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue b/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
index daced740c94..ca9ae9447d0 100644
--- a/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
+++ b/app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue
@@ -7,12 +7,7 @@ import {
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ImportGroupDropdown from '../../components/group_dropdown.vue';
-import {
-  isInvalid,
-  getInvalidNameValidationMessage,
-  isNameValid,
-  isAvailableForImport,
-} from '../utils';
+import { getInvalidNameValidationMessage } from '../utils';
 
 export default {
   components: {
@@ -31,44 +26,15 @@ export default {
       type: Array,
       required: true,
     },
-    groupPathRegex: {
-      type: RegExp,
-      required: true,
-    },
-    groupUrlErrorMessage: {
-      type: String,
-      required: true,
-    },
   },
 
   computed: {
-    availableNamespaceNames() {
-      return this.availableNamespaces.map((ns) => ns.full_path);
-    },
-
-    importTarget() {
-      return this.group.import_target;
+    fullPath() {
+      return this.group.importTarget.targetNamespace.fullPath || s__('BulkImport|No parent');
     },
-
     invalidNameValidationMessage() {
-      return getInvalidNameValidationMessage(this.group);
+      return getInvalidNameValidationMessage(this.group.importTarget);
     },
-
-    isInvalid() {
-      return isInvalid(this.group, this.groupPathRegex);
-    },
-
-    isNameValid() {
-      return isNameValid(this.group, this.groupPathRegex);
-    },
-
-    isAvailableForImport() {
-      return isAvailableForImport(this.group);
-    },
-  },
-
-  i18n: {
-    NAME_ALREADY_EXISTS: s__('BulkImport|Name already exists.'),
   },
 };
 </script>
@@ -77,14 +43,14 @@ export default {
   <div class="gl-display-flex gl-align-items-stretch">
     <import-group-dropdown
       #default="{ namespaces }"
-      :text="importTarget.target_namespace"
-      :disabled="!isAvailableForImport"
-      :namespaces="availableNamespaceNames"
+      :text="fullPath"
+      :disabled="!group.flags.isAvailableForImport"
+      :namespaces="availableNamespaces"
       toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
       class="gl-h-7 gl-flex-grow-1"
       data-qa-selector="target_namespace_selector_dropdown"
     >
-      <gl-dropdown-item @click="$emit('update-target-namespace', '')">{{
+      <gl-dropdown-item @click="$emit('update-target-namespace', { fullPath: '', id: null })">{{
         s__('BulkImport|No parent')
       }}</gl-dropdown-item>
       <template v-if="namespaces.length">
@@ -94,20 +60,20 @@ export default {
         </gl-dropdown-section-header>
         <gl-dropdown-item
           v-for="ns in namespaces"
-          :key="ns"
+          :key="ns.fullPath"
           data-qa-selector="target_group_dropdown_item"
-          :data-qa-group-name="ns"
+          :data-qa-group-name="ns.fullPath"
           @click="$emit('update-target-namespace', ns)"
         >
-          {{ ns }}
+          {{ ns.fullPath }}
         </gl-dropdown-item>
       </template>
     </import-group-dropdown>
     <div
       class="gl-h-7 gl-px-3 gl-display-flex gl-align-items-center gl-border-solid gl-border-0 gl-border-t-1 gl-border-b-1 gl-bg-gray-10"
       :class="{
-        'gl-text-gray-400 gl-border-gray-100': !isAvailableForImport,
-        'gl-border-gray-200': isAvailableForImport,
+        'gl-text-gray-400 gl-border-gray-100': !group.flags.isAvailableForImport,
+        'gl-border-gray-200': group.flags.isAvailableForImport,
       }"
     >
       /
@@ -116,21 +82,21 @@ export default {
       <gl-form-input
         class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
         :class="{
-          'gl-inset-border-1-gray-200!': isAvailableForImport,
-          'gl-inset-border-1-gray-100!': !isAvailableForImport,
-          'is-invalid': isInvalid && isAvailableForImport,
+          'gl-inset-border-1-gray-200!': group.flags.isAvailableForImport,
+          'gl-inset-border-1-gray-100!': !group.flags.isAvailableForImport,
+          'is-invalid': group.flags.isInvalid && group.flags.isAvailableForImport,
         }"
-        :disabled="!isAvailableForImport"
-        :value="importTarget.new_name"
+        debounce="500"
+        :disabled="!group.flags.isAvailableForImport"
+        :value="group.importTarget.newName"
+        :aria-label="__('New name')"
         @input="$emit('update-new-name', $event)"
       />
-      <p v-if="isInvalid" class="gl-text-red-500 gl-m-0 gl-mt-2">
-        <template v-if="!isNameValid">
-          {{ groupUrlErrorMessage }}
-        </template>
-        <template v-else-if="invalidNameValidationMessage">
-          {{ invalidNameValidationMessage }}
-        </template>
+      <p
+        v-if="group.flags.isAvailableForImport && group.flags.isInvalid"
+        class="gl-text-red-500 gl-m-0 gl-mt-2"
+      >
+        {{ invalidNameValidationMessage }}
       </p>
     </div>
   </div>