refactor: migrate parameter/action/step component to onPush strategy (#…

…4382)

engine/api/pipeline_parameter.go

@@ -63,11 +63,7 @@ func (api *API) deleteParameterFromPipelineHandler() service.Handler {
 
 		event.PublishPipelineParameterDelete(key, pipelineName, sdk.Parameter{Name: paramName}, deprecatedGetUser(ctx))
 
-		p.Parameter, err = pipeline.GetAllParametersInPipeline(ctx, api.mustDB(), p.ID)
-		if err != nil {
-			return sdk.WrapError(err, "deleteParameterFromPipelineHandler: Cannot load pipeline parameters")
-		}
-		return service.WriteJSON(w, p, http.StatusOK)
+		return service.WriteJSON(w, nil, http.StatusOK)
 	}
 }
 
@@ -113,11 +109,7 @@ func (api *API) updateParameterInPipelineHandler() service.Handler {
 
 		event.PublishPipelineParameterUpdate(key, pipelineName, *oldParam, newParam, deprecatedGetUser(ctx))
 
-		p.Parameter, err = pipeline.GetAllParametersInPipeline(ctx, api.mustDB(), p.ID)
-		if err != nil {
-			return sdk.WrapError(err, "updateParameterInPipelineHandler: Cannot load pipeline parameters")
-		}
-		return service.WriteJSON(w, p, http.StatusOK)
+		return service.WriteJSON(w, newParam, http.StatusOK)
 	}
 }
 
@@ -170,11 +162,6 @@ func (api *API) addParameterInPipelineHandler() service.Handler {
 
 		event.PublishPipelineParameterAdd(key, pipelineName, newParam, deprecatedGetUser(ctx))
 
-		p.Parameter, err = pipeline.GetAllParametersInPipeline(ctx, api.mustDB(), p.ID)
-		if err != nil {
-			return sdk.WrapError(err, "addParameterInPipelineHandler: Cannot get pipeline parameters")
-		}
-
-		return service.WriteJSON(w, p, http.StatusOK)
+		return service.WriteJSON(w, newParam, http.StatusOK)
 	}
 }

ui/src/app/app.service.ts

@@ -162,7 +162,7 @@ export class AppService {
                     opts.push(new LoadOpts('withLabels', 'labels'));
                 }
 
-                if (event.type_event.indexOf('Variable') === -1) {
+                if (event.type_event.indexOf('Variable') === -1 && event.type_event.indexOf('Parameter') === -1) {
                     this._store.dispatch(new projectActions.ResyncProject({ projectKey: projectInCache.key, opts }));
                 }
             });

ui/src/app/shared/action/action.component.spec.ts

