[ACA-3273] - fix start process empty message (#5689)

* [ACA-3273] - fix start process empty message

* revert licenses changes

Co-authored-by: Silviu Popa <p3701014@L3700101120.ness.com>
This commit is contained in:
Silviu Popa
2020-05-13 03:17:48 +03:00
committed by GitHub
parent da82180814
commit 171089d1d6
3 changed files with 81 additions and 63 deletions

View File

@@ -3,73 +3,75 @@
<mat-card-title class="adf-title">{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}} <mat-card-title class="adf-title">{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}}
</mat-card-title> </mat-card-title>
<mat-card-content *ngIf="!isProcessDefinitionsEmpty(); else emptyProcessDefinitionsList"> <mat-card-content>
<mat-card-subtitle id="error-message" *ngIf="errorMessageId"> <mat-card-subtitle id="error-message" *ngIf="errorMessageId">
{{ errorMessageId | translate }} {{ errorMessageId | translate }}
</mat-card-subtitle> </mat-card-subtitle>
<form [formGroup]="processForm"> <div *ngIf="!isProcessDefinitionsEmpty(); else emptyProcessDefinitionsList">
<mat-form-field class="adf-process-input-container" [floatLabel]="'always'"> <form [formGroup]="processForm">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label> <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
<input <mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
#inputAutocomplete <input
matInput #inputAutocomplete
formControlName="processDefinition" matInput
[matAutocomplete]="auto" formControlName="processDefinition"
id="processDefinitionName"> [matAutocomplete]="auto"
<div class="adf-process-input-autocomplete"> id="processDefinitionName">
<mat-autocomplete #auto="matAutocomplete" id="processDefinitionOptions" [displayWith]="displayProcessNameOnDropdown" (optionSelected)="setProcessDefinitionOnForm($event.option.value)" > <div class="adf-process-input-autocomplete">
<mat-option *ngFor="let processDef of filteredProcesses" [value]="getProcessDefinitionValue(processDef)" <mat-autocomplete #auto="matAutocomplete" id="processDefinitionOptions" [displayWith]="displayProcessNameOnDropdown" (optionSelected)="setProcessDefinitionOnForm($event.option.value)" >
(click)="processDefinitionSelectionChanged(processDef)"> <mat-option *ngFor="let processDef of filteredProcesses" [value]="getProcessDefinitionValue(processDef)"
{{ getProcessDefinitionValue(processDef) }} (click)="processDefinitionSelectionChanged(processDef)">
</mat-option> {{ getProcessDefinitionValue(processDef) }}
</mat-autocomplete> </mat-option>
<button id="adf-select-process-dropdown" *ngIf="showSelectProcessDropdown" mat-icon-button (click)="displayDropdown($event)"> </mat-autocomplete>
<mat-icon>arrow_drop_down</mat-icon> <button id="adf-select-process-dropdown" *ngIf="showSelectProcessDropdown" mat-icon-button (click)="displayDropdown($event)">
</button> <mat-icon>arrow_drop_down</mat-icon>
</div> </button>
<mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb"> </div>
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }} <mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label>
<input
matInput
formControlName="processInstanceName"
id="processName">
<mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
</mat-error> </mat-error>
</mat-form-field> <mat-error id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
</mat-error>
<mat-error *ngIf="processInstanceName.hasError('pattern')">
{{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
</mat-error>
</mat-form-field>
</form>
<mat-form-field class="adf-process-input-container" [floatLabel]="'always'"> <ng-container *ngIf="hasForm() else taskFormCloudButtons">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label> <adf-cloud-form
<input [appName]="appName"
matInput [appVersion]="processDefinitionCurrent.appVersion"
formControlName="processInstanceName" [data]="values"
id="processName"> [formId]="processDefinitionCurrent.formKey"
<mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')"> [showSaveButton]="false"
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }} [showCompleteButton]="false"
</mat-error> [showRefreshButton]="false"
<mat-error id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')"> [showValidationIcon]="false"
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }} [showTitle]="false"
</mat-error> (formContentClicked)="onFormContentClicked($event)"
<mat-error *ngIf="processInstanceName.hasError('pattern')"> (formLoaded)="onFormLoaded($event)">
{{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }} <adf-cloud-form-custom-outcomes>
</mat-error> <ng-template [ngTemplateOutlet]="taskFormCloudButtons">
</mat-form-field> </ng-template>
</form> </adf-cloud-form-custom-outcomes>
</adf-cloud-form>
<ng-container *ngIf="hasForm() else taskFormCloudButtons"> </ng-container>
<adf-cloud-form </div>
[appName]="appName"
[appVersion]="processDefinitionCurrent.appVersion"
[data]="values"
[formId]="processDefinitionCurrent.formKey"
[showSaveButton]="false"
[showCompleteButton]="false"
[showRefreshButton]="false"
[showValidationIcon]="false"
[showTitle]="false"
(formContentClicked)="onFormContentClicked($event)"
(formLoaded)="onFormLoaded($event)">
<adf-cloud-form-custom-outcomes>
<ng-template [ngTemplateOutlet]="taskFormCloudButtons">
</ng-template>
</adf-cloud-form-custom-outcomes>
</adf-cloud-form>
</ng-container>
</mat-card-content> </mat-card-content>
@@ -86,7 +88,7 @@
</ng-template> </ng-template>
<ng-template #emptyProcessDefinitionsList> <ng-template #emptyProcessDefinitionsList>
<mat-card-content> <mat-card-content *ngIf="processDefinitionLoaded">
<mat-card-subtitle class="error-message" id="no-process-message"> <mat-card-subtitle class="error-message" id="no-process-message">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase}} {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS' | translate | uppercase}}
</mat-card-subtitle> </mat-card-subtitle>

View File

@@ -736,5 +736,18 @@ describe('StartProcessCloudComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
selectOptionByName(fakeProcessDefinitions[0].name); selectOptionByName(fakeProcessDefinitions[0].name);
}); });
it('should wait for process definition to be loaded before showing the empty process definition message', () => {
component.processDefinitionLoaded = false;
fixture.detectChanges();
let noProcessElement = fixture.nativeElement.querySelector('#no-process-message');
expect(noProcessElement).toBeNull();
getDefinitionsSpy.and.returnValue(of([]));
component.loadProcessDefinitions();
fixture.detectChanges();
noProcessElement = fixture.nativeElement.querySelector('#no-process-message');
expect(noProcessElement).not.toBeNull();
});
}); });
}); });

View File

@@ -104,6 +104,7 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
disableStartButton: boolean = true; disableStartButton: boolean = true;
protected onDestroy$ = new Subject<boolean>(); protected onDestroy$ = new Subject<boolean>();
processDefinitionLoaded = false;
constructor(private startProcessCloudService: StartProcessCloudService, constructor(private startProcessCloudService: StartProcessCloudService,
private formBuilder: FormBuilder) { private formBuilder: FormBuilder) {
@@ -233,7 +234,9 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
this.resetErrorMessage(); this.resetErrorMessage();
this.startProcessCloudService.getProcessDefinitions(this.appName) this.startProcessCloudService.getProcessDefinitions(this.appName)
.pipe(takeUntil(this.onDestroy$)) .pipe(
tap(() => this.processDefinitionLoaded = true),
takeUntil(this.onDestroy$))
.subscribe((processDefinitionRepresentations: ProcessDefinitionCloud[]) => { .subscribe((processDefinitionRepresentations: ProcessDefinitionCloud[]) => {
this.processDefinitionList = processDefinitionRepresentations; this.processDefinitionList = processDefinitionRepresentations;
if (processDefinitionRepresentations.length === 1) { if (processDefinitionRepresentations.length === 1) {