Improve error state reporting

- make it full width
- properly report it with red border

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

@@ -37,11 +37,17 @@ export default {
         this.group.progress?.message || getInvalidNameValidationMessage(this.group.importTarget)
       );
     },
+    validNameState() {
+      // bootstrap-vue requires null for "indifferent" state, if we return true
+      // this will highlight field in green like "passed validation"
+      return this.group.flags.isInvalid && this.group.flags.isAvailableForImport ? false : null;
+    },
   },
 };
 </script>
 
 <template>
+  <div>
     <div class="gl-display-flex gl-align-items-stretch">
       <import-group-dropdown
         #default="{ namespaces }"
@@ -84,23 +90,26 @@ export default {
         <gl-form-input
           class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
           :class="{
-          '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,
+            'gl-inset-border-1-gray-200!':
+              group.flags.isAvailableForImport && !group.flags.isInvalid,
+            'gl-inset-border-1-gray-100!':
+              !group.flags.isAvailableForImport && !group.flags.isInvalid,
           }"
           debounce="500"
           :disabled="!group.flags.isAvailableForImport"
           :value="group.importTarget.newName"
           :aria-label="__('New name')"
+          :state="validNameState"
           @input="$emit('update-new-name', $event)"
         />
-      <p
+      </div>
+    </div>
+    <div
       v-if="group.flags.isAvailableForImport && (group.flags.isInvalid || validationMessage)"
       class="gl-text-red-500 gl-m-0 gl-mt-2"
       role="alert"
     >
       {{ validationMessage }}
-      </p>
     </div>
   </div>
 </template>