From f36041c35015afcdb88f74a6fd2a6b77b2b2ad6a Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Tue, 13 May 2025 15:39:08 +0200
Subject: [PATCH] Switch Compliance Dashboard breadcrumbs to use singleNavOptIn

EE: true
---
 .../compliance_dashboard_bundle.js             |  8 +++++++-
 .../compliance_dashboard_breadcrumbs.vue       |  9 ++++++++-
 .../compliance_dashboard_breadcrumbs_spec.js   | 18 ++++++++++++++----
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/ee/app/assets/javascripts/compliance_dashboard/compliance_dashboard_bundle.js b/ee/app/assets/javascripts/compliance_dashboard/compliance_dashboard_bundle.js
index 548c350d8f51a1..585f91407f364a 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/compliance_dashboard_bundle.js
+++ b/ee/app/assets/javascripts/compliance_dashboard/compliance_dashboard_bundle.js
@@ -80,7 +80,13 @@ export default () => {
     defaultClient: createDefaultClient(),
   });
 
-  injectVueAppBreadcrumbs(router, ComplianceDashboardBreadcrumbs);
+  injectVueAppBreadcrumbs(
+    router,
+    ComplianceDashboardBreadcrumbs,
+    null,
+    {},
+    { singleNavOptIn: true },
+  );
 
   return new Vue({
     el,
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/compliance_dashboard_breadcrumbs.vue b/ee/app/assets/javascripts/compliance_dashboard/components/compliance_dashboard_breadcrumbs.vue
index 18f646e151ba03..f82d4cf613cad8 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/compliance_dashboard_breadcrumbs.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/compliance_dashboard_breadcrumbs.vue
@@ -17,6 +17,13 @@ export default {
   components: {
     GlBreadcrumb,
   },
+  props: {
+    staticBreadcrumbs: {
+      type: Object,
+      default: () => ({ items: [] }),
+      required: false,
+    },
+  },
   computed: {
     rootRoute() {
       return {
@@ -77,7 +84,7 @@ export default {
       }
     },
     breadcrumbs() {
-      const breadCrumbs = [this.rootRoute];
+      const breadCrumbs = [...this.staticBreadcrumbs.items, this.rootRoute];
 
       if (this.activeTabRoute) breadCrumbs.push(this.activeTabRoute);
       if (this.actionRoute) breadCrumbs.push(this.actionRoute);
diff --git a/ee/spec/frontend/compliance_dashboard/components/compliance_dashboard_breadcrumbs_spec.js b/ee/spec/frontend/compliance_dashboard/components/compliance_dashboard_breadcrumbs_spec.js
index c0185ce273187e..5a1b504ff1adbf 100644
--- a/ee/spec/frontend/compliance_dashboard/components/compliance_dashboard_breadcrumbs_spec.js
+++ b/ee/spec/frontend/compliance_dashboard/components/compliance_dashboard_breadcrumbs_spec.js
@@ -49,21 +49,31 @@ describe('ComplianceDashboardBreadcrumbs', () => {
     ],
   };
 
-  const createComponent = ($route) => {
+  const createComponent = ($route, props = {}) => {
     wrapper = shallowMountExtended(ComplianceDashboardBreadcrumbs, {
       mocks: {
         $route,
       },
+      propsData: props,
     });
   };
 
   const findGlBreadcrumb = () => wrapper.findComponent(GlBreadcrumb);
 
   describe.each(mockedRoutes)('when route path is $fullPath', ({ name, fullPath }) => {
-    it('passess the correct breadcrumbs items to GlBreadcrumb', () => {
-      createComponent({ name, fullPath });
+    it('passes the correct breadcrumbs items to GlBreadcrumb', () => {
+      const staticBreadcrumb = { text: 'Static breadcrumb', href: '/static' };
+      createComponent(
+        { name, fullPath },
+        {
+          staticBreadcrumbs: { items: [staticBreadcrumb] },
+        },
+      );
 
-      expect(findGlBreadcrumb().props('items')).toMatchObject(breadcrumbItemsDictionary[name]);
+      expect(findGlBreadcrumb().props('items')).toStrictEqual([
+        staticBreadcrumb,
+        ...breadcrumbItemsDictionary[name],
+      ]);
     });
   });
 });
-- 
GitLab