[AAE-15522] Fix - Dropdown variable error messages are displayed at modeling level (#8730)

lib/core/src/lib/form/components/form-field/form-field.component.spec.ts

@@ -103,6 +103,29 @@ describe('FormFieldComponent', () => {
         });
     });
 
+    it('should set field preview state', () => {
+        const field = new FormFieldModel(form, {
+            type: FormFieldTypes.DROPDOWN,
+            id: 'FAKE-DROPDOWN-WIDGET'
+        });
+        component.field = field;
+        component.preview = true;
+        fixture.detectChanges();
+
+        expect(component.field.preview).toBe(true);
+    });
+
+    it('should field preview state be false as default', () => {
+        const field = new FormFieldModel(form, {
+            type: FormFieldTypes.DROPDOWN,
+            id: 'FAKE-DROPDOWN-WIDGET'
+        });
+        component.field = field;
+        fixture.detectChanges();
+
+        expect(component.field.preview).toBe(false);
+    });
+
     it('should hide the field when it is not visible', (done) => {
         const field = new FormFieldModel(form, {
             type: FormFieldTypes.TEXT,

lib/core/src/lib/form/components/form-field/form-field.component.ts

@@ -63,6 +63,9 @@ export class FormFieldComponent implements OnInit, OnDestroy {
     @Input()
     field: FormFieldModel = null;
 
+    @Input()
+    preview: boolean = false;
+
     componentRef: ComponentRef<any>;
 
     focus: boolean = false;
@@ -80,6 +83,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
         }
         const originalField = this.getField();
         if (originalField) {
+            this.setFieldPreviewState();
             const customTemplate = this.field.form.customFieldTemplates[originalField.type];
             if (customTemplate && this.hasController(originalField.type)) {
                 const factory = this.getComponentFactorySync(originalField.type, customTemplate);
@@ -154,6 +158,10 @@ export class FormFieldComponent implements OnInit, OnDestroy {
         return module.componentFactories.find((x) => x.componentType === decoratedCmp);
     }
 
+    private setFieldPreviewState(): void {
+        this.field.preview = this.preview;
+    }
+
     focusToggle() {
         setTimeout(() => {
             this.focus = !this.focus;

lib/core/src/lib/form/components/widgets/core/form-field.model.ts

@@ -83,6 +83,7 @@ export class FormFieldModel extends FormWidgetModel {
     groupsRestriction: string[];
     leftLabels: boolean = false;
     variableConfig: VariableConfig;
+    preview: boolean = false;
 
     // container model members
     numberOfColumns: number = 1;

lib/core/src/lib/form/components/widgets/core/form.model.ts

@@ -90,6 +90,7 @@ export class FormModel implements ProcessFormModel {
     isValid = true;
     processVariables: ProcessVariableModel[] = [];
     variables: FormVariableModel[] = [];
+    preview: boolean = false;
 
     constructor(
         json?: any,

lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts

@@ -1093,6 +1093,30 @@ describe('FormCloudComponent', () => {
         expect(formComponent.disableSaveButton).toBeTrue();
     });
 
+    it('should set form preview state', () => {
+        const formModel = new FormModel();
+        formComponent.form = formModel;
+        formComponent.preview = true;
+        formComponent.ngOnChanges({
+            preview: {
+                currentValue: true,
+                previousValue: undefined,
+                firstChange: false,
+                isFirstChange: () => false
+            }
+        });
+
+        expect(formComponent.form.preview).toBe(true);
+    });
+
+    it('should form preview state be false as default', () => {
+        const formModel = new FormModel();
+        formComponent.form = formModel;
+        fixture.detectChanges();
+
+        expect(formComponent.form.preview).toBe(false);
+    });
+
     describe('form validations', () => {
         it('should be able to set visibility conditions for Attach File widget', async () => {
             spyOn(formCloudService, 'getForm').and.returnValue(of(conditionalUploadWidgetsMock));

lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts

@@ -82,6 +82,9 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
     @Input()
     fieldValidators: FormFieldValidator[] = [...FORM_FIELD_VALIDATORS];
 
+    @Input()
+    preview: boolean = false;
+
     /** Emitted when the form is submitted with the `Save` or custom outcomes. */
     @Output()
     formSaved = new EventEmitter<FormModel>();
@@ -176,6 +179,10 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
             this.refreshFormData();
             return;
         }
+
+        if (changes?.preview?.currentValue) {
+            this.setFormPreviewState();
+        }
     }
 
     /**
@@ -357,6 +364,10 @@ export class FormCloudComponent extends FormBaseComponent implements OnChanges,
         this.onFormDataRefreshed(this.form);
     }
 
+    private setFormPreviewState(): void {
+        this.form.preview = this.preview;
+    }
+
     protected onFormLoaded(form: FormModel) {
         this.formLoaded.emit(form);
     }

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html

@@ -32,12 +32,14 @@
                 <mat-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">{{field.value}}</mat-option>
             </mat-select>
         </mat-form-field>
-        <error-widget [error]="field.validationSummary"></error-widget>
+        <div *ngIf="!previewState">
-        <error-widget class="adf-dropdown-required-message" *ngIf="showRequiredMessage()"
+            <error-widget [error]="field.validationSummary"></error-widget>
-                      required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+            <error-widget class="adf-dropdown-required-message" *ngIf="showRequiredMessage()"
-        <error-widget class="adf-dropdown-failed-message" *ngIf="isRestApiFailed"
+                        required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-                      required="{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}"></error-widget>
+            <error-widget class="adf-dropdown-failed-message" *ngIf="isRestApiFailed"
-        <error-widget class="adf-dropdown-failed-message" *ngIf="variableOptionsFailed"
+                        required="{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}"></error-widget>
-                      required="{{ 'FORM.FIELD.VARIABLE_DROPDOWN_OPTIONS_FAILED' | translate }}"></error-widget>
+            <error-widget class="adf-dropdown-failed-message" *ngIf="variableOptionsFailed"
+                        required="{{ 'FORM.FIELD.VARIABLE_DROPDOWN_OPTIONS_FAILED' | translate }}"></error-widget>
+        </div>
     </div>
 </div>

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts

@@ -1022,5 +1022,23 @@ describe('DropdownCloudWidgetComponent', () => {
             checkDropdownVariableOptionsFailed();
             expect(logServiceSpy).toHaveBeenCalledWith('variables.json-variable not found');
         });
+
+        it('should NOT display errors if field is in the preview state', () => {
+            widget.field = getVariableDropdownWidget('variables.json-variable', 'response.wrongPath.players', 'playerId', 'playerFullName', mockProcessVariablesWithJson);
+            widget.field.preview = true;
+            fixture.detectChanges();
+
+            const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
+            expect(failedErrorMsgElement).toBeNull();
+        });
+
+        it('should NOT display errors if form is in the preview state', () => {
+            widget.field = getVariableDropdownWidget('variables.json-variable', 'response.wrongPath.players', 'playerId', 'playerFullName', mockProcessVariablesWithJson);
+            widget.field.form.preview = true;
+            fixture.detectChanges();
+
+            const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
+            expect(failedErrorMsgElement).toBeNull();
+        });
     });
 });

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts

@@ -62,6 +62,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
     showInputFilter = false;
     isRestApiFailed = false;
     variableOptionsFailed = false;
+    previewState = false;
     restApiHostName: string;
     list$: Observable<FormFieldOption[]>;
     filter$ = new BehaviorSubject<string>('');
@@ -80,6 +81,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
     }
 
     ngOnInit() {
+        this.setPreviewState();
         this.checkFieldOptionsSource();
         this.updateOptions();
     }
@@ -372,6 +374,10 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
         return this.field.optionType === 'rest' && !!this.field.restUrl;
     }
 
+    private setPreviewState(): void {
+        this.previewState = this.field?.form?.preview ||this.field?.preview;
+    }
+
     private handleError(error: any) {
         this.logService.error(error);
     }