From 23bbc5d68cf947701c471717d1b810b3d3bbcacd Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Mon, 29 Sep 2025 17:04:35 +0200
Subject: [PATCH 1/2] Add verification level to ai catalog list items and
 drawer

Remove link to help page
---
 .../components/verification_level.stories.js  |  44 +++++
 .../components/verification_level.vue         |  73 ++++++++
 .../components/ai_catalog_agent_details.vue   |   9 +-
 .../components/ai_catalog_flow_details.vue    |   9 +-
 .../components/ai_catalog_item_drawer.vue     |  14 +-
 .../components/ai_catalog_list_item.vue       |   7 +
 .../ai/catalog/components/verified_item.vue   |  39 +++++
 .../javascripts/ai/catalog/constants.js       |   4 +
 .../ai_catalog_item.fragment.graphql          |   1 +
 .../catalog/components/verified_item_spec.js  |  48 ++++++
 ee/spec/frontend/ai/catalog/mock_data.js      |   2 +
 locale/gitlab.pot                             |   6 +
 .../components/verification_level_spec.js     | 157 ++++++++++++++++++
 13 files changed, 405 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/verification_level.stories.js
 create mode 100644 app/assets/javascripts/vue_shared/components/verification_level.vue
 create mode 100644 ee/app/assets/javascripts/ai/catalog/components/verified_item.vue
 create mode 100644 ee/spec/frontend/ai/catalog/components/verified_item_spec.js
 create mode 100644 spec/frontend/vue_shared/components/verification_level_spec.js

