From 4b8a5124bb5bb26404d1208245ced034c4619ab2 Mon Sep 17 00:00:00 2001
From: Sam Beckham <sbeckham@gitlab.com>
Date: Fri, 12 Sep 2025 16:26:44 +0100
Subject: [PATCH] Adds the coming soon page for ai catalog flows

---
 .../components/ai_catalog_nav_actions.vue     | 17 ++--
 .../components/ai_catalog_nav_tabs.vue        | 16 ++--
 .../pages/ai_catalog_flows_coming_soon.vue    | 63 +++++++++++++++
 .../javascripts/ai/catalog/router/index.js    | 77 +++++++++----------
 locale/gitlab.pot                             |  3 +
 5 files changed, 120 insertions(+), 56 deletions(-)
 create mode 100644 ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows_coming_soon.vue

diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_nav_actions.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_nav_actions.vue
index 1b63639467c0eb..5f100b3e8481ba 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_nav_actions.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_nav_actions.vue
@@ -10,6 +10,8 @@ import {
   AI_CATALOG_FLOWS_NEW_ROUTE,
 } from '../router/constants';
 
+const nullButton = { route: null, label: '' };
+
 export default {
   name: 'AiCatalogNavActions',
   components: {
@@ -25,15 +27,14 @@ export default {
             label: s__('AICatalog|New agent'),
           };
         case AI_CATALOG_FLOWS_ROUTE:
-          return {
-            route: AI_CATALOG_FLOWS_NEW_ROUTE,
-            label: s__('AICatalog|New flow'),
-          };
+          return gon.features?.aiCatalogFlows
+            ? {
+                route: AI_CATALOG_FLOWS_NEW_ROUTE,
+                label: s__('AICatalog|New flow'),
+              }
+            : nullButton;
         default:
-          return {
-            route: null,
-            label: '',
-          };
+          return nullButton;
       }
     },
   },
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_nav_tabs.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_nav_tabs.vue
index faefab8c4c73ba..1ca2500b610c6a 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_nav_tabs.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_nav_tabs.vue
@@ -18,15 +18,13 @@ export default {
           route: AI_CATALOG_AGENTS_ROUTE,
           active: !this.$route.path.startsWith(AI_CATALOG_FLOWS_ROUTE),
         },
-        ...(this.glFeatures.aiCatalogFlows
-          ? [
-              {
-                text: s__('AICatalog|Flows'),
-                route: AI_CATALOG_FLOWS_ROUTE,
-                active: this.$route.path.startsWith(AI_CATALOG_FLOWS_ROUTE),
-              },
-            ]
-          : []),
+        ...[
+          {
+            text: s__('AICatalog|Flows'),
+            route: AI_CATALOG_FLOWS_ROUTE,
+            active: this.$route.path.startsWith(AI_CATALOG_FLOWS_ROUTE),
+          },
+        ],
       ];
     },
   },
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows_coming_soon.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows_coming_soon.vue
new file mode 100644
index 00000000000000..ead15557b5d798
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows_coming_soon.vue
@@ -0,0 +1,63 @@
+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import tanukiAiSvgPath from '@gitlab/svgs/dist/illustrations/tanuki-ai-md.svg?url';
+import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import { InternalEvents } from '~/tracking';
+import AiCatalogListHeader from '../components/ai_catalog_list_header.vue';
+import { AI_CATALOG_SHOW_QUERY_PARAM, AI_CATALOG_FLOWS_EDIT_ROUTE } from '../router/constants';
+import { TRACK_EVENT_VIEW_AI_CATALOG_ITEM_INDEX, TRACK_EVENT_TYPE_FLOW } from '../constants';
+
+export default {
+  name: 'AiCatalogFlows',
+  components: {
+    AiCatalogListHeader,
+    ErrorsAlert,
+    GlEmptyState,
+  },
+  mixins: [InternalEvents.mixin()],
+  data() {
+    return {
+      errors: [],
+      hasTrackedPageView: false,
+    };
+  },
+  computed: {
+    showQueryParam() {
+      return this.$route.query[AI_CATALOG_SHOW_QUERY_PARAM];
+    },
+    hasQueryParam() {
+      return Boolean(this.showQueryParam);
+    },
+  },
+  watch: {
+    hasQueryParam: {
+      handler: 'trackViewIndexEvent',
+      immediate: true,
+    },
+  },
+  methods: {
+    trackViewIndexEvent() {
+      if (this.hasTrackedPageView || this.hasQueryParam) return;
+
+      this.hasTrackedPageView = true;
+      this.trackEvent(TRACK_EVENT_VIEW_AI_CATALOG_ITEM_INDEX, {
+        label: TRACK_EVENT_TYPE_FLOW,
+      });
+    },
+  },
+  editRoute: AI_CATALOG_FLOWS_EDIT_ROUTE,
+  tanukiAiSvgPath,
+};
+</script>
+
+<template>
+  <div>
+    <ai-catalog-list-header />
+    <errors-alert class="gl-mt-5" :errors="errors" @dismiss="errors = []" />
+    <gl-empty-state
+      :svg-path="$options.tanukiAiSvgPath"
+      :title="s__('AICatalog|Flows')"
+      :description="s__('AICatalog|The Flows feature will be available soon.')"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/router/index.js b/ee/app/assets/javascripts/ai/catalog/router/index.js
index 391acfbed80c61..07cad7b252cd68 100644
--- a/ee/app/assets/javascripts/ai/catalog/router/index.js
+++ b/ee/app/assets/javascripts/ai/catalog/router/index.js
@@ -11,6 +11,7 @@ import AiCatalogAgentsNew from '../pages/ai_catalog_agents_new.vue';
 import AiCatalogAgentsDuplicate from '../pages/ai_catalog_agents_duplicate.vue';
 import AiCatalogFlow from '../pages/ai_catalog_flow.vue';
 import AiCatalogFlows from '../pages/ai_catalog_flows.vue';
