feat: include dynamic fields in the form validation

packages/web/src/components/AccountDropdownMenu/index.jsx

@@ -68,7 +68,10 @@ function AccountDropdownMenu(props) {
 AccountDropdownMenu.propTypes = {
   open: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  anchorEl: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  anchorEl: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   id: PropTypes.string.isRequired,
 };
 

packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.jsx

@@ -21,7 +21,9 @@ const CustomOptions = (props) => {
     label,
     initialTabIndex,
   } = props;
+
   const [activeTabIndex, setActiveTabIndex] = React.useState(undefined);
+
   React.useEffect(
     function applyInitialActiveTabIndex() {
       setActiveTabIndex((currentActiveTabIndex) => {
@@ -33,6 +35,7 @@ const CustomOptions = (props) => {
     },
     [initialTabIndex],
   );
+
   return (
     <Popper
       open={open}
@@ -76,7 +79,10 @@ const CustomOptions = (props) => {
 
 CustomOptions.propTypes = {
   open: PropTypes.bool.isRequired,
-  anchorEl: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+  anchorEl: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   data: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,

packages/web/src/components/FlowStep/index.jsx

@@ -36,7 +36,8 @@ import useActions from 'hooks/useActions';
 import useTriggerSubsteps from 'hooks/useTriggerSubsteps';
 import useActionSubsteps from 'hooks/useActionSubsteps';
 import useStepWithTestExecutions from 'hooks/useStepWithTestExecutions';
-import { generateValidationSchema } from './validation';
+import { validationSchemaResolver } from './validation';
+import { isEqual } from 'lodash';
 
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
@@ -51,6 +52,10 @@ function FlowStep(props) {
   const isAction = step.type === 'action';
   const formatMessage = useFormatMessage();
   const [currentSubstep, setCurrentSubstep] = React.useState(0);
+  const [formResolverContext, setFormResolverContext] = React.useState({
+    substeps: [],
+    additionalFields: {},
+  });
   const useAppsOptions = {};
 
   if (isTrigger) {
@@ -105,6 +110,12 @@ function FlowStep(props) {
       ? triggerSubstepsData
       : actionSubstepsData || [];
 
+  React.useEffect(() => {
+    if (!isEqual(substeps, formResolverContext.substeps)) {
+      setFormResolverContext({ substeps, additionalFields: {} });
+    }
+  }, [substeps]);
+
   const handleChange = React.useCallback(({ step }) => {
     onChange(step);
   }, []);
@@ -117,11 +128,6 @@ function FlowStep(props) {
     handleChange({ step: val });
   };
 
-  const stepValidationSchema = React.useMemo(
-    () => generateValidationSchema(substeps),
-    [substeps],
-  );
-
   if (!apps?.data) {
     return (
       <CircularProgress
@@ -150,6 +156,15 @@ function FlowStep(props) {
       value !== substepIndex ? substepIndex : null,
     );
 
+  const addAdditionalFieldsValidation = (additionalFields) => {
+    if (additionalFields) {
+      setFormResolverContext((prev) => ({
+        ...prev,
+        additionalFields: { ...prev.additionalFields, ...additionalFields },
+      }));
+    }
+  };
+
   const validationStatusIcon =
     step.status === 'completed' ? validIcon : errorIcon;
 
@@ -203,7 +218,8 @@ function FlowStep(props) {
               <Form
                 defaultValues={step}
                 onSubmit={handleSubmit}
-                resolver={stepValidationSchema}
+                resolver={validationSchemaResolver}
+                context={formResolverContext}
               >
                 <ChooseAppAndEventSubstep
                   expanded={currentSubstep === 0}
@@ -267,6 +283,9 @@ function FlowStep(props) {
                             onSubmit={expandNextStep}
                             onChange={handleChange}
                             step={step}
+                            addAdditionalFieldsValidation={
+                              addAdditionalFieldsValidation
+                            }
                           />
                         )}
                     </React.Fragment>

packages/web/src/components/FlowStep/validation.js

@@ -41,74 +41,80 @@ function addDependsOnValidation({ schema, dependsOn, key, args }) {
   return schema;
 }
 
-export function generateValidationSchema(substeps) {
+export function validationSchemaResolver(data, context, options) {
-  const fieldValidations = substeps?.reduce(
+  const { substeps = [], additionalFields = {} } = context;
-    (allValidations, { arguments: args }) => {
-      if (!args || !Array.isArray(args)) return allValidations;
 
-      const substepArgumentValidations = {};
+  const fieldValidations = [
+    ...substeps,
+    {
+      arguments: Object.values(additionalFields)
+        .filter((field) => !!field)
+        .flat(),
+    },
+  ].reduce((allValidations, { arguments: args }) => {
+    if (!args || !Array.isArray(args)) return allValidations;
 
-      for (const arg of args) {
+    const substepArgumentValidations = {};
-        const { key, required } = arg;
 
-        // base validation for the field if not exists
+    for (const arg of args) {
-        if (!substepArgumentValidations[key]) {
+      const { key, required } = arg;
-          substepArgumentValidations[key] = yup.mixed();
-        }
 
-        if (arg.type === 'dynamic') {
+      // base validation for the field if not exists
-          const fieldsSchema = {};
+      if (!substepArgumentValidations[key]) {
+        substepArgumentValidations[key] = yup.mixed();
+      }
 
-          for (const field of arg.fields) {
+      if (arg.type === 'dynamic') {
-            fieldsSchema[field.key] = yup.mixed();
+        const fieldsSchema = {};
 
-            fieldsSchema[field.key] = addRequiredValidation({
+        for (const field of arg.fields) {
-              required: field.required,
+          fieldsSchema[field.key] = yup.mixed();
-              schema: fieldsSchema[field.key],
-              key: field.key,
-            });
 
-            fieldsSchema[field.key] = addDependsOnValidation({
+          fieldsSchema[field.key] = addRequiredValidation({
-              schema: fieldsSchema[field.key],
+            required: field.required,
-              dependsOn: field.dependsOn,
+            schema: fieldsSchema[field.key],
-              key: field.key,
+            key: field.key,
-              args,
-            });
-          }
-
-          substepArgumentValidations[key] = yup
-            .array()
-            .of(yup.object(fieldsSchema));
-        } else if (
-          typeof substepArgumentValidations[key] === 'object' &&
-          (arg.type === 'string' || arg.type === 'dropdown')
-        ) {
-          substepArgumentValidations[key] = addRequiredValidation({
-            required,
-            schema: substepArgumentValidations[key],
-            key,
           });
 
-          substepArgumentValidations[key] = addDependsOnValidation({
+          fieldsSchema[field.key] = addDependsOnValidation({
-            schema: substepArgumentValidations[key],
+            schema: fieldsSchema[field.key],
-            dependsOn: arg.dependsOn,
+            dependsOn: field.dependsOn,
-            key,
+            key: field.key,
             args,
           });
         }
-      }
 
-      return {
+        substepArgumentValidations[key] = yup
-        ...allValidations,
+          .array()
-        ...substepArgumentValidations,
+          .of(yup.object(fieldsSchema));
-      };
+      } else if (
-    },
+        typeof substepArgumentValidations[key] === 'object' &&
-    {},
+        (arg.type === 'string' || arg.type === 'dropdown')
-  );
+      ) {
+        substepArgumentValidations[key] = addRequiredValidation({
+          required,
+          schema: substepArgumentValidations[key],
+          key,
+        });
+
+        substepArgumentValidations[key] = addDependsOnValidation({
+          schema: substepArgumentValidations[key],
+          dependsOn: arg.dependsOn,
+          key,
+          args,
+        });
+      }
+    }
+
+    return {
+      ...allValidations,
+      ...substepArgumentValidations,
+    };
+  }, {});
 
   const validationSchema = yup.object({
     parameters: yup.object(fieldValidations),
   });
 
-  return yupResolver(validationSchema);
+  return yupResolver(validationSchema)(data, context, options);
 }

packages/web/src/components/FlowStepContextMenu/index.jsx

@@ -43,7 +43,10 @@ function FlowStepContextMenu(props) {
 FlowStepContextMenu.propTypes = {
   stepId: PropTypes.string.isRequired,
   onClose: PropTypes.func.isRequired,
-  anchorEl: PropTypes.element.isRequired,
+  anchorEl: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]).isRequired,
   deletable: PropTypes.bool.isRequired,
 };
 

packages/web/src/components/FlowSubstep/index.jsx

@@ -19,7 +19,9 @@ function FlowSubstep(props) {
     onCollapse,
     onSubmit,
     step,
+    addAdditionalFieldsValidation,
   } = props;
+
   const { name, arguments: args } = substep;
   const editorContext = React.useContext(EditorContext);
   const formContext = useFormContext();
@@ -54,6 +56,7 @@ function FlowSubstep(props) {
                   stepId={step.id}
                   disabled={editorContext.readOnly}
                   showOptionValue={true}
+                  addAdditionalFieldsValidation={addAdditionalFieldsValidation}
                 />
               ))}
             </Stack>

packages/web/src/components/Form/index.jsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { FormProvider, useForm, useWatch } from 'react-hook-form';
+
 const noop = () => null;
+
 export default function Form(props) {
   const {
     children,
@@ -9,24 +11,31 @@ export default function Form(props) {
     resolver,
     render,
     mode = 'all',
+    context,
     ...formProps
   } = props;
+
   const methods = useForm({
     defaultValues,
     reValidateMode: 'onBlur',
     resolver,
     mode,
+    context,
   });
+
   const form = useWatch({ control: methods.control });
+
   /**
    * For fields having `dependsOn` fields, we need to re-validate the form.
    */
   React.useEffect(() => {
     methods.trigger();
   }, [methods.trigger, form]);
+
   React.useEffect(() => {
     methods.reset(defaultValues);
   }, [defaultValues]);
+
   return (
     <FormProvider {...methods}>
       <form onSubmit={methods.handleSubmit(onSubmit)} {...formProps}>

packages/web/src/components/InputCreator/index.jsx

@@ -23,7 +23,9 @@ export default function InputCreator(props) {
     disabled,
     showOptionValue,
     shouldUnregister,
+    addAdditionalFieldsValidation,
   } = props;
+
   const {
     key: name,
     label,
@@ -33,6 +35,7 @@ export default function InputCreator(props) {
     description,
     type,
   } = schema;
+
   const { data, loading } = useDynamicData(stepId, schema);
   const { data: additionalFieldsData, isLoading: isDynamicFieldsLoading } =
     useDynamicFields(stepId, schema);
@@ -40,6 +43,10 @@ export default function InputCreator(props) {
 
   const computedName = namePrefix ? `${namePrefix}.${name}` : name;
 
+  React.useEffect(() => {
+    addAdditionalFieldsValidation?.({ [name]: additionalFields });
+  }, [additionalFields]);
+
   if (type === 'dynamic') {
     return (
       <DynamicField

packages/web/src/hooks/useDynamicFields.js

@@ -7,6 +7,7 @@ import { useQuery } from '@tanstack/react-query';
 import api from 'helpers/api';
 
 const variableRegExp = /({.*?})/;
+
 // TODO: extract this function to a separate file
 function computeArguments(args, getValues) {
   const initialValue = {};