From 8fa05be41637148e13d61c91231c43a9cc8ddbdf Mon Sep 17 00:00:00 2001
From: GitLab Duo <duo.workflow.agent@gitlab.com>
Date: Wed, 10 Sep 2025 09:30:49 +0000
Subject: [PATCH] Duo Workflow: Resolve issue #557569

---
 .../components/ai_catalog_agent_run_form.vue  |  2 +-
 .../execute_ai_catalog_agent.mutation.graphql |  8 ++-
 .../catalog/pages/ai_catalog_agents_run.vue   | 64 +++++++++++++------
 ee/spec/frontend/ai/catalog/mock_data.js      | 34 +++++++---
 .../pages/ai_catalog_agents_run_spec.js       | 57 +++++++++++++----
 locale/gitlab.pot                             | 21 +++---
 6 files changed, 131 insertions(+), 55 deletions(-)

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 c65cbe70aef0b4..8de863a49df260 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
@@ -53,7 +53,7 @@ export default {
   fields: {
     userPrompt: {
       validators: createFieldValidators({
-        requiredLabel: s__('AICatalog|User Prompt is required.'),
+        requiredLabel: s__('AICatalog|User prompt is required.'),
         maxLength: MAX_LENGTH_PROMPT,
       }),
     },
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 3505aa6e427d36..8c26c2b58146e6 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,6 +1,12 @@
 mutation executeAiCatalogAgent($input: AiCatalogAgentExecuteInput!) {
   aiCatalogAgentExecute(input: $input) {
     errors
-    flowConfig
+    workflow {
+      id
+      project {
+        id
+        fullPath
+      }
+    }
   }
 }
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 4271d2e52aa2c5..80e3dd4dba4b77 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,19 +1,19 @@
 <script>
-import { s__ } from '~/locale';
+import { sprintf, 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 { createAlert } from '~/alert';
+import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 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,
+    ErrorsAlert,
+    PageHeading,
   },
   props: {
     aiCatalogAgent: {
@@ -23,8 +23,8 @@ export default {
   },
   data() {
     return {
+      errors: [],
       isSubmitting: false,
-      flowConfig: null,
     };
   },
   computed: {
@@ -33,8 +33,30 @@ export default {
     },
   },
   methods: {
+    dismissErrors() {
+      this.errors = [];
+    },
+    successAlert({ id, project }) {
+      const formattedId = getIdFromGraphQLId(id);
+
+      // Hardcoded for an easier integration with any page at GitLab.
+      // https://gitlab.com/gitlab-org/gitlab/-/blob/b50c9e5ad666bab0e45365b2c6994d99407a68d1/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js#L61
+      const link = `/${project.fullPath}/-/automate/agent-sessions/${formattedId}`;
+
+      return {
+        message: sprintf(
+          s__(
+            `AICatalog|Test run executed successfully, see %{linkStart}Session %{formattedId}%{linkEnd}.`,
+          ),
+          { formattedId },
+        ),
+        variant: 'success',
+        messageLinks: { link },
+      };
+    },
     async onSubmit({ userPrompt }) {
       try {
+        this.dismissErrors();
         this.isSubmitting = true;
 
         const { data } = await this.$apollo.mutate({
@@ -43,11 +65,20 @@ export default {
         });
 
         if (data) {
-          this.flowConfig = data.aiCatalogAgentExecute.flowConfig;
-          this.$toast.show(s__('AICatalog|Agent executed successfully.'));
+          const { errors, workflow } = data.aiCatalogAgentExecute;
+
+          if (errors.length > 0) {
+            this.errors = errors;
+            return;
+          }
+          createAlert(this.successAlert(workflow));
         }
       } catch (error) {
-        this.$toast.show(s__('AICatalog|Failed to execute agent.'));
+        this.errors = [
+          sprintf(s__('AICatalog|The test run failed. %{error}'), {
+            error: error.message || error.toString(),
+          }),
+        ];
         Sentry.captureException(error);
       } finally {
         this.isSubmitting = false;
@@ -67,21 +98,12 @@ export default {
       </template>
     </page-heading>
 
+    <errors-alert :errors="errors" @dismiss="dismissErrors" />
+
     <ai-catalog-agent-run-form
       :is-submitting="isSubmitting"
       :ai-catalog-agent="aiCatalogAgent"
       @submit="onSubmit"
     />
-
-    <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="s__('AICatalog|Copy flow config')"
-        category="tertiary"
-        class="gl-absolute gl-right-0 gl-top-0 gl-m-3 gl-hidden md:gl-flex"
-      />
-    </div>
   </div>
 </template>
diff --git a/ee/spec/frontend/ai/catalog/mock_data.js b/ee/spec/frontend/ai/catalog/mock_data.js
index 9f3152f1e61bfc..1eedbb71ec0a62 100644
--- a/ee/spec/frontend/ai/catalog/mock_data.js
+++ b/ee/spec/frontend/ai/catalog/mock_data.js
@@ -20,10 +20,13 @@ export const mockBaseLatestVersion = {
   updatedAt: '2025-08-21T14:30:00Z',
 };
 
-const mockProject = {
+const mockProjectFactory = (overrides = {}) => ({
   id: 'gid://gitlab/Project/1',
   __typename: TYPENAME_PROJECT,
-};
+  ...overrides,
+});
+
+const mockProject = mockProjectFactory();
 
 export const mockPageInfo = {
   hasNextPage: true,
@@ -34,18 +37,16 @@ export const mockPageInfo = {
 };
 
 export const mockProjects = [
-  {
+  mockProjectFactory({
     id: 'gid://gitlab/Project/1',
     name: 'Project 1',
     nameWithNamespace: 'Group / Project 1',
-    __typename: TYPENAME_PROJECT,
-  },
-  {
+  }),
+  mockProjectFactory({
     id: 'gid://gitlab/Project/2',
     name: 'Project 2',
     nameWithNamespace: 'Group / Project 2',
-    __typename: TYPENAME_PROJECT,
-  },
+  }),
 ];
 
 export const mockProjectsResponse = {
@@ -255,11 +256,24 @@ export const mockUpdateAiCatalogAgentErrorMutation = {
   },
 };
 
-export const mockExecuteAgentResponse = {
+export const mockExecuteAgentSuccessResponse = {
   data: {
     aiCatalogAgentExecute: {
       errors: [],
-      flowConfig: '---\nversion: experimental\nenvironment: remote...',
+      workflow: {
+        id: 'gid://gitlab/Ai::DuoWorkflows::Workflow/1',
+        project: mockProjectFactory({ fullPath: 'gitlab-duo/test' }),
+      },
+      __typename: 'AiCatalogAgentExecutePayload',
+    },
+  },
+};
+
+export const mockExecuteAgentErrorResponse = {
+  data: {
+    aiCatalogAgentExecute: {
+      errors: ['Could not find agent ID'],
+      workflow: null,
       __typename: 'AiCatalogAgentExecutePayload',
     },
   },
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 919adec3fdf9b8..6969e89d0e8f56 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,13 +1,21 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
+import { createAlert } from '~/alert';
 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 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';
+import {
+  mockAgent,
+  mockExecuteAgentSuccessResponse,
+  mockExecuteAgentErrorResponse,
+} from '../mock_data';
+
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -17,12 +25,14 @@ describe('AiCatalogAgentsRun', () => {
   const defaultProps = {
     aiCatalogAgent: mockAgent,
   };
-  const mockToast = {
-    show: jest.fn(),
-  };
 
-  const executeAiCatalogAgentSuccessHandler = jest.fn().mockResolvedValue(mockExecuteAgentResponse);
-  const executeAiCatalogAgentErrorHandler = jest.fn().mockRejectedValue();
+  const executeAiCatalogAgentSuccessHandler = jest
+    .fn()
+    .mockResolvedValue(mockExecuteAgentSuccessResponse);
+  const executeAiCatalogAgentErrorHandler = jest
+    .fn()
+    .mockResolvedValue(mockExecuteAgentErrorResponse);
+  const executeAiCatalogAgentFailedHandler = jest.fn().mockRejectedValue();
 
   const createComponent = ({
     executeAiCatalogAgentMutationHandler = executeAiCatalogAgentSuccessHandler,
@@ -36,14 +46,12 @@ describe('AiCatalogAgentsRun', () => {
       propsData: {
         ...defaultProps,
       },
-      mocks: {
-        $toast: mockToast,
-      },
     });
   };
 
   const findPageHeading = () => wrapper.findComponent(PageHeading);
   const findRunForm = () => wrapper.findComponent(AiCatalogAgentRunForm);
+  const findErrorsAlert = () => wrapper.findComponent(ErrorsAlert);
 
   const userPrompt = 'prompt';
 
@@ -77,20 +85,41 @@ describe('AiCatalogAgentsRun', () => {
       });
     });
 
-    it('shows success toast', async () => {
+    it('shows success alert', async () => {
       await submitForm();
+      await waitForPromises();
 
-      expect(mockToast.show).toHaveBeenCalledWith('Agent executed successfully.');
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'Test run executed successfully, see %{linkStart}Session 1%{linkEnd}.',
+        messageLinks: { link: '/gitlab-duo/test/-/automate/agent-sessions/1' },
+        variant: 'success',
+      });
     });
 
-    describe('when something goes wrong', () => {
-      it('shows failure toast', async () => {
+    describe('when request succeeds but returns error', () => {
+      beforeEach(async () => {
         createComponent({
           executeAiCatalogAgentMutationHandler: executeAiCatalogAgentErrorHandler,
         });
         await submitForm();
+        await waitForPromises();
+      });
+
+      it('shows an alert', () => {
+        expect(findErrorsAlert().props('errors')).toEqual(['Could not find agent ID']);
+      });
+    });
+
+    describe('when request fails', () => {
+      beforeEach(async () => {
+        createComponent({
+          executeAiCatalogAgentMutationHandler: executeAiCatalogAgentFailedHandler,
+        });
+        await submitForm();
+      });
 
-        expect(mockToast.show).toHaveBeenCalledWith('Failed to execute agent.');
+      it('shows the error alert', () => {
+        expect(findErrorsAlert().props('errors')).toEqual(['The test run failed. Error']);
       });
     });
   });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 518b9c911192cc..085813575f717c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2467,8 +2467,7 @@ msgstr ""
 msgid "AICatalog|Agent deleted successfully."
 msgstr ""
 
-msgid "AICatalog|Agent executed successfully."
-msgstr ""
+
 
 msgid "AICatalog|Agent not found."
 msgstr ""
@@ -2524,8 +2523,7 @@ msgstr ""
 msgid "AICatalog|Connect AI agents to automate complicated tasks."
 msgstr ""
 
-msgid "AICatalog|Copy flow config"
-msgstr ""
+
 
 msgid "AICatalog|Copy of"
 msgstr ""
@@ -2584,8 +2582,7 @@ msgstr ""
 msgid "AICatalog|Failed to delete flow. %{error}"
 msgstr ""
 
-msgid "AICatalog|Failed to execute agent."
-msgstr ""
+
 
 msgid "AICatalog|Failed to remove flow. %{error}"
 msgstr ""
@@ -2716,6 +2713,9 @@ msgstr ""
 msgid "AICatalog|Test run agents to see how they respond."
 msgstr ""
 
+msgid "AICatalog|Test run executed successfully, see %{linkStart}Session %{formattedId}%{linkEnd}."
+msgstr ""
+
 msgid "AICatalog|The agent could not be added to the project. Try again. %{error}"
 msgstr ""
 
@@ -2737,6 +2737,9 @@ msgstr ""
 msgid "AICatalog|The item consumer must belong to only one organization, group, or project"
 msgstr ""
 
+msgid "AICatalog|The test run failed. %{error}"
+msgstr ""
+
 msgid "AICatalog|This agent can be made private if it is not used."
 msgstr ""
 
@@ -2755,8 +2758,7 @@ msgstr ""
 msgid "AICatalog|Use AI Flows in your project."
 msgstr ""
 
-msgid "AICatalog|User Prompt is required."
-msgstr ""
+
 
 msgid "AICatalog|User prompt"
 msgstr ""
@@ -2764,6 +2766,9 @@ msgstr ""
 msgid "AICatalog|User prompt is required."
 msgstr ""
 
+msgid "AICatalog|User prompt is required."
+msgstr ""
+
 msgid "AICatalog|Version"
 msgstr ""
 
-- 
GitLab