fix(r2a): don't set errors to undefined [EE-6665] (#11060)

Co-authored-by: testa113 <testa113>
pull/11065/head
Ali 2024-02-05 14:24:15 +13:00 committed by GitHub
parent 5ee6efb145
commit d7cf2284dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 24 additions and 20 deletions

View File

@ -290,7 +290,7 @@ class KubernetesCreateApplicationController {
onAutoScaleChange(values) {
return this.$async(async () => {
// when enabling the auto scaler, set the default values
if (!this.oldFormValues.AutoScaler.isUsed && values.isUsed) {
if (!this.formValues.AutoScaler.isUsed && values.isUsed) {
this.formValues.AutoScaler = {
isUsed: values.isUsed,
minReplicas: 1,

View File

@ -38,16 +38,7 @@ export function react2angular<T, U extends PropNames<T>[]>(
Component: React.ComponentType<T & JSX.IntrinsicAttributes>,
propNames: U & ([PropNames<T>] extends [U[number]] ? unknown : PropNames<T>)
): IComponentOptions & { name: string } {
const bindings = Object.fromEntries(
propNames.map((key) => {
// use two way binding for errors, to avoid shifting the layout from errors going between undefined <-> some value when using inputs.
// See https://portainer.atlassian.net/browse/EE-6570 for more context
if (key === 'errors') {
return [key, '='];
}
return [key, '<'];
})
);
const bindings = Object.fromEntries(propNames.map((key) => [key, '<']));
return {
bindings,

View File

@ -17,6 +17,8 @@ interface FormFieldProps<TValue> {
type WithFormFieldProps<TProps, TValue> = TProps & FormFieldProps<TValue>;
type ValidationResult<T> = FormikErrors<T> | undefined;
/**
* This utility function is used for wrapping React components with form validation.
* When used inside an Angular form, it sets the form to invalid if the component values are invalid.
@ -109,6 +111,7 @@ function createFormValidatorController<TFormModel, TData = never>(
this.handleChange = this.handleChange.bind(this);
this.runValidation = this.runValidation.bind(this);
this.validate = this.validate.bind(this);
}
async handleChange(newValues: TFormModel) {
@ -123,21 +126,31 @@ function createFormValidatorController<TFormModel, TData = never>(
this.form?.$setValidity('form', true, this.form);
const schema = schemaBuilder(this.validationData);
this.errors = undefined;
const errors = await (isPrimitive
? validateForm<{ value: TFormModel }>(
() => object({ value: schema }),
{ value }
).then((r) => r?.value)
: validateForm<TFormModel>(() => schema, value));
this.errors = await this.validate(schema, value, isPrimitive);
if (errors && Object.keys(errors).length > 0) {
this.errors = errors as FormikErrors<TFormModel> | undefined;
if (this.errors && Object.keys(this.errors).length > 0) {
this.form?.$setValidity('form', false, this.form);
}
});
}
async validate(
schema: SchemaOf<TFormModel>,
value: TFormModel,
isPrimitive: boolean
): Promise<ValidationResult<TFormModel>> {
return this.$async(async () => {
if (isPrimitive) {
const result = await validateForm<{ value: TFormModel }>(
() => object({ value: schema }),
{ value }
);
return result?.value as ValidationResult<TFormModel>;
}
return validateForm<TFormModel>(() => schema, value);
});
}
async $onChanges(changes: {
values?: { currentValue: TFormModel };
validationData?: { currentValue: TData };