Skip to content

Commit

Permalink
fix(ui): template apply form (#6750)
Browse files Browse the repository at this point in the history 
Signed-off-by: richardlt <richard.le.terrier@gmail.com>
  • Loading branch information
@richardlt
richardlt committed Dec 21, 2023
1 parent 417c171 commit d2eedfe
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 103 deletions.
9 changes: 3 additions & 6 deletions ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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() {
Expand Down
20 changes: 5 additions & 15 deletions ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand Down
114 changes: 57 additions & 57 deletions ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.html
View file
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 9 additions & 4 deletions ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {

ngOnInit(): void {
this.initProject();
this.changeParam();
this.emitParam();
}

initProject() {
Expand Down Expand Up @@ -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();
}
}
}
Expand Down Expand Up @@ -175,7 +175,7 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {
}

if (this.workflowTemplate) {
this.changeParam();
this.emitParam();
}
}

Expand All @@ -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 => {
Expand Down
40 changes: 19 additions & 21 deletions ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit d2eedfe

Please sign in to comment.