@@ -137,7 +137,7 @@ describe('CDS: Action Component', () => {
         fixture.componentInstance.editableAction = action;
         fixture.componentInstance.project = <Project>{ key: 'key' }
 
-        fixture.detectChanges();
+        fixture.componentInstance._cd.detectChanges();
         tick(50);
 
         // readonly , no button
@@ -146,14 +146,14 @@ describe('CDS: Action Component', () => {
 
         fixture.componentInstance.edit = true;
 
-        fixture.detectChanges();
+        fixture.componentInstance._cd.detectChanges();
         tick(50);
 
         let compiled = fixture.debugElement.nativeElement;
 
         spyOn(fixture.componentInstance.actionEvent, 'emit');
         compiled.querySelector('.ui.red.button').click();
-        fixture.detectChanges();
+        fixture.componentInstance._cd.detectChanges();
         tick(50);
         compiled.querySelector('.ui.red.button.active').click();
 

ui/src/app/shared/action/action.component.ts

@@ -1,4 +1,13 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output
+} from '@angular/core';
 import { Router } from '@angular/router';
 import { Action } from 'app/model/action.model';
 import { AllKeys } from 'app/model/keys.model';
@@ -17,11 +26,13 @@ import { RequirementEvent } from 'app/shared/requirements/requirement.event.mode
 import { SharedService } from 'app/shared/shared.service';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { DragulaService } from 'ng2-dragula';
+import { finalize } from 'rxjs/operators';
 
 @Component({
     selector: 'app-action',
     templateUrl: './action.html',
-    styleUrls: ['./action.scss']
+    styleUrls: ['./action.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ActionComponent implements OnDestroy, OnInit {
     editableAction: Action;
@@ -61,7 +72,8 @@ export class ActionComponent implements OnDestroy, OnInit {
         private _actionService: ActionService,
         private dragulaService: DragulaService,
         private _router: Router,
-        private _workerModelService: WorkerModelService
+        private _workerModelService: WorkerModelService,
+        public _cd: ChangeDetectorRef
     ) {
         dragulaService.createGroup('bag-nonfinal', {
             moves: function (el, source, handle) {
@@ -87,10 +99,10 @@ export class ActionComponent implements OnDestroy, OnInit {
     }
 
     ngOnInit() {
-        this._actionService.getAllForProject(this.project.key).subscribe(as => {
+        this._actionService.getAllForProject(this.project.key).pipe(finalize(() => this._cd.markForCheck())).subscribe(as => {
             this.publicActions = as;
         });
-        this._workerModelService.getAllForProject(this.project.key).subscribe(wms => {
+        this._workerModelService.getAllForProject(this.project.key).pipe(finalize(() => this._cd.markForCheck())).subscribe(wms => {
             this.workerModels = wms;
         });
     }
@@ -117,6 +129,7 @@ export class ActionComponent implements OnDestroy, OnInit {
                 }
                 let indexAdd = this.editableAction.requirements.findIndex(req => r.requirement.value === req.value);
                 if (indexAdd === -1) {
+                    this.editableAction.requirements = Object.assign([], this.editableAction.requirements);
                     this.editableAction.requirements.push(r.requirement);
                 }
                 if (r.requirement.type === 'model') {

ui/src/app/shared/action/step/form/step.form.component.ts

@@ -1,21 +1,22 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Action } from 'app/model/action.model';
 import { StepEvent } from 'app/shared/action/step/step.event';
 
 @Component({
     selector: 'app-action-step-form',
     templateUrl: './step.form.html',
-    styleUrls: ['./step.form.scss']
+    styleUrls: ['./step.form.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ActionStepFormComponent implements OnChanges {
+export class ActionStepFormComponent implements OnInit {
     @Input() actions: Array<Action>;
     @Output() onEvent = new EventEmitter<StepEvent>();
 
     expended: boolean;
     selectedID: number;
     selected: Action;
 
-    ngOnChanges(): void {
+    ngOnInit(): void {
         let script = this.actions.find(a => a.name === 'Script' && a.type === 'Builtin');
         if (script) {
             this.selectedID = script.id;

ui/src/app/shared/action/step/step.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { Action } from 'app/model/action.model';
 import { AllKeys } from 'app/model/keys.model';
 import { Parameter } from 'app/model/parameter.model';
@@ -7,13 +7,15 @@ import { StepEvent } from 'app/shared/action/step/step.event';
 @Component({
     selector: 'app-action-step',
     templateUrl: './step.html',
-    styleUrls: ['./step.scss']
+    styleUrls: ['./step.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ActionStepComponent {
 
     _step: Action;
     stepURL: Array<string>;
     withAdvanced: boolean;
+    collapsed_advanced = false;
     @Input('step')
     set step(step: Action) {
         this._step = step;

ui/src/app/shared/parameter/description-popup/description.popup.component.ts

@@ -1,10 +1,11 @@
-import {Component, Input} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Parameter } from 'app/model/parameter.model';
 
 @Component({
     selector: 'app-parameter-description',
     templateUrl: './parameter.description.html',
-    styleUrls: ['./parameter.description.scss']
+    styleUrls: ['./parameter.description.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ParameterDescriptionComponent {
 

ui/src/app/shared/parameter/form/parameter.form.ts

@@ -1,15 +1,24 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    Input,
+    Output
+} from '@angular/core';
 import { AllKeys } from 'app/model/keys.model';
 import { Parameter } from 'app/model/parameter.model';
 import { Project } from 'app/model/project.model';
 import { ParameterService } from 'app/service/parameter/parameter.service';
 import { ParameterEvent } from 'app/shared/parameter/parameter.event.model';
 import { SharedService } from 'app/shared/shared.service';
+import { finalize } from 'rxjs/operators';
 
 @Component({
     selector: 'app-parameter-form',
     templateUrl: './parameter.form.html',
-    styleUrls: ['./parameter.form.scss']
+    styleUrls: ['./parameter.form.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ParameterFormComponent {
 
@@ -23,12 +32,13 @@ export class ParameterFormComponent {
 
     constructor(
         private _paramService: ParameterService,
-        public _sharedService: SharedService // used in html
+        public _sharedService: SharedService, // used in html
+        private _cd: ChangeDetectorRef
     ) {
         this.newParameter = new Parameter();
         this.parameterTypes = this._paramService.getTypesFromCache();
         if (!this.parameterTypes) {
-            this._paramService.getTypesFromAPI().subscribe(types => {
+            this._paramService.getTypesFromAPI().pipe(finalize(() => this._cd.markForCheck())).subscribe(types => {
                 this.parameterTypes = types;
                 this.newParameter.type = types[0];
             });

ui/src/app/shared/parameter/list/parameter.component.ts

@@ -1,16 +1,26 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output
+} from '@angular/core';
 import { AllKeys } from 'app/model/keys.model';
 import { Parameter } from 'app/model/parameter.model';
 import { Project } from 'app/model/project.model';
 import { ParameterService } from 'app/service/parameter/parameter.service';
 import { ParameterEvent } from 'app/shared/parameter/parameter.event.model';
 import { SharedService } from 'app/shared/shared.service';
 import { Table } from 'app/shared/table/table';
+import { finalize } from 'rxjs/operators';
 
 @Component({
     selector: 'app-parameter-list',
     templateUrl: './parameter.html',
-    styleUrls: ['./parameter.scss']
+    styleUrls: ['./parameter.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ParameterListComponent extends Table<Parameter> implements OnInit {
     @Input('parameters')
@@ -50,14 +60,17 @@ export class ParameterListComponent extends Table<Parameter> implements OnInit {
 
     constructor(
         private _paramService: ParameterService,
-        public _sharedService: SharedService // used in html
+        public _sharedService: SharedService,
+        private _cd: ChangeDetectorRef
     ) {
         super();
         this.parameterTypes = this._paramService.getTypesFromCache();
         if (!this.parameterTypes) {
-            this._paramService.getTypesFromAPI().subscribe(types => {
-                this.parameterTypes = types;
+            this._paramService.getTypesFromAPI().pipe(finalize(() => {
                 this.ready = true;
+                this._cd.markForCheck()
+            })).subscribe(types => {
+                this.parameterTypes = types;
             });
         } else {
             this.ready = true;

ui/src/app/shared/parameter/value/parameter.value.component.ts

@@ -1,4 +1,13 @@
-import { AfterViewChecked, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+    AfterViewChecked,
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewChild
+} from '@angular/core';
 import { AllKeys } from 'app/model/keys.model';
 import { Parameter } from 'app/model/parameter.model';
 import { Project } from 'app/model/project.model';
@@ -16,7 +25,8 @@ declare var CodeMirror: any;
 @Component({
     selector: 'app-parameter-value',
     templateUrl: './parameter.value.html',
-    styleUrls: ['./parameter.value.scss']
+    styleUrls: ['./parameter.value.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 @AutoUnsubscribe()
 export class ParameterValueComponent implements OnInit, AfterViewChecked {

ui/src/app/shared/parameter/value/parameter.value.html

@@ -3,34 +3,42 @@
         <input type="number" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value">
     </div>
     <div *ngSwitchCase="'text'" class="ui form">
-        <codemirror [(ngModel)]="editableValue" [config]="codeMirrorConfig" (change)="changeCodeMirror($event)" #codeMirror (keydown)="sendValueChanged()"></codemirror>
+        <codemirror [(ngModel)]="editableValue" [config]="codeMirrorConfig" (change)="changeCodeMirror()" #codeMirror (keydown)="sendValueChanged()"></codemirror>
     </div>
     <div *ngSwitchCase="'boolean'" class="ui checkbox">
         <input type="checkbox" [(ngModel)]="editableValue" (change)="valueChanged();sendValueChanged()" name="value">
         <label>{{ ' '}}</label>
     </div>
     <div *ngSwitchCase="'ssh-key'">
         <ng-container *ngIf="keys">
-            <sm-select class="search fluid"
-                       [(model)]="editableValue"
-                       [options]="{'fullTextSearch': true}"
-                       (modelChange)="valueChanged();sendValueChanged()"
-                       (keydown)="sendValueChanged()"
-                       name="value">
-                    <option *ngFor="let v of keys.ssh" [value]="v.name">{{v.name}}</option>
-            </sm-select>
+            <sui-select class="selection"
+                        name="type"
+                        [(ngModel)]="editableValue"
+                        (ngModelChange)="sendValueChanged()"
+                        [options]="keys.ssh"
+                        labelField="name"
+                        valueField="name"
+                        [isSearchable]="true"
+                        #sshkey>
+                <sui-select-option *ngFor="let t of sshkey.filteredOptions" [value]="t">
+                </sui-select-option>
+            </sui-select>
         </ng-container>
     </div>
     <div *ngSwitchCase="'pgp-key'">
         <ng-container *ngIf="keys">
-            <sm-select class="search fluid"
-                       [(model)]="editableValue"
-                       [options]="{'fullTextSearch': true}"
-                       (modelChange)="valueChanged();sendValueChanged()"
-                       (keydown)="sendValueChanged()"
-                       name="value">
-                <option *ngFor="let v of keys.pgp" [value]="v.name">{{v.name}}</option>
-            </sm-select>
+            <sui-select class="selection"
+                        name="type"
+                        [(ngModel)]="editableValue"
+                        (ngModelChange)="sendValueChanged()"
+                        [options]="keys.pgp"
+                        labelField="name"
+                        valueField="name"
+                        [isSearchable]="true"
+                        #pgpkey>
+                <sui-select-option *ngFor="let t of pgpkey.filteredOptions" [value]="t">
+                </sui-select-option>
+            </sui-select>
         </ng-container>
     </div>
     <div *ngSwitchCase="'list'">