From 8eedb29a5ce0cdc2b2896bea857a4e5450d103a1 Mon Sep 17 00:00:00 2001
From: Brian Williams <bwilliams@gitlab.com>
Date: Wed, 15 Oct 2025 15:39:42 -0500
Subject: [PATCH 1/5] Auto-show focused vulnerabilities popover

Show the popover automatically if it hasn't been dismissed before. This
change is done out of a concern that users may be concerned why there
are fewer vulnerabilities but cannot find the popover.
---
 .../components/dependencies_table.vue         | 13 +---
 .../components/vulnerabilities_popover.vue    | 65 +++++++++++++++++++
 .../javascripts/dependencies/constants.js     |  1 +
 .../components/dependencies_table_spec.js     | 15 ++---
 .../vulnerabilities_popover_spec.js           | 50 ++++++++++++++
 locale/gitlab.pot                             |  3 +
 6 files changed, 126 insertions(+), 21 deletions(-)
 create mode 100644 ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
 create mode 100644 ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js

diff --git a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
index cade22c41b5347..940a59f5bd087b 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
@@ -18,6 +18,7 @@ import DependencyLocationCount from './dependency_location_count.vue';
 import DependencyProjectCount from './dependency_project_count.vue';
 import DependencyVulnerabilities from './dependency_vulnerabilities.vue';
 import DependencyPathDrawer from './dependency_path_drawer.vue';
+import VulnerabilitiesPopover from './vulnerabilities_popover.vue';
 
 const tdClass =
   (defaultClasses = []) =>
