Admin UI: Breadcrumbs

.gitignore

@@ -337,6 +337,7 @@ ASALocalRun/
 
 # Local History for Visual Studio
 .localhistory/
+**/.history/*
 
 # BeatPulse healthcheck temp database
 healthchecksdb

AdminUi/src/AdminUi/ClientApp/src/app/app-routing.module.ts

@@ -14,14 +14,14 @@ import { LoginComponent } from "./components/shared/login/login.component";
 const routes: Routes = [
     { path: "", redirectTo: "/dashboard", pathMatch: "full" },
     { path: "login", component: LoginComponent },
-    { path: "dashboard", component: DashboardComponent, canActivate: [AuthGuard] },
-    { path: "identities", component: IdentityListComponent, canActivate: [AuthGuard] },
+    { path: "dashboard", component: DashboardComponent, data: { breadcrumb: "Dashboard" }, canActivate: [AuthGuard] },
+    { path: "identities", component: IdentityListComponent, data: { breadcrumb: "Identities" }, canActivate: [AuthGuard] },
     { path: "identities/:address", component: IdentityDetailsComponent, canActivate: [AuthGuard] },
-    { path: "tiers", component: TierListComponent, canActivate: [AuthGuard] },
-    { path: "tiers/create", component: TierEditComponent, canActivate: [AuthGuard] },
+    { path: "tiers", component: TierListComponent, data: { breadcrumb: "Tiers" }, canActivate: [AuthGuard] },
+    { path: "tiers/create", component: TierEditComponent, data: { breadcrumb: "Create Tier" }, canActivate: [AuthGuard] },
     { path: "tiers/:id", component: TierEditComponent, canActivate: [AuthGuard] },
-    { path: "clients", component: ClientListComponent, canActivate: [AuthGuard] },
-    { path: "clients/create", component: ClientEditComponent, canActivate: [AuthGuard] },
+    { path: "clients", component: ClientListComponent, data: { breadcrumb: "Clients" }, canActivate: [AuthGuard] },
+    { path: "clients/create", component: ClientEditComponent, data: { breadcrumb: "Create Client" }, canActivate: [AuthGuard] },
     { path: "clients/:id", component: ClientEditComponent, canActivate: [AuthGuard] },
     { path: "**", component: PageNotFoundComponent }
 ];

AdminUi/src/AdminUi/ClientApp/src/app/app.component.html

@@ -6,6 +6,7 @@
         </mat-sidenav>
         <mat-sidenav-content class="layout-main-container">
             <div class="layout-content">
+                <app-breadcrumb></app-breadcrumb>
                 <router-outlet (activate)="changeOfRoute()"></router-outlet>
             </div>
         </mat-sidenav-content>

AdminUi/src/AdminUi/ClientApp/src/app/app.module.ts

@@ -49,6 +49,7 @@ import { TierEditComponent } from "./components/quotas/tier/tier-edit/tier-edit.
 import { TierListComponent } from "./components/quotas/tier/tier-list/tier-list.component";
 import { ConfirmationDialogComponent } from "./components/shared/confirmation-dialog/confirmation-dialog.component";
 import { IdentitiesOverviewComponent } from "./components/shared/identities-overview/identities-overview.component";
+import { BreadcrumbComponent } from "./components/shared/breadcrumb/breadcrumb.component";
 import { LoginComponent } from "./components/shared/login/login.component";
 import { SidebarComponent } from "./components/sidebar/sidebar.component";
 import { TopbarComponent } from "./components/topbar/topbar.component";
@@ -76,7 +77,8 @@ import { XSRFInterceptor } from "./shared/interceptors/xsrf.interceptor";
         LoginComponent,
         ChangeSecretDialogComponent,
         IdentitiesOverviewComponent,
-        IdentityDetailsRelationshipsComponent
+        IdentityDetailsRelationshipsComponent,
+        BreadcrumbComponent
     ],
     imports: [
         FormsModule,

AdminUi/src/AdminUi/ClientApp/src/app/components/shared/breadcrumb/breadcrumb.component.css

@@ -0,0 +1,29 @@
+nav {
+    font-size: 16px;
+    margin: 10px 0;
+}
+
+a {
+    color: #17428d;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #076fde;
+}
+
+span::after {
+    content: " > ";
+    margin: 0 5px;
+    color: #999;
+}
+
+span:last-child::after {
+    content: "";
+}
+
+span.active {
+    color: #333;
+    font-weight: bold;
+}

AdminUi/src/AdminUi/ClientApp/src/app/components/shared/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,9 @@
+<nav>
+    <ng-container *ngFor="let trail of breadcrumbHistory; let i = index; let last = last">
+        <ng-container *ngIf="!last || (last && breadcrumbHistory.length > 1)">
+            <a *ngIf="!last" [routerLink]="trail.url" (click)="onBreadcrumbClick(i)">{{ trail.label }}</a>
+            <span *ngIf="last">{{ trail.label }}</span>
+        </ng-container>
+        <ng-container *ngIf="!last"> &gt; </ng-container>
+    </ng-container>
+</nav>

AdminUi/src/AdminUi/ClientApp/src/app/components/shared/breadcrumb/breadcrumb.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { BreadcrumbComponent } from "./breadcrumb.component";
+
+describe("BreadcrumbComponent", function () {
+    let component: BreadcrumbComponent;
+    let fixture: ComponentFixture<BreadcrumbComponent>;
+
+    beforeEach(async function () {
+        await TestBed.configureTestingModule({
+            declarations: [BreadcrumbComponent],
+            imports: [RouterTestingModule]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(BreadcrumbComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", async function () {
+        await expect(component).toBeTruthy();
+    });
+});

AdminUi/src/AdminUi/ClientApp/src/app/components/shared/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,29 @@
+import { Component } from "@angular/core";
+import { NavigationEnd, Router } from "@angular/router";
+import { filter } from "rxjs/operators";
+import { Breadcrumb, BreadcrumbService } from "src/app/services/breadcrumb-service/breadcrumb.service";
+
+@Component({
+    selector: "app-breadcrumb",
+    templateUrl: "./breadcrumb.component.html",
+    styleUrls: ["./breadcrumb.component.css"]
+})
+export class BreadcrumbComponent {
+    public breadcrumbHistory: Breadcrumb[] = [];
+
+    public constructor(
+        private readonly breadcrumbService: BreadcrumbService,
+        private readonly router: Router
+    ) {}
+
+    public ngOnInit(): void {
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+            this.breadcrumbHistory = this.breadcrumbService.getBreadcrumbHistory();
+        });
+    }
+
+    public onBreadcrumbClick(index: number): void {
+        this.breadcrumbService.clearBreadcrumbHistoryAfterIndex(index);
+        this.breadcrumbHistory = this.breadcrumbService.getBreadcrumbHistory();
+    }
+}

AdminUi/src/AdminUi/ClientApp/src/app/services/auth-service/auth.service.ts

@@ -4,6 +4,7 @@ import { Router } from "@angular/router";
 import { BehaviorSubject, Observable } from "rxjs";
 import { environment } from "src/environments/environment";
 import { XSRFService } from "../xsrf-service/xsrf.service";
+import { BreadcrumbService } from "../breadcrumb-service/breadcrumb.service";
 
 @Injectable({
     providedIn: "root"
@@ -19,7 +20,8 @@ export class AuthService {
     public constructor(
         private readonly router: Router,
         private readonly http: HttpClient,
-        private readonly xsrfService: XSRFService
+        private readonly xsrfService: XSRFService,
+        private readonly breadcrumbService: BreadcrumbService
     ) {
         this.apiUrl = environment.apiUrl;
     }
@@ -49,6 +51,7 @@ export class AuthService {
 
     public async logout(): Promise<boolean> {
         localStorage.removeItem("api-key");
+        this.breadcrumbService.clearBreadcrumbHistoryAfterIndex(0);
         this.loggedIn.next(false);
         this.xsrfService.clearStoredToken();
         return await this.router.navigate(["/login"]);

AdminUi/src/AdminUi/ClientApp/src/app/services/breadcrumb-service/breadcrumb.service.spec.ts

@@ -0,0 +1,171 @@
+import { TestBed } from "@angular/core/testing";
+import { BreadcrumbService } from "./breadcrumb.service";
+import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
+import { BehaviorSubject } from "rxjs";
+
+class MockActivatedRoute {
+    private readonly subject = new BehaviorSubject(this.testParams);
+    public params = this.subject.asObservable();
+
+    private _testParams!: {};
+    public get testParams() {
+        return this._testParams;
+    }
+    public set testParams(params: {}) {
+        this._testParams = params;
+        this.subject.next(params);
+    }
+}
+
+describe("BreadcrumbService", function () {
+    let breadcrumbService: BreadcrumbService;
+    let mockRouter: Router;
+    let mockActivatedRoute: MockActivatedRoute;
+
+    const initialHistory = [
+        { label: "Home", url: "/home" },
+        { label: "Details", url: "/details" },
+        { label: "Products", url: "/products" }
+    ];
+
+    beforeEach(function () {
+        mockRouter = {
+            events: new BehaviorSubject(new NavigationEnd(0, "", ""))
+        } as any;
+
+        mockActivatedRoute = new MockActivatedRoute();
+
+        TestBed.configureTestingModule({
+            providers: [BreadcrumbService, { provide: Router, useValue: mockRouter }, { provide: ActivatedRoute, useValue: mockActivatedRoute }]
+        });
+        breadcrumbService = TestBed.inject(BreadcrumbService);
+    });
+
+    it("should be created", async function () {
+        await expect(breadcrumbService).toBeTruthy();
+    });
+
+    it("should return an empty array initially", async function () {
+        // Arrange
+
+        // Act
+        const result = breadcrumbService.getBreadcrumbHistory();
+
+        // Assert
+        await expect(result.length).toEqual(0);
+    });
+
+    it("should return the breadcrumb history array", async function () {
+        // Arrange
+        const expectedHistory = [
+            { label: "Home", url: "/home" },
+            { label: "Details", url: "/details" },
+            { label: "Products", url: "/products" }
+        ];
+
+        // Act
+        for (const e of expectedHistory) {
+            breadcrumbService["breadcrumbHistory"].push(e);
+        }
+        const result = breadcrumbService.getBreadcrumbHistory();
+
+        // Assert
+        await expect(result).toEqual(expectedHistory);
+    });
+
+    it("should return a flat array when multiple trails are added", async function () {
+        // Arrange
+        const firstTrail = [{ label: "Home", url: "/home" }];
+        const secondTrail = [
+            { label: "Details", url: "/details" },
+            { label: "Products", url: "/products" }
+        ];
+
+        breadcrumbService["breadcrumbHistory"] = [...firstTrail, ...secondTrail];
+
+        // Act
+        const result = breadcrumbService.getBreadcrumbHistory();
+
+        // Assert
+        await expect(result).toEqual([...firstTrail, ...secondTrail]);
+    });
+
+    it("should return a copy of the breadcrumb history array", async function () {
+        // Arrange
+        const expectedHistory = [
+            { label: "Home", url: "/home" },
+            { label: "Details", url: "/details" },
+            { label: "Products", url: "/products" }
+        ];
+
+        // Act
+        for (const e of expectedHistory) {
+            breadcrumbService["breadcrumbHistory"].push(e);
+        }
+        const result = JSON.parse(JSON.stringify(breadcrumbService.getBreadcrumbHistory()));
+        result[0].label = "Modified";
+
+        // Assert
+        await expect(result).not.toEqual(expectedHistory);
+    });
+
+    it("should not modify the internal breadcrumb history array when modifying the result", async function () {
+        // Arrange
+        const expectedHistory = [
+            { label: "Home", url: "/home" },
+            { label: "Details", url: "/details" },
+            { label: "Products", url: "/products" }
+        ];
+
+        // Act
+        for (const e of expectedHistory) {
+            breadcrumbService["breadcrumbHistory"].push(e);
+        }
+        const result = breadcrumbService.getBreadcrumbHistory();
+
+        // Modify the result
+        result[0].label = "Modified";
+
+        // Assert
+        await expect(breadcrumbService.getBreadcrumbHistory()).toEqual(expectedHistory);
+    });
+
+    it("should do nothing if the index is negative", async function () {
+        // Arrange
+        breadcrumbService["breadcrumbHistory"] = [...initialHistory];
+
+        // Act
+        breadcrumbService.clearBreadcrumbHistoryAfterIndex(-1);
+
+        // Assert
+        await expect(breadcrumbService.getBreadcrumbHistory()).toEqual(initialHistory);
+    });
+
+    it("should do nothing if the index is equal to the last index", async function () {
+        // Arrange
+        breadcrumbService["breadcrumbHistory"] = [...initialHistory];
+        const lastIndex = initialHistory.length - 1;
+
+        // Act
+        breadcrumbService.clearBreadcrumbHistoryAfterIndex(lastIndex);
+
+        // Assert
+        await expect(breadcrumbService.getBreadcrumbHistory()).toEqual(initialHistory);
+    });
+
+    it("should clear history after the specified index", async function () {
+        // Arrange
+        const expectedHistory = [
+            { label: "Home", url: "/home" },
+            { label: "Details", url: "/details" }
+        ];
+        breadcrumbService["breadcrumbHistory"] = [...initialHistory];
+        const indexToClear = 1;
+
+        // Act
+        breadcrumbService.clearBreadcrumbHistoryAfterIndex(indexToClear);
+
+        // Assert
+        await expect(breadcrumbService.getBreadcrumbHistory()).toEqual(expectedHistory);
+    });
+});