mgr/dashboard: Add a pending state to the breadcrumb

Signed-off-by: Tiago Melo <tmelo@suse.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 3ca38d9735dc39a74adc627e4f872db849c670d7..8b66ec42fcb9620a78c6c57b7294a1b989e4b5ff 100644 (file)
--- 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,7 +1,7 @@
 <ol *ngIf="crumbs.length"
     class="breadcrumb">
   <li *ngFor="let crumb of crumbs; let last = last"
-      [ngClass]="{ 'active': last }"
+      [ngClass]="{ 'active': last && finished }"
       class="breadcrumb-item">
     <a *ngIf="!last && crumb.path !== null"
        [routerLink]="crumb.path">{{ crumb.text }}</a>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
index f7b9d8af1ccb34c4939161e5551cad878a47cc5a..94f3c4ae4854204e4e4e490ddd8e19ae29a53cd7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.ts
@@ -23,7 +23,7 @@ THE SOFTWARE.
  */
 
 import { Component, Injector, OnDestroy } from '@angular/core';
-import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, NavigationEnd, NavigationStart, Router } from '@angular/router';
 
 import { from, Observable, of, Subscription } from 'rxjs';
 import { concat, distinct, filter, first, flatMap, toArray } from 'rxjs/operators';
@@ -37,10 +37,24 @@ import { BreadcrumbsResolver, IBreadcrumb } from '../../../shared/models/breadcr
 })
 export class BreadcrumbsComponent implements OnDestroy {
   crumbs: IBreadcrumb[] = [];
+  /**
+   * Usefull for e2e tests.
+   * This allow us to mark the breadcrumb as pending during the navigation from
+   * one page to another.
+   * This resolves the problem of validating the breadcrumb of a new page and
+   * still get the value from the previous
+   */
+  finished = false;
   subscription: Subscription;
   private defaultResolver = new BreadcrumbsResolver();
 
   constructor(private router: Router, private injector: Injector) {
+    this.subscription = this.router.events
+      .pipe(filter((x) => x instanceof NavigationStart))
+      .subscribe(() => {
+        this.finished = false;
+      });
+
     this.subscription = this.router.events
       .pipe(filter((x) => x instanceof NavigationEnd))
       .subscribe(() => {
@@ -57,6 +71,7 @@ export class BreadcrumbsComponent implements OnDestroy {
             })
           )
           .subscribe((x) => {
+            this.finished = true;
             this.crumbs = x;
           });
       });