fix(ui): do not refresh state if route changed before api response (#…

…5115)

ui/src/app/shared/repomanager/from/repomanager.form.spec.ts

@@ -6,7 +6,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateLoader, TranslateModule, TranslateParser, TranslateService } from '@ngx-translate/core';
 import { ToasterService } from 'angular2-toaster/angular2-toaster';
 import { AuthenticationService } from 'app/service/authentication/authentication.service';
-import { MonitoringService } from 'app/service/services.module';
+import { MonitoringService, RouterService } from 'app/service/services.module';
 import { UserService } from 'app/service/user/user.service';
 import { WorkflowRunService } from 'app/service/workflow/run/workflow.run.service';
 import { WorkflowService } from 'app/service/workflow/workflow.service';
@@ -50,7 +50,7 @@ describe('CDS: Project RepoManager Form Component', () => {
                 UserService,
                 AuthenticationService,
                 MonitoringService,
-                WorkflowRunService
+                RouterService
             ],
             imports: [
                 SharedModule,

ui/src/app/store/applications.state.spec.ts

@@ -23,6 +23,8 @@ import { WorkflowState } from './workflow.state';
 import { PipelineService } from 'app/service/pipeline/pipeline.service';
 import { EnvironmentService } from 'app/service/environment/environment.service';
 import { ApplicationService } from 'app/service/application/application.service';
+import { RouterService } from 'app/service/router/router.service';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('Applications', () => {
     let store: Store;
@@ -32,6 +34,7 @@ describe('Applications', () => {
         TestBed.configureTestingModule({
             providers: [
                 { provide: XHRBackend, useClass: MockBackend },
+                RouterService,
                 NavbarService,
                 WorkflowService,
                 WorkflowRunService,
@@ -43,7 +46,7 @@ describe('Applications', () => {
             ],
             imports: [
                 NgxsModule.forRoot([ApplicationsState, ProjectState, PipelinesState, WorkflowState]),
-                HttpClientTestingModule
+                HttpClientTestingModule, RouterTestingModule.withRoutes([]),
             ],
         }).compileComponents();
 

ui/src/app/store/pipelines.state.spec.ts

@@ -22,18 +22,21 @@ import { WorkflowState } from './workflow.state';
 import { PipelineService } from 'app/service/pipeline/pipeline.service';
 import { EnvironmentService } from 'app/service/environment/environment.service';
 import { ApplicationService } from 'app/service/application/application.service';
+import { RouterService } from 'app/service/router/router.service';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('Pipelines', () => {
     let store: Store;
     let testProjectKey = 'test1';
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            providers: [NavbarService, WorkflowRunService, WorkflowService, ProjectStore,
+            providers: [NavbarService, WorkflowRunService, WorkflowService, ProjectStore, RouterService,
                 ProjectService, PipelineService, EnvironmentService, ApplicationService],
             imports: [
                 NgxsModule.forRoot([ApplicationsState, ProjectState, PipelinesState, WorkflowState]),
-                HttpClientTestingModule
+                HttpClientTestingModule, RouterTestingModule.withRoutes([])
             ],
         }).compileComponents();
 

ui/src/app/store/project.state.spec.ts

@@ -25,16 +25,19 @@ import { WorkflowState } from './workflow.state';
 import { PipelineService } from 'app/service/pipeline/pipeline.service';
 import { EnvironmentService } from 'app/service/environment/environment.service';
 import { ApplicationService } from 'app/service/application/application.service';
+import { RouterService } from 'app/service/router/router.service';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('Project', () => {
     let store: Store;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            providers: [NavbarService, WorkflowService, WorkflowRunService, ProjectStore,
+            providers: [NavbarService, WorkflowService, WorkflowRunService, ProjectStore, RouterService,
                 ProjectService, PipelineService, EnvironmentService, ApplicationService],
             imports: [
-                HttpClientTestingModule,
+                HttpClientTestingModule, RouterTestingModule.withRoutes([]),
                 NgxsModule.forRoot([ProjectState, ApplicationsState, PipelinesState, WorkflowState])
             ],
         }).compileComponents();

ui/src/app/store/workflow.state.spec.ts

@@ -10,7 +10,7 @@ import { ProjectService } from 'app/service/project/project.service';
 import { ProjectStore } from 'app/service/project/project.store';
 import { WorkflowRunService } from 'app/service/workflow/run/workflow.run.service';
 import { WorkflowService } from 'app/service/workflow/workflow.service';
-import { ApplicationsState } from './applications.state';
+import { ApplicationsState, ApplicationStateModel } from './applications.state';
 import { PipelinesState } from './pipelines.state';
 import { AddProject } from './project.action';
 import { ProjectState, ProjectStateModel } from './project.state';
@@ -19,29 +19,37 @@ import { WorkflowState, WorkflowStateModel } from './workflow.state';
 import { PipelineService } from 'app/service/pipeline/pipeline.service';
 import { EnvironmentService } from 'app/service/environment/environment.service';
 import { ApplicationService } from 'app/service/application/application.service';
+import { RouterService } from 'app/service/router/router.service';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Router } from '@angular/router';
+import { Application } from 'app/model/application.model';
+import { Usage } from 'app/model/usage.model';
+import { of } from 'rxjs';
 
 describe('Workflows', () => {
     let store: Store;
     let testProjectKey = 'test1';
-
+    let routerService: RouterService;
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             providers: [
+                RouterService,
                 NavbarService,
                 WorkflowService,
                 WorkflowRunService,
                 ProjectStore,
                 ProjectService,
                 PipelineService,
                 EnvironmentService,
-                ApplicationService
+                ApplicationService,
             ],
             imports: [
                 NgxsModule.forRoot([ApplicationsState, ProjectState, PipelinesState, WorkflowState]),
-                HttpClientTestingModule
+                HttpClientTestingModule, RouterTestingModule.withRoutes([]),
             ],
         }).compileComponents();
 
+        routerService = TestBed.get(RouterService);
         store = TestBed.get(Store);
         let project = <Project>{
             key: testProjectKey,
@@ -62,6 +70,9 @@ describe('Workflows', () => {
     }));
 
     it('fetch workflow', async(() => {
+        spyOn(routerService, 'getRouteSnapshotParams').and.callFake(() => {
+            return {'key': testProjectKey, 'workflowName': 'wf1'};
+        });
         const http = TestBed.get(HttpTestingController);
         store.dispatch(new workflowsActions.GetWorkflow({
             projectKey: testProjectKey,
@@ -277,6 +288,9 @@ describe('Workflows', () => {
     }));
 
     it('fetch audits', async(() => {
+        spyOn(routerService, 'getRouteSnapshotParams').and.callFake(() => {
+            return {'key': testProjectKey, 'workflowName': 'wf1'};
+        });
         const http = TestBed.get(HttpTestingController);
         let workflow = new Workflow();
         workflow.name = 'wf1';

ui/src/app/store/workflow.state.ts

@@ -1,8 +1,10 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Router } from '@angular/router';
 import { Action, createSelector, Selector, State, StateContext } from '@ngxs/store';
 import { WNode, WNodeHook, WNodeTrigger, Workflow } from 'app/model/workflow.model';
 import { WorkflowNodeJobRun, WorkflowNodeRun, WorkflowRun } from 'app/model/workflow.run.model';
 import { NavbarService } from 'app/service/navbar/navbar.service';
+import { RouterService } from 'app/service/router/router.service';
 import { WorkflowRunService } from 'app/service/workflow/run/workflow.run.service';
 import { WorkflowService } from 'app/service/workflow/workflow.service';
 import { WorkflowSidebarMode } from 'app/service/workflow/workflow.sidebar.store';
@@ -224,8 +226,8 @@ export class WorkflowState {
         };
     }
 
-    constructor(private _http: HttpClient, private _navbarService: NavbarService,
-        private _workflowService: WorkflowService, private _workflowRunService: WorkflowRunService) {
+    constructor(private _http: HttpClient, private _navbarService: NavbarService, private _routerService: RouterService,
+        private _workflowService: WorkflowService, private _workflowRunService: WorkflowRunService, private _router: Router) {
     }
 
     @Action(actionWorkflow.OpenEditModal)
@@ -1016,6 +1018,11 @@ export class WorkflowState {
     resync(ctx: StateContext<WorkflowStateModel>, action: actionWorkflow.GetWorkflow) {
         return this._workflowService.getWorkflow(action.payload.projectKey, action.payload.workflowName).pipe(first(),
             tap(wf => {
+                let routeParams = this._routerService.getRouteSnapshotParams({}, this._router.routerState.snapshot.root);
+                if (wf.project_key !== routeParams['key'] || wf.name !== routeParams['workflowName']) {
+                    return;
+                }
+
                 const state = ctx.getState();
                 let canEdit = wf.permissions.writable;
                 let editWorkflow: Workflow;
@@ -1131,12 +1138,18 @@ export class WorkflowState {
                     });
                 }),
                 tap((wr: WorkflowRun) => {
-                    const stateRun = ctx.getState();
-                    ctx.setState({
-                        ...stateRun,
-                        projectKey: action.payload.projectKey,
-                        workflowRun: wr
-                    });
+                    let routeParams = this._routerService.getRouteSnapshotParams({}, this._router.routerState.snapshot.root);
+                    if (wr.workflow.project_key !== routeParams['key'] || wr.workflow.name !== routeParams['workflowName']) {
+                        return;
+                    }
+                    if (routeParams['number'] && routeParams['number'] === wr.num.toString()) {
+                        const stateRun = ctx.getState();
+                        ctx.setState({
+                            ...stateRun,
+                            projectKey: action.payload.projectKey,
+                            workflowRun: wr
+                        });
+                    }
                     ctx.dispatch(new UpdateWorkflowRunList({ workflowRun: wr }));
                     return wr;
                 }));
@@ -1180,6 +1193,10 @@ export class WorkflowState {
                     });
                 }),
                 tap((wrs: Array<WorkflowRun>) => {
+                    let routeParams = this._routerService.getRouteSnapshotParams({}, this._router.routerState.snapshot.root);
+                    if (action.payload.projectKey !== routeParams['key'] || action.payload.workflowName !== routeParams['workflowName']) {
+                        return;
+                    }
                     const stateRun = ctx.getState();
                     ctx.setState({
                         ...stateRun,
@@ -1207,6 +1224,17 @@ export class WorkflowState {
                     loadingWorkflowNodeRun: false
                 });
             }), tap((wnr: WorkflowNodeRun) => {
+                let routeParams = this._routerService.getRouteSnapshotParams({}, this._router.routerState.snapshot.root);
+                if (action.payload.projectKey !== routeParams['key'] || action.payload.workflowName !== routeParams['workflowName']) {
+                    return;
+                }
+                if (!routeParams['number'] || routeParams['number'] !== action.payload.num.toString()) {
+                    return;
+                }
+                if (!routeParams['nodeId'] || routeParams['nodeId'] !== action.payload.nodeRunID.toString()) {
+                    return;
+                }
+
                 const stateNR = ctx.getState();
                 let node = Workflow.getNodeByID(wnr.workflow_node_id, stateNR.workflowRun.workflow);
                 ctx.setState({

ui/src/app/views/application/show/admin/application.admin.component.spec.ts

@@ -22,7 +22,7 @@ import { ProjectService } from '../../../../service/project/project.service';
 import { ProjectStore } from '../../../../service/project/project.store';
 import { RepoManagerService } from '../../../../service/repomanager/project.repomanager.service';
 import {
-    MonitoringService,
+    MonitoringService, RouterService,
     ServicesModule,
     WorkflowRunService,
     WorkflowStore
@@ -72,6 +72,7 @@ describe('CDS: Application Admin Component', () => {
                 { provide: APP_BASE_HREF, useValue: '/' },
                 Store,
                 UserService,
+                RouterService,
                 AuthenticationService
             ],
             imports: [

ui/src/app/views/application/show/admin/repository/application.repo.component.spec.ts

@@ -19,7 +19,7 @@ import { PipelineService } from 'app/service/pipeline/pipeline.service';
 import { ProjectService } from 'app/service/project/project.service';
 import { ProjectStore } from 'app/service/project/project.store';
 import { RepoManagerService } from 'app/service/repomanager/project.repomanager.service';
-import { MonitoringService, ThemeStore, UserService } from 'app/service/services.module';
+import { MonitoringService, RouterService, ThemeStore, UserService } from 'app/service/services.module';
 import { VariableService } from 'app/service/variable/variable.service';
 import { WorkflowRunService } from 'app/service/workflow/run/workflow.run.service';
 import { WorkflowService } from 'app/service/workflow/workflow.service';
@@ -66,6 +66,7 @@ describe('CDS: Application Repo Component', () => {
                 Store,
                 { provide: APP_BASE_HREF, useValue: '/' },
                 ThemeStore,
+                RouterService,
                 WorkflowRunService,
                 WorkflowService,
                 UserService,

ui/src/app/views/application/show/application.component.spec.ts

@@ -25,7 +25,13 @@ import { NavbarService } from '../../../service/navbar/navbar.service';
 import { PipelineService } from '../../../service/pipeline/pipeline.service';
 import { ProjectService } from '../../../service/project/project.service';
 import { ProjectStore } from '../../../service/project/project.store';
-import { MonitoringService, ServicesModule, WorkflowRunService, WorkflowStore } from '../../../service/services.module';
+import {
+    MonitoringService,
+    RouterService,
+    ServicesModule,
+    WorkflowRunService,
+    WorkflowStore
+} from '../../../service/services.module';
 import { VariableService } from '../../../service/variable/variable.service';
 import { WorkflowService } from '../../../service/workflow/workflow.service';
 import { SharedModule } from '../../../shared/shared.module';
@@ -68,6 +74,7 @@ describe('CDS: Application', () => {
                 WorkflowRunService,
                 Store,
                 UserService,
+                RouterService,
                 AuthenticationService
             ],
             imports: [

ui/src/app/views/pipeline/add/pipeline.add.component.spec.ts

@@ -30,6 +30,7 @@ import { ToastService } from '../../../shared/toast/ToastService';
 import { PipelineModule } from '../pipeline.module';
 import { PipelineAddComponent } from './pipeline.add.component';
 import { ApplicationService } from 'app/service/application/application.service';
+import { RouterService } from 'app/service/router/router.service';
 
 describe('CDS: Pipeline Add Component', () => {
 
@@ -63,6 +64,7 @@ describe('CDS: Pipeline Add Component', () => {
                 WorkflowService,
                 WorkflowRunService,
                 UserService,
+                RouterService,
                 AuthenticationService
             ],
             imports: [

ui/src/app/views/pipeline/show/admin/pipeline.admin.spec.ts

@@ -11,7 +11,7 @@ import { AuthenticationService } from 'app/service/authentication/authentication
 import { NavbarService } from 'app/service/navbar/navbar.service';
 import { ProjectService } from 'app/service/project/project.service';
 import { ProjectStore } from 'app/service/project/project.store';
-import { MonitoringService, UserService } from 'app/service/services.module';
+import { MonitoringService, RouterService, UserService } from 'app/service/services.module';
 import { WorkflowRunService } from 'app/service/workflow/run/workflow.run.service';
 import { WorkflowService } from 'app/service/workflow/workflow.service';
 import { NgxsStoreModule } from 'app/store/store.module';
@@ -55,6 +55,7 @@ describe('CDS: Pipeline Admin Component', () => {
                 AuthenticationService,
                 MonitoringService,
                 ProjectStore,
+                RouterService,
                 ProjectService
             ],
             imports: [

ui/src/app/views/pipeline/show/pipeline.show.component.spec.ts

@@ -30,6 +30,7 @@ import { PipelineModule } from '../pipeline.module';
 import { PipelineShowComponent } from './pipeline.show.component';
 import { ApplicationService } from 'app/service/application/application.service';
 import { EnvironmentService } from 'app/service/environment/environment.service';
+import { RouterService } from 'app/service/router/router.service';
 
 describe('CDS: Pipeline Show', () => {
 
@@ -54,6 +55,7 @@ describe('CDS: Pipeline Show', () => {
                 WorkflowService,
                 WorkflowRunService,
                 UserService,
+                RouterService,
                 AuthenticationService
             ],
             imports: [

ui/src/app/views/project/add/project.add.component.spec.ts

@@ -32,6 +32,7 @@ import { ToastService } from '../../../shared/toast/ToastService';
 import { ProjectModule } from '../project.module';
 import { ProjectAddComponent } from './project.add.component';
 import { ApplicationService } from 'app/service/application/application.service';
+import { RouterService } from 'app/service/router/router.service';
 
 describe('CDS: Project Show Component', () => {
 
@@ -61,6 +62,7 @@ describe('CDS: Project Show Component', () => {
                 TranslateParser,
                 GroupService,
                 UserService,
+                RouterService,
                 WorkflowService,
                 { provide: ToastService, useClass: MockToast }
             ],

ui/src/app/views/project/show/admin/repomanager/list/project.repomanager.list.spec.ts

@@ -29,6 +29,7 @@ import { ProjectModule } from 'app/views/project/project.module';
 import { of } from 'rxjs';
 import { ProjectRepoManagerComponent } from './project.repomanager.list.component';
 import { ApplicationService } from 'app/service/application/application.service';
+import { RouterService } from 'app/service/router/router.service';
 
 describe('CDS: Project RepoManager List Component', () => {
 
@@ -58,6 +59,7 @@ describe('CDS: Project RepoManager List Component', () => {
                 NavbarService,
                 WorkflowService,
                 WorkflowRunService,
+                RouterService,
                 { provide: ToastService, useClass: MockToast },
                 UserService,
                 AuthenticationService