Address reviewer suggestions

app/assets/javascripts/import_entities/components/group_dropdown.vue

@@ -28,7 +28,7 @@ export default {
 <template>
   <gl-dropdown
     toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
-    class="import-entities-namespace-dropdown gl-h-7 gl-flex-fill-1"
+    class="gl-h-7 gl-flex-fill-1"
     data-qa-selector="target_namespace_selector_dropdown"
     v-bind="$attrs"
   >

app/assets/javascripts/import_entities/import_groups/components/import_table.vue

@@ -21,6 +21,7 @@ import importGroupsMutation from '../graphql/mutations/import_groups.mutation.gr
 import setImportTargetMutation from '../graphql/mutations/set_import_target.mutation.graphql';
 import availableNamespacesQuery from '../graphql/queries/available_namespaces.query.graphql';
 import bulkImportSourceGroupsQuery from '../graphql/queries/bulk_import_source_groups.query.graphql';
+import { isInvalid } from '../utils';
 import ImportTargetCell from './import_target_cell.vue';
 
 const PAGE_SIZES = [20, 50, 100];
@@ -83,7 +84,7 @@ export default {
     availableNamespaces: availableNamespacesQuery,
   },
 
-  tableFields: [
+  fields: [
     {
       key: 'web_url',
       label: s__('BulkImport|From source group'),
@@ -179,20 +180,12 @@ export default {
       return {};
     },
 
-    invalidNameValidationMessage(group) {
-      return group.validation_errors.find(({ field }) => field === 'new_name')?.message;
-    },
-
-    isNameValid(group) {
-      return this.groupPathRegex.test(group.import_target.new_name);
-    },
-
     isAlreadyImported(group) {
       return group.progress.status !== STATUSES.NONE;
     },
 
     isInvalid(group) {
-      return Boolean(!this.isNameValid(group) || this.invalidNameValidationMessage(group));
+      return isInvalid(group, this.groupPathRegex);
     },
 
     groupsCount(count) {
@@ -311,7 +304,7 @@ export default {
           tbody-tr-class="gl-border-gray-200 gl-border-0 gl-border-b-1 gl-border-solid"
           :tbody-tr-attr="qaRowAttributes"
           :items="bulkImportSourceGroups.nodes"
-          :fields="$options.tableFields"
+          :fields="$options.fields"
         >
           <template #cell(web_url)="{ value: web_url, item: { full_path } }">
             <gl-link

app/assets/javascripts/import_entities/import_groups/components/import_target_cell.vue

@@ -10,6 +10,7 @@ import { joinPaths } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import ImportGroupDropdown from '../../components/group_dropdown.vue';
 import { STATUSES } from '../../constants';
+import { isInvalid, getInvalidNameValidationMessage, isNameValid } from '../utils';
 
 export default {
   components: {
@@ -49,15 +50,15 @@ export default {
     },
 
     invalidNameValidationMessage() {
-      return this.group.validation_errors.find(({ field }) => field === 'new_name')?.message;
+      return getInvalidNameValidationMessage(this.group);
     },
 
     isInvalid() {
-      return Boolean(!this.isNameValid || this.invalidNameValidationMessage);
+      return isInvalid(this.group, this.groupPathRegex);
     },
 
     isNameValid() {
-      return this.groupPathRegex.test(this.importTarget.new_name);
+      return isNameValid(this.group, this.groupPathRegex);
     },
 
     isAlreadyImported() {
@@ -94,7 +95,7 @@ export default {
 
   <div
     v-else
-    class="import-entities-target-select gl-display-flex gl-align-items-stretch"
+    class="gl-display-flex gl-align-items-stretch"
     :class="{
       disabled: isAlreadyImported,
     }"
@@ -105,7 +106,7 @@ export default {
       :disabled="isAlreadyImported"
       :namespaces="availableNamespaceNames"
       toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
-      class="import-entities-namespace-dropdown gl-h-7 gl-flex-grow-1"
+      class="gl-h-7 gl-flex-grow-1"
       data-qa-selector="target_namespace_selector_dropdown"
     >
       <gl-dropdown-item @click="$emit('update-target-namespace', '')">{{
@@ -128,14 +129,22 @@ export default {
       </template>
     </import-group-dropdown>
     <div
-      class="import-entities-target-select-separator 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"
+      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': isAlreadyImported,
+        'gl-border-gray-200': !isAlreadyImported,
+      }"
     >
       /
     </div>
     <div class="gl-flex-grow-1">
       <gl-form-input
         class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
-        :class="{ 'is-invalid': isInvalid && !isAlreadyImported }"
+        :class="{
+          'gl-inset-border-1-gray-200!': !isAlreadyImported,
+          'gl-inset-border-1-gray-100!': isAlreadyImported,
+          'is-invalid': isInvalid && !isAlreadyImported,
+        }"
         :disabled="isAlreadyImported"
         :value="importTarget.new_name"
         @input="$emit('update-new-name', $event)"

app/assets/javascripts/import_entities/import_groups/constants.js

@@ -3,3 +3,5 @@ import { s__ } from '~/locale';
 export const i18n = {
   NAME_ALREADY_EXISTS: s__('BulkImport|Name already exists.'),
 };
+
+export const NEW_NAME_FIELD = 'new_name';

app/assets/javascripts/import_entities/import_groups/graphql/client_factory.js

@@ -4,7 +4,7 @@ import axios from '~/lib/utils/axios_utils';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { STATUSES } from '../../constants';
-import { i18n } from '../constants';
+import { i18n, NEW_NAME_FIELD } from '../constants';
 import bulkImportSourceGroupItemFragment from './fragments/bulk_import_source_group_item.fragment.graphql';
 import addValidationErrorMutation from './mutations/add_validation_error.mutation.graphql';
 import removeValidationErrorMutation from './mutations/remove_validation_error.mutation.graphql';
@@ -61,7 +61,7 @@ async function checkImportTargetIsValid({ client, newName, targetNamespace, sour
   });
 
   const variables = {
-    field: 'new_name',
+    field: NEW_NAME_FIELD,
     sourceGroupId,
   };
 

app/assets/javascripts/import_entities/import_groups/utils.js

+import { NEW_NAME_FIELD } from './constants';
+
+export function isNameValid(group, validationRegex) {
+  return validationRegex.test(group.import_target[NEW_NAME_FIELD]);
+}
+
+export function getInvalidNameValidationMessage(group) {
+  return group.validation_errors.find(({ field }) => field === NEW_NAME_FIELD)?.message;
+}
+
+export function isInvalid(group, validationRegex) {
+  return Boolean(!isNameValid(group, validationRegex) || getInvalidNameValidationMessage(group));
+}

app/assets/stylesheets/page_bundles/import.scss

@@ -22,16 +22,11 @@
 
 .import-entities-target-select {
   &.disabled {
-    .import-entities-target-select-separator,
-    .select2-container.select2-container-disabled .select2-choice {
+    .import-entities-target-select-separator {
       color: var(--gray-400, $gray-400);
       border-color: var(--gray-100, $gray-100);
       background-color: var(--gray-10, $gray-10);
     }
-
-    .select2-container.select2-container-disabled .select2-choice .select2-arrow {
-      background-color: var(--gray-10, $gray-10);
-    }
   }
 
   .import-entities-target-select-separator {
@@ -39,20 +34,6 @@
     background-color: var(--gray-10, $gray-10);
   }
 
-  .select2-container {
-    > .select2-choice {
-      .select2-arrow {
-        background-color: var(--white, $white);
-      }
-
-      border-color: var(--gray-200, $gray-200);
-      color: var(--gray-900, $gray-900) !important;
-      background-color: var(--white, $white) !important;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
   .gl-form-input {
     box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
   }