wip

ui/src/app/views/workflow/show/admin/workflow.admin.component.ts

@@ -140,7 +140,10 @@ export class WorkflowAdminComponent implements OnInit {
             })));
 
             forkJoin(...actions)
-                .pipe(finalize(() => this.loading = false))
+                .pipe(finalize(() => {
+                    this.loading = false;
+                    this._cd.markForCheck();
+                }))
                 .subscribe(() => {
                     this._toast.success('', this._translate.instant('workflow_updated'));
                     this._router.navigate([

ui/src/app/views/workflow/show/workflow.component.ts

@@ -1,27 +1,28 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngxs/store';
+import { PermissionValue } from 'app/model/permission.model';
+import { Project } from 'app/model/project.model';
+import { Workflow } from 'app/model/workflow.model';
+import { WorkflowCoreService } from 'app/service/workflow/workflow.core.service';
+import { WorkflowStore } from 'app/service/workflow/workflow.store';
+import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
+import { WarningModalComponent } from 'app/shared/modal/warning/warning.component';
+import { PermissionEvent } from 'app/shared/permission/permission.event.model';
+import { ToastService } from 'app/shared/toast/ToastService';
+import { WorkflowNodeRunParamComponent } from 'app/shared/workflow/node/run/node.run.param.component';
 import * as actionsWorkflow from 'app/store/workflow.action';
 import { WorkflowState, WorkflowStateModel } from 'app/store/workflow.state';
+import { WorkflowGraphComponent } from 'app/views/workflow/graph/workflow.graph.component';
 import { Subscription } from 'rxjs';
 import { finalize } from 'rxjs/operators';
-import { PermissionValue } from '../../../model/permission.model';
-import { Project } from '../../../model/project.model';
-import { Workflow } from '../../../model/workflow.model';
-import { WorkflowCoreService } from '../../../service/workflow/workflow.core.service';
-import { WorkflowStore } from '../../../service/workflow/workflow.store';
-import { AutoUnsubscribe } from '../../../shared/decorator/autoUnsubscribe';
-import { WarningModalComponent } from '../../../shared/modal/warning/warning.component';
-import { PermissionEvent } from '../../../shared/permission/permission.event.model';
-import { ToastService } from '../../../shared/toast/ToastService';
-import { WorkflowNodeRunParamComponent } from '../../../shared/workflow/node/run/node.run.param.component';
-import { WorkflowGraphComponent } from '../graph/workflow.graph.component';
 
 @Component({
     selector: 'app-workflow',
     templateUrl: './workflow.html',
-    styleUrls: ['./workflow.scss']
+    styleUrls: ['./workflow.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 @AutoUnsubscribe()
 export class WorkflowShowComponent implements OnInit {
@@ -61,7 +62,8 @@ export class WorkflowShowComponent implements OnInit {
         private _router: Router,
         private _translate: TranslateService,
         private _toast: ToastService,
-        private _workflowCoreService: WorkflowCoreService
+        private _workflowCoreService: WorkflowCoreService,
+        private _cd: ChangeDetectorRef
     ) {
     }
 
@@ -72,6 +74,7 @@ export class WorkflowShowComponent implements OnInit {
         });
 
         this.workflowSubscription = this._store.select(WorkflowState.getCurrent()).subscribe((s: WorkflowStateModel) => {
+            this._cd.markForCheck();
             this.detailedWorkflow = s.workflow;
             if (this.detailedWorkflow) {
                 this.previewWorkflow = this.detailedWorkflow.preview;
@@ -104,6 +107,7 @@ export class WorkflowShowComponent implements OnInit {
             } else {
                 delete this.selectedHookRef;
             }
+            this._cd.markForCheck();
         });
 
         this.workflowPreviewSubscription = this._workflowCoreService.getWorkflowPreview()

ui/src/app/views/workflow/workflow.component.ts

@@ -1,34 +1,45 @@
-import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    QueryList,
+    ViewChild,
+    ViewChildren
+} from '@angular/core';
 import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngxs/store';
 import { SuiPopup, SuiPopupController, SuiPopupTemplateController } from '@richardlt/ng2-semantic-ui';
+import { Project } from 'app/model/project.model';
+import { Workflow } from 'app/model/workflow.model';
+import { WorkflowRun } from 'app/model/workflow.run.model';
+import { WorkflowCoreService } from 'app/service/workflow/workflow.core.service';
+import { WorkflowService } from 'app/service/workflow/workflow.service';
+import { WorkflowSidebarMode } from 'app/service/workflow/workflow.sidebar.store';
+import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
+import { ToastService } from 'app/shared/toast/ToastService';
+import { WorkflowTemplateApplyModalComponent } from 'app/shared/workflow-template/apply-modal/workflow-template.apply-modal.component';
+import { WorkflowSaveAsCodeComponent } from 'app/shared/workflow/modal/save-as-code/save.as.code.component';
 import { ProjectState, ProjectStateModel } from 'app/store/project.state';
 import {
     CleanWorkflowRun,
     CleanWorkflowState,
-    GetWorkflow, GetWorkflowRuns, SelectHook,
+    GetWorkflow,
+    GetWorkflowRuns,
+    SelectHook,
     SidebarRunsMode,
     UpdateFavoriteWorkflow
 } from 'app/store/workflow.action';
-import { WorkflowState, WorkflowStateModel} from 'app/store/workflow.state';
+import { WorkflowState, WorkflowStateModel } from 'app/store/workflow.state';
 import { Subscription } from 'rxjs';
 import { filter, finalize } from 'rxjs/operators';
-import { Project } from '../../model/project.model';
-import { Workflow } from '../../model/workflow.model';
-import { WorkflowRun } from '../../model/workflow.run.model';
-import { WorkflowCoreService } from '../../service/workflow/workflow.core.service';
-import { WorkflowService } from '../../service/workflow/workflow.service';
-import { WorkflowSidebarMode } from '../../service/workflow/workflow.sidebar.store';
-import { AutoUnsubscribe } from '../../shared/decorator/autoUnsubscribe';
-import { ToastService } from '../../shared/toast/ToastService';
-import { WorkflowTemplateApplyModalComponent } from '../../shared/workflow-template/apply-modal/workflow-template.apply-modal.component';
-import { WorkflowSaveAsCodeComponent } from '../../shared/workflow/modal/save-as-code/save.as.code.component';
+
 
 @Component({
     selector: 'app-workflow',
     templateUrl: './workflow.html',
-    styleUrls: ['./workflow.scss']
+    styleUrls: ['./workflow.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 @AutoUnsubscribe()
 export class WorkflowComponent {
@@ -65,7 +76,6 @@ export class WorkflowComponent {
     selectedNodeRef: string;
     selectecHookRef: string;
 
-    runSubscription: Subscription;
     workflowRun: WorkflowRun;
 
     showButtons = false;
@@ -78,20 +88,25 @@ export class WorkflowComponent {
         private _workflowCore: WorkflowCoreService,
         private _toast: ToastService,
         private _translate: TranslateService,
-        private _store: Store
+        private _store: Store,
+        private _cd: ChangeDetectorRef
     ) {
         this.dataRouteSubscription = this._activatedRoute.data.subscribe(datas => {
             this.project = datas['project'];
         });
 
         this.projectSubscription = this._store.select(ProjectState)
             .pipe(filter((projState) => projState.project && projState.project.key))
-            .subscribe((projectState: ProjectStateModel) => this.project = projectState.project);
+            .subscribe((projectState: ProjectStateModel) => {
+                this.project = projectState.project;
+                this._cd.markForCheck();
+            });
 
         this.asCodeEditorSubscription = this._workflowCore.getAsCodeEditor()
             .subscribe((state) => {
                 if (state != null) {
                     this.asCodeEditorOpen = state.open;
+                    this._cd.markForCheck();
                 }
             });
 
@@ -109,6 +124,7 @@ export class WorkflowComponent {
                 delete this.selectedNodeRef;
                 delete this.selectedNodeID;
             }
+            this._cd.markForCheck();
         });
 
         this._store.dispatch(new CleanWorkflowState());
@@ -133,6 +149,7 @@ export class WorkflowComponent {
             } else {
                 delete this.workflowRun;
             }
+            this._cd.markForCheck();
         });
 
 
@@ -196,7 +213,10 @@ export class WorkflowComponent {
     migrateAsCode(): void {
         this.loadingPopupButton = true;
         this._workflowService.migrateAsCode(this.project.key, this.workflow.name)
-            .pipe(finalize(() => this.loadingPopupButton = false))
+            .pipe(finalize(() => {
+                this.loadingPopupButton = false;
+                this._cd.markForCheck();
+            }))
             .subscribe((ope) => {
                 this.showButtons = false;
                 this.popupFromlRepository.close();

ui/src/app/views/workflow/workflow.module.ts

@@ -26,10 +26,10 @@ import {workflowRouting} from './workflow.routing';
 
 @NgModule({
     declarations: [
-        // OnPush
         WorkflowAddComponent,
         WorkflowAdminComponent,
         WorkflowBreadCrumbComponent,
+        WorkflowComponent,
         WorkflowGraphComponent,
         WorkflowNodeRunComponent,
         WorkflowNodeRunHistoryComponent,
@@ -45,12 +45,9 @@ import {workflowRouting} from './workflow.routing';
         WorkflowRunTestsResultComponent,
         WorkflowRunTestTableComponent,
         WorkflowServiceLogComponent,
+        WorkflowShowComponent,
         WorkflowSidebarCodeComponent,
         WorkflowStepLogComponent,
-
-        // To Migrate
-        WorkflowComponent,
-        WorkflowShowComponent,
     ],
     imports: [
         SharedModule,