Merge pull request #2272 from automatisch/AUT-1409

feat: accept falsy default values

packages/e2e-tests/tests/app-integrations/webhook.spec.js

@@ -12,7 +12,7 @@ test.describe('Webhook flow', () => {
   test('Create a new flow with a sync Webhook step then a Webhook step', async ({
     flowEditorPage,
     page,
-    request
+    request,
   }) => {
     await flowEditorPage.flowName.click();
     await flowEditorPage.flowNameInput.fill('syncWebhook');
@@ -23,10 +23,11 @@ test.describe('Webhook flow', () => {
     await expect(flowEditorPage.continueButton).toHaveCount(1);
     await expect(flowEditorPage.continueButton).not.toBeEnabled();
 
-    await page
-      .getByTestId('parameters.statusCode-power-input')
-      .locator('[contenteditable]')
-      .fill('200');
+    await expect(
+      page
+        .getByTestId('parameters.statusCode-power-input')
+        .locator('[contenteditable]')
+    ).toHaveText('200');
     await flowEditorPage.clickAway();
     await expect(flowEditorPage.continueButton).toHaveCount(1);
     await expect(flowEditorPage.continueButton).not.toBeEnabled();
@@ -36,7 +37,9 @@ test.describe('Webhook flow', () => {
       .locator('[contenteditable]')
       .fill('response from webhook');
     await flowEditorPage.clickAway();
-    await expect(page.getByTestId("parameters.headers.0.key-power-input")).toBeVisible();
+    await expect(
+      page.getByTestId('parameters.headers.0.key-power-input')
+    ).toBeVisible();
     await expect(flowEditorPage.continueButton).toBeEnabled();
     await flowEditorPage.continueButton.click();
 
@@ -52,7 +55,7 @@ test.describe('Webhook flow', () => {
   test('Create a new flow with an async Webhook step then a Webhook step', async ({
     flowEditorPage,
     page,
-    request
+    request,
   }) => {
     await flowEditorPage.flowName.click();
     await flowEditorPage.flowNameInput.fill('asyncWebhook');
@@ -75,7 +78,9 @@ test.describe('Webhook flow', () => {
       .locator('[contenteditable]')
       .fill('response from webhook');
     await flowEditorPage.clickAway();
-    await expect(page.getByTestId("parameters.headers.0.key-power-input")).toBeVisible();
+    await expect(
+      page.getByTestId('parameters.headers.0.key-power-input')
+    ).toBeVisible();
     await expect(flowEditorPage.continueButton).toBeEnabled();
     await flowEditorPage.continueButton.click();
 

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

@@ -14,7 +14,7 @@ function CodeEditor(props) {
     required,
     name,
     label,
-    defaultValue,
+    defaultValue = '',
     shouldUnregister = false,
     disabled,
     'data-test': dataTest,
@@ -39,7 +39,7 @@ function CodeEditor(props) {
     <Controller
       rules={{ required }}
       name={name}
-      defaultValue={defaultValue || ''}
+      defaultValue={defaultValue}
       control={control}
       shouldUnregister={shouldUnregister}
       render={({ field }) => (

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

@@ -53,7 +53,7 @@ function ControlledAutocomplete(props) {
     <Controller
       rules={{ required }}
       name={name}
-      defaultValue={defaultValue || ''}
+      defaultValue={defaultValue}
       control={control}
       shouldUnregister={shouldUnregister}
       render={({

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

@@ -23,12 +23,29 @@ function DynamicField(props) {
     return fields.reduce((previousValue, field) => {
       return {
         ...previousValue,
-        [field.key]: '',
+        [field.key]: field.value ?? '',
         __id: uuidv4(),
       };
     }, {});
   }, [fields]);
 
+  const generateDefaultValue = React.useCallback(() => {
+    if (defaultValue?.length > 0) {
+      return defaultValue.map((item) => {
+        return fields.reduce((previousValue, field) => {
+          return {
+            ...previousValue,
+            // if field value is different than null or undefined - use it,
+            // otherwise use the parent default value
+            [field.key]: field.value ?? item[field.key] ?? '',
+          };
+        }, {});
+      });
+    } else {
+      return [createEmptyItem()];
+    }
+  }, [defaultValue, fields, createEmptyItem]);
+
   const addItem = React.useCallback(() => {
     const values = getValues(name);
     if (!values) {
@@ -52,13 +69,11 @@ function DynamicField(props) {
   React.useEffect(
     function addInitialGroupWhenEmpty() {
       const fieldValues = getValues(name);
-      if (!fieldValues && defaultValue) {
-        setValue(name, defaultValue);
-      } else if (!fieldValues) {
-        setValue(name, [createEmptyItem()]);
+      if (!fieldValues) {
+        setValue(name, generateDefaultValue());
       }
     },
-    [createEmptyItem, defaultValue],
+    [generateDefaultValue],
   );
 
   return (

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

@@ -162,6 +162,7 @@ function InputCreator(props) {
             required={required}
             disabled={disabled}
             shouldUnregister={shouldUnregister}
+            defaultValue={value}
           />
 
           {isDynamicFieldsLoading && !additionalFields?.length && (

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

@@ -23,7 +23,7 @@ function TextField(props) {
   const {
     required,
     name,
-    defaultValue,
+    defaultValue = '',
     shouldUnregister = false,
     clickToCopy = false,
     readOnly = false,
@@ -38,7 +38,7 @@ function TextField(props) {
     <Controller
       rules={{ required }}
       name={name}
-      defaultValue={defaultValue || ''}
+      defaultValue={defaultValue}
       control={control}
       shouldUnregister={shouldUnregister}
       render={({