From ef90f0ff9e9f500c00de559c0fb829553764d845 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Wed, 10 Sep 2025 14:37:35 +0200
Subject: [PATCH 1/2] Replace input field with project dropdown selector

---
 .../ai_catalog_item_consumer_modal.vue        | 34 +++++++++----------
 .../ai_catalog_item_consumer_modal_spec.js    | 33 +++++++++++++-----
 locale/gitlab.pot                             |  3 --
 3 files changed, 42 insertions(+), 28 deletions(-)

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 360a340adfb100..93e2bb63ee8019 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
@@ -1,17 +1,19 @@
 <script>
 import { uniqueId } from 'lodash';
-import { GlForm, GlFormGroup, GlFormInput, GlModal, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlForm, GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { AI_CATALOG_ITEM_LABELS } from '../constants';
+import FormProjectDropdown from './form_project_dropdown.vue';
 
 const formId = uniqueId('ai-catalog-item-consumer-form-');
 
 export default {
   name: 'AiCatalogItemConsumerModal',
   components: {
+    FormProjectDropdown,
+    GlAlert,
     GlForm,
     GlFormGroup,
-    GlFormInput,
     GlModal,
     GlSprintf,
   },
@@ -24,7 +26,8 @@ export default {
   data() {
     return {
       isOpen: true,
-      targetId: this.item.project?.id,
+      targetId: null,
+      error: null,
     };
   },
   computed: {
@@ -46,21 +49,14 @@ export default {
     },
   },
   methods: {
+    onError(error) {
+      this.error = error;
+    },
     handleSubmit() {
-      // TODO: This is a tmp solution until we're using
-      // a project dropdown select instead of an
-      // input field.
-      const isProjectSelected = this.targetId.toLowerCase().includes('project');
-
-      if (!isProjectSelected) {
-        // eslint-disable-next-line
-        console.error(
-          // eslint-disable-next-line
-          'Invalid State. Target ID must contain "project"',
-        );
+      if (this.targetId === null) {
+        this.onError(s__('AICatalog|Project is required.'));
         return;
       }
-
       this.$emit('submit', { projectId: this.targetId });
     },
   },
@@ -90,6 +86,10 @@ export default {
     @primary.prevent
     @hidden="$emit('hide')"
   >
+    <gl-alert v-if="error" variant="danger" class="gl-mb-5" @dismiss="error = null">
+      {{ error }}
+    </gl-alert>
+
     <dl>
       <dt class="gl-mb-2 gl-font-bold">
         <gl-sprintf :message="s__('AICatalog|Selected %{itemType}')">
@@ -101,11 +101,11 @@ export default {
 
     <gl-form :id="formId" @submit.prevent="handleSubmit">
       <gl-form-group
-        :label="s__('AICatalog|Project ID')"
+        :label="s__('AICatalog|Project')"
         :label-description="projectLabelDescription"
         label-for="target-id"
       >
-        <gl-form-input id="target-id" v-model="targetId" required data-testid="target-id" />
+        <form-project-dropdown id="target-id" v-model="targetId" @error="onError" />
       </gl-form-group>
     </gl-form>
   </gl-modal>
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
index 84725ab70b219f..e1c3f0bffc3c97 100644
--- a/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
@@ -1,7 +1,9 @@
+import { nextTick } from 'vue';
 import { noop } from 'lodash';
-import { GlForm, GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlForm, GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AiCatalogItemConsumerModal from 'ee/ai/catalog/components/ai_catalog_item_consumer_modal.vue';
+import FormProjectDropdown from 'ee/ai/catalog/components/form_project_dropdown.vue';
 import { mockBaseAgent } from '../mock_data';
 
 describe('AiCatalogItemConsumerModal', () => {
@@ -10,7 +12,8 @@ describe('AiCatalogItemConsumerModal', () => {
   const findModal = () => wrapper.findComponent(GlModal);
   const findForm = () => wrapper.findComponent(GlForm);
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
-  const findTargetIdInput = () => wrapper.findByTestId('target-id');
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findProjectDropdown = () => wrapper.findComponent(FormProjectDropdown);
 
   const createWrapper = () => {
     wrapper = shallowMountExtended(AiCatalogItemConsumerModal, {
@@ -39,20 +42,34 @@ describe('AiCatalogItemConsumerModal', () => {
         'Select a project to which you want to add this agent.',
       );
     });
-  });
 
-  describe('when submitting the form', () => {
-    beforeEach(() => {
-      findTargetIdInput().vm.$emit('input', 'gid://gitlab/Project/1000000');
+    it('renders alert when there was a problem fetching the projects', async () => {
+      const error = 'Failed to load projects.';
+
+      await findProjectDropdown().vm.$emit('error', error);
+
+      expect(findAlert().text()).toBe(error);
     });
+  });
 
-    it('emits the submit event', () => {
+  describe('when submitting the form', () => {
+    it('emits the submit event', async () => {
+      const projectId = 'gid://gitlab/Project/1000000';
+      await findProjectDropdown().vm.$emit('input', projectId);
       findForm().vm.$emit('submit', { preventDefault: noop });
 
       expect(wrapper.emitted('submit')[0][0]).toStrictEqual({
-        projectId: 'gid://gitlab/Project/1000000',
+        projectId,
       });
     });
+
+    it('renders alert when no project was selected before submitting', async () => {
+      findForm().vm.$emit('submit', { preventDefault: noop });
+      await nextTick();
+
+      expect(findAlert().text()).toBe('Project is required.');
+      expect(wrapper.emitted('submit')).toBeUndefined();
+    });
   });
 
   describe('when the modal emits the hidden event', () => {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index acebe4296602a4..098cf04aea6e62 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2647,9 +2647,6 @@ msgstr ""
 msgid "AICatalog|Project"
 msgstr ""
 
-msgid "AICatalog|Project ID"
-msgstr ""
-
 msgid "AICatalog|Project is required."
 msgstr ""
 
-- 
GitLab


From 3501b8ec26b7f5b006b18ae02a6388d15352689d Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Wed, 10 Sep 2025 15:56:05 +0200
Subject: [PATCH 2/2] Preselect original agent, if exists

---
 .../ai_catalog_item_consumer_modal.vue        |  2 +-
 .../ai_catalog_item_consumer_modal_spec.js    | 31 +++++++++++++------
 2 files changed, 22 insertions(+), 11 deletions(-)

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 93e2bb63ee8019..f8bb244c78ff7c 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: null,
+      targetId: this.item.project?.id || null,
       error: null,
     };
   },
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
index e1c3f0bffc3c97..2d69ca062bb5c1 100644
--- a/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
@@ -4,10 +4,11 @@ import { GlAlert, GlForm, GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AiCatalogItemConsumerModal from 'ee/ai/catalog/components/ai_catalog_item_consumer_modal.vue';
 import FormProjectDropdown from 'ee/ai/catalog/components/form_project_dropdown.vue';
-import { mockBaseAgent } from '../mock_data';
+import { mockAgents } from '../mock_data';
 
 describe('AiCatalogItemConsumerModal', () => {
   let wrapper;
+  const agent = mockAgents[0];
 
   const findModal = () => wrapper.findComponent(GlModal);
   const findForm = () => wrapper.findComponent(GlForm);
@@ -15,10 +16,10 @@ describe('AiCatalogItemConsumerModal', () => {
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findProjectDropdown = () => wrapper.findComponent(FormProjectDropdown);
 
-  const createWrapper = () => {
+  const createWrapper = ({ item = agent } = {}) => {
     wrapper = shallowMountExtended(AiCatalogItemConsumerModal, {
       propsData: {
-        item: mockBaseAgent,
+        item,
       },
       stubs: {
         GlSprintf,
@@ -34,15 +35,19 @@ describe('AiCatalogItemConsumerModal', () => {
     it('renders modal and item name', () => {
       expect(findModal().props('title')).toBe('Add this agent to a project');
       expect(findModal().find('dt').text()).toBe('Selected agent');
-      expect(findModal().find('dd').text()).toBe(mockBaseAgent.name);
+      expect(findModal().find('dd').text()).toBe(agent.name);
     });
 
-    it('renders project id input', () => {
+    it('renders the label description of the project field', () => {
       expect(findFormGroup().props('labelDescription')).toBe(
         'Select a project to which you want to add this agent.',
       );
     });
 
+    it('preselects the project id of the item', () => {
+      expect(findProjectDropdown().props('value')).toBe(agent.project.id);
+    });
+
     it('renders alert when there was a problem fetching the projects', async () => {
       const error = 'Failed to load projects.';
 
@@ -63,12 +68,18 @@ describe('AiCatalogItemConsumerModal', () => {
       });
     });
 
-    it('renders alert when no project was selected before submitting', async () => {
-      findForm().vm.$emit('submit', { preventDefault: noop });
-      await nextTick();
+    describe('when there is no project selected', () => {
+      beforeEach(() => {
+        createWrapper({ item: { ...agent, project: null } });
+      });
+
+      it('renders alert', async () => {
+        findForm().vm.$emit('submit', { preventDefault: noop });
+        await nextTick();
 
-      expect(findAlert().text()).toBe('Project is required.');
-      expect(wrapper.emitted('submit')).toBeUndefined();
+        expect(findAlert().text()).toBe('Project is required.');
+        expect(wrapper.emitted('submit')).toBeUndefined();
+      });
     });
   });
 
-- 
GitLab