From 4c765ed9ea247e077d6311cb8a7dffcfde43dd56 Mon Sep 17 00:00:00 2001
From: Angus Ryer <aryer@gitlab.com>
Date: Wed, 22 Oct 2025 16:45:34 -0400
Subject: [PATCH] Create ai_catalog_item_metadata component

- Add tests and MR feedback
- Make responsive and simplify gl-classes
- Add to translation file and add getLatestUpdatedAt util
---
 .../components/ai_catalog_agent_details.vue   |   2 +-
 .../components/ai_catalog_flow_details.vue    |   2 +-
 .../components/ai_catalog_item_metadata.vue   |  51 ++++++++
 .../catalog/pages/ai_catalog_agents_show.vue  |  35 ++++-
 .../catalog/pages/ai_catalog_flows_show.vue   |  35 ++++-
 ee/app/assets/javascripts/ai/catalog/utils.js |   7 +
 .../ai_catalog_item_metadata_spec.js          | 123 ++++++++++++++++++
 locale/gitlab.pot                             |   3 +
 8 files changed, 248 insertions(+), 10 deletions(-)
 create mode 100644 ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_metadata.vue
 create mode 100644 ee/spec/frontend/ai/catalog/components/ai_catalog_item_metadata_spec.js

diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_details.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_details.vue
index 2638348e26a073..66638a50513ede 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_details.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_details.vue
@@ -35,7 +35,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-w-full">
     <h3 class="gl-heading-3 gl-mb-4 gl-mt-0 gl-font-semibold">
       {{ s__('AICatalog|Agent configuration') }}
     </h3>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_details.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_details.vue
index 9dd3072960354a..a3354e9c850862 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_details.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_details.vue
@@ -39,7 +39,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-w-full">
     <h3 class="gl-heading-3 gl-mb-4 gl-mt-0 gl-font-semibold">
       {{ s__('AICatalog|Flow configuration') }}
     </h3>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_metadata.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_metadata.vue
new file mode 100644
index 00000000000000..01c76c930e0c4f
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_metadata.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+
+export default {
+  name: 'AiCatalogItemMetadata',
+  components: {
+    GlIcon,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: (items) => {
+        return items.every((item) => {
+          if (typeof item !== 'object' || !item?.value || !item?.icon) {
+            return false;
+          }
+          return true;
+        });
+      },
+    },
+  },
+  computed: {
+    displayedMeta() {
+      return this.items.filter(
+        (item) => item.value && (item.condition === true || item.condition === undefined),
+      );
+    },
+  },
+  methods: {
+    joinWithSpace(text, value) {
+      return [text, value].join(' ');
+    },
+  },
+};
+</script>
+
+<template>
+  <aside>
+    <h3 class="gl-heading-3 gl-mb-4 gl-mt-0 gl-font-semibold">{{ __('About') }}</h3>
+    <ul class="gl-flex gl-list-none gl-flex-col gl-gap-3 gl-pl-0">
+      <li v-for="metaField in displayedMeta" :key="metaField.field">
+        <gl-icon :name="metaField.icon" variant="subtle" />
+        <span class="gl-ml-2">
+          {{ joinWithSpace(metaField.text, metaField.value) }}
+        </span>
+      </li>
+    </ul>
+  </aside>
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_show.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_show.vue
index c8c0ad2f6c8d40..52217a42693048 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_show.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_show.vue
@@ -1,11 +1,15 @@
 <script>
-import { s__, sprintf } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 import { InternalEvents } from '~/tracking';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import { TRACK_EVENT_TYPE_AGENT, TRACK_EVENT_VIEW_AI_CATALOG_ITEM } from 'ee/ai/catalog/constants';
+import { formatDate } from '~/lib/utils/datetime_utility';
 import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { getLatestUpdatedAt, prerequisitesError } from '../utils';
+import AiCatalogItemMetadata from '../components/ai_catalog_item_metadata.vue';
 import AiCatalogAgentDetails from '../components/ai_catalog_agent_details.vue';
 import AiCatalogItemActions from '../components/ai_catalog_item_actions.vue';
 import createAiCatalogItemConsumer from '../graphql/mutations/create_ai_catalog_item_consumer.mutation.graphql';
@@ -15,17 +19,17 @@ import {
   AI_CATALOG_AGENTS_DUPLICATE_ROUTE,
   AI_CATALOG_AGENTS_EDIT_ROUTE,
 } from '../router/constants';
