AAE-12086 The error message is shown for completed task with read-only fields [ADW] (#9677)

* AAE-12086 Fix with tests * AAE-12086 Setup readOnly on form level
2025-07-24 17:32:15 +00:00 · 2024-05-14 13:22:12 +02:00
parent 9e7312719c
commit d8f1946988
3 changed files with 129 additions and 82 deletions
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
@@ -1,8 +1,12 @@
-<div class="adf-dropdown-widget {{field.className}}"
-     [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly" [class.adf-left-label-input-container]="field.leftLabels">
+<div
+    class="adf-dropdown-widget {{field.className}}"
+    [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed"
+    [class.adf-readonly]="field.readOnly"
+    [class.adf-left-label-input-container]="field.leftLabels"
+>
    <div class="adf-dropdown-widget-top-labels">
-        <label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels">{{field.name | translate }}<span class="adf-asterisk"
-            *ngIf="isRequired()">*</span>
+        <label class="adf-label" [attr.for]="field.id" [class.adf-left-label]="field.leftLabels"
+            >{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span>
        </label>
    </div>
    <div>
@@ -10,7 +14,8 @@
            <mat-label *ngIf="getDefaultOption(list$ | async) as defaultOption">
                {{ defaultOption.name }}
            </mat-label>
-            <mat-select class="adf-select"
+            <mat-select
+                class="adf-select"
                [id]="field.id"
                [(ngModel)]="field.value"
                [disabled]="field.readOnly"
@@ -22,24 +27,35 @@
                (blur)="markAsTouched()"
                matTooltipPosition="above"
                matTooltipShowDelay="1000"
-                        [multiple]="field.hasMultipleValues">
+                [multiple]="field.hasMultipleValues"
+            >
                <adf-select-filter-input *ngIf="showInputFilter" (change)="filter$.next($event)"></adf-select-filter-input>

-                <mat-option *ngFor="let opt of list$ | async"
-                            [value]="getOptionValue(opt, field.value)"
-                            [id]="opt.id">{{opt.name}}
+                <mat-option *ngFor="let opt of list$ | async" [value]="getOptionValue(opt, field.value)" [id]="opt.id">
+                    {{opt.name}}
+                </mat-option>
+                <mat-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">
+                    {{field.value}}
                </mat-option>
-                <mat-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">{{field.value}}</mat-option>
            </mat-select>
        </mat-form-field>
-        <div *ngIf="!previewState">
+        <div *ngIf="!previewState && !field.readOnly">
            <error-widget [error]="field.validationSummary"></error-widget>
-            <error-widget class="adf-dropdown-required-message" *ngIf="showRequiredMessage()"
-                        required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-            <error-widget class="adf-dropdown-failed-message" *ngIf="isRestApiFailed"
-                        required="{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}"></error-widget>
-            <error-widget class="adf-dropdown-failed-message" *ngIf="variableOptionsFailed"
-                        required="{{ 'FORM.FIELD.VARIABLE_DROPDOWN_OPTIONS_FAILED' | translate }}"></error-widget>
+            <error-widget
+                class="adf-dropdown-required-message"
+                *ngIf="showRequiredMessage()"
+                required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
+            ></error-widget>
+            <error-widget
+                class="adf-dropdown-failed-message"
+                *ngIf="isRestApiFailed"
+                required="{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}"
+            ></error-widget>
+            <error-widget
+                class="adf-dropdown-failed-message"
+                *ngIf="variableOptionsFailed"
+                required="{{ 'FORM.FIELD.VARIABLE_DROPDOWN_OPTIONS_FAILED' | translate }}"
+            ></error-widget>
        </div>
    </div>
 </div>
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
@@ -64,11 +64,10 @@ describe('DropdownCloudWidgetComponent', () => {

    describe('Simple Dropdown', () => {
        beforeEach(() => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                id: 'dropdown-id',
                name: 'date-name',
                type: 'dropdown',
-                readOnly: false,
                restUrl: 'https://fake-rest-url',
                options: [{ id: 'empty', name: 'Choose one...' }]
            });
@@ -120,6 +119,18 @@ describe('DropdownCloudWidgetComponent', () => {
            expect(await allOptions[2].getText()).toEqual('option_3');
        });

+        it('should NOT load data from restUrl when field is readonly', () => {
+            spyOn(formCloudService, 'getRestWidgetData');
+            widget.field.readOnly = true;
+            widget.field.restUrl = 'https://fake-rest-url';
+            widget.field.optionType = 'rest';
+            widget.field.restIdProperty = 'name';
+
+            widget.ngOnInit();
+
+            expect(formCloudService.getRestWidgetData).not.toHaveBeenCalled();
+        });
+
        it('should show error message if the restUrl failed to fetch options', async () => {
            const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(throwError('Failed to fetch options'));
            const errorIcon: string = 'error_outline';
@@ -194,7 +205,7 @@ describe('DropdownCloudWidgetComponent', () => {
            expect(widget.field.form.values['dropdown-id']).toEqual({ id: 'opt1', name: 'default1_value' });
        });

-        it('should not display required error for a non required dropdown when selecting the none option', async () => {
+        it('should NOT display required error for a non required dropdown when selecting the none option', async () => {
            widget.field.options = [{ id: 'empty', name: 'Choose empty' }, ...fakeOptionList];

            widget.ngOnInit();
@@ -209,7 +220,7 @@ describe('DropdownCloudWidgetComponent', () => {
            expect(requiredErrorElement).toBeFalsy();
        });

-        it('should not display required error when selecting a valid option for a required dropdown', async () => {
+        it('should NOT display required error when selecting a valid option for a required dropdown', async () => {
            widget.field.required = true;
            widget.field.options = [{ id: 'empty', name: 'Choose empty' }, ...fakeOptionList];

@@ -224,7 +235,7 @@ describe('DropdownCloudWidgetComponent', () => {
            expect(requiredErrorElement).toBeFalsy();
        });

-        it('should not have a value when switching from an available option to the None option', async () => {
+        it('should NOT have a value when switching from an available option to the None option', async () => {
            widget.field.options = [{ id: 'empty', name: 'This is a mock none option' }, ...fakeOptionList];

            widget.ngOnInit();
@@ -315,15 +326,30 @@ describe('DropdownCloudWidgetComponent', () => {
            const requiredErrorElement = fixture.debugElement.query(By.css('.adf-dropdown-required-message .adf-error-text'));
            expect(requiredErrorElement.nativeElement.innerText).toEqual('FORM.FIELD.REQUIRED');
        });
+
+        it('should NOT display a required error when dropdown is readonly', async () => {
+            widget.field.readOnly = true;
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(element.querySelector('.adf-invalid')).toBeFalsy();
+
+            const dropdownSelect = element.querySelector('.adf-select');
+            dropdownSelect.dispatchEvent(new Event('blur'));
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(element.querySelector('.adf-invalid')).toBeFalsy();
+        });
    });

    describe('filter', () => {
        beforeEach(() => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                id: 'dropdown-id',
                name: 'option list',
                type: 'dropdown',
-                readOnly: false,
                options: filterOptionList
            });
            widget.ngOnInit();
@@ -370,11 +396,10 @@ describe('DropdownCloudWidgetComponent', () => {

    describe('multiple selection', () => {
        it('should show preselected option', async () => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                id: 'dropdown-id',
                name: 'date-name',
                type: 'dropdown',
-                readOnly: 'false',
                options: fakeOptionList,
                selectionType: 'multiple',
                value: [
@@ -389,11 +414,10 @@ describe('DropdownCloudWidgetComponent', () => {
        });

        it('should support multiple options', async () => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                id: 'dropdown-id',
                name: 'date-name',
                type: 'dropdown',
-                readOnly: 'false',
                selectionType: 'multiple',
                options: fakeOptionList
            });
@@ -408,11 +432,10 @@ describe('DropdownCloudWidgetComponent', () => {
        });

        it('should show preselected option for rest options', async () => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                id: 'dropdown-id',
                name: 'date-name',
                type: 'dropdown',
-                readOnly: 'false',
                restUrl: 'https://fake-rest-url',
                optionType: 'rest',
                selectionType: 'multiple',
@@ -448,11 +471,10 @@ describe('DropdownCloudWidgetComponent', () => {
        });

        it('should support multiple options for rest options', async () => {
-            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                id: 'dropdown-id',
                name: 'date-name',
                type: 'dropdown',
-                readOnly: 'false',
                restUrl: 'https://fake-rest-url',
                optionType: 'rest',
                selectionType: 'multiple'
@@ -498,11 +520,10 @@ describe('DropdownCloudWidgetComponent', () => {
                validate: () => true
            });
            beforeEach(() => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                    id: 'child-dropdown-id',
                    name: 'child-dropdown',
                    type: 'dropdown',
-                    readOnly: 'false',
                    optionType: 'rest',
                    restUrl: 'myFakeDomain.com/cities?country=${parentDropdown}',
                    rule: {
@@ -605,11 +626,10 @@ describe('DropdownCloudWidgetComponent', () => {
            const parentDropdown = new FormFieldModel(new FormModel(), { id: 'parentDropdown', type: 'dropdown' });

            beforeEach(() => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                    id: 'child-dropdown-id',
                    name: 'child-dropdown',
                    type: 'dropdown',
-                    readOnly: 'false',
                    optionType: 'manual',
                    rule: {
                        ruleOn: 'parentDropdown',
@@ -649,7 +669,7 @@ describe('DropdownCloudWidgetComponent', () => {
            });

            describe('Manual - On parent value changes (chain)', () => {
-                it('should reset the current value when it not part of the available options', () => {
+                it('should reset the current value when it NOT part of the available options', () => {
                    widget.field.options = mockConditionalEntries[1].options;
                    widget.field.value = 'non-existent-value';
                    fixture.detectChanges();
@@ -662,7 +682,7 @@ describe('DropdownCloudWidgetComponent', () => {
                    expect(widget.fieldValue).toEqual('');
                });

-                it('should not reset the current value when it is part of the available options', () => {
+                it('should NOT reset the current value when it is part of the available options', () => {
                    widget.field.options = mockConditionalEntries[1].options;
                    widget.field.value = 'ATH';
                    fixture.detectChanges();
@@ -694,11 +714,10 @@ describe('DropdownCloudWidgetComponent', () => {

        describe('Load selection for linked dropdown (i.e. saved, completed forms)', () => {
            it('should load the selection of a manual type linked dropdown', () => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                    id: 'child-dropdown-id',
                    name: 'child-dropdown',
                    type: 'dropdown',
-                    readOnly: 'false',
                    optionType: 'manual',
                    rule: {
                        ruleOn: 'parentDropdown',
@@ -718,11 +737,10 @@ describe('DropdownCloudWidgetComponent', () => {

            it('should load the selection of a rest type linked dropdown', () => {
                const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(mockRestDropdownOptions));
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                    id: 'child-dropdown-id',
                    name: 'child-dropdown',
                    type: 'dropdown',
-                    readOnly: 'false',
                    restUrl: 'mock-url.com/country=${country}',
                    optionType: 'rest',
                    rule: {
@@ -744,11 +762,10 @@ describe('DropdownCloudWidgetComponent', () => {

        describe('when form model has left labels', () => {
            it('should have left labels classes on leftLabels true', async () => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: true }), {
+                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false, leftLabels: true }), {
                    id: 'dropdown-id',
                    name: 'option list',
                    type: FormFieldTypes.DROPDOWN,
-                    readOnly: false,
                    options: filterOptionList
                });

@@ -762,12 +779,11 @@ describe('DropdownCloudWidgetComponent', () => {
                expect(adfLeftLabel).not.toBeNull();
            });

-            it('should not have left labels classes on leftLabels false', async () => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', leftLabels: false }), {
+            it('should NOT have left labels classes on leftLabels false', async () => {
+                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false, leftLabels: false }), {
                    id: 'dropdown-id',
                    name: 'option list',
                    type: FormFieldTypes.DROPDOWN,
-                    readOnly: false,
                    options: filterOptionList
                });

@@ -781,12 +797,11 @@ describe('DropdownCloudWidgetComponent', () => {
                expect(adfLeftLabel).toBeNull();
            });

-            it('should not have left labels classes on leftLabels not present', async () => {
-                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
+            it('should NOT have left labels classes on leftLabels NOT present', async () => {
+                widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false }), {
                    id: 'dropdown-id',
                    name: 'option list',
                    type: FormFieldTypes.DROPDOWN,
-                    readOnly: false,
                    options: filterOptionList
                });

@@ -813,11 +828,10 @@ describe('DropdownCloudWidgetComponent', () => {
            processVariables?: TaskVariableCloud[],
            variables?: TaskVariableCloud[]
        ) =>
-            new FormFieldModel(new FormModel({ taskId: 'fake-task-id', processVariables, variables }), {
+            new FormFieldModel(new FormModel({ taskId: 'fake-task-id', readOnly: false, processVariables, variables }), {
                id: 'variable-dropdown-id',
                name: 'variable-options-dropdown',
                type: 'dropdown',
-                readOnly: 'false',
                optionType: 'variable',
                variableConfig: {
                    variableName,
@@ -961,5 +975,20 @@ describe('DropdownCloudWidgetComponent', () => {
            const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
            expect(failedErrorMsgElement).toBeNull();
        });
+
+        it('should NOT display errors if field is readonly', () => {
+            widget.field = getVariableDropdownWidget(
+                'variables.wrong-variable-id',
+                'response.wrongPath.players',
+                'wrongId',
+                'wrongFullName',
+                mockProcessVariablesWithJson
+            );
+            widget.field.readOnly = true;
+            fixture.detectChanges();
+
+            const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
+            expect(failedErrorMsgElement).toBeNull();
+        });
    });
 });
--- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
@@ -191,7 +191,10 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
    }

    private persistFieldOptionsFromRestApi() {
-        if (this.isValidRestType()) {
+        if (!this.isValidRestType() || this.field.readOnly) {
+            return;
+        }
+
        this.resetRestApiErrorMessage();
        const bodyParam = this.buildBodyParam();
        this.formCloudService
@@ -211,7 +214,6 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
                }
            );
    }
-    }

    private buildBodyParam(): any {
        const bodyParam = Object.assign({});