From 76052295044b300c8c5ab4a2afa4aa5f898f4358 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Fri, 17 Oct 2025 09:31:31 +0200
Subject: [PATCH 1/2] Add ref section to security configuration

Adds a new section to the security configuration
page. The added section will allow users
to manage a list of refs (branches or tags)
that are to be marked as being tracked
for vulnerabilities.
---
 .../security_configuration/components/app.vue |  45 +++++-
 .../components/ref_tracking_list.vue          |  94 +++++++++++
 .../components/ref_tracking_list_item.vue     |  62 +++++++
 .../components/ref_tracking_metadata.vue      |  75 +++++++++
 .../graphql/typedefs.graphql                  |  21 +++
 .../vulnerability_tracked_refs.query.graphql  |  20 +++
 .../security_configuration/index.js           |   3 +-
 .../security/configuration_controller.rb      |   2 +
 .../security_attributes/graphql/resolvers.js  |  79 +++++++++
 .../wip/vulnerabilities_across_contexts.yml   |  10 ++
 locale/gitlab.pot                             |  32 ++++
 .../components/app_spec.js                    |  77 +++++++--
 .../components/ref_tracking_list_item_spec.js | 103 ++++++++++++
 .../components/ref_tracking_list_spec.js      | 153 ++++++++++++++++++
 .../components/ref_tracking_metadata_spec.js  | 112 +++++++++++++
 .../security_configuration/mock_data.js       |  18 +++
 16 files changed, 894 insertions(+), 12 deletions(-)
 create mode 100644 app/assets/javascripts/security_configuration/components/ref_tracking_list.vue
 create mode 100644 app/assets/javascripts/security_configuration/components/ref_tracking_list_item.vue
 create mode 100644 app/assets/javascripts/security_configuration/components/ref_tracking_metadata.vue
 create mode 100644 app/assets/javascripts/security_configuration/graphql/typedefs.graphql
 create mode 100644 app/assets/javascripts/security_configuration/graphql/vulnerability_tracked_refs.query.graphql
 create mode 100644 ee/config/feature_flags/wip/vulnerabilities_across_contexts.yml
 create mode 100644 spec/frontend/security_configuration/components/ref_tracking_list_item_spec.js
 create mode 100644 spec/frontend/security_configuration/components/ref_tracking_list_spec.js
 create mode 100644 spec/frontend/security_configuration/components/ref_tracking_metadata_spec.js

diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue
index 9e90d619d12919..424efead3debbc 100644
--- a/app/assets/javascripts/security_configuration/components/app.vue
+++ b/app/assets/javascripts/security_configuration/components/app.vue
@@ -10,6 +10,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SERVICE_PING_SECURITY_CONFIGURATION_THREAT_MANAGEMENT_VISIT } from '~/tracking/constants';
 import { REPORT_TYPE_CONTAINER_SCANNING_FOR_REGISTRY } from '~/vue_shared/security_reports/constants';
 import BetaBadge from '~/vue_shared/components/badges/beta_badge.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import {
   AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY,
   TAB_VULNERABILITY_MANAGEMENT_INDEX,
@@ -24,6 +25,7 @@ import FeatureCard from './feature_card.vue';
 import PipelineSecretDetectionFeatureCard from './pipeline_secret_detection_feature_card.vue';
 import SecretPushProtectionFeatureCard from './secret_push_protection_feature_card.vue';
 import TrainingProviderList from './training_provider_list.vue';
