From a933070fc327f9039ceff7520b5229e2d53311c8 Mon Sep 17 00:00:00 2001 From: Tomasz Gnyp <49343696+tomgny@users.noreply.github.com> Date: Tue, 4 Jul 2023 09:37:08 +0200 Subject: [PATCH] [AAE-15522] Fix - Dropdown variable error messages are displayed at modeling level (#8730) --- .../form-field/form-field.component.spec.ts | 23 ++++++++++++++++++ .../form-field/form-field.component.ts | 8 +++++++ .../widgets/core/form-field.model.ts | 1 + .../components/widgets/core/form.model.ts | 1 + .../components/form-cloud.component.spec.ts | 24 +++++++++++++++++++ .../form/components/form-cloud.component.ts | 11 +++++++++ .../dropdown/dropdown-cloud.widget.html | 16 +++++++------ .../dropdown/dropdown-cloud.widget.spec.ts | 18 ++++++++++++++ .../widgets/dropdown/dropdown-cloud.widget.ts | 6 +++++ 9 files changed, 101 insertions(+), 7 deletions(-) diff --git a/lib/core/src/lib/form/components/form-field/form-field.component.spec.ts b/lib/core/src/lib/form/components/form-field/form-field.component.spec.ts index 2ac69fc423..83c2981cdf 100644 --- a/lib/core/src/lib/form/components/form-field/form-field.component.spec.ts +++ b/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, diff --git a/lib/core/src/lib/form/components/form-field/form-field.component.ts b/lib/core/src/lib/form/components/form-field/form-field.component.ts index 6d61c168de..e9ce10309a 100644 --- a/lib/core/src/lib/form/components/form-field/form-field.component.ts +++ b/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; 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; diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts index 8488bd2757..6704796c6a 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts +++ b/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; diff --git a/lib/core/src/lib/form/components/widgets/core/form.model.ts b/lib/core/src/lib/form/components/widgets/core/form.model.ts index 14c0ae7eff..8673004ba4 100644 --- a/lib/core/src/lib/form/components/widgets/core/form.model.ts +++ b/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, diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts index fddc165652..6a408e55c4 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts +++ b/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)); diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts index 7b5da60ade..2f3bec4fd5 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts +++ b/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(); @@ -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); } diff --git 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 index abf377e0c3..0bf385425e 100644 --- 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 @@ -32,12 +32,14 @@ {{field.value}} - - - - +
+ + + + +
diff --git 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 index b93287497c..e7ea77a3a6 100644 --- 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 @@ -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(); + }); }); }); diff --git 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 index 1ae7673e66..58d40e1e68 100644 --- 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 @@ -62,6 +62,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI showInputFilter = false; isRestApiFailed = false; variableOptionsFailed = false; + previewState = false; restApiHostName: string; list$: Observable; filter$ = new BehaviorSubject(''); @@ -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); }