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

Co-authored-by: testa113 <testa113>

app/kubernetes/views/applications/create/createApplicationController.js

@@ -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,

app/react-tools/react2angular.tsx

@@ -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(
+  const bindings = Object.fromEntries(propNames.map((key) => [key, '<']));
-    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, '<'];
-    })
-  );
 
   return {
     bindings,

app/react-tools/withFormValidation.ts

@@ -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;
+        this.errors = await this.validate(schema, value, isPrimitive);
-        const errors = await (isPrimitive
-          ? validateForm<{ value: TFormModel }>(
-              () => object({ value: schema }),
-              { value }
-            ).then((r) => r?.value)
-          : validateForm<TFormModel>(() => schema, value));
 
-        if (errors && Object.keys(errors).length > 0) {
+        if (this.errors && Object.keys(this.errors).length > 0) {
-          this.errors = errors as FormikErrors<TFormModel> | undefined;
           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 };