+import RefTrackingList from './ref_tracking_list.vue';
 
 export default {
   i18n,
@@ -49,6 +51,7 @@ export default {
       import('ee_component/security_configuration/components/upgrade_banner.vue'),
     UserCalloutDismisser,
     TrainingProviderList,
+    RefTrackingList,
     ContainerScanningForRegistryFeatureCard: () =>
       import(
         'ee_component/security_configuration/components/container_scanning_for_registry_feature_card.vue'
@@ -124,11 +127,18 @@ export default {
     shouldShowVulnerabilityArchives() {
       return this.glFeatures?.vulnerabilityArchival;
     },
+    shouldShowRefsTracking() {
+      return this.glFeatures?.vulnerabilitiesAcrossContexts;
+    },
     shouldShowSecurityAttributes() {
       return (
         window.gon?.licensed_features?.securityAttributes && this.glFeatures?.securityContextLabels
       );
     },
+    trackedRefsHelpPagePath() {
+      // TODO: Once the help page content is available, we can use the anchor to link to the specific section
+      return helpPagePath('user/application_security/vulnerability_report/_index.md');
+    },
   },
   methods: {
     getComponentName(feature) {
@@ -262,7 +272,40 @@ export default {
         :title="$options.i18n.vulnerabilityManagement"
         query-param-value="vulnerability-management"
       >
-        <section-layout :heading="$options.i18n.securityTraining">
+        <section-layout
+          v-if="shouldShowRefsTracking"
+          :heading="__('Refs')"
+          data-testid="refs-tracking-section"
+        >
+          <template #description>
+            <p>
+              {{
+                __(
+                  'Track vulnerabilities in up to 16 refs (branches or tags). The default branch is tracked by default on the Security Dashboard and Vulnerability report and cannot be removed.',
+                )
+              }}
+            </p>
+            <p>
+              {{
+                __(
+                  'When you remove tracking of a ref, GitLab deletes any vulnerabilities associated with that ref. You have the option to archive them before their deletion.',
+                )
+              }}
+            </p>
+            <p>
+              <gl-link :href="trackedRefsHelpPagePath">{{
+                __('Learn more about vulnerability management on non-default branches and tags.')
+              }}</gl-link>
+            </p>
+          </template>
+          <template #features>
+            <ref-tracking-list />
+          </template>
+        </section-layout>
+        <section-layout
+          :heading="$options.i18n.securityTraining"
+          data-testid="security-training-section"
+        >
           <template #description>
             <p>
               {{ $options.i18n.securityTrainingDescription }}
diff --git a/app/assets/javascripts/security_configuration/components/ref_tracking_list.vue b/app/assets/javascripts/security_configuration/components/ref_tracking_list.vue
new file mode 100644
index 00000000000000..26c74c30134574
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/ref_tracking_list.vue
@@ -0,0 +1,94 @@
+<script>
+import { GlCard, GlButton, GlBadge, GlSkeletonLoader } from '@gitlab/ui';
+import vulnerabilityTrackedRefsQuery from '../graphql/vulnerability_tracked_refs.query.graphql';
+import RefTrackingListItem from './ref_tracking_list_item.vue';
+
+export const MAX_TRACKED_REFS = 16;
+
+export default {
+  components: {
+    GlCard,
+    GlButton,
+    GlBadge,
+    GlSkeletonLoader,
+    RefTrackingListItem,
+  },
+  inject: ['projectFullPath'],
+  apollo: {
+    trackedRefs: {
+      query: vulnerabilityTrackedRefsQuery,
+      variables() {
+        return {
+          fullPath: this.projectFullPath,
+        };
+      },
+      update(data) {
+        return data.project?.vulnerabilityTrackedRefs || [];
+      },
+    },
+  },
+  data() {
+    return {
+      trackedRefs: [],
+    };
+  },
+  computed: {
+    currentCount() {
+      return this.trackedRefs.length;
+    },
+    isLoading() {
+      return this.$apollo.queries.trackedRefs.loading;
+    },
+  },
+  methods: {
+    handleRemoveRef() {
+      // The removal logic is handled in a separate issue
+      // See https://gitlab.com/gitlab-org/gitlab/-/issues/577517
+    },
+  },
+  MAX_TRACKED_REFS,
+};
+</script>
+
+<template>
+  <gl-card body-class="gl-p-0">
+    <template #header>
+      <div class="gl-flex gl-items-center gl-justify-between" data-testid="tracked-refs-header">
+        <div class="gl-flex gl-items-center gl-gap-2">
+          <h3 class="gl-my-0 gl-text-base" data-testid="tracked-refs-title">
+            {{ __('Currently tracked refs') }}
+          </h3>
+          <gl-badge variant="neutral"
+            >{{ isLoading ? '-' : currentCount }}/{{ $options.MAX_TRACKED_REFS }}</gl-badge
+          >
+        </div>
+        <gl-button variant="confirm" size="small">{{ __('Track new ref') }}</gl-button>
+      </div>
+    </template>
+
+    <div v-if="isLoading" class="gl-px-4 gl-py-6">
+      <gl-skeleton-loader :width="600" :height="80">
+        <rect width="100" height="12" x="0" y="0" rx="4" />
+        <rect width="60" height="10" x="0" y="20" rx="4" />
+        <rect width="500" height="8" x="0" y="38" rx="4" />
+        <rect width="120" height="8" x="0" y="50" rx="4" />
+        <rect width="150" height="8" x="480" y="0" rx="4" />
+      </gl-skeleton-loader>
+      <gl-skeleton-loader :width="600" :height="80" class="gl-mt-4">
+        <rect width="120" height="12" x="0" y="0" rx="4" />
+        <rect width="50" height="10" x="0" y="20" rx="4" />
+        <rect width="480" height="8" x="0" y="38" rx="4" />
+        <rect width="140" height="8" x="0" y="50" rx="4" />
+        <rect width="150" height="8" x="480" y="0" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <ul v-else class="gl-m-0 gl-list-none gl-p-0" data-testid="tracked-refs-list">
+      <ref-tracking-list-item
+        v-for="ref in trackedRefs"
+        :key="ref.id"
+        :tracked-ref="ref"
+        @remove="handleRemoveRef"
+      />
+    </ul>
+  </gl-card>
+</template>
diff --git a/app/assets/javascripts/security_configuration/components/ref_tracking_list_item.vue b/app/assets/javascripts/security_configuration/components/ref_tracking_list_item.vue
new file mode 100644
index 00000000000000..3a711b211ca63b
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/ref_tracking_list_item.vue
@@ -0,0 +1,62 @@
+<script>
+import { GlDisclosureDropdown } from '@gitlab/ui';
+import { __ } from '~/locale';
+import RefTrackingMetadata from './ref_tracking_metadata.vue';
+
+export default {
+  name: 'RefTrackingListItem',
+  components: {
+    GlDisclosureDropdown,
+    RefTrackingMetadata,
+  },
+  props: {
+    trackedRef: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    removeAction() {
+      return [
+        {
+          text: __('Remove ref tracking'),
+          action: () => this.handleRemove(),
+          variant: 'danger',
+        },
+      ];
+    },
+  },
+  methods: {
+    handleRemove() {
+      this.$emit('remove', this.trackedRef.id);
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="gl-border-b gl-px-4 gl-py-4 last:gl-border-b-0">
+    <div class="gl-flex gl-items-start gl-justify-between">
+      <div class="gl-flex-1">
+        <ref-tracking-metadata :tracked-ref="trackedRef" />
+      </div>
+
+      <div class="gl-ml-3 gl-flex gl-shrink-0 gl-items-center gl-gap-3">
+        <span class="gl-text-sm" data-testid="vulnerabilities-count"
+          >{{ trackedRef.vulnerabilitiesCount }}
+          {{ n__('open vulnerability', 'open vulnerabilities', trackedRef.vulnerabilitiesCount) }}
+        </span>
+        <gl-disclosure-dropdown
+          :items="removeAction"
+          icon="ellipsis_v"
+          no-caret
+          category="tertiary"
+          :toggle-text="__('Actions')"
+          text-sr-only
+          placement="bottom-end"
+          data-testid="ref-actions-dropdown"
+        />
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/security_configuration/components/ref_tracking_metadata.vue b/app/assets/javascripts/security_configuration/components/ref_tracking_metadata.vue
new file mode 100644
index 00000000000000..ab16b06bfc3f73
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/ref_tracking_metadata.vue
@@ -0,0 +1,75 @@
+<script>
+import { GlBadge, GlIcon, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ProtectedBadge from '~/vue_shared/components/badges/protected_badge.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  name: 'RefTrackingMetadata',
+  components: {
+    GlBadge,
+    GlIcon,
+    GlLink,
+    ProtectedBadge,
+    TimeAgoTooltip,
+  },
+  props: {
+    trackedRef: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    refIcon() {
+      return this.trackedRef.refType === 'BRANCH' ? 'branch' : 'tag';
+    },
+    refTypeText() {
+      return this.trackedRef.refType === 'BRANCH' ? s__('Commit|branch') : s__('Commit|tag');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-mb-4 gl-flex gl-flex-wrap gl-items-center gl-gap-2">
+      <h4 class="gl-m-0 gl-text-base gl-font-bold" data-testid="ref-name">
+        {{ trackedRef.name }}
+      </h4>
+      <gl-badge v-if="trackedRef.isDefault" variant="info">
+        {{ __('default') }}
+      </gl-badge>
+      <protected-badge v-if="trackedRef.isProtected" />
+    </div>
+
+    <div class="gl-flex gl-flex-wrap gl-items-center gl-gap-2 gl-text-sm gl-text-subtle">
+      <span
+        class="gl-inline-flex gl-items-center gl-gap-1 gl-rounded-base gl-bg-strong gl-px-2"
+        data-testid="ref-type"
+      >
+        <gl-icon :name="refIcon" :size="12" />
+        <span>{{ refTypeText }}</span>
+      </span>
+
+      <span aria-hidden="true">·</span>
+
+      <span
+        class="gl-inline-flex gl-items-center gl-gap-1 gl-rounded-base gl-bg-strong gl-px-2"
+        data-testid="commit-link"
+      >
+        <gl-icon name="commit" :size="12" />
+        <gl-link :href="trackedRef.commit.webPath" class="gl-text-subtle">{{
+          trackedRef.commit.shortId
+        }}</gl-link>
+      </span>
+
+      <span aria-hidden="true">·</span>
+
+      <span class="gl-line-clamp-1" data-testid="commit-title">{{ trackedRef.commit.title }}</span>
+
+      <span aria-hidden="true">·</span>
+
+      <time-ago-tooltip :time="trackedRef.commit.authoredDate" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/security_configuration/graphql/typedefs.graphql b/app/assets/javascripts/security_configuration/graphql/typedefs.graphql
new file mode 100644
index 00000000000000..9908b26e1f0a5c
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/graphql/typedefs.graphql
@@ -0,0 +1,21 @@
+extend type Project {
+  vulnerabilityTrackedRefs: [LocalTrackedRef!]
+}
+
+type LocalTrackedCommit {
+  sha: String
+  shortId: String
+  title: String
+  authoredDate: String
+  webPath: String
+}
+
+type LocalTrackedRef {
+  id: ID!
+  name: String!
+  refType: String!
+  isDefault: Boolean!
+  isProtected: Boolean!
+  commit: LocalTrackedCommit
+  vulnerabilitiesCount: Int!
+}
diff --git a/app/assets/javascripts/security_configuration/graphql/vulnerability_tracked_refs.query.graphql b/app/assets/javascripts/security_configuration/graphql/vulnerability_tracked_refs.query.graphql
new file mode 100644
index 00000000000000..d943cd456e191c
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/graphql/vulnerability_tracked_refs.query.graphql
@@ -0,0 +1,20 @@
+query getVulnerabilityTrackedRefs($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    id
+    vulnerabilityTrackedRefs @client {
+      id
+      name
+      refType
+      isDefault
+      isProtected
+      commit {
+        sha
+        shortId
+        title
+        authoredDate
+        webPath
+      }
+      vulnerabilitiesCount
+    }
+  }
+}
diff --git a/app/assets/javascripts/security_configuration/index.js b/app/assets/javascripts/security_configuration/index.js
index 45a7d335f61f78..7dffc7d9c0b428 100644
--- a/app/assets/javascripts/security_configuration/index.js
+++ b/app/assets/javascripts/security_configuration/index.js
@@ -7,6 +7,7 @@ import createDefaultClient from '~/lib/graphql';
 import { parseBooleanDataAttributes } from '~/lib/utils/dom_utils';
 import SecurityConfigurationApp from './components/app.vue';
 import { augmentFeatures } from './utils';
+import typeDefs from './graphql/typedefs.graphql';
 
 export const initSecurityConfiguration = (el) => {
   if (!el) {
@@ -17,7 +18,7 @@ export const initSecurityConfiguration = (el) => {
   Vue.use(GlToast);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(resolvers),
+    defaultClient: createDefaultClient(resolvers, { typeDefs }),
   });
 
   const {
diff --git a/app/controllers/projects/security/configuration_controller.rb b/app/controllers/projects/security/configuration_controller.rb
index abf564a00e1516..3c33905573bdea 100644
--- a/app/controllers/projects/security/configuration_controller.rb
+++ b/app/controllers/projects/security/configuration_controller.rb
@@ -11,6 +11,8 @@ class ConfigurationController < Projects::ApplicationController
       def show
         render_403 unless can?(current_user, :read_security_configuration, project)
 
+        push_frontend_feature_flag(:vulnerabilities_across_contexts, project)
+
         @configuration ||= configuration_presenter
 
         respond_to do |format|
diff --git a/ee/app/assets/javascripts/security_configuration/security_attributes/graphql/resolvers.js b/ee/app/assets/javascripts/security_configuration/security_attributes/graphql/resolvers.js
index 6093e9fad90aa7..9470c3d00fa0d8 100644
--- a/ee/app/assets/javascripts/security_configuration/security_attributes/graphql/resolvers.js
+++ b/ee/app/assets/javascripts/security_configuration/security_attributes/graphql/resolvers.js
@@ -190,6 +190,7 @@ export const mockSecurityAttributes = mockSecurityAttributeCategories.flatMap(
   (category) => category.securityAttributes,
 );
 
+/* eslint-disable @gitlab/require-i18n-strings */
 export default {
   Group: {
     securityAttributeCategories() {
@@ -226,5 +227,83 @@ export default {
           }),
       };
     },
+    vulnerabilityTrackedRefs() {
+      return new Promise((resolve) => {
+        // Add delay to simulate network request and see loading state
+        setTimeout(() => {
+          resolve([
+            {
+              __typename: 'LocalTrackedRef',
+              id: 'gid://gitlab/TrackedRef/1',
+              name: 'Main',
+              refType: 'BRANCH',
+              isDefault: true,
+              isProtected: true,
+              commit: {
+                __typename: 'LocalTrackedCommit',
+                sha: 'df210850abc123',
+                shortId: 'df21085',
+                title: 'Apply 1 suggestion(s) to 1 file(s)',
+                authoredDate: '2025-10-20T09:59:00Z',
+                webPath: '/project/-/commit/df21085',
+              },
+              vulnerabilitiesCount: 258,
+            },
+            {
+              __typename: 'LocalTrackedRef',
+              id: 'gid://gitlab/TrackedRef/2',
+              name: 'v18.1.4-33',
+              refType: 'TAG',
+              isDefault: false,
+              isProtected: true,
+              commit: {
+                __typename: 'LocalTrackedCommit',
+                sha: '693bb5e6abc456',
+                shortId: '693bb5e6',
+                title: 'Update VERSION files',
+                authoredDate: '2025-10-15T14:30:00Z',
+                webPath: '/project/-/commit/693bb5e6',
+              },
+              vulnerabilitiesCount: 5,
+            },
+            {
+              __typename: 'LocalTrackedRef',
+              id: 'gid://gitlab/TrackedRef/3',
+              name: '18-2-stable-ee',
+              refType: 'BRANCH',
+              isDefault: false,
+              isProtected: true,
+              commit: {
+                __typename: 'LocalTrackedCommit',
+                sha: '7450f5f6def789',
+                shortId: '7450f5f6',
+                title: 'Version 18.2.0-ee',
+                authoredDate: '2025-10-14T08:15:00Z',
+                webPath: '/project/-/commit/7450f5f6',
+              },
+              vulnerabilitiesCount: 45,
+            },
+            {
+              __typename: 'LocalTrackedRef',
+              id: 'gid://gitlab/TrackedRef/4',
+              name: 'v18-2-stable-ee',
+              refType: 'TAG',
+              isDefault: false,
+              isProtected: true,
+              commit: {
+                __typename: 'LocalTrackedCommit',
+                sha: '7450f5f6def789',
+                shortId: '7450f5f6',
+                title: 'Update VERSION 17.11-ee',
+                authoredDate: '2024-10-12T16:45:00Z',
+                webPath: '/project/-/commit/7450f5f6',
+              },
+              vulnerabilitiesCount: 11,
+            },
+          ]);
+        }, 2000);
+      });
+    },
   },
 };
+/* eslint-enable @gitlab/require-i18n-strings */
diff --git a/ee/config/feature_flags/wip/vulnerabilities_across_contexts.yml b/ee/config/feature_flags/wip/vulnerabilities_across_contexts.yml
new file mode 100644
index 00000000000000..a3b4cbad6054d5
--- /dev/null
+++ b/ee/config/feature_flags/wip/vulnerabilities_across_contexts.yml
@@ -0,0 +1,10 @@
+---
+name: vulnerabilities_across_contexts
+description:
+feature_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/555991
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/209342
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/578047
+milestone: '18.6'
+group: group::security insights
+type: wip
+default_enabled: false
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bec4c040368ac8..647fefdf7c2fd0 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -16032,9 +16032,15 @@ msgstr ""
 msgid "Commit|There was an error fetching the commit references. Please try again later."
 msgstr ""
 
+msgid "Commit|branch"
+msgstr ""
+
 msgid "Commit|containing commit"
 msgstr ""
 
+msgid "Commit|tag"
+msgstr ""
+
 msgid "Company"
 msgstr ""
 
@@ -20495,6 +20501,9 @@ msgstr ""
 msgid "CurrentUser|Switch to GitLab Next"
 msgstr ""
 
+msgid "Currently tracked refs"
+msgstr ""
+
 msgid "Currently unable to fetch data for this pipeline."
 msgstr ""
 
@@ -38544,6 +38553,9 @@ msgstr ""
 msgid "Learn more about shards and replicas in the %{configuration_link_start}advanced search configuration%{configuration_link_end} documentation. Changes don't take place until you %{recreated_link_start}recreate%{recreated_link_end} the index."
 msgstr ""
 
+msgid "Learn more about vulnerability management on non-default branches and tags."
+msgstr ""
+
 msgid "Learn more."
 msgstr ""
 
@@ -53847,6 +53859,9 @@ msgstr[1] ""
 msgid "Refreshing…"
 msgstr ""
 
+msgid "Refs"
+msgstr ""
+
 msgid "Regenerate export"
 msgstr ""
 
@@ -54305,6 +54320,9 @@ msgstr ""
 msgid "Remove priority"
 msgstr ""
 
+msgid "Remove ref tracking"
+msgstr ""
+
 msgid "Remove reference"
 msgstr ""
 
@@ -69159,9 +69177,15 @@ msgstr ""
 msgid "Track important events in your project."
 msgstr ""
 
+msgid "Track new ref"
+msgstr ""
+
 msgid "Track time with quick actions"
 msgstr ""
 
+msgid "Track vulnerabilities in up to 16 refs (branches or tags). The default branch is tracked by default on the Security Dashboard and Vulnerability report and cannot be removed."
+msgstr ""
+
 msgid "Tracking"
 msgstr ""
 
@@ -74101,6 +74125,9 @@ msgstr ""
 msgid "When using the %{code_open}ssh://%{code_close} protocol, please use the following format: %{code_open}ssh://username@example.com/group/project.git%{code_close}."
 msgstr ""
 
+msgid "When you remove tracking of a ref, GitLab deletes any vulnerabilities associated with that ref. You have the option to archive them before their deletion."
+msgstr ""
+
 msgid "When you transfer your project to a group, you can easily manage multiple projects, view usage quotas for storage, compute minutes, and users, and start a trial or upgrade to a paid tier."
 msgstr ""
 
@@ -79622,6 +79649,11 @@ msgstr ""
 msgid "only supports valid HTTP(S) URLs"
 msgstr ""
 
+msgid "open vulnerability"
+msgid_plural "open vulnerabilities"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "opened"
 msgstr ""
 
diff --git a/spec/frontend/security_configuration/components/app_spec.js b/spec/frontend/security_configuration/components/app_spec.js
index 4b5e13aa7196e1..6670e09bd38ce6 100644
--- a/spec/frontend/security_configuration/components/app_spec.js
+++ b/spec/frontend/security_configuration/components/app_spec.js
@@ -13,6 +13,7 @@ import { AUTO_DEVOPS_ENABLED_ALERT_DISMISSED_STORAGE_KEY } from '~/security_conf
 import FeatureCard from '~/security_configuration/components/feature_card.vue';
 import PipelineSecretDetectionFeatureCard from '~/security_configuration/components/pipeline_secret_detection_feature_card.vue';
 import SecretPushProtectionFeatureCard from '~/security_configuration/components/secret_push_protection_feature_card.vue';
+import RefTrackingList from '~/security_configuration/components/ref_tracking_list.vue';
 import TrainingProviderList from '~/security_configuration/components/training_provider_list.vue';
 import {
   securityFeaturesMock,
@@ -33,7 +34,11 @@ describe('~/security_configuration/components/app', () => {
   let wrapper;
   let userCalloutDismissSpy;
 
-  const createComponent = ({ shouldShowCallout = true, ...propsData } = {}) => {
+  const createComponent = ({
+    shouldShowCallout = true,
+    vulnerabilitiesAcrossContexts = true,
+    ...propsData
+  } = {}) => {
     userCalloutDismissSpy = jest.fn();
 
     wrapper = mountExtended(SecurityConfigurationApp, {
@@ -42,7 +47,12 @@ describe('~/security_configuration/components/app', () => {
         securityTrainingEnabled: true,
         ...propsData,
       },
-      provide: provideMock,
+      provide: {
+        ...provideMock,
+        glFeatures: {
+          vulnerabilitiesAcrossContexts,
+        },
+      },
       stubs: {
         ...stubChildren(SecurityConfigurationApp),
         GlLink: false,
@@ -67,6 +77,8 @@ describe('~/security_configuration/components/app', () => {
   const findSecretPushProtection = () => wrapper.findComponent(SecretPushProtectionFeatureCard);
   const findPipelineSecretDetectionCard = () =>
     wrapper.findComponent(PipelineSecretDetectionFeatureCard);
+  const findRefsTrackingSection = () => wrapper.findByTestId('refs-tracking-section');
+  const findSecurityTrainingSection = () => wrapper.findByTestId('security-training-section');
   const findTrainingProviderList = () => wrapper.findComponent(TrainingProviderList);
   const findManageViaMRErrorAlert = () => wrapper.findByTestId('manage-via-mr-error-alert');
   const findLink = ({ href, text, container = wrapper }) => {
@@ -367,19 +379,64 @@ describe('~/security_configuration/components/app', () => {
       expect(findVulnerabilityManagementTab().exists()).toBe(true);
     });
 
-    it('renders TrainingProviderList component', () => {
-      expect(findTrainingProviderList().props()).toMatchObject(props);
+    describe('refs tracking section', () => {
+      it('renders the section with correct heading', () => {
+        expect(findRefsTrackingSection().props('heading')).toBe('Refs');
+      });
+
+      it('renders description with correct text', () => {
+        expect(findRefsTrackingSection().text()).toContain(
+          'Track vulnerabilities in up to 16 refs (branches or tags). The default branch is tracked by default on the Security Dashboard and Vulnerability report and cannot be removed.',
+        );
+      });
+
+      it('renders RefTrackingList component', () => {
+        expect(findRefsTrackingSection().findComponent(RefTrackingList).exists()).toBe(true);
+      });
+
+      it('renders link to help docs', () => {
+        const helpLink = findRefsTrackingSection().findComponent(GlLink);
+
+        expect(helpLink.text()).toBe(
+          'Learn more about vulnerability management on non-default branches and tags.',
+        );
+        expect(helpLink.attributes('href')).toBe(
+          '/help/user/application_security/vulnerability_report/_index.md',
+        );
+      });
     });
 
-    it('renders security training description', () => {
-      expect(findVulnerabilityManagementTab().text()).toContain(i18n.securityTrainingDescription);
+    describe('security training section', () => {
+      it('renders the section with correct heading', () => {
+        expect(findSecurityTrainingSection().props('heading')).toBe('Security training');
+      });
+
+      it('renders TrainingProviderList component', () => {
+        expect(findTrainingProviderList().props()).toMatchObject(props);
+      });
+
+      it('renders security training description', () => {
+        expect(findSecurityTrainingSection().text()).toContain(i18n.securityTrainingDescription);
+      });
+
+      it('renders link to help docs', () => {
+        const trainingLink = findSecurityTrainingSection().findComponent(GlLink);
+
+        expect(trainingLink.text()).toBe('Learn more about vulnerability training');
+        expect(trainingLink.attributes('href')).toBe(vulnerabilityTrainingDocsPath);
+      });
     });
+  });
 
-    it('renders link to help docs', () => {
-      const trainingLink = findVulnerabilityManagementTab().findComponent(GlLink);
+  describe('when the "vulnerabilitiesAcrossContexts" feature flag is disabled', () => {
+    beforeEach(() => {
+      createComponent({
+        vulnerabilitiesAcrossContexts: false,
+      });
+    });
 
-      expect(trainingLink.text()).toBe('Learn more about vulnerability training');
-      expect(trainingLink.attributes('href')).toBe(vulnerabilityTrainingDocsPath);
+    it('does not render refs tracking section', () => {
+      expect(findRefsTrackingSection().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/security_configuration/components/ref_tracking_list_item_spec.js b/spec/frontend/security_configuration/components/ref_tracking_list_item_spec.js
new file mode 100644
index 00000000000000..b5e9eff3b9bbc7
--- /dev/null
+++ b/spec/frontend/security_configuration/components/ref_tracking_list_item_spec.js
@@ -0,0 +1,103 @@
+import { GlDisclosureDropdown } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import RefTrackingListItem from '~/security_configuration/components/ref_tracking_list_item.vue';
+import RefTrackingMetadata from '~/security_configuration/components/ref_tracking_metadata.vue';
+import { createTrackedRef } from '../mock_data';
+
+describe('RefTrackingListItem component', () => {
+  let wrapper;
+
+  const createComponent = ({ trackedRef = createTrackedRef() } = {}) => {
+    wrapper = mountExtended(RefTrackingListItem, {
+      propsData: {
+        trackedRef,
+      },
+    });
+  };
+
+  const findListItem = () => wrapper.find('li');
+  const findMetadataComponent = () => wrapper.findComponent(RefTrackingMetadata);
+  const findVulnerabilitiesCount = () => wrapper.findByTestId('vulnerabilities-count');
+  const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+
+  describe('component rendering', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders a list item', () => {
+      expect(findListItem().exists()).toBe(true);
+    });
+
+    it('renders RefTrackingMetadata component', () => {
+      expect(findMetadataComponent().exists()).toBe(true);
+    });
+
+    it('passes trackedRef prop to RefTrackingMetadata', () => {
+      expect(findMetadataComponent().props('trackedRef')).toEqual(createTrackedRef());
+    });
+
+    it('renders GlDisclosureDropdown', () => {
+      expect(findDropdown().exists()).toBe(true);
+    });
+  });
+
+  describe('vulnerabilities count display', () => {
+    it.each`
+      count | expected
+      ${1}  | ${'1 open vulnerability'}
+      ${2}  | ${'2 open vulnerabilities'}
+      ${0}  | ${'0 open vulnerabilities'}
+    `('displays correct count for $count vulnerabilities', ({ count, expected }) => {
+      createComponent({ trackedRef: createTrackedRef({ vulnerabilitiesCount: count }) });
+
+      expect(findVulnerabilitiesCount().text()).toMatchInterpolatedText(expected);
+    });
+  });
+
+  it('passes trackedRef prop to RefTrackingMetadata', () => {
+    createComponent();
+
+    expect(findMetadataComponent().props('trackedRef')).toEqual(createTrackedRef());
+  });
+
+  describe('dropdown actions', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders dropdown with correct props', () => {
+      const dropdown = findDropdown();
+
+      expect(dropdown.props()).toMatchObject({
+        icon: 'ellipsis_v',
+        noCaret: true,
+        category: 'tertiary',
+        toggleText: 'Actions',
+        textSrOnly: true,
+        placement: 'bottom-end',
+      });
+    });
+
+    it('contains remove action with correct properties', () => {
+      const items = findDropdown().props('items');
+      const removeAction = items[0];
+
+      expect(items).toHaveLength(1);
+      expect(removeAction).toMatchObject({
+        text: 'Remove ref tracking',
+        variant: 'danger',
+      });
+    });
+
+    it('emits remove event with tracked ref id when remove action is triggered', () => {
+      const dropdown = findDropdown();
+      const removeAction = dropdown.props('items')[0].action;
+
+      removeAction();
+
+      expect(wrapper.emitted('remove')).toHaveLength(1);
+      expect(wrapper.emitted('remove')[0]).toEqual([createTrackedRef().id]);
+    });
+  });
+});
diff --git a/spec/frontend/security_configuration/components/ref_tracking_list_spec.js b/spec/frontend/security_configuration/components/ref_tracking_list_spec.js
new file mode 100644
index 00000000000000..f1a431c61ad022
--- /dev/null
+++ b/spec/frontend/security_configuration/components/ref_tracking_list_spec.js
@@ -0,0 +1,153 @@
+import { GlBadge, GlButton, GlCard, GlSkeletonLoader } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import RefTrackingList, {
+  MAX_TRACKED_REFS,
+} from '~/security_configuration/components/ref_tracking_list.vue';
+import RefTrackingListItem from '~/security_configuration/components/ref_tracking_list_item.vue';
+import vulnerabilityTrackedRefsQuery from '~/security_configuration/graphql/vulnerability_tracked_refs.query.graphql';
+import { createTrackedRef } from '../mock_data';
+
+Vue.use(VueApollo);
+
+const mockTrackedRefs = [
+  createTrackedRef({
+    id: 'gid://gitlab/TrackedRef/1',
+    name: 'Main',
+    refType: 'BRANCH',
+    isDefault: true,
+    isProtected: true,
+    vulnerabilitiesCount: 258,
+    commit: {
+      sha: 'df210850abc123',
+      shortId: 'df21085',
+      title: 'Apply 1 suggestion(s) to 1 file(s)',
+      authoredDate: '2024-10-17T09:59:00Z',
+      webPath: '/project/-/commit/df21085',
+    },
+  }),
+  createTrackedRef({
+    id: 'gid://gitlab/TrackedRef/2',
+    name: 'v18.1.4-33',
+    refType: 'TAG',
+    commit: {
+      sha: '693bb5e6abc456',
+      shortId: '693bb5e6',
+      title: 'Update VERSION files',
+      authoredDate: '2024-10-15T14:30:00Z',
+      webPath: '/project/-/commit/693bb5e6',
+    },
+  }),
+];
+
+const mockTrackedRefsResponse = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/1',
+      __typename: 'Project',
+      vulnerabilityTrackedRefs: mockTrackedRefs,
+    },
+  },
+};
+
+describe('RefTrackingList component', () => {
+  let wrapper;
+
+  const createApolloProvider = ({
+    queryHandler = jest.fn().mockResolvedValue(mockTrackedRefsResponse),
+  } = {}) => createMockApollo([[vulnerabilityTrackedRefsQuery, queryHandler]]);
+
+  const createComponent = ({ queryHandler } = {}) => {
+    wrapper = shallowMountExtended(RefTrackingList, {
+      apolloProvider: createApolloProvider({ queryHandler }),
+      provide: {
+        projectFullPath: 'namespace/project',
+      },
+      stubs: {
+        GlCard,
+      },
+    });
+  };
+
+  const findCard = () => wrapper.findComponent(GlCard);
+  const findTitle = () => wrapper.findByTestId('tracked-refs-title');
+  const findCountBadge = () => wrapper.findByTestId('tracked-refs-header').findComponent(GlBadge);
+  const findTrackNewRefButton = () =>
+    wrapper.findByTestId('tracked-refs-header').findComponent(GlButton);
+  const findRefList = () => wrapper.find('ul[data-testid="tracked-refs-list"]');
+  const findRefListItems = () => wrapper.findAllComponents(RefTrackingListItem);
+  const findSkeletonLoaders = () => wrapper.findAllComponents(GlSkeletonLoader);
+
+  describe('rendering', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForPromises();
+    });
+
+    it('renders a GlCard', () => {
+      expect(findCard().exists()).toBe(true);
+    });
+
+    it('renders header with title', () => {
+      expect(findTitle().text()).toBe('Currently tracked refs');
+    });
+
+    it('renders count badge with current and max values', () => {
+      expect(findCountBadge().text()).toBe(`${mockTrackedRefs.length}/${MAX_TRACKED_REFS}`);
+    });
+
+    it('renders Track new ref button', () => {
+      expect(findTrackNewRefButton().text()).toBe('Track new ref');
+    });
+
+    it('renders unordered list for refs', () => {
+      expect(findRefList().exists()).toBe(true);
+    });
+  });
+
+  describe('ref list items', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForPromises();
+    });
+
+    it('renders correct number of RefTrackingListItem components', () => {
+      expect(findRefListItems()).toHaveLength(mockTrackedRefs.length);
+    });
+
+    it.each(mockTrackedRefs)(
+      'passes correct data to RefTrackingListItem for ref "$name"',
+      (trackedRef) => {
+        const index = mockTrackedRefs.indexOf(trackedRef);
+
+        expect(findRefListItems().at(index).props('trackedRef')).toEqual(trackedRef);
+      },
+    );
+  });
+
+  describe('loading state', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows a placeholder within the count badge while loading', () => {
+      expect(findCountBadge().text()).toBe(`-/${MAX_TRACKED_REFS}`);
+    });
+
+    it('shows skeleton loader while loading', () => {
+      expect(findSkeletonLoaders()).toHaveLength(2);
+      expect(findRefList().exists()).toBe(false);
+    });
+
+    it('hides skeleton loader after data loads', async () => {
+      await waitForPromises();
+
+      expect(findSkeletonLoaders()).toHaveLength(0);
+      expect(findRefList().exists()).toBe(true);
+      expect(findRefListItems()).toHaveLength(mockTrackedRefs.length);
+    });
+  });
+});
diff --git a/spec/frontend/security_configuration/components/ref_tracking_metadata_spec.js b/spec/frontend/security_configuration/components/ref_tracking_metadata_spec.js
new file mode 100644
index 00000000000000..9897c2504164a3
--- /dev/null
+++ b/spec/frontend/security_configuration/components/ref_tracking_metadata_spec.js
@@ -0,0 +1,112 @@
+import { GlBadge, GlIcon, GlLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import RefTrackingMetadata from '~/security_configuration/components/ref_tracking_metadata.vue';
+import ProtectedBadge from '~/vue_shared/components/badges/protected_badge.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { createTrackedRef } from '../mock_data';
+
+describe('RefTrackingMetadata component', () => {
+  let wrapper;
+
+  const createComponent = ({ trackedRef = createTrackedRef() } = {}) => {
+    wrapper = shallowMountExtended(RefTrackingMetadata, {
+      propsData: {
+        trackedRef,
+      },
+    });
+  };
+
+  const findRefName = () => wrapper.findByTestId('ref-name');
+  const findDefaultBadge = () => wrapper.findComponent(GlBadge);
+  const findProtectedBadge = () => wrapper.findComponent(ProtectedBadge);
+  const findRefTypeIcon = () => wrapper.findByTestId('ref-type').findComponent(GlIcon);
+  const findRefTypeText = () => wrapper.findByTestId('ref-type').find('span');
+  const findCommitIcon = () => wrapper.findByTestId('commit-link').findComponent(GlIcon);
+  const findCommitLink = () => wrapper.findByTestId('commit-link').findComponent(GlLink);
+  const findCommitTitle = () => wrapper.findByTestId('commit-title');
+  const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
+
+  describe('rendering ref name and badges', () => {
+    it('renders the ref name correctly', () => {
+      createComponent();
+
+      expect(findRefName().text()).toBe(createTrackedRef().name);
+    });
+
+    it('shows default badge when isDefault is true', () => {
+      createComponent({ trackedRef: createTrackedRef({ isDefault: true }) });
+
+      expect(findDefaultBadge().props()).toMatchObject({
+        variant: 'info',
+      });
+    });
+
+    it('hides default badge when isDefault is false', () => {
+      createComponent({ trackedRef: createTrackedRef({ isDefault: false }) });
+
+      expect(findDefaultBadge().exists()).toBe(false);
+    });
+
+    it('shows protected badge when isProtected is true', () => {
+      createComponent({ trackedRef: createTrackedRef({ isProtected: true }) });
+
+      expect(findProtectedBadge().exists()).toBe(true);
+    });
+
+    it('hides protected badge when isProtected is false', () => {
+      createComponent({ trackedRef: createTrackedRef({ isProtected: false }) });
+
+      expect(findProtectedBadge().exists()).toBe(false);
+    });
+  });
+
+  describe('rendering ref type information', () => {
+    it('displays branch icon and text for branches', () => {
+      createComponent({ trackedRef: createTrackedRef({ refType: 'BRANCH' }) });
+
+      expect(findRefTypeIcon().props('name')).toBe('branch');
+      expect(findRefTypeText().text()).toBe('branch');
+    });
+
+    it('displays tag icon and text for tags', () => {
+      createComponent({ trackedRef: createTrackedRef({ refType: 'TAG' }) });
+
+      expect(findRefTypeIcon().props('name')).toBe('tag');
+      expect(findRefTypeText().text()).toBe('tag');
+    });
+
+    it('sets correct icon size', () => {
+      createComponent({ trackedRef: createTrackedRef({ refType: 'BRANCH' }) });
+
+      expect(findRefTypeIcon().props('size')).toBe(12);
+    });
+  });
+
+  describe('rendering commit information', () => {
+    beforeEach(() => {
+      createComponent({ trackedRef: createTrackedRef({ refType: 'BRANCH' }) });
+    });
+
+    it('displays commit icon with correct size', () => {
+      expect(findCommitIcon().props('name')).toBe('commit');
+      expect(findCommitIcon().props('size')).toBe(12);
+    });
+
+    it('renders commit link with correct href and text', () => {
+      expect(findCommitLink().attributes('href')).toBe(createTrackedRef().commit.webPath);
+      expect(findCommitLink().text()).toBe(createTrackedRef().commit.shortId);
+    });
+
+    it('displays commit title', () => {
+      expect(findCommitTitle().text()).toBe(createTrackedRef().commit.title);
+    });
+  });
+
+  describe('rendering timestamp', () => {
+    it('displays TimeAgoTooltip with correct time', () => {
+      createComponent();
+
+      expect(findTimeAgoTooltip().props('time')).toBe(createTrackedRef().commit.authoredDate);
+    });
+  });
+});
diff --git a/spec/frontend/security_configuration/mock_data.js b/spec/frontend/security_configuration/mock_data.js
index d9a51ac441d0e5..0a2ef174ce2bc1 100644
--- a/spec/frontend/security_configuration/mock_data.js
+++ b/spec/frontend/security_configuration/mock_data.js
@@ -184,3 +184,21 @@ export const provideMock = {
   vulnerabilityTrainingDocsPath: 'user/application_security/vulnerabilities/_index',
   licenseConfigurationSource: 'SBOM',
 };
+
+export const createTrackedRef = (overrides = {}) => ({
+  id: 'gid://gitlab/TrackedRef/1',
+  name: 'main',
+  refType: 'BRANCH',
+  isDefault: false,
+  isProtected: false,
+  vulnerabilitiesCount: 0,
+  commit: {
+    sha: 'df210850abc123',
+    shortId: 'df21085',
+    title: 'Commit message',
+    authoredDate: '2024-10-17T09:59:00Z',
+    webPath: '/project/-/commit/df21085',
+    ...overrides.commit,
+  },
+  ...overrides,
+});
-- 
GitLab


From 8a16cd68fbb5f775e7346a59594fad405ce459b5 Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Wed, 22 Oct 2025 14:28:53 +0200
Subject: [PATCH 2/2] Feedback: add link to docs issue

---
 .../javascripts/security_configuration/components/app.vue      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/security_configuration/components/app.vue b/app/assets/javascripts/security_configuration/components/app.vue
index 424efead3debbc..a67a945d720b55 100644
--- a/app/assets/javascripts/security_configuration/components/app.vue
+++ b/app/assets/javascripts/security_configuration/components/app.vue
@@ -136,7 +136,8 @@ export default {
       );
     },
     trackedRefsHelpPagePath() {
-      // TODO: Once the help page content is available, we can use the anchor to link to the specific section
+      // Once the help page content is available, we can use the anchor to link to the specific section
+      // See issue: https://gitlab.com/gitlab-org/gitlab/-/issues/578081
       return helpPagePath('user/application_security/vulnerability_report/_index.md');
     },
   },
-- 
GitLab