diff --git a/app/assets/javascripts/vue_shared/components/verification_level.stories.js b/app/assets/javascripts/vue_shared/components/verification_level.stories.js
new file mode 100644
index 00000000000000..c0852dbf81b749
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/verification_level.stories.js
@@ -0,0 +1,44 @@
+import VerificationLevel from './verification_level.vue';
+
+export default {
+  component: VerificationLevel,
+  title: 'vue_shared/verification_level',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { VerificationLevel },
+  props: Object.keys(argTypes),
+  template: '<VerificationLevel v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'verification-badge-1',
+  iconName: 'tanuki-verified',
+  text: 'GitLab-maintained',
+  message: 'This component is maintained by %{boldStart}GitLab%{boldEnd}',
+  helpPath: {
+    path: '/help/ci/components/index#verified-component-creators',
+    text: 'Learn more about verified creators',
+  },
+};
+
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+  id: 'verification-badge-2',
+  iconName: 'tanuki-verified',
+  message: 'This component is maintained by %{boldStart}GitLab%{boldEnd}',
+  helpPath: {
+    path: '/help/ci/components/index#verified-component-creators',
+    text: 'Learn more about verified creators',
+  },
+};
+
+export const WithoutHelpLink = Template.bind({});
+WithoutHelpLink.args = {
+  id: 'verification-badge-3',
+  iconName: 'partner-verified',
+  text: 'Partner',
+  message: 'This component is maintained by %{boldStart}a GitLab partner%{boldEnd}',
+  helpPath: null,
+};
diff --git a/app/assets/javascripts/vue_shared/components/verification_level.vue b/app/assets/javascripts/vue_shared/components/verification_level.vue
new file mode 100644
index 00000000000000..1f2a515edc6ead
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/verification_level.vue
@@ -0,0 +1,73 @@
+<script>
+import { GlIcon, GlLink, GlPopover, GlSprintf } from '@gitlab/ui';
+import { GlBreakpointInstance } from '@gitlab/ui/src/utils';
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+    GlPopover,
+    GlSprintf,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    iconName: {
+      type: String,
+      required: true,
+    },
+    text: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    helpPath: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    isMobile() {
+      return ['sm', 'xs'].includes(GlBreakpointInstance.getBreakpointSize());
+    },
+    popoverPlacement() {
+      return this.isMobile ? 'bottom' : 'right';
+    },
+    popoverTarget() {
+      return `${this.id}-verification-icon`;
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <span :id="popoverTarget">
+      <gl-icon :name="iconName" class="gl-ml-1 gl-text-blue-500" />
+      <span v-if="text" class="gl-cursor-default gl-font-bold gl-text-blue-500">
+        {{ text }}
+      </span>
+    </span>
+    <gl-popover :target="popoverTarget" triggers="hover focus" :placement="popoverPlacement">
+      <div class="gl-flex gl-flex-col gl-gap-4">
+        <span>
+          <gl-sprintf :message="message">
+            <template #bold="{ content }">
+              <strong>{{ content }}</strong>
+            </template>
+          </gl-sprintf>
+        </span>
+        <gl-link v-if="helpPath" :href="helpPath.path" target="_blank">
+          {{ helpPath.text }}.
+        </gl-link>
+      </div>
+    </gl-popover>
+  </span>
+</template>
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 10a732e3155ff5..60436abd3cc383 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
@@ -34,9 +34,12 @@ export default {
 
 <template>
   <div>
-    <h3 class="gl-heading-3 gl-mb-4 gl-mt-0 gl-font-semibold">
-      {{ s__('AICatalog|Agent configuration') }}
-    </h3>
+    <div class="gl-flex gl-items-center gl-justify-between">
+      <h3 class="gl-heading-3 gl-mb-4 gl-mt-0 gl-font-semibold">
+        {{ s__('AICatalog|Agent configuration') }}
+      </h3>
+      <slot name="verified-item"></slot>
+    </div>
     <dl class="gl-flex gl-flex-col gl-gap-5">
       <form-section :title="s__('AICatalog|Basic information')">
         <ai-catalog-item-field :title="s__('AICatalog|Display name')" :value="item.name" />
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 eccd31909bbb80..1848fafb99dd2a 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
@@ -31,9 +31,12 @@ export default {
 
 <template>
   <div>
-    <h3 class="gl-heading-3 gl-mb-4 gl-mt-0 gl-font-semibold">
-      {{ s__('AICatalog|Flow configuration') }}
-    </h3>
+    <div class="gl-flex gl-items-center gl-justify-between">
+      <h3 class="gl-heading-3 gl-mb-4 gl-mt-0 gl-font-semibold">
+        {{ s__('AICatalog|Flow configuration') }}
+      </h3>
+      <slot name="verified-item"></slot>
+    </div>
     <dl class="gl-flex gl-flex-col gl-gap-5">
       <form-section :title="s__('AICatalog|Basic information')">
         <ai-catalog-item-field :title="s__('AICatalog|Display name')" :value="item.name" />
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_drawer.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_drawer.vue
index a17814ceb831d0..ad1a3f041263b2 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_drawer.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_drawer.vue
@@ -6,6 +6,7 @@ import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
 import { AI_CATALOG_TYPE_AGENT, AI_CATALOG_TYPE_FLOW } from '../constants';
 import AiCatalogAgentDetails from './ai_catalog_agent_details.vue';
 import AiCatalogFlowDetails from './ai_catalog_flow_details.vue';
+import VerifiedItem from './verified_item.vue';
 
 const DETAILS_COMPONENT_MAP = {
   [AI_CATALOG_TYPE_AGENT]: AiCatalogAgentDetails,
@@ -21,6 +22,7 @@ export default {
     GlLoadingIcon,
     GlButton,
     GlDrawer,
+    VerifiedItem,
   },
   props: {
     isOpen: {
@@ -70,7 +72,7 @@ export default {
     @close="$emit('close')"
   >
     <template #title>
-      <div class="gl-flex gl-w-full gl-items-center gl-gap-x-4 @xl/panel:gl-px-4">
+      <div class="gl-flex gl-items-center gl-gap-x-4 @xl/panel:gl-px-4">
         <h2 class="gl-m-0">
           {{ activeItem.name }}
         </h2>
@@ -89,7 +91,15 @@ export default {
     <template #default>
       <div class="@xl/panel:!gl-px-6">
         <gl-loading-icon v-if="isItemDetailsLoading" size="lg" class="gl-my-5" />
-        <component :is="detailsComponent" :key="activeItem.id" :item="activeItem" />
+        <component :is="detailsComponent" v-else :key="activeItem.id" :item="activeItem">
+          <template #verified-item>
+            <verified-item
+              v-if="activeItem.verificationLevel !== null"
+              :item-id="`${activeItem.id}-drawer`"
+              show-text
+            />
+          </template>
+        </component>
       </div>
     </template>
   </gl-drawer>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_list_item.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_list_item.vue
index 59f7db228ae2c8..4becac2a8c0ea2 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_list_item.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_list_item.vue
@@ -19,6 +19,8 @@ import {
   TIMESTAMP_TYPE_CREATED_AT,
 } from '~/vue_shared/components/resource_lists/constants';
 import { AI_CATALOG_SHOW_QUERY_PARAM } from '../router/constants';
+import { VERIFICATION_LEVELS } from '../constants';
+import VerifiedItem from './verified_item.vue';
 
 export default {
   name: 'AiCatalogListItem',
@@ -28,6 +30,7 @@ export default {
     GlDisclosureDropdownItem,
     GlIcon,
     ListItem,
+    VerifiedItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -98,6 +101,9 @@ export default {
     visibilityTooltip() {
       return this.itemTypeConfig.visibilityTooltip?.[this.visibilityLevel];
     },
+    isVerified() {
+      return this.item.verificationLevel === VERIFICATION_LEVELS.GITLAB_VERIFIED;
+    },
   },
   methods: {
     onClickAvatar(event) {
@@ -132,6 +138,7 @@ export default {
         :title="visibilityTooltip"
         variant="subtle"
       />
+      <verified-item v-if="isVerified" :item-id="item.id" />
     </template>
     <template #actions>
       <gl-disclosure-dropdown
diff --git a/ee/app/assets/javascripts/ai/catalog/components/verified_item.vue b/ee/app/assets/javascripts/ai/catalog/components/verified_item.vue
new file mode 100644
index 00000000000000..2ee7c11d1efd6e
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/catalog/components/verified_item.vue
@@ -0,0 +1,39 @@
+<script>
+import { uniqueId } from 'lodash';
+import { s__ } from '~/locale';
+import VerificationLevel from '~/vue_shared/components/verification_level.vue';
+
+export default {
+  components: {
+    VerificationLevel,
+  },
+  props: {
+    itemId: {
+      type: String,
+      required: true,
+    },
+    showText: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  computed: {
+    id() {
+      return uniqueId(`verified-item-${this.itemId}`);
+    },
+    text() {
+      return this.showText ? s__('AICatalog|GitLab-maintained') : '';
+    },
+  },
+};
+</script>
+
+<template>
+  <verification-level
+    :id="id"
+    :message="s__('AICatalog|Created and maintained by %{boldStart}GitLab%{boldEnd}')"
+    :text="text"
+    icon-name="tanuki-verified"
+  />
+</template>
diff --git a/ee/app/assets/javascripts/ai/catalog/constants.js b/ee/app/assets/javascripts/ai/catalog/constants.js
index 0dfd430a8c0b8c..8da5a3a742c8ac 100644
--- a/ee/app/assets/javascripts/ai/catalog/constants.js
+++ b/ee/app/assets/javascripts/ai/catalog/constants.js
@@ -11,6 +11,10 @@ export const AI_CATALOG_ITEM_LABELS = {
   [AI_CATALOG_TYPE_AGENT]: s__('AICatalog|agent'),
   [AI_CATALOG_TYPE_FLOW]: s__('AICatalog|flow'),
 };
+export const VERIFICATION_LEVELS = {
+  GITLAB_MAINTAINED: 'GITLAB_MAINTAINED',
+  UNVERIFIED: 'unverified',
+};
 
 export const PAGE_SIZE = 20;
 
diff --git a/ee/app/assets/javascripts/ai/catalog/graphql/fragments/ai_catalog_item.fragment.graphql b/ee/app/assets/javascripts/ai/catalog/graphql/fragments/ai_catalog_item.fragment.graphql
index b3b293a87b2a52..9eb5bf021faa69 100644
--- a/ee/app/assets/javascripts/ai/catalog/graphql/fragments/ai_catalog_item.fragment.graphql
+++ b/ee/app/assets/javascripts/ai/catalog/graphql/fragments/ai_catalog_item.fragment.graphql
@@ -6,6 +6,7 @@ fragment BaseAiCatalogItem on AiCatalogItem {
   name
   public
   updatedAt
+  verificationLevel
   latestVersion {
     id
     updatedAt
diff --git a/ee/spec/frontend/ai/catalog/components/verified_item_spec.js b/ee/spec/frontend/ai/catalog/components/verified_item_spec.js
new file mode 100644
index 00000000000000..2fc660f556e868
--- /dev/null
+++ b/ee/spec/frontend/ai/catalog/components/verified_item_spec.js
@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+import VerifiedItem from 'ee/ai/catalog/components/verified_item.vue';
+import VerificationLevel from '~/vue_shared/components/verification_level.vue';
+
+describe('VerifiedItem', () => {
+  let wrapper;
+
+  const defaultProps = {
+    itemId: 'test-item-123',
+    showText: true,
+  };
+
+  const findVerificationLevel = () => wrapper.findComponent(VerificationLevel);
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(VerifiedItem, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('if showText is true', () => {
+    it('passes the text if showText is true', () => {
+      expect(findVerificationLevel().props('text')).toBe('GitLab-maintained');
+    });
+  });
+
+  describe('if showText is false', () => {
+    beforeEach(() => {
+      createComponent({ showText: false });
+    });
+
+    it('passes the text if showText is true', () => {
+      expect(findVerificationLevel().props('text')).toBe('');
+    });
+  });
+
+  it('generates a unique id based on itemId', () => {
+    const id = findVerificationLevel().props('id');
+    expect(id).toContain('verified-item-test-item-123');
+  });
+});
diff --git a/ee/spec/frontend/ai/catalog/mock_data.js b/ee/spec/frontend/ai/catalog/mock_data.js
index 4cbb18aa8fdc98..d3bca3c39c7db7 100644
--- a/ee/spec/frontend/ai/catalog/mock_data.js
+++ b/ee/spec/frontend/ai/catalog/mock_data.js
@@ -119,6 +119,7 @@ const mockAgentFactory = (overrides = {}) => ({
   public: true,
   updatedAt: '2024-08-21T14:30:00Z',
   latestVersion: mockBaseLatestVersion,
+  verificationLevel: 'unverified',
   userPermissions: {
     adminAiCatalogItem: true,
   },
@@ -323,6 +324,7 @@ const mockFlowFactory = (overrides = {}) => ({
   public: true,
   updatedAt: '2024-08-21T14:30:00Z',
   latestVersion: mockBaseLatestVersion,
+  verificationLevel: 'unverified',
   userPermissions: {
     adminAiCatalogItem: true,
   },
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 10f7c9e4ad874d..33254a27524391 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2573,6 +2573,9 @@ msgstr ""
 msgid "AICatalog|Create flow"
 msgstr ""
 
+msgid "AICatalog|Created and maintained by %{boldStart}GitLab%{boldEnd}"
+msgstr ""
+
 msgid "AICatalog|Define the agent's personality, expertise, and behavioral guidelines. This shapes how the agent responds and approaches tasks."
 msgstr ""
 
@@ -2675,6 +2678,9 @@ msgstr ""
 msgid "AICatalog|Get started with the AI Catalog"
 msgstr ""
 
+msgid "AICatalog|GitLab-maintained"
+msgstr ""
+
 msgid "AICatalog|Input cannot exceed %{value} characters. Please shorten your input."
 msgstr ""
 
diff --git a/spec/frontend/vue_shared/components/verification_level_spec.js b/spec/frontend/vue_shared/components/verification_level_spec.js
new file mode 100644
index 00000000000000..72fffde48b2d75
--- /dev/null
+++ b/spec/frontend/vue_shared/components/verification_level_spec.js
@@ -0,0 +1,157 @@
+import { GlIcon, GlLink, GlPopover, GlSprintf } from '@gitlab/ui';
+import { GlBreakpointInstance } from '@gitlab/ui/src/utils';
+import { shallowMount } from '@vue/test-utils';
+import VerificationLevel from '~/vue_shared/components/verification_level.vue';
+
+describe('VerificationLevel', () => {
+  let wrapper;
+
+  const defaultProps = {
+    id: 'test-resource-id',
+    text: 'GitLab',
+    message: 'This is maintained by %{bold}GitLab%{/bold}',
+    showText: true,
+    iconName: 'tanuki-verified',
+    helpPath: {
+      path: '/help/ci/components/index#verified-component-creators',
+      text: 'Learn more about verified creators',
+    },
+  };
+
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findPopover = () => wrapper.findComponent(GlPopover);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findSprintf = () => wrapper.findComponent(GlSprintf);
+  const findBadgeText = () => wrapper.find('span.gl-cursor-default');
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(VerificationLevel, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders the verification icon', () => {
+      expect(findIcon().exists()).toBe(true);
+      expect(findIcon().props('name')).toBe(defaultProps.iconName);
+    });
+
+    it('renders the popover', () => {
+      expect(findPopover().exists()).toBe(true);
+    });
+
+    it('sets the correct popover target', () => {
+      expect(findPopover().props('target')).toBe(`${defaultProps.id}-verification-icon`);
+    });
+
+    it('renders GlSprintf with the message', () => {
+      expect(findSprintf().exists()).toBe(true);
+      expect(findSprintf().attributes('message')).toBe(defaultProps.message);
+    });
+  });
+
+  describe('badge text', () => {
+    describe('when showText is true', () => {
+      beforeEach(() => {
+        createComponent({ showText: true });
+      });
+
+      it('renders the badge text', () => {
+        expect(findBadgeText().exists()).toBe(true);
+        expect(findBadgeText().text()).toBe(defaultProps.text);
+      });
+    });
+
+    describe('when showText is false', () => {
+      beforeEach(() => {
+        createComponent({ showText: false });
+      });
+
+      it('does not render the badge text', () => {
+        expect(findBadgeText().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('help link', () => {
+    describe('when helpPath is provided', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('sets the correct href', () => {
+        expect(findLink().attributes('href')).toBe(defaultProps.helpPath.path);
+      });
+
+      it('opens link in new tab', () => {
+        expect(findLink().attributes('target')).toBe('_blank');
+      });
+
+      it('displays the correct link text', () => {
+        expect(findLink().text()).toBe(`${defaultProps.helpPath.text}.`);
+      });
+    });
+
+    describe('when helpPath is null', () => {
+      beforeEach(() => {
+        createComponent({ helpPath: null });
+      });
+
+      it('does not render the help link', () => {
+        expect(findLink().exists()).toBe(false);
+      });
+    });
+
+    describe('when helpPath is not provided', () => {
+      beforeEach(() => {
+        createComponent({ helpPath: undefined });
+      });
+
+      it('does not render the help link', () => {
+        expect(findLink().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('popover placement', () => {
+    describe('on desktop', () => {
+      beforeEach(() => {
+        jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockReturnValue('md');
+        createComponent();
+      });
+
+      it('sets placement to right', () => {
+        expect(findPopover().props('placement')).toBe('right');
+      });
+    });
+
+    describe('on mobile (xs)', () => {
+      beforeEach(() => {
+        jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockReturnValue('xs');
+        createComponent();
+      });
+
+      it('sets placement to bottom', () => {
+        expect(findPopover().props('placement')).toBe('bottom');
+      });
+    });
+
+    describe('on mobile (sm)', () => {
+      beforeEach(() => {
+        jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockReturnValue('sm');
+        createComponent();
+      });
+
+      it('sets placement to bottom', () => {
+        expect(findPopover().props('placement')).toBe('bottom');
+      });
+    });
+  });
+});
-- 
GitLab


From a8d63b005d341185fcadcb19d86a5445fd0fd998 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Tue, 30 Sep 2025 14:51:23 +0200
Subject: [PATCH 2/2] Use vue_shared component in CI Catalog

---
 .../shared/ci_verification_badge.vue          | 64 +++++--------------
 .../shared/ci_verification_badge_spec.js      | 40 ++++++------
 .../components/verification_level_spec.js     | 25 --------
 3 files changed, 39 insertions(+), 90 deletions(-)

diff --git a/app/assets/javascripts/ci/catalog/components/shared/ci_verification_badge.vue b/app/assets/javascripts/ci/catalog/components/shared/ci_verification_badge.vue
index 325a80fd3c7cb7..4456b15c5233cc 100644
--- a/app/assets/javascripts/ci/catalog/components/shared/ci_verification_badge.vue
+++ b/app/assets/javascripts/ci/catalog/components/shared/ci_verification_badge.vue
@@ -1,7 +1,6 @@
 <script>
-import { GlIcon, GlLink, GlPopover, GlSprintf } from '@gitlab/ui';
-import { GlBreakpointInstance } from '@gitlab/ui/src/utils';
 import { s__ } from '~/locale';
+import VerificationLevel from '~/vue_shared/components/verification_level.vue';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import {
   VERIFICATION_LEVELS,
@@ -17,15 +16,9 @@ export default {
       'CiCatalog|Learn more about verified creators on GitLab Self-Managed or GitLab Dedicated.',
     ),
   },
-  verificationHelpPagePath: helpPagePath('ci/components/_index', {
-    anchor: 'verified-component-creators',
-  }),
   verificationLevelOptions: VERIFICATION_LEVELS,
   components: {
-    GlIcon,
-    GlLink,
-    GlPopover,
-    GlSprintf,
+    VerificationLevel,
   },
   props: {
     resourceId: {
@@ -43,8 +36,8 @@ export default {
     },
   },
   computed: {
-    isMobile() {
-      return ['sm', 'xs'].includes(GlBreakpointInstance.getBreakpointSize());
+    text() {
+      return this.showText ? VERIFICATION_LEVELS[this.verificationLevel].badgeText : '';
     },
     popoverLink() {
       if (this.verificationLevel === VERIFICATION_LEVEL_VERIFIED_CREATOR_MAINTAINED) {
@@ -55,46 +48,23 @@ export default {
       }
       return this.$options.i18n.verificationLevelPopoverLink;
     },
-    popoverPlacement() {
-      return this.isMobile ? 'bottom' : 'right';
-    },
-    popoverTarget() {
-      return `${this.resourceId}-verification-icon`;
+    helpPath() {
+      return {
+        path: helpPagePath('ci/components/_index', {
+          anchor: 'verified-component-creators',
+        }),
+        text: this.popoverLink,
+      };
     },
   },
 };
 </script>
 
 <template>
-  <span>
-    <span :id="popoverTarget">
-      <gl-icon
-        class="gl-ml-1 gl-text-blue-500"
-        :name="$options.verificationLevelOptions[verificationLevel].icon"
-      />
-      <span
-        v-if="showText"
-        data-testid="verification-badge-text"
-        class="gl-cursor-default gl-font-bold gl-text-blue-500"
-      >
-        {{ $options.verificationLevelOptions[verificationLevel].badgeText }}
-      </span>
-    </span>
-    <gl-popover :target="popoverTarget" triggers="hover focus" :placement="popoverPlacement">
-      <div class="gl-flex gl-flex-col gl-gap-4">
-        <span>
-          <gl-sprintf :message="$options.verificationLevelOptions[verificationLevel].popoverText">
-            <template #bold="{ content }">
-              <strong>
-                {{ content }}
-              </strong>
-            </template>
-          </gl-sprintf>
-        </span>
-        <gl-link :href="$options.verificationHelpPagePath" target="_blank">
-          {{ popoverLink }}
-        </gl-link>
-      </div>
-    </gl-popover>
-  </span>
+  <verification-level
+    :id="resourceId"
+    :text="text"
+    :message="$options.verificationLevelOptions[verificationLevel].popoverText"
+    :help-path="helpPath"
+  />
 </template>
diff --git a/spec/frontend/ci/catalog/components/shared/ci_verification_badge_spec.js b/spec/frontend/ci/catalog/components/shared/ci_verification_badge_spec.js
index 0b60530662d49a..f6baa694e0d154 100644
--- a/spec/frontend/ci/catalog/components/shared/ci_verification_badge_spec.js
+++ b/spec/frontend/ci/catalog/components/shared/ci_verification_badge_spec.js
@@ -1,7 +1,7 @@
-import { GlIcon, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import CiVerificationBadge from '~/ci/catalog/components/shared/ci_verification_badge.vue';
+import VerificationLevel from '~/vue_shared/components/verification_level.vue';
 import { VERIFICATION_LEVELS } from '~/ci/catalog/constants';
 
 describe('Catalog Verification Badge', () => {
@@ -13,9 +13,7 @@ describe('Catalog Verification Badge', () => {
     verificationLevel: 'GITLAB_MAINTAINED',
   };
 
-  const findVerificationIcon = () => wrapper.findComponent(GlIcon);
-  const findLink = () => wrapper.findComponent(GlLink);
-  const findVerificationText = () => wrapper.findByTestId('verification-badge-text');
+  const findVerificationLevel = () => wrapper.findComponent(VerificationLevel);
 
   const createComponent = (props = defaultProps) => {
     wrapper = extendedWrapper(
@@ -32,12 +30,12 @@ describe('Catalog Verification Badge', () => {
       createComponent();
     });
 
-    it('renders an icon', () => {
-      expect(findVerificationIcon().exists()).toBe(true);
+    it('renders the VerificationLevel component', () => {
+      expect(findVerificationLevel().exists()).toBe(true);
     });
 
-    it('renders a link', () => {
-      expect(findLink().exists()).toBe(true);
+    it('passes the correct resourceId prop', () => {
+      expect(findVerificationLevel().props('id')).toBe(defaultProps.resourceId);
     });
   });
 
@@ -47,8 +45,8 @@ describe('Catalog Verification Badge', () => {
         createComponent();
       });
 
-      it('renders badge text', () => {
-        expect(findVerificationText().exists()).toBe(true);
+      it('passes the text to VerificationLevel', () => {
+        expect(findVerificationLevel().props('text')).toBeDefined();
       });
     });
 
@@ -57,8 +55,8 @@ describe('Catalog Verification Badge', () => {
         createComponent({ ...defaultProps, showText: false });
       });
 
-      it('does not render badge text', () => {
-        expect(findVerificationText().exists()).toBe(false);
+      it('does not pass the text to VerificationLevel', () => {
+        expect(findVerificationLevel().props('text')).toBe('');
       });
     });
   });
@@ -74,16 +72,22 @@ describe('Catalog Verification Badge', () => {
       createComponent({ ...defaultProps, verificationLevel });
     });
 
-    it('renders the correct icon', () => {
-      expect(findVerificationIcon().props('name')).toBe(
-        VERIFICATION_LEVELS[verificationLevel].icon,
+    it('passes the correct text prop', () => {
+      expect(findVerificationLevel().props('text')).toBe(
+        VERIFICATION_LEVELS[verificationLevel].badgeText,
       );
     });
 
-    it('displays the correct badge text', () => {
-      expect(findVerificationText().text()).toContain(
-        VERIFICATION_LEVELS[verificationLevel].badgeText,
+    it('passes the correct message prop', () => {
+      expect(findVerificationLevel().props('message')).toBe(
+        VERIFICATION_LEVELS[verificationLevel].popoverText,
       );
     });
+
+    it('passes the helpPath object with correct structure', () => {
+      const helpPath = findVerificationLevel().props('helpPath');
+      expect(helpPath).toHaveProperty('path');
+      expect(helpPath).toHaveProperty('text');
+    });
   });
 });
diff --git a/spec/frontend/vue_shared/components/verification_level_spec.js b/spec/frontend/vue_shared/components/verification_level_spec.js
index 72fffde48b2d75..221a3080a14367 100644
--- a/spec/frontend/vue_shared/components/verification_level_spec.js
+++ b/spec/frontend/vue_shared/components/verification_level_spec.js
@@ -10,7 +10,6 @@ describe('VerificationLevel', () => {
     id: 'test-resource-id',
     text: 'GitLab',
     message: 'This is maintained by %{bold}GitLab%{/bold}',
-    showText: true,
     iconName: 'tanuki-verified',
     helpPath: {
       path: '/help/ci/components/index#verified-component-creators',
@@ -22,7 +21,6 @@ describe('VerificationLevel', () => {
   const findPopover = () => wrapper.findComponent(GlPopover);
   const findLink = () => wrapper.findComponent(GlLink);
   const findSprintf = () => wrapper.findComponent(GlSprintf);
-  const findBadgeText = () => wrapper.find('span.gl-cursor-default');
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(VerificationLevel, {
@@ -57,29 +55,6 @@ describe('VerificationLevel', () => {
     });
   });
 
-  describe('badge text', () => {
-    describe('when showText is true', () => {
-      beforeEach(() => {
-        createComponent({ showText: true });
-      });
-
-      it('renders the badge text', () => {
-        expect(findBadgeText().exists()).toBe(true);
-        expect(findBadgeText().text()).toBe(defaultProps.text);
-      });
-    });
-
-    describe('when showText is false', () => {
-      beforeEach(() => {
-        createComponent({ showText: false });
-      });
-
-      it('does not render the badge text', () => {
-        expect(findBadgeText().exists()).toBe(false);
-      });
-    });
-  });
-
   describe('help link', () => {
     describe('when helpPath is provided', () => {
       beforeEach(() => {
-- 
GitLab