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

---
 .../execute_ai_catalog_agent.mutation.graphql |  8 ++-
 .../queries/ai_catalog_agent.query.graphql    |  1 +
 .../catalog/pages/ai_catalog_agents_run.vue   | 64 +++++++++++++------
 ee/spec/frontend/ai/catalog/mock_data.js      | 24 +++++--
 .../pages/ai_catalog_agents_run_spec.js       | 61 ++++++++++++++----
 5 files changed, 118 insertions(+), 40 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 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/graphql/queries/ai_catalog_agent.query.graphql b/ee/app/assets/javascripts/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql
index b6e8ed6b3aeb0d..aa8b30b44c26da 100644
--- a/ee/app/assets/javascripts/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql
+++ b/ee/app/assets/javascripts/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql
@@ -6,6 +6,7 @@ query aiCatalogAgent($id: AiCatalogItemID!) {
     ...BaseAiCatalogItem
     project {
       id
+      fullPath
     }
     latestVersion {
       ...BaseAiCatalogAgentVersion
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..5f6e3117a254a5 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 { s__, sprintf } 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..cf4e0c6935448d 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({ fullPath: 'group/project' });
 
 export const mockPageInfo = {
   hasNextPage: true,
@@ -255,11 +258,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..7fb5148ff404b6 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(new Error('Network error'));
 
   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';
 
@@ -56,6 +64,10 @@ describe('AiCatalogAgentsRun', () => {
     createComponent();
   });
 
+  beforeEach(() => {
+    createAlert.mockClear();
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -77,20 +89,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 Session 1.',
+        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. Network error']);
       });
     });
   });
-- 
GitLab