From 66fb04fa55fc26f5493a7a98f01f0d76504171ff Mon Sep 17 00:00:00 2001
From: Nizamudeen A <nia@redhat.com>
Date: Sat, 22 Jun 2024 21:01:49 +0530
Subject: [PATCH] mgr/dashboard: carbonize breadcrums

Fixes: https://tracker.ceph.com/issues/67231
Signed-off-by: Nizamudeen A <nia@redhat.com>
---
 .../breadcrumbs/breadcrumbs.component.html    | 24 ++++++++++---------
 .../breadcrumbs/breadcrumbs.component.scss    | 12 ----------
 .../app/core/navigation/navigation.module.ts  |  6 +++--
 3 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.html
index 05232b7fa0755..8789aca1f53b2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.html
@@ -1,11 +1,13 @@
-<ol *ngIf="crumbs.length"
-    class="breadcrumb">
-  <li *ngFor="let crumb of crumbs; let last = last"
-      [ngClass]="{ 'active': last && finished }"
-      class="breadcrumb-item">
-    <a *ngIf="!last && crumb.path !== null"
-       [routerLink]="crumb.path"
-       preserveFragment>{{ crumb.text }}</a>
-    <span *ngIf="last || crumb.path === null">{{ crumb.text }}</span>
-  </li>
-</ol>
+<cds-breadcrumb [noTrailingSlash]="true"
+                *ngIf="crumbs.length">
+  <ng-container *ngFor="let crumb of crumbs; let last = last">
+    <cds-breadcrumb-item *ngIf="!last && crumb.path !== null"
+                         href="#/{{ crumb.path }}">
+      {{ crumb.text }}
+    </cds-breadcrumb-item>
+
+    <cds-breadcrumb-item *ngIf="last || crumb.path === null">
+      {{ crumb.text }}
+    </cds-breadcrumb-item>
+  </ng-container>
+</cds-breadcrumb>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
index 733f7e67771c1..e69de29bb2d1d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
@@ -1,12 +0,0 @@
-.breadcrumb {
-  background-color: transparent;
-  border-radius: 0;
-  margin-top: 8px;
-  padding: 8px 0;
-}
-
-.breadcrumb > li + li::before {
-  content: '\f101';
-  font-family: 'ForkAwesome';
-  padding: 0 5px 0 7px;
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
index 958dfb4c00ab6..d5bc8bc936a4a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts
@@ -10,7 +10,8 @@ import {
   IconModule,
   ThemeModule,
   DialogModule,
-  GridModule
+  GridModule,
+  BreadcrumbModule
 } from 'carbon-components-angular';
 
 import { AppRoutingModule } from '~/app/app-routing.module';
@@ -56,7 +57,8 @@ import LogoutIcon from '@carbon/icons/es/logout/16';
     IconModule,
     ThemeModule,
     DialogModule,
-    GridModule
+    GridModule,
+    BreadcrumbModule
   ],
   declarations: [
     AboutComponent,
-- 
2.39.5