From: Tiago Melo <tmelo@suse.com>
Date: Wed, 13 Feb 2019 14:12:56 +0000 (+0000)
Subject: mgr/dashboard: Add a pending state to the breadcrumb
X-Git-Tag: v15.0.0~109^2~1
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=06fec80ef7a98fd7291fd02d3fb75a3356b2e01f;p=ceph.git

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 3ca38d9735dc..8b66ec42fcb9 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,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 f7b9d8af1ccb..94f3c4ae4854 100644
--- 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;
           });
       });