Follow-up from "Replace input field with project dropdown selector"

The following discussion from !204525 (merged) should be addressed:

• @justin_ho started a discussion: (+2 comments)

  Thought (non-blocking): I don't mind the alert used as a validation but do you want to consider using the GlFormGroup state instead?

  diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_consumer_modal.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_consumer_modal.vue
  index f8bb244c78ff..af1ef8b1f9bd 100644
  --- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_consumer_modal.vue
  +++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_consumer_modal.vue
  @@ -26,7 +26,7 @@ export default {
     data() {
       return {
         isOpen: true,
  -      targetId: this.item.project?.id || null,
  +      targetId: null,
         error: null,
       };
     },
  @@ -47,6 +47,9 @@ export default {
           itemType: this.itemTypeLabel,
         });
       },
  +    isProjectValid() {
  +      return Boolean(this.targetId);
  +    },
     },
     methods: {
       onError(error) {
  @@ -104,8 +107,15 @@ export default {
           :label="s__('AICatalog|Project')"
           :label-description="projectLabelDescription"
           label-for="target-id"
  +        :state="isProjectValid"
  +        :invalid-feedback="__('Project is required.')"
         >
  -        <form-project-dropdown id="target-id" v-model="targetId" @error="onError" />
  +        <form-project-dropdown
  +          id="target-id"
  +          v-model="targetId"
  +          :is-valid="isProjectValid"
  +          @error="onError"
  +        />
         </gl-form-group>
       </gl-form>
     </gl-modal>
  diff --git a/ee/app/assets/javascripts/ai/catalog/components/form_project_dropdown.vue b/ee/app/assets/javascripts/ai/catalog/components/form_project_dropdown.vue
  index 3a4bdb7836bb..2db47205e187 100644
  --- a/ee/app/assets/javascripts/ai/catalog/components/form_project_dropdown.vue
  +++ b/ee/app/assets/javascripts/ai/catalog/components/form_project_dropdown.vue
  @@ -23,6 +23,11 @@ export default {
         required: false,
         default: null,
       },
  +    isValid: {
  +      type: Boolean,
  +      required: false,
  +      default: true,
  +    },
       value: {
         type: String,
         required: false,
  @@ -147,6 +152,7 @@ export default {
       :items="projectList"
       :toggle-id="id"
       :toggle-text="projectDropdownText"
  +    :toggle-class="{ 'gl-shadow-inner-1-red-500': !isValid }"
       :header-text="__('Select a project')"
       :loading="isLoadingInitial"
       searchable

  (In the above diff, the isValid is totally optional but just included it since it's an interesting addition)

  We could also consider using GlFormFields which would improve this with validating only after submit but I guess that's a bigger improvement.

  Also not a blocker since right now we always default to the existing project which is currently always available.