From 71e6798147002d2e18acd103ee27a7202bf50504 Mon Sep 17 00:00:00 2001
From: Lee Tickett <ltickett@gitlab.com>
Date: Tue, 19 Aug 2025 23:29:38 +0100
Subject: [PATCH 1/3] Connect test agent button to backend GraphQL mutation

---
 .../components/ai_catalog_agent_run_form.vue  |  3 +-
 .../execute_ai_catalog_agent.mutation.graphql |  6 ++++
 .../catalog/pages/ai_catalog_agents_run.vue   | 36 ++++++++++++++++---
 locale/gitlab.pot                             |  8 ++++-
 4 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 ee/app/assets/javascripts/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql

diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_run_form.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_run_form.vue
index a5ec6418d597cf..15597c1fb0900a 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_run_form.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_run_form.vue
@@ -94,8 +94,7 @@ export default {
         icon="play"
         :loading="isSubmitting"
       >
-        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
-        {{ s__('AICatalog|Run') }} (Coming soon)
+        {{ s__('AICatalog|Run') }}
       </gl-button>
     </ai-catalog-form-buttons>
   </gl-form>
diff --git a/ee/app/assets/javascripts/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql b/ee/app/assets/javascripts/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql
new file mode 100644
index 00000000000000..07824ac4b96742
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql
@@ -0,0 +1,6 @@
+mutation createAiCatalogAgent($input: AiCatalogAgentExecuteInput!) {
+  aiCatalogAgentExecute(input: $input) {
+    errors
+    flowConfig
+  }
+}
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
index bf83a576e48e0b..6312b9ee822083 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
@@ -1,13 +1,19 @@
 <script>
 import { s__ } from '~/locale';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import AiCatalogAgentRunForm from '../components/ai_catalog_agent_run_form.vue';
+import executeAiCatalogAgent from '../graphql/mutations/execute_ai_catalog_agent.mutation.graphql';
 
 export default {
   name: 'AiCatalogAgentsRun',
   components: {
     PageHeading,
     AiCatalogAgentRunForm,
+    ClipboardButton,
+    CodeBlockHighlighted,
   },
   props: {
     aiCatalogAgent: {
@@ -18,6 +24,7 @@ export default {
   data() {
     return {
       isSubmitting: false,
+      flowConfig: null,
     };
   },
   computed: {
@@ -27,12 +34,22 @@ export default {
   },
   methods: {
     async onSubmit({ userPrompt }) {
-      this.isSubmitting = true;
-
       try {
-        this.$toast.show(userPrompt);
+        this.isSubmitting = true;
+
+        const { data } = await this.$apollo.mutate({
+          mutation: executeAiCatalogAgent,
+          variables: { input: { agentId: this.aiCatalogAgent.id } },
+        });
+
+        if (data) {
+          this.flowConfig = userPrompt; // To stop ESLint complaining :)
+          this.flowConfig = data.aiCatalogAgentExecute.flowConfig;
+          this.$toast.show(s__('AICatalog|Agent executed successfully.'));
+        }
       } catch (error) {
-        this.$toast.show(s__('AICatalog|Failed to run agent.'));
+        this.$toast.show(s__('AICatalog|Failed to execute agent.'));
+        Sentry.captureException(error);
       } finally {
         this.isSubmitting = false;
       }
@@ -56,5 +73,16 @@ export default {
       :ai-catalog-agent="aiCatalogAgent"
       @submit="onSubmit"
     />
+
+    <div v-if="flowConfig" class="position-relative">
+      <code-block-highlighted class="gl-border gl-mt-4 gl-p-4" :code="flowConfig" language="yaml" />
+
+      <clipboard-button
+        :text="flowConfig"
+        :title="__('Copy flow config')"
+        category="tertiary"
+        class="position-absolute position-top-0 position-right-0 gl-m-3 gl-hidden md:gl-flex"
+      />
+    </div>
   </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 80dc4eeeeb8da1..46c0037135ab04 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2434,6 +2434,9 @@ msgstr ""
 msgid "AICatalog|Agent deleted successfully."
 msgstr ""
 
+msgid "AICatalog|Agent executed successfully."
+msgstr ""
+
 msgid "AICatalog|Agent not found."
 msgstr ""
 
@@ -2515,7 +2518,7 @@ msgstr ""
 msgid "AICatalog|Failed to delete flow. %{error}"
 msgstr ""
 
-msgid "AICatalog|Failed to run agent."
+msgid "AICatalog|Failed to execute agent."
 msgstr ""
 
 msgid "AICatalog|Flow created successfully."
@@ -18971,6 +18974,9 @@ msgstr ""
 msgid "Copy file permalink"
 msgstr ""
 
+msgid "Copy flow config"
+msgstr ""
+
 msgid "Copy issue URL to clipboard"
 msgstr ""
 
-- 
GitLab


From 066f85b734474bd02ddfb49eb3c88abb0a514e9c Mon Sep 17 00:00:00 2001
From: Lee Tickett <ltickett@gitlab.com>
Date: Wed, 20 Aug 2025 15:43:39 +0100
Subject: [PATCH 2/3] Add basic test coverage

---
 .../execute_ai_catalog_agent.mutation.graphql |  2 +-
 .../ai_catalog_agent_run_form_spec.js         |  2 +-
 ee/spec/frontend/ai/catalog/mock_data.js      | 10 ++++
 .../pages/ai_catalog_agents_run_spec.js       | 53 ++++++++++++++++---
 4 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/ee/app/assets/javascripts/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql b/ee/app/assets/javascripts/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql
index 07824ac4b96742..3505aa6e427d36 100644
--- a/ee/app/assets/javascripts/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql
+++ b/ee/app/assets/javascripts/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql
@@ -1,4 +1,4 @@
-mutation createAiCatalogAgent($input: AiCatalogAgentExecuteInput!) {
+mutation executeAiCatalogAgent($input: AiCatalogAgentExecuteInput!) {
   aiCatalogAgentExecute(input: $input) {
     errors
     flowConfig
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_run_form_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_run_form_spec.js
index bde7abba7961f0..d05d70f931f352 100644
--- a/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_run_form_spec.js
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_run_form_spec.js
@@ -34,7 +34,7 @@ describe('AiCatalogAgentRunForm', () => {
 
   it('renders form with submit button', () => {
     expect(findForm().exists()).toBe(true);
-    expect(findSubmitButton().text()).toBe('Run (Coming soon)');
+    expect(findSubmitButton().text()).toBe('Run');
   });
 
   it('renders form fields with correct initial values', () => {
diff --git a/ee/spec/frontend/ai/catalog/mock_data.js b/ee/spec/frontend/ai/catalog/mock_data.js
index 166ec9829934c5..babcf91573841c 100644
--- a/ee/spec/frontend/ai/catalog/mock_data.js
+++ b/ee/spec/frontend/ai/catalog/mock_data.js
@@ -181,6 +181,16 @@ export const mockUpdateAiCatalogAgentErrorMutation = {
   },
 };
 
+export const mockExecuteAgentResponse = {
+  data: {
+    aiCatalogAgentExecute: {
+      errors: [],
+      flowConfig: '---\nversion: experimental\nenvironment: remote...',
+      __typename: 'AiCatalogAgentExecutePayload',
+    },
+  },
+};
+
 /* FLOWS */
 
 const mockFlowVersion = {
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
index b45fc37bf7582d..d69b92e6b5b203 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
@@ -1,8 +1,15 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import AiCatalogAgentsRun from 'ee/ai/catalog/pages/ai_catalog_agents_run.vue';
 import AiCatalogAgentRunForm from 'ee/ai/catalog/components/ai_catalog_agent_run_form.vue';
-import { mockAgent } from '../mock_data';
+import executeAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { mockAgent, mockExecuteAgentResponse } from '../mock_data';
+
+Vue.use(VueApollo);
 
 describe('AiCatalogAgentsRun', () => {
   let wrapper;
@@ -14,8 +21,18 @@ describe('AiCatalogAgentsRun', () => {
     show: jest.fn(),
   };
 
-  const createComponent = () => {
+  const executeAiCatalogAgentSuccessHandler = jest.fn().mockResolvedValue(mockExecuteAgentResponse);
+  const executeAiCatalogAgentErrorHandler = jest.fn().mockRejectedValue();
+
+  const createComponent = ({
+    executeAiCatalogAgentMutationHandler = executeAiCatalogAgentSuccessHandler,
+  } = {}) => {
+    const apolloProvider = createMockApollo([
+      [executeAiCatalogAgent, executeAiCatalogAgentMutationHandler],
+    ]);
+
     wrapper = shallowMountExtended(AiCatalogAgentsRun, {
+      apolloProvider,
       propsData: {
         ...defaultProps,
       },
@@ -28,6 +45,11 @@ describe('AiCatalogAgentsRun', () => {
   const findPageHeading = () => wrapper.findComponent(PageHeading);
   const findRunForm = () => wrapper.findComponent(AiCatalogAgentRunForm);
 
+  const submitForm = async () => {
+    findRunForm().vm.$emit('submit', { userPrompt: 'prompt' });
+    await waitForPromises();
+  };
+
   beforeEach(() => {
     createComponent();
   });
@@ -44,11 +66,30 @@ describe('AiCatalogAgentsRun', () => {
     expect(findRunForm().exists()).toBe(true);
   });
 
-  it('shows toast with prompt on form submit', () => {
-    const mockPrompt = 'Mock prompt';
+  describe('on form submit', () => {
+    it('executes mutation', async () => {
+      await submitForm();
 
-    findRunForm().vm.$emit('submit', { userPrompt: mockPrompt });
+      expect(executeAiCatalogAgentSuccessHandler).toHaveBeenCalledWith({
+        input: { agentId: mockAgent.id },
+      });
+    });
 
-    expect(mockToast.show).toHaveBeenCalledWith(mockPrompt);
+    it('shows success toast', async () => {
+      await submitForm();
+
+      expect(mockToast.show).toHaveBeenCalledWith('Agent executed successfully.');
+    });
+
+    describe('when something goes wrong', () => {
+      it('shows failure toast', async () => {
+        createComponent({
+          executeAiCatalogAgentMutationHandler: executeAiCatalogAgentErrorHandler,
+        });
+        await submitForm();
+
+        expect(mockToast.show).toHaveBeenCalledWith('Failed to execute agent.');
+      });
+    });
   });
 });
-- 
GitLab


From 3a661e18bf7bb72a0f82c98529cafabc2f245746 Mon Sep 17 00:00:00 2001
From: Lee Tickett <ltickett@gitlab.com>
Date: Thu, 21 Aug 2025 11:43:12 +0100
Subject: [PATCH 3/3] Apply reviewer suggestions

---
 .../ai/catalog/pages/ai_catalog_agents_run.vue           | 9 ++++-----
 locale/gitlab.pot                                        | 6 +++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
index 6312b9ee822083..4a8510c3ab03a2 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
@@ -33,7 +33,7 @@ export default {
     },
   },
   methods: {
-    async onSubmit({ userPrompt }) {
+    async onSubmit() {
       try {
         this.isSubmitting = true;
 
@@ -43,7 +43,6 @@ export default {
         });
 
         if (data) {
-          this.flowConfig = userPrompt; // To stop ESLint complaining :)
           this.flowConfig = data.aiCatalogAgentExecute.flowConfig;
           this.$toast.show(s__('AICatalog|Agent executed successfully.'));
         }
@@ -74,14 +73,14 @@ export default {
       @submit="onSubmit"
     />
 
-    <div v-if="flowConfig" class="position-relative">
+    <div v-if="flowConfig" class="gl-relative">
       <code-block-highlighted class="gl-border gl-mt-4 gl-p-4" :code="flowConfig" language="yaml" />
 
       <clipboard-button
         :text="flowConfig"
-        :title="__('Copy flow config')"
+        :title="s__('AICatalog|Copy flow config')"
         category="tertiary"
-        class="position-absolute position-top-0 position-right-0 gl-m-3 gl-hidden md:gl-flex"
+        class="gl-absolute gl-right-0 gl-top-0 gl-m-3 gl-hidden md:gl-flex"
       />
     </div>
   </div>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 46c0037135ab04..a52ea33ab4788b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2479,6 +2479,9 @@ msgstr ""
 msgid "AICatalog|Connect AI agents to automate complicated tasks."
 msgstr ""
 
+msgid "AICatalog|Copy flow config"
+msgstr ""
+
 msgid "AICatalog|Create agent"
 msgstr ""
 
@@ -18974,9 +18977,6 @@ msgstr ""
 msgid "Copy file permalink"
 msgstr ""
 
-msgid "Copy flow config"
-msgstr ""
-
 msgid "Copy issue URL to clipboard"
 msgstr ""
 
-- 
GitLab