@@ -55,6 +56,7 @@ export default {
     DependencyLocationCount,
     DependencyProjectCount,
     DependencyPathDrawer,
+    VulnerabilitiesPopover,
     GlBadge,
     GlIcon,
     GlButton,
@@ -215,16 +217,7 @@ export default {
 
       <template #head(isVulnerable)="data">
         {{ data.label }}
-        <gl-icon id="vulnerabilities-info" name="information-o" class="gl-ml-2" variant="info" />
-        <gl-popover
-          placement="bottom"
-          boundary="viewport"
-          target="vulnerabilities-info"
-          data-testid="vulnerability-info-popover"
-          :title="$options.i18n.vulnerabilityInfoTitle"
-        >
-          <p class="gl-mb-0">{{ $options.i18n.vulnerabilityInfoBody }}</p>
-        </gl-popover>
+        <vulnerabilities-popover />
       </template>
 
       <!-- toggleDetails and detailsShowing are scoped slot props provided by
diff --git a/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
new file mode 100644
index 00000000000000..5e4bd68aa9dfdf
--- /dev/null
+++ b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
@@ -0,0 +1,65 @@
+<script>
+import { GlButton, GlIcon, GlPopover } from '@gitlab/ui';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import { DEPENDENCIES_TABLE_I18N } from '../constants';
+
+export default {
+  name: 'VulnerabilitiesPopover',
+  components: {
+    LocalStorageSync,
+    GlButton,
+    GlIcon,
+    GlPopover,
+  },
+  props: {},
+  data() {
+    return {
+      popoverDismissed: false,
+    };
+  },
+  computed: {
+    showPopover() {
+      return !this.popoverDismissed;
+    },
+  },
+  methods: {
+    setPopoverDismissed(value) {
+      this.popoverDismissed = value;
+    },
+  },
+  i18n: DEPENDENCIES_TABLE_I18N,
+};
+</script>
+
+<template>
+  <local-storage-sync
+    :value="popoverDismissed"
+    storage-key="dl-shown-vulnerabilities-popover-disabled"
+    @input="setPopoverDismissed"
+  >
+    <div>
+      <gl-icon id="vulnerabilities-info" name="information-o" class="gl-ml-2" variant="info" />
+      <gl-popover
+        placement="bottom"
+        boundary="viewport"
+        target="vulnerabilities-info"
+        data-testid="vulnerability-info-popover"
+        :show="showPopover"
+        :title="$options.i18n.vulnerabilityInfoTitle"
+      >
+        <p class="gl-mb-0">{{ $options.i18n.vulnerabilityInfoBody }}</p>
+        <div class="gl-mt-3 gl-text-right">
+          <gl-button
+            v-if="showPopover"
+            data-testid="dismiss-button"
+            category="primary"
+            variant="confirm"
+            @click="setPopoverDismissed(true)"
+          >
+            {{ $options.i18n.vulnerabilityInfoDismissButtonText }}
+          </gl-button>
+        </div>
+      </gl-popover>
+    </div>
+  </local-storage-sync>
+</template>
diff --git a/ee/app/assets/javascripts/dependencies/constants.js b/ee/app/assets/javascripts/dependencies/constants.js
index 0f1c6b2f6486f1..1dad9f4e119aa7 100644
--- a/ee/app/assets/javascripts/dependencies/constants.js
+++ b/ee/app/assets/javascripts/dependencies/constants.js
@@ -27,4 +27,5 @@ export const DEPENDENCIES_TABLE_I18N = {
   vulnerabilityInfoBody: s__(
     'Dependencies|The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
   ),
+  vulnerabilityInfoDismissButtonText: s__("Dependencies|Don't show again"),
 };
diff --git a/ee/spec/frontend/dependencies/components/dependencies_table_spec.js b/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
index c2dc65137af090..1cde31881f1bab 100644
--- a/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
+++ b/ee/spec/frontend/dependencies/components/dependencies_table_spec.js
@@ -7,6 +7,7 @@ import DependencyVulnerabilities from 'ee/dependencies/components/dependency_vul
 import DependencyLocationCount from 'ee/dependencies/components/dependency_location_count.vue';
 import DependencyProjectCount from 'ee/dependencies/components/dependency_project_count.vue';
 import DependencyLocation from 'ee/dependencies/components/dependency_location.vue';
+import VulnerabilitiesPopover from 'ee/dependencies/components/vulnerabilities_popover.vue';
 import { DEPENDENCIES_TABLE_I18N } from 'ee/dependencies/constants';
 import stubChildren from 'helpers/stub_children';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -52,8 +53,7 @@ describe('DependenciesTable component', () => {
   const findDependencyPathDrawer = () => wrapper.findComponent(DependencyPathDrawer);
   const findDependencyLicenseLinks = (licenseCell) =>
     licenseCell.findComponent(DependencyLicenseLinks);
-  const findVulnerabilityInfoIcon = () => wrapper.find('#vulnerabilities-info');
-  const findVulnerabilityInfoPopover = () => wrapper.findByTestId('vulnerability-info-popover');
+  const findVulnerabilityPopover = () => wrapper.findComponent(VulnerabilitiesPopover);
   const normalizeWhitespace = (string) => string.replace(/\s+/g, ' ');
   const loadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const sharedExpectations = (rowWrapper, dependency) => {
@@ -176,15 +176,8 @@ describe('DependenciesTable component', () => {
         });
       });
 
-      it('renders vulnerability info icon and popover', () => {
-        expect(findVulnerabilityInfoIcon().exists()).toBe(true);
-        expect(findVulnerabilityInfoPopover().exists()).toBe(true);
-        expect(findVulnerabilityInfoPopover().props('title')).toBe(
-          DEPENDENCIES_TABLE_I18N.vulnerabilityInfoTitle,
-        );
-        expect(findVulnerabilityInfoPopover().text()).toBe(
-          DEPENDENCIES_TABLE_I18N.vulnerabilityInfoBody,
-        );
+      it('renders vulnerability popover', () => {
+        expect(findVulnerabilityPopover().exists()).toBe(true);
       });
 
       it('renders a message that there are no records to show', () => {
diff --git a/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
new file mode 100644
index 00000000000000..4925f984a7ff70
--- /dev/null
+++ b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
@@ -0,0 +1,50 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import VulnerabilitiesPopover from 'ee/dependencies/components/vulnerabilities_popover.vue';
+import { DEPENDENCIES_TABLE_I18N } from 'ee/dependencies/constants';
+
+describe('VulnerabilitiesPopover component', () => {
+  let wrapper;
+
+  const createWrapper = ({ propsData } = {}) =>
+    shallowMountExtended(VulnerabilitiesPopover, {
+      propsData: {
+        popoverDismissed: false,
+        ...propsData,
+      },
+    });
+
+  const findVulnerabilityInfoIcon = () => wrapper.find('#vulnerabilities-info');
+  const findVulnerabilityInfoPopover = () => wrapper.findByTestId('vulnerability-info-popover');
+  const findDismissButton = () => wrapper.findByTestId('dismiss-button');
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  it('renders vulnerability info icon and popover', () => {
+    expect(findVulnerabilityInfoIcon().exists()).toBe(true);
+    expect(findVulnerabilityInfoPopover().exists()).toBe(true);
+    expect(findVulnerabilityInfoPopover().props('title')).toBe(
+      DEPENDENCIES_TABLE_I18N.vulnerabilityInfoTitle,
+    );
+    expect(findVulnerabilityInfoPopover().text()).toContain(
+      DEPENDENCIES_TABLE_I18N.vulnerabilityInfoBody,
+    );
+  });
+
+  it('shows popover and dismiss button', () => {
+    expect(findVulnerabilityInfoPopover().props('show')).toBe(true);
+    expect(findDismissButton().exists()).toBe(true);
+  });
+
+  describe('when popover has been dismissed', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ popoverDismissed: true });
+    });
+
+    it('does not show popover or dismiss button', () => {
+      expect(findVulnerabilityInfoPopover().props('show')).toBe(false);
+      expect(findDismissButton().exists()).toBe(false);
+    });
+  });
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bec4c040368ac8..8894653810b97b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -22670,6 +22670,9 @@ msgstr ""
 msgid "Dependencies|Direct dependents"
 msgstr ""
 
+msgid "Dependencies|Don't show again"
+msgstr ""
+
 msgid "Dependencies|Enter at least 2 characters to view available components."
 msgstr ""
 
-- 
GitLab


From 0f7e8028145fb9f226e1cd9ec92eb8ed389e24c4 Mon Sep 17 00:00:00 2001
From: Brian Williams <bwilliams@gitlab.com>
Date: Tue, 21 Oct 2025 15:05:46 -0500
Subject: [PATCH 2/5] Remove externalized strings from constants

---
 .../components/vulnerabilities_popover.vue      | 17 +++++++++++------
 .../javascripts/dependencies/constants.js       |  5 -----
 .../components/vulnerabilities_popover_spec.js  |  8 +++-----
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
index 5e4bd68aa9dfdf..e3f9c5a229b29f 100644
--- a/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
+++ b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlIcon, GlPopover } from '@gitlab/ui';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { DEPENDENCIES_TABLE_I18N } from '../constants';
+import { __, s__ } from '~/locale';
 
 export default {
   name: 'VulnerabilitiesPopover',
@@ -27,7 +27,6 @@ export default {
       this.popoverDismissed = value;
     },
   },
-  i18n: DEPENDENCIES_TABLE_I18N,
 };
 </script>
 
@@ -45,10 +44,16 @@ export default {
         target="vulnerabilities-info"
         data-testid="vulnerability-info-popover"
         :show="showPopover"
-        :title="$options.i18n.vulnerabilityInfoTitle"
+        :title="s__('Dependencies|Focused vulnerability reporting')"
       >
-        <p class="gl-mb-0">{{ $options.i18n.vulnerabilityInfoBody }}</p>
-        <div class="gl-mt-3 gl-text-right">
+        <p class="gl-mb-0">
+          {{
+            s__(
+              'Dependencies|The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
+            )
+          }}
+        </p>
+        <div class="gl-text-righ t gl-mt-3">
           <gl-button
             v-if="showPopover"
             data-testid="dismiss-button"
@@ -56,7 +61,7 @@ export default {
             variant="confirm"
             @click="setPopoverDismissed(true)"
           >
-            {{ $options.i18n.vulnerabilityInfoDismissButtonText }}
+            {{ __("Don't show again") }}
           </gl-button>
         </div>
       </gl-popover>
diff --git a/ee/app/assets/javascripts/dependencies/constants.js b/ee/app/assets/javascripts/dependencies/constants.js
index 1dad9f4e119aa7..2dd9f07d56311c 100644
--- a/ee/app/assets/javascripts/dependencies/constants.js
+++ b/ee/app/assets/javascripts/dependencies/constants.js
@@ -23,9 +23,4 @@ export const DEPENDENCIES_TABLE_I18N = {
   locationDependencyTitle: s__('Dependencies|List of direct dependents'),
   toggleVulnerabilityList: s__('Dependencies|Toggle vulnerability list'),
   dependencyPathButtonText: s__('Dependencies|View dependency paths'),
-  vulnerabilityInfoTitle: s__('Dependencies|Focused vulnerability reporting'),
-  vulnerabilityInfoBody: s__(
-    'Dependencies|The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
-  ),
-  vulnerabilityInfoDismissButtonText: s__("Dependencies|Don't show again"),
 };
diff --git a/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
index 4925f984a7ff70..664b347c00e513 100644
--- a/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
+++ b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
@@ -1,6 +1,5 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import VulnerabilitiesPopover from 'ee/dependencies/components/vulnerabilities_popover.vue';
-import { DEPENDENCIES_TABLE_I18N } from 'ee/dependencies/constants';
 
 describe('VulnerabilitiesPopover component', () => {
   let wrapper;
@@ -24,12 +23,11 @@ describe('VulnerabilitiesPopover component', () => {
   it('renders vulnerability info icon and popover', () => {
     expect(findVulnerabilityInfoIcon().exists()).toBe(true);
     expect(findVulnerabilityInfoPopover().exists()).toBe(true);
-    expect(findVulnerabilityInfoPopover().props('title')).toBe(
-      DEPENDENCIES_TABLE_I18N.vulnerabilityInfoTitle,
-    );
+    expect(findVulnerabilityInfoPopover().props('title')).toBe('Focused vulnerability reporting');
     expect(findVulnerabilityInfoPopover().text()).toContain(
-      DEPENDENCIES_TABLE_I18N.vulnerabilityInfoBody,
+      'The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
     );
+    expect(findVulnerabilityInfoPopover().text()).toContain("Don't show again");
   });
 
   it('shows popover and dismiss button', () => {
-- 
GitLab


From 8922b4d51742c6848852302207fc01262b1d5768 Mon Sep 17 00:00:00 2001
From: Brian Williams <bwilliams@gitlab.com>
Date: Tue, 21 Oct 2025 15:28:29 -0500
Subject: [PATCH 3/5] Switch to UserCalloutDismisser

---
 app/models/users/callout.rb                   |  3 +-
 .../components/vulnerabilities_popover.vue    | 85 ++++++++-----------
 .../vulnerabilities_popover_spec.js           | 15 +++-
 locale/gitlab.pot                             |  3 -
 4 files changed, 49 insertions(+), 57 deletions(-)

diff --git a/app/models/users/callout.rb b/app/models/users/callout.rb
index d042b27e70c372..5f9bf26d21900e 100644
--- a/app/models/users/callout.rb
+++ b/app/models/users/callout.rb
@@ -116,7 +116,8 @@ class Callout < ApplicationRecord
       personal_homepage_preferences_banner: 112,
       duo_agent_platform_requested: 113, # EE-only
       email_otp_enrollment_callout: 114,
-      merge_request_dashboard_show_drafts: 115
+      merge_request_dashboard_show_drafts: 115,
+      focused_vulnerability_reporting: 116
     }
 
     validates :feature_name,
diff --git a/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
index e3f9c5a229b29f..bd14ad8b77dd28 100644
--- a/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
+++ b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
@@ -1,70 +1,57 @@
 <script>
-import { GlButton, GlIcon, GlPopover } from '@gitlab/ui';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import { GlIcon, GlPopover } from '@gitlab/ui';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
 import { __, s__ } from '~/locale';
 
 export default {
   name: 'VulnerabilitiesPopover',
   components: {
-    LocalStorageSync,
-    GlButton,
+    UserCalloutDismisser,
     GlIcon,
     GlPopover,
   },
   props: {},
   data() {
     return {
-      popoverDismissed: false,
+      showPopover: false,
     };
   },
-  computed: {
-    showPopover() {
-      return !this.popoverDismissed;
-    },
-  },
-  methods: {
-    setPopoverDismissed(value) {
-      this.popoverDismissed = value;
-    },
+  mounted() {
+    setTimeout(() => {
+      this.showPopover = true;
+    }, 1000);
   },
 };
 </script>
 
 <template>
-  <local-storage-sync
-    :value="popoverDismissed"
-    storage-key="dl-shown-vulnerabilities-popover-disabled"
-    @input="setPopoverDismissed"
+  <user-callout-dismisser
+    v-if="showPopover"
+    ref="calloutDismisser"
+    feature-name="focused_vulnerability_reporting"
   >
-    <div>
-      <gl-icon id="vulnerabilities-info" name="information-o" class="gl-ml-2" variant="info" />
-      <gl-popover
-        placement="bottom"
-        boundary="viewport"
-        target="vulnerabilities-info"
-        data-testid="vulnerability-info-popover"
-        :show="showPopover"
-        :title="s__('Dependencies|Focused vulnerability reporting')"
-      >
-        <p class="gl-mb-0">
-          {{
-            s__(
-              'Dependencies|The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
-            )
-          }}
-        </p>
-        <div class="gl-text-righ t gl-mt-3">
-          <gl-button
-            v-if="showPopover"
-            data-testid="dismiss-button"
-            category="primary"
-            variant="confirm"
-            @click="setPopoverDismissed(true)"
-          >
-            {{ __("Don't show again") }}
-          </gl-button>
-        </div>
-      </gl-popover>
-    </div>
-  </local-storage-sync>
+    <template #default="{ dismiss, shouldShowCallout }">
+      <div>
+        <gl-icon id="vulnerabilities-info" name="information-o" class="gl-ml-2" variant="info" />
+        <gl-popover
+          placement="bottom"
+          boundary="viewport"
+          target="vulnerabilities-info"
+          data-testid="vulnerability-info-popover"
+          show-close-button
+          :show="shouldShowCallout"
+          :title="s__('Dependencies|Focused vulnerability reporting')"
+          @close-button-clicked="dismiss"
+        >
+          <p class="gl-mb-0">
+            {{
+              s__(
+                'Dependencies|The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
+              )
+            }}
+          </p>
+        </gl-popover>
+      </div>
+    </template>
+  </user-callout-dismisser>
 </template>
diff --git a/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
index 664b347c00e513..29edbefb91d583 100644
--- a/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
+++ b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
@@ -1,15 +1,23 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import VulnerabilitiesPopover from 'ee/dependencies/components/vulnerabilities_popover.vue';
+import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
 
 describe('VulnerabilitiesPopover component', () => {
   let wrapper;
+  let userCalloutDismissSpy;
 
-  const createWrapper = ({ propsData } = {}) =>
+  const createWrapper = ({ propsData, shouldShowCallout = true } = {}) =>
     shallowMountExtended(VulnerabilitiesPopover, {
       propsData: {
         popoverDismissed: false,
         ...propsData,
       },
+      mocks: {
+        UserCalloutDismisser: makeMockUserCalloutDismisser({
+          dismiss: userCalloutDismissSpy,
+          shouldShowCallout,
+        }),
+      },
     });
 
   const findVulnerabilityInfoIcon = () => wrapper.find('#vulnerabilities-info');
@@ -24,10 +32,9 @@ describe('VulnerabilitiesPopover component', () => {
     expect(findVulnerabilityInfoIcon().exists()).toBe(true);
     expect(findVulnerabilityInfoPopover().exists()).toBe(true);
     expect(findVulnerabilityInfoPopover().props('title')).toBe('Focused vulnerability reporting');
-    expect(findVulnerabilityInfoPopover().text()).toContain(
+    expect(findVulnerabilityInfoPopover().text()).toBe(
       'The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
     );
-    expect(findVulnerabilityInfoPopover().text()).toContain("Don't show again");
   });
 
   it('shows popover and dismiss button', () => {
@@ -37,7 +44,7 @@ describe('VulnerabilitiesPopover component', () => {
 
   describe('when popover has been dismissed', () => {
     beforeEach(() => {
-      wrapper = createWrapper({ popoverDismissed: true });
+      wrapper = createWrapper({ shouldShowCallout: false });
     });
 
     it('does not show popover or dismiss button', () => {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8894653810b97b..bec4c040368ac8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -22670,9 +22670,6 @@ msgstr ""
 msgid "Dependencies|Direct dependents"
 msgstr ""
 
-msgid "Dependencies|Don't show again"
-msgstr ""
-
 msgid "Dependencies|Enter at least 2 characters to view available components."
 msgstr ""
 
-- 
GitLab


From 3e4e3c3e5796728ae07f05b65b8173af97d0c246 Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Wed, 22 Oct 2025 11:06:38 +0200
Subject: [PATCH 4/5] Fix vulnerabities_popover tests

This fixes the vulnerabilities_popover failing specs.
It also simplifies the vulnerabilities_popover.vue component by not
adding a delay to show the popover. It also adds trigger manual so
the popover does not disappear when hovering it.
---
 .../components/vulnerabilities_popover.vue    | 25 +++--------
 .../vulnerabilities_popover_spec.js           | 45 ++++++++++---------
 2 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
index bd14ad8b77dd28..a441695944633c 100644
--- a/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
+++ b/ee/app/assets/javascripts/dependencies/components/vulnerabilities_popover.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlIcon, GlPopover } from '@gitlab/ui';
 import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
-import { __, s__ } from '~/locale';
 
 export default {
   name: 'VulnerabilitiesPopover',
@@ -10,37 +9,23 @@ export default {
     GlIcon,
     GlPopover,
   },
-  props: {},
-  data() {
-    return {
-      showPopover: false,
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.showPopover = true;
-    }, 1000);
-  },
 };
 </script>
 
 <template>
-  <user-callout-dismisser
-    v-if="showPopover"
-    ref="calloutDismisser"
-    feature-name="focused_vulnerability_reporting"
-  >
+  <user-callout-dismisser ref="calloutDismisser" feature-name="focused_vulnerability_reporting">
     <template #default="{ dismiss, shouldShowCallout }">
       <div>
         <gl-icon id="vulnerabilities-info" name="information-o" class="gl-ml-2" variant="info" />
         <gl-popover
+          :show="shouldShowCallout"
+          :title="s__('Dependencies|Focused vulnerability reporting')"
           placement="bottom"
           boundary="viewport"
           target="vulnerabilities-info"
-          data-testid="vulnerability-info-popover"
+          triggers="manual"
           show-close-button
-          :show="shouldShowCallout"
-          :title="s__('Dependencies|Focused vulnerability reporting')"
+          data-testid="vulnerability-info-popover"
           @close-button-clicked="dismiss"
         >
           <p class="gl-mb-0">
diff --git a/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
index 29edbefb91d583..847b8528994da2 100644
--- a/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
+++ b/ee/spec/frontend/dependencies/components/vulnerabilities_popover_spec.js
@@ -1,3 +1,5 @@
+import { nextTick } from 'vue';
+import { GlIcon } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import VulnerabilitiesPopover from 'ee/dependencies/components/vulnerabilities_popover.vue';
 import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
@@ -6,50 +8,51 @@ describe('VulnerabilitiesPopover component', () => {
   let wrapper;
   let userCalloutDismissSpy;
 
-  const createWrapper = ({ propsData, shouldShowCallout = true } = {}) =>
-    shallowMountExtended(VulnerabilitiesPopover, {
-      propsData: {
-        popoverDismissed: false,
-        ...propsData,
-      },
-      mocks: {
+  const createWrapper = ({ shouldShowCallout = true } = {}) => {
+    userCalloutDismissSpy = jest.fn();
+
+    wrapper = shallowMountExtended(VulnerabilitiesPopover, {
+      stubs: {
         UserCalloutDismisser: makeMockUserCalloutDismisser({
           dismiss: userCalloutDismissSpy,
           shouldShowCallout,
         }),
       },
     });
+  };
 
-  const findVulnerabilityInfoIcon = () => wrapper.find('#vulnerabilities-info');
+  const findVulnerabilityInfoIcon = () => wrapper.findComponent(GlIcon);
   const findVulnerabilityInfoPopover = () => wrapper.findByTestId('vulnerability-info-popover');
-  const findDismissButton = () => wrapper.findByTestId('dismiss-button');
 
-  beforeEach(() => {
-    wrapper = createWrapper();
-  });
+  beforeEach(createWrapper);
 
   it('renders vulnerability info icon and popover', () => {
     expect(findVulnerabilityInfoIcon().exists()).toBe(true);
     expect(findVulnerabilityInfoPopover().exists()).toBe(true);
-    expect(findVulnerabilityInfoPopover().props('title')).toBe('Focused vulnerability reporting');
+    expect(findVulnerabilityInfoPopover().props()).toMatchObject({
+      title: 'Focused vulnerability reporting',
+      show: true,
+    });
     expect(findVulnerabilityInfoPopover().text()).toBe(
       'The dependency list shows only active, currently detected issues. Vulnerabilities that are no longer detected are filtered out.',
     );
   });
 
-  it('shows popover and dismiss button', () => {
-    expect(findVulnerabilityInfoPopover().props('show')).toBe(true);
-    expect(findDismissButton().exists()).toBe(true);
-  });
-
   describe('when popover has been dismissed', () => {
     beforeEach(() => {
-      wrapper = createWrapper({ shouldShowCallout: false });
+      createWrapper({ shouldShowCallout: false });
     });
 
-    it('does not show popover or dismiss button', () => {
+    it('does not show popover', () => {
       expect(findVulnerabilityInfoPopover().props('show')).toBe(false);
-      expect(findDismissButton().exists()).toBe(false);
+    });
+  });
+
+  describe('when popover is dismissed', () => {
+    it('handles closing the feature pop-up', async () => {
+      findVulnerabilityInfoPopover().vm.$emit('close-button-clicked');
+      await nextTick();
+      expect(userCalloutDismissSpy).toHaveBeenCalled();
     });
   });
 });
-- 
GitLab


From 394bd0ce87f9e4075fe2b3bef6ee186e3e9d3f78 Mon Sep 17 00:00:00 2001
From: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Date: Wed, 22 Oct 2025 11:33:45 +0200
Subject: [PATCH 5/5] Update graphql docs for user callout

---
 doc/api/graphql/reference/_index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/doc/api/graphql/reference/_index.md b/doc/api/graphql/reference/_index.md
index 5577fa57ae3c2b..74f96a69830d8f 100644
--- a/doc/api/graphql/reference/_index.md
+++ b/doc/api/graphql/reference/_index.md
@@ -51456,6 +51456,7 @@ Name of the feature that the callout is for.
 | <a id="usercalloutfeaturenameenumemail_otp_enrollment_callout"></a>`EMAIL_OTP_ENROLLMENT_CALLOUT` | Callout feature name for email_otp_enrollment_callout. |
 | <a id="usercalloutfeaturenameenumexplore_duo_core_banner"></a>`EXPLORE_DUO_CORE_BANNER` | Callout feature name for explore_duo_core_banner. |
 | <a id="usercalloutfeaturenameenumfeature_flags_new_version"></a>`FEATURE_FLAGS_NEW_VERSION` | Callout feature name for feature_flags_new_version. |
+| <a id="usercalloutfeaturenameenumfocused_vulnerability_reporting"></a>`FOCUSED_VULNERABILITY_REPORTING` | Callout feature name for focused_vulnerability_reporting. |
 | <a id="usercalloutfeaturenameenumgcp_signup_offer"></a>`GCP_SIGNUP_OFFER` | Callout feature name for gcp_signup_offer. |
 | <a id="usercalloutfeaturenameenumgeo_enable_hashed_storage"></a>`GEO_ENABLE_HASHED_STORAGE` | Callout feature name for geo_enable_hashed_storage. |
 | <a id="usercalloutfeaturenameenumgeo_migrate_hashed_storage"></a>`GEO_MIGRATE_HASHED_STORAGE` | Callout feature name for geo_migrate_hashed_storage. |
-- 
GitLab