-import { prerequisitesError } from '../utils';
 
 export default {
   name: 'AiCatalogAgentsShow',
   components: {
     ErrorsAlert,
     PageHeading,
+    AiCatalogItemMetadata,
     AiCatalogAgentDetails,
     AiCatalogItemActions,
   },
-  mixins: [glFeatureFlagsMixin(), InternalEvents.mixin()],
+  mixins: [glFeatureFlagsMixin(), InternalEvents.mixin(), timeagoMixin],
   inject: {
     isGlobal: {
       default: false,
@@ -50,6 +54,24 @@ export default {
     showActions() {
       return this.isGlobal || this.glFeatures.aiCatalogItemProjectCuration;
     },
+    latestUpdatedAt() {
+      return getLatestUpdatedAt(this.aiCatalogAgent);
+    },
+    agentMetadata() {
+      return [
+        {
+          text: __('Created on'),
+          icon: 'calendar',
+          value: formatDate(this.aiCatalogAgent.createdAt, 'mmmm d, yyyy'),
+        },
+        {
+          text: __('Modified'),
+          icon: 'clock',
+          value: this.timeFormatted(this.latestUpdatedAt),
+          condition: this.latestUpdatedAt !== this.aiCatalogAgent.createdAt,
+        },
+      ];
+    },
   },
   mounted() {
     this.trackEvent(TRACK_EVENT_VIEW_AI_CATALOG_ITEM, {
@@ -155,6 +177,11 @@ export default {
         />
       </template>
     </page-heading>
-    <ai-catalog-agent-details :item="aiCatalogAgent" />
+    <div class="gl-flex gl-flex-col gl-gap-5 @md:gl-flex-row">
+      <ai-catalog-agent-details :item="aiCatalogAgent" />
+      <div class="gl-shrink-0">
+        <ai-catalog-item-metadata :items="agentMetadata" />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows_show.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows_show.vue
index bb20e1f4ac81ca..e56f60fe3c184e 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows_show.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows_show.vue
@@ -1,5 +1,5 @@
 <script>
-import { s__, sprintf } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 import { InternalEvents } from '~/tracking';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -9,7 +9,11 @@ import {
   TRACK_EVENT_TYPE_FLOW,
   TRACK_EVENT_VIEW_AI_CATALOG_ITEM,
 } from 'ee/ai/catalog/constants';
+import { formatDate } from '~/lib/utils/datetime_utility';
 import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { getLatestUpdatedAt, prerequisitesError } from '../utils';
+import AiCatalogItemMetadata from '../components/ai_catalog_item_metadata.vue';
 import AiCatalogFlowDetails from '../components/ai_catalog_flow_details.vue';
 import AiCatalogItemActions from '../components/ai_catalog_item_actions.vue';
 import createAiCatalogItemConsumer from '../graphql/mutations/create_ai_catalog_item_consumer.mutation.graphql';
@@ -18,17 +22,17 @@ import {
   AI_CATALOG_FLOWS_EDIT_ROUTE,
   AI_CATALOG_FLOWS_ROUTE,
 } from '../router/constants';
-import { prerequisitesError } from '../utils';
 
 export default {
   name: 'AiCatalogFlowsShow',
   components: {
     ErrorsAlert,
     PageHeading,
+    AiCatalogItemMetadata,
     AiCatalogFlowDetails,
     AiCatalogItemActions,
   },
-  mixins: [glFeatureFlagsMixin(), InternalEvents.mixin()],
+  mixins: [glFeatureFlagsMixin(), InternalEvents.mixin(), timeagoMixin],
   inject: {
     isGlobal: {
       default: false,
@@ -53,6 +57,24 @@ export default {
     showActions() {
       return this.isGlobal || this.glFeatures.aiCatalogItemProjectCuration;
     },
+    latestUpdatedAt() {
+      return getLatestUpdatedAt(this.aiCatalogFlow);
+    },
+    flowMetadata() {
+      return [
+        {
+          text: __('Created on'),
+          icon: 'calendar',
+          value: formatDate(this.aiCatalogFlow.createdAt, 'mmmm d, yyyy'),
+        },
+        {
+          text: __('Modified'),
+          icon: 'clock',
+          value: this.timeFormatted(this.latestUpdatedAt),
+          condition: this.latestUpdatedAt !== this.aiCatalogFlow.createdAt,
+        },
+      ];
+    },
   },
   mounted() {
     this.trackEvent(TRACK_EVENT_VIEW_AI_CATALOG_ITEM, {
@@ -161,6 +183,11 @@ export default {
         />
       </template>
     </page-heading>
-    <ai-catalog-flow-details :item="aiCatalogFlow" />
+    <div class="gl-flex gl-flex-col gl-gap-5 @md:gl-flex-row">
+      <ai-catalog-flow-details :item="aiCatalogFlow" />
+      <div class="gl-shrink-0">
+        <ai-catalog-item-metadata :items="flowMetadata" />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/ai/catalog/utils.js b/ee/app/assets/javascripts/ai/catalog/utils.js
index 1bcf1e04efa70c..c77d574976c355 100644
--- a/ee/app/assets/javascripts/ai/catalog/utils.js
+++ b/ee/app/assets/javascripts/ai/catalog/utils.js
@@ -12,6 +12,7 @@ export const mapSteps = (steps) =>
 export const prerequisitesPath = helpPagePath('user/duo_agent_platform/ai_catalog', {
   anchor: 'view-the-ai-catalog',
 });
+
 export const prerequisitesError = (message) => {
   return sprintf(
     message,
@@ -22,3 +23,9 @@ export const prerequisitesError = (message) => {
     false,
   );
 };
+
+export const getLatestUpdatedAt = (item) => {
+  return item.latestVersion.updatedAt > item.updatedAt
+    ? item.latestVersion.updatedAt
+    : item.updatedAt;
+};
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_item_metadata_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_item_metadata_spec.js
new file mode 100644
index 00000000000000..a49dc578f8da4d
--- /dev/null
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_item_metadata_spec.js
@@ -0,0 +1,123 @@
+import { GlIcon } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { stubComponent } from 'helpers/stub_component';
+import AiCatalogItemMetadata from 'ee/ai/catalog/components/ai_catalog_item_metadata.vue';
+
+describe('AiCatalogItemMetadata', () => {
+  let wrapper;
+
+  const defaultitems = [
+    {
+      text: 'Created on',
+      value: 'January 1, 2023',
+      icon: 'calendar',
+    },
+    {
+      text: 'Modified',
+      value: 'January 15, 2023',
+      icon: 'clock',
+    },
+  ];
+
+  const GlIconStub = stubComponent(GlIcon);
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMountExtended(AiCatalogItemMetadata, {
+      propsData: {
+        items: defaultitems,
+        ...props,
+      },
+      stubs: {
+        GlIcon: GlIconStub,
+      },
+    });
+  };
+
+  const findAllListItems = () => wrapper.findAll('li');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('value field visibility', () => {
+    it('should display the value field when provided', () => {
+      const listItems = findAllListItems();
+      expect(listItems).toHaveLength(2);
+      expect(listItems.at(0).text()).toContain('Created on January 1, 2023');
+      expect(listItems.at(1).text()).toContain('Modified January 15, 2023');
+    });
+
+    it('should not display a line item when its value is falsy', () => {
+      createComponent({
+        items: [
+          {
+            text: 'Created',
+            icon: 'calendar',
+            value: 'any value',
+          },
+          {
+            text: 'Modified',
+            icon: 'calendar',
+            value: '',
+          },
+        ],
+      });
+
+      const listItems = findAllListItems();
+      expect(listItems).toHaveLength(1);
+      expect(listItems.at(0).text()).toContain('Created');
+      expect(wrapper.text()).not.toContain('Modified');
+    });
+  });
+
+  describe('metadata config item conditions', () => {
+    it('should not display a field if the condition is defined and is false', () => {
+      createComponent({
+        items: [
+          {
+            value: 'any value',
+            icon: 'calendar',
+          },
+          {
+            value: 'any value 2',
+            icon: 'calendar',
+            condition: false,
+          },
+        ],
+      });
+
+      const listItems = findAllListItems();
+      expect(listItems).toHaveLength(1);
+      expect(listItems.at(0).text()).toContain('any value');
+      expect(wrapper.text()).not.toContain('any value 2');
+    });
+  });
+
+  describe('icon display', () => {
+    it('displays the specified icon when provided', () => {
+      const configsWithCustomIcon = [
+        {
+          icon: 'calendar',
+          value: 'some value',
+        },
+      ];
+
+      createComponent({
+        items: configsWithCustomIcon,
+      });
+
+      const icons = wrapper.findAllComponents(GlIcon);
+      expect(icons).toHaveLength(1);
+      expect(icons.at(0).props('name')).toBe('calendar');
+    });
+
+    it('displays correct icons for multiple fields', () => {
+      createComponent();
+
+      const icons = wrapper.findAllComponents(GlIcon);
+      expect(icons).toHaveLength(2);
+      expect(icons.at(0).props('name')).toBe('calendar');
+      expect(icons.at(1).props('name')).toBe('clock');
+    });
+  });
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 64e63d9952b879..aaf72f75fbf47f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3223,6 +3223,9 @@ msgstr ""
 msgid "Abort"
 msgstr ""
 
+msgid "About"
+msgstr ""
+
 msgid "About GitLab"
 msgstr ""
 
-- 
GitLab