From: Nizamudeen A <nia@redhat.com>
Date: Sat, 22 Jun 2024 15:31:49 +0000 (+0530)
Subject: mgr/dashboard: carbonize breadcrums
X-Git-Tag: testing/wip-vshankar-testing-20240731.064922-debug~21^2~1
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=66fb04fa55fc26f5493a7a98f01f0d76504171ff;p=ceph-ci.git

mgr/dashboard: carbonize breadcrums

Fixes: https://tracker.ceph.com/issues/67231
Signed-off-by: Nizamudeen A <nia@redhat.com>
---

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 05232b7fa07..8789aca1f53 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 733f7e67771..e69de29bb2d 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 958dfb4c00a..d5bc8bc936a 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,