From 0341c785f9487c1508f61d30631bf10bd74e0642 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Stephan=20M=C3=BCller?= Date: Tue, 19 Nov 2019 09:28:26 +0100 Subject: [PATCH] mgr/dashboard: Make form modal more flexible MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Now any input type is supported and the special binary type which will use the cd-binary input and automatically format the binary size into bytes when submitting. Now any field can have custom validators and error messages. The form will fallback on predefined error messages if not configured. It will use the error messages provided by the binary min and max validators. It still provides the error message for a required field. Fixes: https://tracker.ceph.com/issues/38287 Signed-off-by: Stephan Müller --- .../form-modal/form-modal.component.html | 83 ++++++++-------- .../form-modal/form-modal.component.spec.ts | 76 +++++++++++++- .../form-modal/form-modal.component.ts | 99 ++++++++++++++----- .../models/cd-form-modal-field-config.ts | 19 ++++ 4 files changed, 204 insertions(+), 73 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-form-modal-field-config.ts diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html index 35fedeb5f6d..a7c76941afd 100755 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html @@ -5,54 +5,49 @@

{{ message }}

-
- - - -
- - This field is required. -
- - - -
- - This field is required. -
- - +
+ +
+ + + + + {{ getError(field) }} + +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.spec.ts index 70c1872023c..5dde3e7621f 100755 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.spec.ts @@ -1,5 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ReactiveFormsModule } from '@angular/forms'; +import { ReactiveFormsModule, Validators } from '@angular/forms'; import { RouterTestingModule } from '@angular/router/testing'; import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation'; @@ -8,8 +8,10 @@ import { BsModalRef, ModalModule } from 'ngx-bootstrap/modal'; import { configureTestBed, FixtureHelper, + FormHelper, i18nProviders } from '../../../../testing/unit-test-helper'; +import { CdValidators } from '../../forms/cd-validators'; import { SharedModule } from '../../shared.module'; import { FormModalComponent } from './form-modal.component'; @@ -17,6 +19,7 @@ describe('InputModalComponent', () => { let component: FormModalComponent; let fixture: ComponentFixture; let fh: FixtureHelper; + let formHelper: FormHelper; let submitted; const initialState = { @@ -24,15 +27,24 @@ describe('InputModalComponent', () => { message: 'Some description', fields: [ { - type: 'inputText', + type: 'text', name: 'requiredField', value: 'some-value', required: true }, { - type: 'inputText', + type: 'number', name: 'optionalField', - label: 'Optional' + label: 'Optional', + errors: { min: 'Value has to be above zero!' }, + validators: [Validators.min(0), Validators.max(10)] + }, + { + type: 'binary', + name: 'dimlessBinary', + label: 'Size', + value: 2048, + validators: [CdValidators.binaryMin(1024), CdValidators.binaryMax(3072)] } ], submitButtonText: 'Submit button name', @@ -56,6 +68,7 @@ describe('InputModalComponent', () => { Object.assign(component, initialState); fixture.detectChanges(); fh = new FixtureHelper(fixture); + formHelper = new FormHelper(component.formGroup); }); it('should create', () => { @@ -86,6 +99,61 @@ describe('InputModalComponent', () => { it('gives back all form values on submit', () => { component.onSubmitForm(component.formGroup.value); expect(submitted).toEqual({ + dimlessBinary: 2048, + requiredField: 'some-value', + optionalField: null + }); + }); + + it('tests required field validation', () => { + formHelper.expectErrorChange('requiredField', '', 'required'); + }); + + it('tests required field message', () => { + formHelper.setValue('requiredField', '', true); + fh.expectTextToBe('.cd-requiredField-form-group .invalid-feedback', 'This field is required.'); + }); + + it('tests custom validator on number field', () => { + formHelper.expectErrorChange('optionalField', -1, 'min'); + formHelper.expectErrorChange('optionalField', 11, 'max'); + }); + + it('tests custom validator error message', () => { + formHelper.setValue('optionalField', -1, true); + fh.expectTextToBe( + '.cd-optionalField-form-group .invalid-feedback', + 'Value has to be above zero!' + ); + }); + + it('tests default error message', () => { + formHelper.setValue('optionalField', 11, true); + fh.expectTextToBe('.cd-optionalField-form-group .invalid-feedback', 'An error occurred.'); + }); + + it('tests binary error messages', () => { + formHelper.setValue('dimlessBinary', '4 K', true); + fh.expectTextToBe( + '.cd-dimlessBinary-form-group .invalid-feedback', + 'Size has to be at most 3 KiB or less' + ); + formHelper.setValue('dimlessBinary', '0.5 K', true); + fh.expectTextToBe( + '.cd-dimlessBinary-form-group .invalid-feedback', + 'Size has to be at least 1 KiB or more' + ); + }); + + it('shows result of dimlessBinary pipe', () => { + fh.expectFormFieldToBe('#dimlessBinary', '2 KiB'); + }); + + it('changes dimlessBinary value and the result will still be a number', () => { + formHelper.setValue('dimlessBinary', '3 K', true); + component.onSubmitForm(component.formGroup.value); + expect(submitted).toEqual({ + dimlessBinary: 3072, requiredField: 'some-value', optionalField: null }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts index 0572cd02ed5..6488819edbb 100755 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.ts @@ -1,24 +1,15 @@ import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { FormControl, ValidatorFn, Validators } from '@angular/forms'; +import { I18n } from '@ngx-translate/i18n-polyfill'; import * as _ from 'lodash'; import { BsModalRef } from 'ngx-bootstrap/modal'; +import { DimlessBinaryPipe } from 'app/shared/pipes/dimless-binary.pipe'; import { CdFormBuilder } from '../../forms/cd-form-builder'; - -interface CdFormFieldConfig { - type: 'inputText' | 'select'; - name: string; - label?: string; - value?: any; - required?: boolean; - // --- select --- - placeholder?: string; - options?: Array<{ - text: string; - value: any; - }>; -} +import { CdFormGroup } from '../../forms/cd-form-group'; +import { CdFormModalFieldConfig } from '../../models/cd-form-modal-field-config'; +import { FormatterService } from '../../services/formatter.service'; @Component({ selector: 'cd-form-modal', @@ -29,32 +20,90 @@ export class FormModalComponent implements OnInit { // Input titleText: string; message: string; - fields: CdFormFieldConfig[]; + fields: CdFormModalFieldConfig[]; submitButtonText: string; onSubmit: Function; // Internal - formGroup: FormGroup; + formGroup: CdFormGroup; + + constructor( + public bsModalRef: BsModalRef, + private formBuilder: CdFormBuilder, + private formatter: FormatterService, + private dimlessBinaryPipe: DimlessBinaryPipe, + private i18n: I18n + ) {} - constructor(public bsModalRef: BsModalRef, private formBuilder: CdFormBuilder) {} + ngOnInit() { + this.createForm(); + } createForm() { const controlsConfig = {}; this.fields.forEach((field) => { - const validators = []; - if (_.isBoolean(field.required) && field.required) { - validators.push(Validators.required); - } - controlsConfig[field.name] = new FormControl(_.defaultTo(field.value, null), { validators }); + controlsConfig[field.name] = this.createFormControl(field); }); this.formGroup = this.formBuilder.group(controlsConfig); } - ngOnInit() { - this.createForm(); + private createFormControl(field: CdFormModalFieldConfig): FormControl { + let validators: ValidatorFn[] = []; + if (_.isBoolean(field.required) && field.required) { + validators.push(Validators.required); + } + if (field.validators) { + validators = validators.concat(field.validators); + } + return new FormControl( + _.defaultTo( + field.type === 'binary' ? this.dimlessBinaryPipe.transform(field.value) : field.value, + null + ), + { validators } + ); + } + + getError(field: CdFormModalFieldConfig): string { + const formErrors = this.formGroup.get(field.name).errors; + const errors = Object.keys(formErrors).map((key) => { + return this.getErrorMessage(key, formErrors[key], field.errors); + }); + return errors.join('
'); + } + + private getErrorMessage( + error: string, + errorContext: any, + fieldErrors: { [error: string]: string } + ): string { + if (fieldErrors) { + const customError = fieldErrors[error]; + if (customError) { + return customError; + } + } + if (['binaryMin', 'binaryMax'].includes(error)) { + // binaryMin and binaryMax return a function that take I18n to + // provide a translated error message. + return errorContext(this.i18n); + } + if (error === 'required') { + return this.i18n('This field is required.'); + } + return this.i18n('An error occurred.'); } onSubmitForm(values) { + const binaries = this.fields + .filter((field) => field.type === 'binary') + .map((field) => field.name); + binaries.forEach((key) => { + const value = values[key]; + if (value) { + values[key] = this.formatter.toBytes(value); + } + }); this.bsModalRef.hide(); if (_.isFunction(this.onSubmit)) { this.onSubmit(values); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-form-modal-field-config.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-form-modal-field-config.ts new file mode 100644 index 00000000000..7b2fe3f9412 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-form-modal-field-config.ts @@ -0,0 +1,19 @@ +import { ValidatorFn } from '@angular/forms'; + +export class CdFormModalFieldConfig { + name: string; + // 'binary' will use cdDimlessBinary directive on input element + // 'select' will use select element + type: 'number' | 'text' | 'binary' | 'select'; + label?: string; + required?: boolean; + value?: any; + errors?: { [errorName: string]: string }; + validators: ValidatorFn[]; + // only for type select + placeholder?: string; + options?: Array<{ + text: string; + value: any; + }>; +} -- 2.39.5