From 1dbd6327019c1bfa650cf221f5c28f1548e819ad Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Mon, 7 Jul 2025 17:32:57 +0200
Subject: [PATCH 1/2] Add loading state to edit show page

---
 .../ai/catalog/pages/ai_catalog_agents_edit.vue        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_edit.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_edit.vue
index f0c43b06d92355..f18b65b952a065 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_edit.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_edit.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
@@ -13,6 +14,7 @@ export default {
   name: 'AiCatalogAgentsEdit',
   components: {
     AiCatalogAgentForm,
+    GlLoadingIcon,
     PageHeading,
   },
   apollo: {
@@ -61,6 +63,9 @@ export default {
         public: this.aiCatalogAgent?.public || false,
       };
     },
+    isQueryLoading() {
+      return this.$apollo.queries.aiCatalogAgent.loading;
+    },
   },
   methods: {
     onAgentQueryResult({ data }) {
@@ -120,7 +125,10 @@ export default {
 </script>
 
 <template>
-  <div v-if="aiCatalogAgent">
+  <div v-if="isQueryLoading" class="gl-flex gl-h-full gl-items-center gl-justify-center">
+    <gl-loading-icon size="lg" />
+  </div>
+  <div v-else-if="aiCatalogAgent">
     <page-heading :heading="pageTitle" />
     <p>
       {{ s__('AICatalog|Modify the agent settings and configuration.') }}
-- 
GitLab


From 43e0cbcad9aa788982e16b59ce30a91d5ac8bf43 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Thu, 24 Jul 2025 10:55:32 +0200
Subject: [PATCH 2/2] Use agent loading wrapper to stay DRY

---
 .../components/ai_catalog_agent_edit.vue      | 114 ++++++++++++++
 .../ai_catalog_agent_loading_wrapper.vue      |  61 ++++++++
 .../components/ai_catalog_agent_run.vue       |  54 +++++++
 .../components/ai_catalog_loading_state.vue   |  16 ++
 .../catalog/pages/ai_catalog_agents_edit.vue  | 142 +-----------------
 .../catalog/pages/ai_catalog_agents_run.vue   |  28 +++-
 .../ai_catalog_loading_state_spec.js          |  25 +++
 .../pages/ai_catalog_agents_run_spec.js       |  43 ++++--
 8 files changed, 331 insertions(+), 152 deletions(-)
 create mode 100644 ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_edit.vue
 create mode 100644 ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_loading_wrapper.vue
 create mode 100644 ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_run.vue
 create mode 100644 ee/app/assets/javascripts/ai/catalog/components/ai_catalog_loading_state.vue
 create mode 100644 ee/spec/frontend/ai/catalog/components/ai_catalog_loading_state_spec.js

diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_edit.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_edit.vue
new file mode 100644
index 00000000000000..742d5a97910d6b
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_edit.vue
@@ -0,0 +1,114 @@
+<script>
+import { s__ } from '~/locale';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
+import updateAiCatalogAgent from '../graphql/mutations/update_ai_catalog_agent.mutation.graphql';
+import { AI_CATALOG_AGENTS_ROUTE, AI_CATALOG_SHOW_QUERY_PARAM } from '../router/constants';
+import AiCatalogAgentForm from './ai_catalog_agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiCatalogAgentForm,
+    PageHeading,
+  },
+  props: {
+    agent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      errorMessages: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    agentName() {
+      return this.agent.name || '';
+    },
+    agentSystemPrompt() {
+      return this.agent.versions?.nodes?.[0]?.systemPrompt;
+    },
+    agentUserPrompt() {
+      return this.agent.versions?.nodes?.[0]?.userPrompt;
+    },
+    pageTitle() {
+      return `${s__('AICatalog|Edit agent')}: ${this.agentName}`;
+    },
+    initialValues() {
+      return {
+        projectId: this.agent.project.id || null,
+        name: this.agentName,
+        description: this.agent.description || '',
+        systemPrompt: this.agentSystemPrompt,
+        userPrompt: this.agentUserPrompt,
+        public: this.agent.public || false,
+      };
+    },
+  },
+  methods: {
+    async handleSubmit(formValues) {
+      this.isSubmitting = true;
+      this.resetErrorMessages();
+      try {
+        const { name, description, userPrompt, systemPrompt } = formValues;
+
+        const { data } = await this.$apollo.mutate({
+          mutation: updateAiCatalogAgent,
+          variables: {
+            input: {
+              id: this.aiCatalogAgent.id,
+              name,
+              description,
+              userPrompt,
+              systemPrompt,
+              public: formValues.public,
+            },
+          },
+        });
+
+        if (data) {
+          const { errors } = data.aiCatalogAgentUpdate;
+          if (errors.length > 0) {
+            this.errorMessages = errors;
+            return;
+          }
+
+          this.$toast.show(s__('AICatalog|Agent updated successfully.'));
+          this.$router.push({
+            name: AI_CATALOG_AGENTS_ROUTE,
+            query: { [AI_CATALOG_SHOW_QUERY_PARAM]: this.$route.params.id },
+          });
+        }
+      } catch (error) {
+        this.errorMessages = [s__('AICatalog|The agent could not be updated. Please try again.')];
+        Sentry.captureException(error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    resetErrorMessages() {
+      this.errorMessages = [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <page-heading :heading="pageTitle" />
+    <p>
+      {{ s__('AICatalog|Modify the agent settings and configuration.') }}
+    </p>
+    <ai-catalog-agent-form
+      mode="edit"
+      :error-messages="errorMessages"
+      :initial-values="initialValues"
+      :is-loading="isSubmitting"
+      @dismiss-error="resetErrorMessages"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_loading_wrapper.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_loading_wrapper.vue
new file mode 100644
index 00000000000000..465839b59f62ed
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_loading_wrapper.vue
@@ -0,0 +1,61 @@
+<script>
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import aiCatalogAgentQuery from '../graphql/queries/ai_catalog_agent.query.graphql';
+import { AI_CATALOG_AGENTS_ROUTE } from '../router/constants';
+import { TYPENAME_AI_CATALOG_ITEM } from '../constants';
+import AiCatalogLoadingState from './ai_catalog_loading_state.vue';
+
+export default {
+  name: 'AiCatalogAgentLoadingWrapper',
+  components: {
+    AiCatalogLoadingState,
+  },
+  apollo: {
+    aiCatalogAgent: {
+      query: aiCatalogAgentQuery,
+      variables() {
+        return {
+          id: convertToGraphQLId(TYPENAME_AI_CATALOG_ITEM, this.$route.params.id),
+        };
+      },
+      update(data) {
+        return data?.aiCatalogItem;
+      },
+      result(res) {
+        this.onAgentQueryResult(res);
+      },
+    },
+  },
+  data() {
+    return {
+      aiCatalogAgent: null,
+    };
+  },
+  computed: {
+    isQueryLoading() {
+      return this.$apollo.queries.aiCatalogAgent.loading;
+    },
+  },
+  methods: {
+    onAgentQueryResult({ data }) {
+      if (!data || !data.aiCatalogItem) {
+        const queryError = new Error(
+          `Agent not found: Failed to query agent with ID ${this.$route.params.id}`,
+        );
+        Sentry.captureException(queryError);
+        this.$router.push({ name: AI_CATALOG_AGENTS_ROUTE });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ai-catalog-loading-state v-if="isQueryLoading" />
+    <template v-else-if="aiCatalogAgent">
+      <slot :agent="aiCatalogAgent"></slot>
+    </template>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_run.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_run.vue
new file mode 100644
index 00000000000000..a7bb2ce7f6e17e
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_run.vue
@@ -0,0 +1,54 @@
+<script>
+import { s__ } from '~/locale';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
+import AiCatalogAgentRunForm from './ai_catalog_agent_run_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsRun',
+  components: {
+    AiCatalogAgentRunForm,
+    PageHeading,
+  },
+  props: {
+    agent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    pageTitle() {
+      return `${s__('AICatalog|Run agent')}: ${this.agent.name}`;
+    },
+  },
+  methods: {
+    async onSubmit({ userPrompt }) {
+      this.isSubmitting = true;
+
+      try {
+        this.$toast.show(userPrompt);
+      } catch (error) {
+        this.$toast.show(s__('AICatalog|Failed to run agent.'));
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <page-heading :heading="pageTitle" />
+
+    <ai-catalog-agent-run-form
+      :is-submitting="isSubmitting"
+      :ai-catalog-agent="agent"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_loading_state.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_loading_state.vue
new file mode 100644
index 00000000000000..28c325dca9cc42
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_loading_state.vue
@@ -0,0 +1,16 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  name: 'AiCatalogLoadingSpinner',
+  components: {
+    GlLoadingIcon,
+  },
+};
+</script>
+
+<template>
+  <div class="gl-flex gl-h-full gl-items-center gl-justify-center">
+    <gl-loading-icon size="lg" />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_edit.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_edit.vue
index f18b65b952a065..d680fd71a928bd 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_edit.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_edit.vue
@@ -1,146 +1,18 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
-import { s__ } from '~/locale';
-import { convertToGraphQLId } from '~/graphql_shared/utils';
-import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import PageHeading from '~/vue_shared/components/page_heading.vue';
-import aiCatalogAgentQuery from '../graphql/queries/ai_catalog_agent.query.graphql';
-import updateAiCatalogAgent from '../graphql/mutations/update_ai_catalog_agent.mutation.graphql';
-import { AI_CATALOG_AGENTS_ROUTE, AI_CATALOG_SHOW_QUERY_PARAM } from '../router/constants';
-import AiCatalogAgentForm from '../components/ai_catalog_agent_form.vue';
-import { TYPENAME_AI_CATALOG_ITEM } from '../constants';
+import AiCatalogAgentLoadingWrapper from '../components/ai_catalog_agent_loading_wrapper.vue';
+import AiCatalogAgentEdit from '../components/ai_catalog_agent_edit.vue';
 
 export default {
   name: 'AiCatalogAgentsEdit',
   components: {
-    AiCatalogAgentForm,
-    GlLoadingIcon,
-    PageHeading,
-  },
-  apollo: {
-    aiCatalogAgent: {
-      query: aiCatalogAgentQuery,
-      variables() {
-        return {
-          id: convertToGraphQLId(TYPENAME_AI_CATALOG_ITEM, this.$route.params.id),
-        };
-      },
-      update(data) {
-        return data?.aiCatalogItem;
-      },
-      result(res) {
-        this.onAgentQueryResult(res);
-      },
-    },
-  },
-  data() {
-    return {
-      aiCatalogAgent: null,
-      errorMessages: [],
-      isSubmitting: false,
-    };
-  },
-  computed: {
-    agentName() {
-      return this.aiCatalogAgent?.name || '';
-    },
-    agentSystemPrompt() {
-      return this.aiCatalogAgent?.versions?.nodes?.[0]?.systemPrompt;
-    },
-    agentUserPrompt() {
-      return this.aiCatalogAgent?.versions?.nodes?.[0]?.userPrompt;
-    },
-    pageTitle() {
-      return `${s__('AICatalog|Edit agent')}: ${this.agentName}`;
-    },
-    initialValues() {
-      return {
-        projectId: this.aiCatalogAgent?.project.id || null,
-        name: this.agentName,
-        description: this.aiCatalogAgent?.description || '',
-        systemPrompt: this.agentSystemPrompt,
-        userPrompt: this.agentUserPrompt,
-        public: this.aiCatalogAgent?.public || false,
-      };
-    },
-    isQueryLoading() {
-      return this.$apollo.queries.aiCatalogAgent.loading;
-    },
-  },
-  methods: {
-    onAgentQueryResult({ data }) {
-      if (!data || !data.aiCatalogItem) {
-        const queryError = new Error(
-          `Agent not found: Failed to query agent with ID ${this.$route.params.id}`,
-        );
-        Sentry.captureException(queryError);
-        this.$router.push({ name: AI_CATALOG_AGENTS_ROUTE });
-      }
-    },
-    async handleSubmit(formValues) {
-      this.isSubmitting = true;
-      this.resetErrorMessages();
-      try {
-        const { name, description, userPrompt, systemPrompt } = formValues;
-
-        const { data } = await this.$apollo.mutate({
-          mutation: updateAiCatalogAgent,
-          variables: {
-            input: {
-              id: this.aiCatalogAgent.id,
-              name,
-              description,
-              userPrompt,
-              systemPrompt,
-              public: formValues.public,
-            },
-          },
-        });
-
-        if (data) {
-          const { errors } = data.aiCatalogAgentUpdate;
-          if (errors.length > 0) {
-            this.errorMessages = errors;
-            return;
-          }
-
-          this.$toast.show(s__('AICatalog|Agent updated successfully.'));
-          this.$router.push({
-            name: AI_CATALOG_AGENTS_ROUTE,
-            query: { [AI_CATALOG_SHOW_QUERY_PARAM]: this.$route.params.id },
-          });
-        }
-      } catch (error) {
-        this.errorMessages = [s__('AICatalog|The agent could not be updated. Please try again.')];
-        Sentry.captureException(error);
-      } finally {
-        this.isSubmitting = false;
-      }
-    },
-    resetErrorMessages() {
-      this.errorMessages = [];
-    },
+    AiCatalogAgentLoadingWrapper,
+    AiCatalogAgentEdit,
   },
 };
 </script>
 
 <template>
-  <div v-if="isQueryLoading" class="gl-flex gl-h-full gl-items-center gl-justify-center">
-    <gl-loading-icon size="lg" />
-  </div>
-  <div v-else-if="aiCatalogAgent">
-    <page-heading :heading="pageTitle" />
-    <p>
-      {{ s__('AICatalog|Modify the agent settings and configuration.') }}
-    </p>
-    <ai-catalog-agent-form
-      v-if="aiCatalogAgent"
-      mode="edit"
-      :error-messages="errorMessages"
-      :initial-values="initialValues"
-      :is-loading="isSubmitting"
-      @dismiss-error="resetErrorMessages"
-      @submit="handleSubmit"
-    />
-  </div>
+  <ai-catalog-agent-loading-wrapper #default="{ agent }">
+    <ai-catalog-agent-edit :agent="agent" />
+  </ai-catalog-agent-loading-wrapper>
 </template>
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 9632bb68afbf45..e1aa299706866a 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,18 +1,20 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_AI_CATALOG_ITEM } from 'ee/ai/catalog/constants';
+import { AI_CATALOG_AGENTS_ROUTE } from '../router/constants';
 import aiCatalogAgentQuery from '../graphql/queries/ai_catalog_agent.query.graphql';
 import AiCatalogAgentRunForm from '../components/ai_catalog_agent_run_form.vue';
+import AiCatalogLoadingState from '../components/ai_catalog_loading_state.vue';
 
 export default {
   name: 'AiCatalogAgentsRun',
   components: {
-    GlLoadingIcon,
-    PageHeading,
     AiCatalogAgentRunForm,
+    AiCatalogLoadingState,
+    PageHeading,
   },
   data() {
     return {
@@ -31,10 +33,13 @@ export default {
       update(data) {
         return data?.aiCatalogItem || {};
       },
+      result(res) {
+        this.onAgentQueryResult(res);
+      },
     },
   },
   computed: {
-    isLoading() {
+    isQueryLoading() {
       return this.$apollo.queries.aiCatalogAgent.loading;
     },
     pageTitle() {
@@ -42,6 +47,15 @@ export default {
     },
   },
   methods: {
+    onAgentQueryResult({ data }) {
+      if (!data || !data.aiCatalogItem) {
+        const queryError = new Error(
+          `Agent not found: Failed to query agent with ID ${this.$route.params.id}`,
+        );
+        Sentry.captureException(queryError);
+        this.$router.push({ name: AI_CATALOG_AGENTS_ROUTE });
+      }
+    },
     async onSubmit({ userPrompt }) {
       this.isSubmitting = true;
 
@@ -59,10 +73,8 @@ export default {
 
 <template>
   <div>
-    <div v-if="isLoading" class="gl-flex gl-h-full gl-items-center gl-justify-center">
-      <gl-loading-icon size="lg" />
-    </div>
-    <template v-else>
+    <ai-catalog-loading-state v-if="isQueryLoading" />
+    <template v-else-if="aiCatalogAgent">
       <page-heading :heading="pageTitle" />
 
       <ai-catalog-agent-run-form
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_loading_state_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_loading_state_spec.js
new file mode 100644
index 00000000000000..41e0aaab700158
--- /dev/null
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_loading_state_spec.js
@@ -0,0 +1,25 @@
+import { GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import AiCatalogLoadingState from 'ee/ai/catalog/components/ai_catalog_loading_state.vue';
+
+describe('AiCatalogLoadingState', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(AiCatalogLoadingState);
+  };
+
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+
+  describe('component rendering', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the loading icon', () => {
+      const loadingIcon = findLoadingIcon();
+
+      expect(loadingIcon.exists()).toBe(true);
+    });
+  });
+});
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 9abe704afc82e9..62cb7dfb0080fc 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
@@ -2,12 +2,12 @@ import VueApollo from 'vue-apollo';
 import Vue from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_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 aiCatalogAgentQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql';
-import { mockAgent, mockCatalogItemResponse } from '../mock_data';
+import { AI_CATALOG_AGENTS_ROUTE } from 'ee/ai/catalog/router/constants';
+import { mockAgent, mockCatalogItemResponse, mockCatalogItemNullResponse } from '../mock_data';
 
 Vue.use(VueApollo);
 
@@ -18,16 +18,17 @@ describe('AiCatalogAgentsRun', () => {
   const agentId = '1';
 
   const mockRouter = {
-    back: jest.fn(),
+    push: jest.fn(),
   };
   const mockToast = {
     show: jest.fn(),
   };
 
   const mockCatalogItemQueryHandler = jest.fn().mockResolvedValue(mockCatalogItemResponse);
+  const mockCatalogItemNullQueryHandler = jest.fn().mockResolvedValue(mockCatalogItemNullResponse);
 
-  const createComponent = () => {
-    mockApollo = createMockApollo([[aiCatalogAgentQuery, mockCatalogItemQueryHandler]]);
+  const createComponent = ({ catalogItemQueryHandler = mockCatalogItemQueryHandler } = {}) => {
+    mockApollo = createMockApollo([[aiCatalogAgentQuery, catalogItemQueryHandler]]);
 
     wrapper = shallowMountExtended(AiCatalogAgentsRun, {
       apolloProvider: mockApollo,
@@ -52,12 +53,36 @@ describe('AiCatalogAgentsRun', () => {
     jest.clearAllMocks();
   });
 
-  it('renders page heading', () => {
-    expect(findPageHeading().props('heading')).toBe(`Run agent: ${mockAgent.name}`);
+  describe('with agent data', () => {
+    beforeEach(async () => {
+      await createComponent();
+    });
+
+    it('renders page heading', () => {
+      expect(findPageHeading().props('heading')).toBe(`Run agent: ${mockAgent.name}`);
+    });
+
+    it('renders run form', () => {
+      expect(findRunForm().exists()).toBe(true);
+    });
   });
 
-  it('renders run form', () => {
-    expect(findRunForm().exists()).toBe(true);
+  describe('without agent data', () => {
+    beforeEach(async () => {
+      await createComponent({ catalogItemQueryHandler: mockCatalogItemNullQueryHandler });
+    });
+
+    it('fetches list data', () => {
+      expect(mockCatalogItemNullQueryHandler).toHaveBeenCalled();
+    });
+
+    it('does not render edit form', () => {
+      expect(findRunForm().exists()).toBe(false);
+    });
+
+    it('redirect to the agents list page', () => {
+      expect(mockRouter.push).toHaveBeenCalledWith({ name: AI_CATALOG_AGENTS_ROUTE });
+    });
   });
 
   it('shows toast with prompt on form submit', () => {
-- 
GitLab