+import AiCatalogFlowsComingSoon from '../pages/ai_catalog_flows_coming_soon.vue';
 import AiCatalogFlowsEdit from '../pages/ai_catalog_flows_edit.vue';
 import AiCatalogFlowsNew from '../pages/ai_catalog_flows_new.vue';
 import {
@@ -112,56 +113,54 @@ export const createRouter = (base) => {
         ],
       },
       // FLOWS
-      ...(gon.features?.aiCatalogFlows
-        ? [
+      ...[
+        {
+          component: NestedRouteApp,
+          path: '/flows',
+          meta: {
+            text: s__('AICatalog|Flows'),
+          },
+          children: [
+            {
+              name: AI_CATALOG_FLOWS_ROUTE,
+              path: '',
+              component: gon.features?.aiCatalogFlows ? AiCatalogFlows : AiCatalogFlowsComingSoon,
+            },
             {
-              component: NestedRouteApp,
-              path: '/flows',
+              name: AI_CATALOG_FLOWS_NEW_ROUTE,
+              path: 'new',
+              component: AiCatalogFlowsNew,
+              beforeEnter: requireAuth,
               meta: {
-                text: s__('AICatalog|Flows'),
+                text: s__('AICatalog|New flow'),
               },
+            },
+            // Catch-all route for /flows/:id - redirect to /flows?show=:id
+            {
+              path: ':id(\\d+)',
+              redirect: (to) => ({
+                path: '/flows',
+                query: { [AI_CATALOG_SHOW_QUERY_PARAM]: to.params.id },
+              }),
+            },
+            {
+              path: ':id(\\d+)',
+              component: AiCatalogFlow,
               children: [
                 {
-                  name: AI_CATALOG_FLOWS_ROUTE,
-                  path: '',
-                  component: AiCatalogFlows,
-                },
-                {
-                  name: AI_CATALOG_FLOWS_NEW_ROUTE,
-                  path: 'new',
-                  component: AiCatalogFlowsNew,
+                  name: AI_CATALOG_FLOWS_EDIT_ROUTE,
+                  path: 'edit',
+                  component: AiCatalogFlowsEdit,
                   beforeEnter: requireAuth,
                   meta: {
-                    text: s__('AICatalog|New flow'),
+                    text: s__('AICatalog|Edit flow'),
                   },
                 },
-                // Catch-all route for /flows/:id - redirect to /flows?show=:id
-                {
-                  path: ':id(\\d+)',
-                  redirect: (to) => ({
-                    path: '/flows',
-                    query: { [AI_CATALOG_SHOW_QUERY_PARAM]: to.params.id },
-                  }),
-                },
-                {
-                  path: ':id(\\d+)',
-                  component: AiCatalogFlow,
-                  children: [
-                    {
-                      name: AI_CATALOG_FLOWS_EDIT_ROUTE,
-                      path: 'edit',
-                      component: AiCatalogFlowsEdit,
-                      beforeEnter: requireAuth,
-                      meta: {
-                        text: s__('AICatalog|Edit flow'),
-                      },
-                    },
-                  ],
-                },
               ],
             },
-          ]
-        : []),
+          ],
+        },
+      ],
       { path: '*', redirect: { name: AI_CATALOG_INDEX_ROUTE } },
     ],
   });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 33a219117b7f0a..e30cf232fd13d9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2712,6 +2712,9 @@ msgstr ""
 msgid "AICatalog|Test run executed successfully, see %{linkStart}Session %{formattedId}%{linkEnd}."
 msgstr ""
 
+msgid "AICatalog|The Flows feature will be available soon."
+msgstr ""
+
 msgid "AICatalog|The agent could not be added to the project. Try again. %{error}"
 msgstr ""
 
-- 
GitLab