fix: consider null as value in step parameters (#1282)

packages/web/src/components/ChooseAppAndEventSubstep/index.tsx

@@ -80,7 +80,7 @@ function ChooseAppAndEventSubstep(
   const app = apps?.find((currentApp: IApp) => currentApp.key === step.appKey);
 
   const appOptions = React.useMemo(
-    () => apps?.map((app) => optionGenerator(app)),
+    () => apps?.map((app) => optionGenerator(app)) || [],
     [apps]
   );
   const actionsOrTriggers: Array<ITrigger | IAction> =
@@ -167,7 +167,7 @@ function ChooseAppAndEventSubstep(
           <Autocomplete
             fullWidth
             disablePortal
-            disableClearable
+            disableClearable={getOption(appOptions, step.appKey) !== undefined}
             disabled={editorContext.readOnly}
             options={appOptions}
             renderInput={(params) => (
@@ -176,7 +176,7 @@ function ChooseAppAndEventSubstep(
                 label={formatMessage('flowEditor.chooseApp')}
               />
             )}
-            value={getOption(appOptions, step.appKey)}
+            value={getOption(appOptions, step.appKey) || null}
             onChange={onAppChange}
             data-test="choose-app-autocomplete"
           />
@@ -191,7 +191,9 @@ function ChooseAppAndEventSubstep(
               <Autocomplete
                 fullWidth
                 disablePortal
-                disableClearable
+                disableClearable={
+                  getOption(actionOrTriggerOptions, step.key) !== undefined
+                }
                 disabled={editorContext.readOnly}
                 options={actionOrTriggerOptions}
                 renderInput={(params) => (
@@ -235,7 +237,7 @@ function ChooseAppAndEventSubstep(
                     )}
                   </li>
                 )}
-                value={getOption(actionOrTriggerOptions, step.key)}
+                value={getOption(actionOrTriggerOptions, step.key) || null}
                 onChange={onEventChange}
                 data-test="choose-event-autocomplete"
               />

packages/web/src/components/ControlledCustomAutocomplete/index.tsx

@@ -255,7 +255,7 @@ function ControlledCustomAutocomplete(
             />
 
             <ActionButtonsWrapper direction="row" mr={1.5}>
-              {isSingleChoice && serialize(editor.children) && (
+              {isSingleChoice && serialize(editor.children) !== '' && (
                 <IconButton
                   disabled={disabled}
                   edge="end"

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

@@ -55,10 +55,9 @@ export default function InputCreator(
   } = schema;
 
   const { data, loading } = useDynamicData(stepId, schema);
-  const {
-    data: additionalFields,
-    loading: additionalFieldsLoading
-  } = useDynamicFields(stepId, schema);
+
+  const { data: additionalFields, loading: additionalFieldsLoading } =
+    useDynamicFields(stepId, schema);
   const computedName = namePrefix ? `${namePrefix}.${name}` : name;
 
   if (type === 'dynamic') {
@@ -121,9 +120,11 @@ export default function InputCreator(
           />
         )}
 
-        {(additionalFieldsLoading && !additionalFields?.length) && <div>
-          <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
-        </div>}
+        {additionalFieldsLoading && !additionalFields?.length && (
+          <div>
+            <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
+          </div>
+        )}
 
         {additionalFields?.map((field) => (
           <InputCreator
@@ -154,9 +155,13 @@ export default function InputCreator(
             shouldUnregister={shouldUnregister}
           />
 
-          {(additionalFieldsLoading && !additionalFields?.length) && <div>
-            <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
-          </div>}
+          {additionalFieldsLoading && !additionalFields?.length && (
+            <div>
+              <CircularProgress
+                sx={{ display: 'block', margin: '20px auto' }}
+              />
+            </div>
+          )}
 
           {additionalFields?.map((field) => (
             <InputCreator
@@ -191,9 +196,11 @@ export default function InputCreator(
           shouldUnregister={shouldUnregister}
         />
 
-        {(additionalFieldsLoading && !additionalFields?.length) && <div>
-          <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
-        </div>}
+        {additionalFieldsLoading && !additionalFields?.length && (
+          <div>
+            <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
+          </div>
+        )}
 
         {additionalFields?.map((field) => (
           <InputCreator

packages/web/src/components/Slate/utils.ts

@@ -92,19 +92,13 @@ const variableRegExp = /({{.*?}})/;
 const stepIdRegExp = /^step.([\da-zA-Z-]*)/;
 
 export const deserialize = (
-  value: string,
+  value: boolean | string | number,
   options: readonly IFieldDropdownOption[],
   stepsWithVariables: StepsWithVariables
 ): Descendant[] => {
-  if (!value)
-    return [
-      {
-        type: 'paragraph',
-        children: [{ text: '' }],
-      },
-    ];
-
-  const selectedNativeOption = options.find((option) => value === option.value);
+  const selectedNativeOption = options?.find(
+    (option) => value === option.value
+  );
 
   if (selectedNativeOption) {
     return [
@@ -116,43 +110,54 @@ export const deserialize = (
     ];
   }
 
-  return value.split('\n').map((line) => {
-    const nodes = line.split(variableRegExp);
-
-    if (nodes.length > 1) {
-      return {
+  if (value === null || value === undefined || value === '')
+    return [
+      {
         type: 'paragraph',
-        children: nodes.map((node) => {
-          if (node.match(variableRegExp)) {
-            const variableDetails = getVariableDetails(
-              node,
-              stepsWithVariables
-            );
+        children: [{ text: '' }],
+      },
+    ];
+
+  return value
+    .toString()
+    .split('\n')
+    .map((line) => {
+      const nodes = line.split(variableRegExp);
+
+      if (nodes.length > 1) {
+        return {
+          type: 'paragraph',
+          children: nodes.map((node) => {
+            if (node.match(variableRegExp)) {
+              const variableDetails = getVariableDetails(
+                node,
+                stepsWithVariables
+              );
+
+              return {
+                type: 'variable',
+                name: variableDetails.label,
+                sampleValue: variableDetails.sampleValue,
+                value: node,
+                children: [{ text: '' }],
+              };
+            }
 
             return {
-              type: 'variable',
-              name: variableDetails.label,
-              sampleValue: variableDetails.sampleValue,
-              value: node,
-              children: [{ text: '' }],
+              text: node,
             };
-          }
+          }),
+        };
+      }
 
-          return {
-            text: node,
-          };
-        }),
+      return {
+        type: 'paragraph',
+        children: [{ text: line }],
       };
-    }
-
-    return {
-      type: 'paragraph',
-      children: [{ text: line }],
-    };
-  });
+    });
 };
 
-export const serialize = (value: Descendant[]): string => {
+export const serialize = (value: Descendant[]): string | number | null => {
   const serializedNodes = value.map((node) => serializeNode(node));
 
   const hasSingleNode = value.length === 1;
@@ -169,8 +174,12 @@ export const serialize = (value: Descendant[]): string => {
   return serializedValue;
 };
 
-const serializeNode = (node: CustomElement | Descendant): string => {
-  if (isCustomText(node)) return node.value;
+const serializeNode = (
+  node: CustomElement | Descendant
+): string | number | null => {
+  if (isCustomText(node)) {
+    return node.value;
+  }
 
   if (Text.isText(node)) {
     return node.text;

packages/web/src/hooks/useDynamicFields.ts

@@ -27,7 +27,7 @@ function computeArguments(
       const sanitizedFieldPath = value.replace(/{|}/g, '');
       const computedValue = getValues(sanitizedFieldPath);
 
-      if (computedValue === undefined)
+      if (computedValue === undefined || computedValue === '')
         throw new Error(`The ${sanitizedFieldPath} field is required.`);
 
       set(result, name, computedValue);