From d2eedfe890a54d7f42968f0896d21e086bfd0bd1 Mon Sep 17 00:00:00 2001
From: Richard LT <richard.le.terrier@gmail.com>
Date: Thu, 21 Dec 2023 14:23:05 +0100
Subject: [PATCH] fix(ui): template apply form (#6750)

Signed-off-by: richardlt <richard.le.terrier@gmail.com>
---
 ...workflow-template.apply-modal.component.ts |   9 +-
 .../workflow-template.bulk-modal.component.ts |  20 +--
 .../workflow-template.bulk-modal.html         | 114 +++++++++---------
 .../workflow-template.param-form.component.ts |  13 +-
 .../workflow-template.param-form.html         |  40 +++---
 5 files changed, 93 insertions(+), 103 deletions(-)

diff --git a/ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.component.ts b/ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.component.ts
index fcf6030463..4ac0858e11 100644
--- a/ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.component.ts
+++ b/ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.component.ts
@@ -17,8 +17,7 @@ import { calculateWorkflowTemplateDiff } from 'app/shared/diff/diff';
 import { Item } from 'app/shared/diff/list/diff.list.component';
 import { forkJoin } from 'rxjs';
 import { finalize } from 'rxjs/operators';
-import {NZ_MODAL_DATA, NzModalRef} from 'ng-zorro-antd/modal';
-import { ToastService } from 'app/shared/toast/ToastService';
+import { NZ_MODAL_DATA, NzModalRef } from 'ng-zorro-antd/modal';
 
 interface IModalData {
     workflowTemplateIn: WorkflowTemplate;
@@ -61,8 +60,7 @@ export class WorkflowTemplateApplyModalComponent implements OnInit, OnChanges {
         private _projectService: ProjectService,
         private _workflowService: WorkflowService,
         private _templateService: WorkflowTemplateService,
-        private _cd: ChangeDetectorRef,
-        private _toast: ToastService
+        private _cd: ChangeDetectorRef
     ) { }
 
     ngOnChanges() {
@@ -118,12 +116,11 @@ export class WorkflowTemplateApplyModalComponent implements OnInit, OnChanges {
     }
 
     onApply() {
-        this._workflowService.getWorkflow(this.workflowTemplateInstance.project.key,
+        this._workflowService.getWorkflow(this.workflowTemplateInstance.request.project_key,
             this.workflowTemplateInstance.workflow_name).subscribe(w => {
                 this.workflowTemplateInstance = Object.assign({}, w.template_instance);
                 this._cd.markForCheck();
             });
-
     }
 
     loadAudits() {
diff --git a/ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.component.ts b/ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.component.ts
index 0da116c60d..d97bf6d3ba 100644
--- a/ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.component.ts
+++ b/ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.component.ts
@@ -24,7 +24,7 @@ import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
 import { Column, ColumnType, Select } from 'app/shared/table/data-table.component';
 import { interval, Observable, Subscription } from 'rxjs';
 import { finalize } from 'rxjs/operators';
-import {NZ_MODAL_DATA, NzModalRef} from 'ng-zorro-antd/modal';
+import { NZ_MODAL_DATA, NzModalRef } from 'ng-zorro-antd/modal';
 
 interface IModalData {
     workflowTemplate: WorkflowTemplate;
@@ -50,7 +50,6 @@ export class WorkflowTemplateBulkModalComponent implements OnInit, OnDestroy {
     currentStep = 0;
     selectedInstanceKeys: Array<string> = new Array<string>();
     selectedInstances: Array<WorkflowTemplateInstance>;
-    accordionOpenedIndex = 0;
     parameters: { [s: number]: ParamData };
     response: WorkflowTemplateBulk;
     pollingStatusSub: Subscription;
@@ -94,16 +93,16 @@ export class WorkflowTemplateBulkModalComponent implements OnInit, OnDestroy {
                 name: 'Status',
                 class: 'rightAlign',
                 selector: (i: WorkflowTemplateBulkOperation) => ({
-                        class: OperationStatusUtil.color(i.status),
-                        value: OperationStatusUtil.translate(i.status)
-                    })
+                    class: OperationStatusUtil.color(i.status),
+                    value: OperationStatusUtil.translate(i.status)
+                })
             }
         ];
 
         this.parameters = {};
     }
 
-    ngOnDestroy(): void {} // Should be set to use @AutoUnsubscribe with AOT
+    ngOnDestroy(): void { } // Should be set to use @AutoUnsubscribe with AOT
 
     ngOnInit(): void {
         this.workflowTemplate = this.nzModalData.workflowTemplate;
@@ -192,15 +191,6 @@ export class WorkflowTemplateBulkModalComponent implements OnInit, OnDestroy {
         this.moveToStep(2);
     }
 
-    accordionOpen(e: any, index: number) {
-        if (this.accordionOpenedIndex === index) {
-            this.accordionOpenedIndex = -1; // close all accordion items
-        } else {
-            this.accordionOpenedIndex = index;
-        }
-        this._cd.markForCheck();
-    }
-
     changeParam(instanceID: number, params: ParamData) {
         this.parameters[instanceID] = params;
         this.validateParam();
diff --git a/ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.html b/ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.html
index b66aa37f26..aad825b4f5 100644
--- a/ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.html
+++ b/ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.html
@@ -1,59 +1,59 @@
- <div class="content scrolling">
-     <nz-row>
-         <nz-col [nzSpan]="24">
-             <nz-steps [nzCurrent]="currentStep">
-                 <nz-step nzTitle="Select instances"></nz-step>
-                 <nz-step nzTitle="Fill parameters"></nz-step>
-                 <nz-step nzTitle="Run"></nz-step>
-             </nz-steps>
-         </nz-col>
-     </nz-row>
-     <nz-row *ngIf="currentStep === 0">
-         <nz-col [nzSpan]="24">
-             <app-data-table [withSelect]="selectFunc" (selectChange)="selectChange($event)"
-                             [withPagination]="10" [columns]="columnsInstances" [data]="instances"
-                             [loading]="loadingInstances"></app-data-table>
-         </nz-col>
-     </nz-row>
-     <nz-row *ngIf="currentStep === 1">
-         <nz-col [nzSpan]="24">
-             <div *ngIf="withAsCodeWorkflow">
-                 <nz-alert nzType="info" nzMessage="Some selected instances refer to ascode workflow. A pull request will be made on each workflow's repository. Please fill the branch and commit message to proceed."></nz-alert>
-                 <app-ascode-save-form (paramChange)="onAsCodeParamChange($event)">
-                 </app-ascode-save-form>
-             </div>
-         </nz-col>
-         <nz-col [nzSpan]="24">
-             <nz-collapse nzAccordion>
-                <nz-collapse-panel *ngFor="let instance of selectedInstances;let i = index" [nzActive]="accordionOpenedIndex === i" [nzHeader]="instance.request.workflow_name" (click)="accordionOpen($event, i)">
-                    <app-workflow-template-param-form *ngIf="accordionOpenedIndex === i"
-                                                      [project]="instance.project" [workflowTemplate]="workflowTemplate"
-                                                      [workflowTemplateInstance]="instance"
-                                                      [parameters]="parameters[instance.id] ? parameters[instance.id] : null"
-                                                      (paramChange)="changeParam(instance.id, $event)">
+<div class="content scrolling">
+    <nz-row>
+        <nz-col [nzSpan]="24">
+            <nz-steps [nzCurrent]="currentStep">
+                <nz-step nzTitle="Select instances"></nz-step>
+                <nz-step nzTitle="Fill parameters"></nz-step>
+                <nz-step nzTitle="Run"></nz-step>
+            </nz-steps>
+        </nz-col>
+    </nz-row>
+    <nz-row *ngIf="currentStep === 0">
+        <nz-col [nzSpan]="24">
+            <app-data-table [withSelect]="selectFunc" (selectChange)="selectChange($event)" [withPagination]="10"
+                [columns]="columnsInstances" [data]="instances" [loading]="loadingInstances"></app-data-table>
+        </nz-col>
+    </nz-row>
+    <nz-row *ngIf="currentStep === 1">
+        <nz-col [nzSpan]="24">
+            <div *ngIf="withAsCodeWorkflow">
+                <nz-alert nzType="info"
+                    nzMessage="Some selected instances refer to ascode workflow. A pull request will be made on each workflow's repository. Please fill the branch and commit message to proceed."></nz-alert>
+                <app-ascode-save-form (paramChange)="onAsCodeParamChange($event)">
+                </app-ascode-save-form>
+            </div>
+        </nz-col>
+        <nz-col [nzSpan]="24">
+            <nz-collapse nzAccordion>
+                <nz-collapse-panel *ngFor="let instance of selectedInstances;let i = index"
+                    [nzHeader]="instance.request.workflow_name">
+                    <app-workflow-template-param-form [project]="instance.project" [workflowTemplate]="workflowTemplate"
+                        [workflowTemplateInstance]="instance"
+                        [parameters]="parameters[instance.id] ? parameters[instance.id] : null"
+                        (paramChange)="changeParam(instance.id, $event)">
                     </app-workflow-template-param-form>
                 </nz-collapse-panel>
-             </nz-collapse>
-         </nz-col>
-     </nz-row>
-     <nz-row *ngIf="currentStep === 2">
-         <nz-col [nzSpan]="24">
-             <app-data-table *ngIf="response" [withPagination]="10" [columns]="columnsOperations"
-                             [data]="response.operations"></app-data-table>
-         </nz-col>
-     </nz-row>
- </div>
- <div *nzModalFooter>
-     <ng-container *ngIf="currentStep === 0">
-         <button nz-button nzType="primary" [disabled]="selectedInstanceKeys.length === 0"
-                 (click)="clickGoToParam()">Next</button>
-     </ng-container>
-     <ng-container *ngIf="currentStep === 1">
-         <button nz-button nzType="primary"  (click)="clickGoToInstance()">Back</button>
-         <button nz-button nzType="primary" [disabled]="!validFields" (click)="clickRunBulk()">Run bulk update</button>
-     </ng-container>
-     <ng-container *ngIf="currentStep === 2">
-         <button nz-button nzType="primary"  (click)="clickGoToInstanceReset()">Back</button>
-         <button nz-button (click)="clickClose()">Close</button>
-     </ng-container>
- </div>
+            </nz-collapse>
+        </nz-col>
+    </nz-row>
+    <nz-row *ngIf="currentStep === 2">
+        <nz-col [nzSpan]="24">
+            <app-data-table *ngIf="response" [withPagination]="10" [columns]="columnsOperations"
+                [data]="response.operations"></app-data-table>
+        </nz-col>
+    </nz-row>
+</div>
+<div *nzModalFooter>
+    <ng-container *ngIf="currentStep === 0">
+        <button nz-button nzType="primary" [disabled]="selectedInstanceKeys.length === 0"
+            (click)="clickGoToParam()">Next</button>
+    </ng-container>
+    <ng-container *ngIf="currentStep === 1">
+        <button nz-button nzType="primary" (click)="clickGoToInstance()">Back</button>
+        <button nz-button nzType="primary" [disabled]="!validFields" (click)="clickRunBulk()">Run bulk update</button>
+    </ng-container>
+    <ng-container *ngIf="currentStep === 2">
+        <button nz-button nzType="primary" (click)="clickGoToInstanceReset()">Back</button>
+        <button nz-button (click)="clickClose()">Close</button>
+    </ng-container>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.component.ts b/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.component.ts
index 27da8e5349..a36d2901a0 100644
--- a/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.component.ts
+++ b/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.component.ts
@@ -85,7 +85,7 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {
 
     ngOnInit(): void {
         this.initProject();
-        this.changeParam();
+        this.emitParam();
     }
 
     initProject() {
@@ -124,7 +124,7 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {
                     let existingRepo = repoNames.find(n => n === selectedRepo);
                     if (existingRepo) {
                         this.parameterValues[parameterKey + '-repository'] = existingRepo;
-                        this.changeParam();
+                        this.emitParam();
                     }
                 }
             }
@@ -175,7 +175,7 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {
         }
 
         if (this.workflowTemplate) {
-            this.changeParam();
+            this.emitParam();
         }
     }
 
@@ -194,7 +194,12 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {
         this._cd.markForCheck()
     }
 
-    changeParam() {
+    changeParam(key: string, value: any): void {
+        this.parameterValues[key] = value;
+        this.emitParam();
+    }
+
+    emitParam(): void {
         let parameters = new ParamData();
 
         this.workflowTemplate.parameters.forEach(parameter => {
diff --git a/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html b/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html
index 895a1fe151..89f63ea712 100644
--- a/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html
+++ b/ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html
@@ -10,48 +10,46 @@ <h3>Parameters</h3>
     <nz-col [nzSpan]="12">
         <div [ngSwitch]="parameter.type">
             <input nz-input *ngSwitchDefault type="text" name="parameter-{{parameter.key}}"
-                   [(ngModel)]="parameterValues[parameter.key]" (change)="changeParam()">
-            <label *ngSwitchCase="'boolean'" nz-checkbox name="parameter-{{parameter.key}}" [(ngModel)]="parameterValues[parameter.key]"
-                   (ngModelChange)="changeParam()"></label>
+                [ngModel]="parameterValues[parameter.key]" (change)="changeParam(parameter.key, $event)">
+            <label *ngSwitchCase="'boolean'" nz-checkbox name="parameter-{{parameter.key}}"
+                [ngModel]="parameterValues[parameter.key]" (ngModelChange)="changeParam(parameter.key, $event)"></label>
             <codemirror *ngSwitchCase="'json'" name="parameter-{{parameter.key}}"
-                        [(ngModel)]="parameterValues[parameter.key]" [config]="codeMirrorConfig"
-                        (change)="changeParam()" #codemirror>
+                [ngModel]="parameterValues[parameter.key]" [config]="codeMirrorConfig"
+                (change)="changeParam(parameter.key, $event)" #codemirror>
             </codemirror>
             <nz-select *ngSwitchCase="'repository'" name="parameter-{{parameter.key}}" nzShowSearch
-                       nzPlaceHolder="{{'workflow_wizard_select_repo_man' | translate}}"
-                       [(ngModel)]="parameterValues[parameter.key]" (ngModelChange)="fetchRepos(parameter.key, $event)">
+                nzPlaceHolder="{{'workflow_wizard_select_repo_man' | translate}}"
+                [ngModel]="parameterValues[parameter.key]" (ngModelChange)="fetchRepos(parameter.key, $event)">
                 <nz-option *ngFor="let vcs of vcsNames" [nzValue]="vcs" [nzLabel]="vcs"></nz-option>
             </nz-select>
             <nz-select *ngSwitchCase="'ssh-key'" name="parameter-{{parameter.key}}" nzShowSearch
-                        nzPlaceHolder="{{'workflow_template_param_select_key' | translate}}"
-                        (ngModelChange)="changeParam()"
-                        [(ngModel)]="parameterValues[parameter.key]">
+                nzPlaceHolder="{{'workflow_template_param_select_key' | translate}}"
+                (ngModelChange)="changeParam(parameter.key, $event)" (ngModel]="parameterValues[parameter.key]">
                 <nz-option *ngFor="let key of sshKeys" [nzValue]="key" [nzLabel]="key"></nz-option>
             </nz-select>
             <nz-select *ngSwitchCase="'pgp-key'" name="parameter-{{parameter.key}}" nzShowSearch
-                        nzPlaceHolder="{{'workflow_template_param_select_key' | translate}}"
-                        (ngModelChange)="changeParam()"
-                        [(ngModel)]="parameterValues[parameter.key]" #select>
+                nzPlaceHolder="{{'workflow_template_param_select_key' | translate}}"
+                (ngModelChange)="changeParam(parameter.key, $event)" [ngModel]="parameterValues[parameter.key]" #select>
                 <nz-option *ngFor="let key of pgpKeys" [nzValue]="key" [nzLabel]="key"></nz-option>
             </nz-select>
             <nz-row *ngIf="parameter.type === 'repository'">
                 <nz-col [nzSpan]="18">
                     <nz-select name="parameter-{{parameter.key}}-repo" nzShowSearch
-                                [(ngModel)]="parameterValues[parameter.key + '-repository']"
-                               (nzFocus)="focusRepo(parameter.key)"
-                               (nzOnSearch)="filterRepo($event)" (ngModelChange)="changeParam()">
-                        <nz-option *ngFor="let repository of filteredRepo"
-                                           [nzValue]="repository" [nzLabel]="repository">
+                        [ngModel]="parameterValues[parameter.key + '-repository']" (nzFocus)="focusRepo(parameter.key)"
+                        (nzOnSearch)="filterRepo($event)"
+                        (ngModelChange)="changeParam(parameter.key + '-repository', $event)">
+                        <nz-option *ngFor="let repository of filteredRepo" [nzValue]="repository"
+                            [nzLabel]="repository">
                         </nz-option>
                     </nz-select>
                 </nz-col>
                 <nz-col [nzSpan]="6">
-                    <button nz-button  nzType="primary" name="resync" type="button" [nzLoading]="loading"
-                            [disabled]="loading" (click)="resyncRepos(parameter.key)">
+                    <button nz-button nzType="primary" name="resync" type="button" [nzLoading]="loading"
+                        [disabled]="loading" (click)="resyncRepos(parameter.key)">
                         Resynchronize
                     </button>
                 </nz-col>
             </nz-row>
         </div>
     </nz-col>
-</nz-row>
+</nz-row>
\ No newline at end of file