Back action in child pages

Resolves #699

Author: oodamien

ui/src/app/app.component.ts

@@ -3,6 +3,7 @@ import { ToastyConfig } from 'ng2-toasty';
 import { Renderer2 } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { BusyService } from './shared/services/busy.service';
+import { RoutingStateService } from './shared/services/routing-state.service';
 
 @Component({
   selector: 'app-root',
@@ -14,6 +15,7 @@ export class AppComponent implements OnInit {
 
   constructor(private toastyConfig: ToastyConfig,
               private renderer: Renderer2,
+              private routingStateService: RoutingStateService,
               private busyService: BusyService) {
     this.toastyConfig.theme = 'bootstrap';
     this.toastyConfig.limit = 5;
@@ -23,6 +25,7 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.routingStateService.watchRouting();
     this.renderer.listen('document', 'scroll', (evt) => {
       this.updateToasty();
     });

ui/src/app/apps/app-details/app-details.component.html

@@ -96,9 +96,7 @@ <h1>
   <hr/>
 
   <div class="footer-actions">
-    <button id="back-button" type="button" class="btn btn-default" (click)="cancel()">
-      Cancel
-    </button>
+    <button id="back-button" type="button" class="btn btn-default" (click)="cancel()">Back</button>
   </div>
 
 </div>

ui/src/app/apps/app-details/app-details.component.spec.ts

@@ -1,31 +1,33 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {RouterTestingModule} from '@angular/router/testing';
-import {BsDropdownModule, BsModalRef, BsModalService, ModalModule, PopoverModule, TooltipModule} from 'ngx-bootstrap';
-import {AppsService} from '../apps.service';
-import {ToastyService} from 'ng2-toasty';
-import {MockToastyService} from '../../tests/mocks/toasty';
-import {MockAppsService} from '../../tests/mocks/apps';
-import {ReactiveFormsModule, FormsModule} from '@angular/forms';
-import {AppDetailsComponent} from './app-details.component';
-import {SharedAboutService} from '../../shared/services/shared-about.service';
-import {AppTypeComponent} from '../components/app-type/app-type.component';
-import {RolesDirective} from '../../auth/directives/roles.directive';
-import {MockActivatedRoute} from '../../tests/mocks/activated-route';
-import {MocksSharedAboutService} from '../../tests/mocks/shared-about';
-import {ActivatedRoute} from '@angular/router';
-import {MockAuthService} from '../../tests/mocks/auth';
-import {AuthService} from '../../auth/auth.service';
-import {By} from '@angular/platform-browser';
-import {DebugElement} from '@angular/core';
-import {APPS} from '../../tests/mocks/mock-data';
-import {MockConfirmService} from '../../tests/mocks/confirm';
-import {ConfirmService} from '../../shared/components/confirm/confirm.service';
-import {AppVersionLabelComponent} from '../components/app-versions-label/app-versions-label.component';
-import {SortComponent} from '../../shared/components/sort/sort.component';
-import {OrderByPipe} from '../../shared/pipes/orderby.pipe';
-import {MockModalService} from '../../tests/mocks/modal';
-import {AppVersionsComponent} from '../app-versions/app-versions.component';
-import {BusyService} from '../../shared/services/busy.service';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { BsDropdownModule, BsModalRef, BsModalService, ModalModule, PopoverModule, TooltipModule } from 'ngx-bootstrap';
+import { AppsService } from '../apps.service';
+import { ToastyService } from 'ng2-toasty';
+import { MockToastyService } from '../../tests/mocks/toasty';
+import { MockAppsService } from '../../tests/mocks/apps';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { AppDetailsComponent } from './app-details.component';
+import { SharedAboutService } from '../../shared/services/shared-about.service';
+import { AppTypeComponent } from '../components/app-type/app-type.component';
+import { RolesDirective } from '../../auth/directives/roles.directive';
+import { MockActivatedRoute } from '../../tests/mocks/activated-route';
+import { MocksSharedAboutService } from '../../tests/mocks/shared-about';
+import { ActivatedRoute } from '@angular/router';
+import { MockAuthService } from '../../tests/mocks/auth';
+import { AuthService } from '../../auth/auth.service';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { APPS } from '../../tests/mocks/mock-data';
+import { MockConfirmService } from '../../tests/mocks/confirm';
+import { ConfirmService } from '../../shared/components/confirm/confirm.service';
+import { AppVersionLabelComponent } from '../components/app-versions-label/app-versions-label.component';
+import { SortComponent } from '../../shared/components/sort/sort.component';
+import { OrderByPipe } from '../../shared/pipes/orderby.pipe';
+import { MockModalService } from '../../tests/mocks/modal';
+import { AppVersionsComponent } from '../app-versions/app-versions.component';
+import { BusyService } from '../../shared/services/busy.service';
+import { RoutingStateService } from '../../shared/services/routing-state.service';
+import { MockRoutingStateService } from '../../tests/mocks/routing-state';
 
 /**
  * Test {@link AppDetailsComponent}.
@@ -41,9 +43,10 @@ describe('AppDetailsComponent', () => {
   const sharedAboutService = new MocksSharedAboutService();
   const modalService = new MockModalService();
   const confirmService = new MockConfirmService();
+  const routingStateService = new MockRoutingStateService();
   let activeRoute: MockActivatedRoute;
 
-  const commonTestParams = {appName: 'foo', appType: 'source'};
+  const commonTestParams = { appName: 'foo', appType: 'source' };
 
   const sourceMock = JSON.parse(JSON.stringify(APPS));
   const appMock = sourceMock.items[0];
@@ -69,14 +72,15 @@ describe('AppDetailsComponent', () => {
         RouterTestingModule.withRoutes([])
       ],
       providers: [
-        {provide: AppsService, useValue: appsService},
-        {provide: AuthService, useValue: authService},
-        {provide: ActivatedRoute, useValue: activeRoute},
-        {provide: BsModalService, useValue: modalService},
-        {provide: ConfirmService, useValue: confirmService},
-        {provide: BusyService, useValue: new BusyService()},
-        {provide: SharedAboutService, useValue: sharedAboutService},
-        {provide: ToastyService, useValue: toastyService}
+        { provide: AppsService, useValue: appsService },
+        { provide: AuthService, useValue: authService },
+        { provide: ActivatedRoute, useValue: activeRoute },
+        { provide: BsModalService, useValue: modalService },
+        { provide: ConfirmService, useValue: confirmService },
+        { provide: BusyService, useValue: new BusyService() },
+        { provide: RoutingStateService, useValue: routingStateService },
+        { provide: SharedAboutService, useValue: sharedAboutService },
+        { provide: ToastyService, useValue: toastyService }
       ]
     })
       .compileComponents();
@@ -99,11 +103,11 @@ describe('AppDetailsComponent', () => {
 
     it('Should cancel (footer close)', () => {
       fixture.detectChanges();
-      const navigate = spyOn((<any>component).router, 'navigate');
+      const navigate = spyOn(routingStateService, 'back');
       const bt: HTMLElement = fixture.debugElement.query(By.css('.footer-actions .btn-default')).nativeElement;
       bt.click();
       fixture.detectChanges();
-      expect(navigate).toHaveBeenCalledWith(['apps']);
+      expect(navigate).toHaveBeenCalled();
     });
 
   });
@@ -140,9 +144,9 @@ describe('AppDetailsComponent', () => {
     it('should apply a sort on name and uri', () => {
       const sortProperty: HTMLElement = fixture.debugElement.query(By.css('#sort-name a')).nativeElement;
       [
-        {click: sortProperty, nameAsc: true, sort: 'name', order: 'ASC'},
-        {click: sortProperty, nameDesc: true, sort: 'name', order: 'DESC'},
-        {click: sortProperty, sort: '', order: ''},
+        { click: sortProperty, nameAsc: true, sort: 'name', order: 'ASC' },
+        { click: sortProperty, nameDesc: true, sort: 'name', order: 'DESC' },
+        { click: sortProperty, sort: '', order: '' },
       ].forEach((test) => {
         test.click.click();
         fixture.detectChanges();
@@ -270,7 +274,7 @@ describe('AppDetailsComponent', () => {
         const spy = spyOn(modalService, 'show');
         fixture.debugElement.query(By.css('#no-default-version a')).nativeElement.click();
         fixture.detectChanges();
-        expect(spy).toHaveBeenCalledWith(AppVersionsComponent, {class: 'modal-xl'});
+        expect(spy).toHaveBeenCalledWith(AppVersionsComponent, { class: 'modal-xl' });
       });
 
       // Note: have to be review (related to the workaround #1871)

ui/src/app/apps/app-details/app-details.component.ts

@@ -1,19 +1,21 @@
-import {Component, OnInit, OnDestroy} from '@angular/core';
-import {Router, ActivatedRoute, Params} from '@angular/router';
-import {AppsService} from '../apps.service';
-import {ToastyService} from 'ng2-toasty';
-import {ApplicationType, DetailedAppRegistration} from '../../shared/model';
-import {Subscription} from 'rxjs/Subscription';
-import {SharedAboutService} from '../../shared/services/shared-about.service';
-import {AppRegistration} from '../../shared/model/app-registration.model';
-import {FeatureInfo} from '../../shared/model/about/feature-info.model';
-import {AppVersionsComponent} from '../app-versions/app-versions.component';
-import {BsModalService} from 'ngx-bootstrap';
-import {SortParams} from '../../shared/components/shared.interface';
-import {combineLatest} from 'rxjs/operators/combineLatest';
-import {Subject} from 'rxjs/Subject';
-import {takeUntil} from 'rxjs/operators';
-import {BusyService} from '../../shared/services/busy.service';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import { AppsService } from '../apps.service';
+import { ToastyService } from 'ng2-toasty';
+import { ApplicationType, DetailedAppRegistration } from '../../shared/model';
+import { Subscription } from 'rxjs/Subscription';
+import { SharedAboutService } from '../../shared/services/shared-about.service';
+import { AppRegistration } from '../../shared/model/app-registration.model';
+import { FeatureInfo } from '../../shared/model/about/feature-info.model';
+import { AppVersionsComponent } from '../app-versions/app-versions.component';
+import { BsModalService } from 'ngx-bootstrap';
+import { SortParams } from '../../shared/components/shared.interface';
+import { combineLatest } from 'rxjs/operators/combineLatest';
+import { Subject } from 'rxjs/Subject';
+import { takeUntil } from 'rxjs/operators';
+import { BusyService } from '../../shared/services/busy.service';
+import { Location } from '@angular/common';
+import { RoutingStateService } from '../../shared/services/routing-state.service';
 
 /**
  * Provides details for an App Registration
@@ -74,15 +76,15 @@ export class AppDetailsComponent implements OnInit, OnDestroy {
    * @param {SharedAboutService} sharedAboutService
    * @param {ToastyService} toastyService
    * @param {ActivatedRoute} route
-   * @param {Router} router
+   * @param {RoutingStateService} routingStateService
    * @param {BusyService} busyService
    * @param {BsModalService} modalService
    */
   constructor(private appsService: AppsService,
               private sharedAboutService: SharedAboutService,
               private toastyService: ToastyService,
-              private router: Router,
               private route: ActivatedRoute,
+              private routingStateService: RoutingStateService,
               private busyService: BusyService,
               private modalService: BsModalService) {
 
@@ -188,7 +190,7 @@ export class AppDetailsComponent implements OnInit, OnDestroy {
    */
   versions(appRegistration: AppRegistration) {
     console.log(`Manage versions ${appRegistration.name} app.`, appRegistration);
-    const modal = this.modalService.show(AppVersionsComponent, {class: 'modal-xl'});
+    const modal = this.modalService.show(AppVersionsComponent, { class: 'modal-xl' });
     modal.content.open(appRegistration).subscribe(() => {
       this.loadVersions();
     });
@@ -208,9 +210,10 @@ export class AppDetailsComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Back to the applications list
+   * Back action
+   * Navigate to the previous URL or /apps
    */
   cancel() {
-    this.router.navigate(['apps']);
+    this.routingStateService.back('/apps', /^(\/apps\/)/);
   }
 }

ui/src/app/shared/services/routing-state.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+
+/**
+ * This service provides a way to navigate into the history
+ *
+ * @author Damien Vitrac
+ */
+@Injectable()
+export class RoutingStateService {
+
+  /**
+   * History array
+   * @type {Array}
+   */
+  private history = [];
+
+  /**
+   * Constructor
+   *
+   * @param {Router} router
+   */
+  constructor(private router: Router) {
+  }
+
+  /**
+   * Start to watch and store the route changes
+   */
+  public watchRouting(): void {
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(({ urlAfterRedirects }: NavigationEnd) => {
+        this.history = [...this.history, { time: new Date().getTime(), url: urlAfterRedirects }];
+      });
+  }
+
+  /**
+   * Return the store history
+   * @returns {string[]}
+   */
+  public getHistory(): string[] {
+    return this.history.map((history) => history.url);
+  }
+
+  /**
+   * Performs a back action
+   * Update the history variable
+   *
+   * @param {string} defaultUrl Redirect to this URL if the history is not available
+   * @param {RegExp} isNotRegex Negative regex
+   */
+  public back(defaultUrl: string, isNotRegex?: RegExp) {
+    let url = defaultUrl;
+    if (this.history.length > 1) {
+      const item = this.history.slice(0, this.history.length - 1)
+        .reverse()
+        .find((history) => {
+          return !isNotRegex || !(isNotRegex.test(history.url));
+        });
+      this.history = this.history.slice(0, this.history.indexOf(item));
+      url = item.url;
+    }
+    this.router.navigate([url]);
+  }
+
+}

ui/src/app/shared/shared.module.ts

@@ -42,6 +42,7 @@ import { LoaderComponent } from './components/loader/loader.component';
 import { TruncatorComponent } from './components/truncator/truncator.component';
 import { TruncatorWidthProviderDirective } from './components/truncator/truncator-width-provider.directive';
 import { PagerComponent } from './components/pager/pager.component';
+import { RoutingStateService } from './services/routing-state.service';
 
 const busyConfig: BusyConfig = {
   message: 'Processing..',
@@ -111,7 +112,8 @@ const busyConfig: BusyConfig = {
     ParserService,
     ErrorHandler,
     ConfirmService,
-    BusyService
+    BusyService,
+    RoutingStateService
   ],
   exports: [
     StreamDslComponent,

ui/src/app/streams/stream/stream.component.html

@@ -18,5 +18,5 @@ <h1>Detailed view of stream <strong>'{{ id }}'</strong></h1>
 </div>
 
 <div class="footer-actions" style="text-align: center;margin: 1rem 0">
-  <a id="btn-cancel" class="btn btn-default" routerLink="/streams">Cancel</a>
+  <button type="button" id="btn-cancel" class="btn btn-default" (click)="cancel()">Back</button>
 </div>

ui/src/app/streams/stream/stream.component.spec.ts

@@ -13,6 +13,8 @@ import { RenderService } from '../components/flo/render.service';
 import { MockSharedAppService } from '../../tests/mocks/shared-app';
 import { BusyService } from '../../shared/services/busy.service';
 import { StreamComponent } from './stream.component';
+import { RoutingStateService } from '../../shared/services/routing-state.service';
+import { MockRoutingStateService } from '../../tests/mocks/routing-state';
 
 
 /**
@@ -30,6 +32,7 @@ describe('StreamComponent', () => {
   const metamodelService = new MetamodelService(new MockSharedAppService());
   const renderService = new RenderService(metamodelService);
   const busyService = new BusyService();
+  const routingStateService = new MockRoutingStateService();
 
   beforeEach(async(() => {
     activeRoute = new MockActivatedRoute();
@@ -48,6 +51,7 @@ describe('StreamComponent', () => {
         { provide: ActivatedRoute, useValue: activeRoute },
         { provide: BusyService, useValue: busyService },
         { provide: ToastyService, useValue: toastyService },
+        { provide: RoutingStateService, useValue: routingStateService },
         { provide: MetamodelService, useValue: metamodelService },
         { provide: RenderService, useValue: renderService }
       ]

ui/src/app/streams/stream/stream.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { RoutingStateService } from '../../shared/services/routing-state.service';
 
 /**
  * Component that shows the details of a Stream Definition
@@ -26,8 +27,10 @@ export class StreamComponent implements OnInit {
   /**
    * Constructor
    * @param {ActivatedRoute} route
+   * @param {RoutingStateService} routingStateService
    */
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private routingStateService: RoutingStateService) {
   }
 
   /**
@@ -40,4 +43,12 @@ export class StreamComponent implements OnInit {
     });
   }
 
+  /**
+   * Back action
+   * Navigate to the previous URL or /streams/definitions
+   */
+  cancel() {
+    this.routingStateService.back('/streams/definitions', /^(\/streams\/definitions\/)/);
+  }
+
 }