mgr/dashboard: carbonize breadcrums

Fixes: https://tracker.ceph.com/issues/67231
Signed-off-by: Nizamudeen A <[email protected]>

Author: nizamial09

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>

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;
-}

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,