From b64105ebef73310f06a47d5bfc1436b433cba3b7 Mon Sep 17 00:00:00 2001
From: Coenen Benjamin <benjamin.coenen@hotmail.com>
Date: Mon, 19 Mar 2018 20:24:32 +0100
Subject: [PATCH] fix(ui): fix edit action page (#2414)

Signed-off-by: Benjamin Coenen <benjamin.coenen@corp.ovh.com>
---
 ui/src/app/shared/action/action.component.ts    | 17 ++++++++++-------
 ui/src/app/shared/action/action.html            | 12 ++++++++----
 .../shared/parameter/form/parameter.form.html   |  2 +-
 .../parameter/list/parameter.component.ts       |  1 +
 ui/src/app/shared/parameter/list/parameter.html |  2 +-
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/ui/src/app/shared/action/action.component.ts b/ui/src/app/shared/action/action.component.ts
index bb66bdb715..6a09687c87 100644
--- a/ui/src/app/shared/action/action.component.ts
+++ b/ui/src/app/shared/action/action.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, Output, EventEmitter, OnDestroy} from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnDestroy, OnInit} from '@angular/core';
 import {Action} from '../../model/action.model';
 import {SharedService} from '../shared.service';
 import {RequirementEvent} from '../requirements/requirement.event.model';
@@ -18,7 +18,7 @@ import {cloneDeep} from 'lodash';
     templateUrl: './action.html',
     styleUrls: ['./action.scss']
 })
-export class ActionComponent implements OnDestroy {
+export class ActionComponent implements OnDestroy, OnInit {
     editableAction: Action;
     steps: Array<Action> = new Array<Action>();
     publicActions: Array<Action>;
@@ -48,10 +48,6 @@ export class ActionComponent implements OnDestroy {
     collapsed = true;
     configRequirements: {disableModel?: boolean, disableHostname?: boolean} = {};
     constructor(private sharedService: SharedService, private _actionStore: ActionStore, private dragulaService: DragulaService) {
-        this._actionStore.getActions().subscribe(mapActions => {
-            this.publicActions = mapActions.toArray();
-        });
-
         dragulaService.setOptions('bag-nonfinal', {
             moves: function (el, source, handle) {
                 return handle.classList.contains('move');
@@ -68,6 +64,12 @@ export class ActionComponent implements OnDestroy {
         });
     }
 
+    ngOnInit() {
+        this._actionStore.getActions().subscribe(mapActions => {
+            this.publicActions = mapActions.toArray().filter((action) => action.name !== this.editableAction.name);
+        });
+    }
+
     ngOnDestroy() {
         this.dragulaService.destroy('bag-nonfinal');
         this.dragulaService.destroy('bag-final');
@@ -167,13 +169,14 @@ export class ActionComponent implements OnDestroy {
                 }
                 let indexAdd = this.editableAction.parameters.findIndex(param => p.parameter.name === param.name);
                 if (indexAdd === -1) {
-                    this.editableAction.parameters.push(p.parameter);
+                    this.editableAction.parameters = this.editableAction.parameters.concat([p.parameter]);
                 }
                 break;
             case 'delete':
                 let indexDelete = this.editableAction.parameters.indexOf(p.parameter);
                 if (indexDelete >= 0) {
                     this.editableAction.parameters.splice(indexDelete, 1);
+                    this.editableAction.parameters = this.editableAction.parameters.concat([]);
                 }
                 break;
         }
diff --git a/ui/src/app/shared/action/action.html b/ui/src/app/shared/action/action.html
index be8886dc04..11008546f7 100644
--- a/ui/src/app/shared/action/action.html
+++ b/ui/src/app/shared/action/action.html
@@ -62,8 +62,13 @@ <h3>{{ 'requirement_add' | translate }}</h3>
         <div class="field">
             <label>{{ 'common_parameters' | translate }}</label>
             <div>
-                <app-parameter-list [project]="project" [parameters]="editableAction.parameters" [mode]="edit? 'edit': 'ro'"
-                                    (event)="parameterEvent($event)"></app-parameter-list>
+                <app-parameter-list
+                  [project]="project"
+                  [parameters]="editableAction.parameters"
+                  [mode]="edit? 'edit': 'ro'"
+                  [hideSave]="true"
+                  (event)="parameterEvent($event)">
+                </app-parameter-list>
             </div>
             <div>
                 <app-parameter-form *ngIf="edit" [project]="project" (createParameterEvent)="parameterEvent($event)"></app-parameter-form>
@@ -73,7 +78,7 @@ <h3>{{ 'requirement_add' | translate }}</h3>
 
     <div class="subtitle normalStep">
         <h3 class="inline">{{ 'action_step_title' | translate }}</h3>
-        <div class="right floated">
+        <div class="right floated" *ngIf="steps && steps.length > 0">
           <button class="ui blue button" (click)="collapsed = !collapsed">
               <ng-container *ngIf="collapsed">
                   <i class="hide icon"></i>
@@ -83,7 +88,6 @@ <h3 class="inline">{{ 'action_step_title' | translate }}</h3>
                   <i class="eye icon"></i>
                   {{'common_show_all' | translate}}
               </ng-container>
-
           </button>
         </div>
     </div>
diff --git a/ui/src/app/shared/parameter/form/parameter.form.html b/ui/src/app/shared/parameter/form/parameter.form.html
index fdbe6323c0..5fc5db924d 100644
--- a/ui/src/app/shared/parameter/form/parameter.form.html
+++ b/ui/src/app/shared/parameter/form/parameter.form.html
@@ -19,7 +19,7 @@
             <textarea [(ngModel)]="newParameter.description" name="description" rows="{{ _sharedService.getTextAreaheight(newParameter.description)}}"></textarea>
         </div>
         <div class="two wide center field">
-            <button class="ui blue button"><i class="plus icon"></i>{{ 'btn_add' | translate}}</button>
+            <button class="ui blue button" [disabled]="!newParameter.name"><i class="plus icon"></i>{{ 'btn_add' | translate}}</button>
         </div>
     </div>
 </form>
diff --git a/ui/src/app/shared/parameter/list/parameter.component.ts b/ui/src/app/shared/parameter/list/parameter.component.ts
index 550fb1e8a6..b92964203e 100644
--- a/ui/src/app/shared/parameter/list/parameter.component.ts
+++ b/ui/src/app/shared/parameter/list/parameter.component.ts
@@ -33,6 +33,7 @@ export class ParameterListComponent extends Table {
     @Input() suggest: Array<string>;
     @Input() keys: AllKeys;
     @Input() canDelete: boolean;
+    @Input() hideSave = false;
 
     // edit/launcher/ro/job
     @Input() mode = 'edit';
diff --git a/ui/src/app/shared/parameter/list/parameter.html b/ui/src/app/shared/parameter/list/parameter.html
index a4a95834f9..a7f7fb4631 100644
--- a/ui/src/app/shared/parameter/list/parameter.html
+++ b/ui/src/app/shared/parameter/list/parameter.html
@@ -65,7 +65,7 @@
             </td>
             <td class="center" *ngIf="mode !== 'launcher' && mode !== 'job'">
                 <ng-container *ngIf="mode === 'edit'">
-                    <div *ngIf="p.hasChanged;then save;else remove"></div>
+                    <div *ngIf="p.hasChanged && !hideSave;then save;else remove"></div>
                     <ng-template #save>
                         <button class="ui green button" [class.loading]="p.updating" [class.disabled]="p.updating" name="btnupdatevparam" (click)="sendEvent('update', p)">
                             <i class="save icon"></i>