From ab2fd51dc2aea84e74914992e116fa3cbc016ed0 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Thu, 16 Sep 2021 14:48:55 +0100
Subject: [PATCH] fix debounce / store test data bug

---
 packages/bbui/src/Drawer/Drawer.svelte        |  2 +-
 .../FlowChart/FlowChart.svelte                |  5 +--
 .../FlowChart/TestDataModal.svelte            |  3 +-
 .../SetupPanel/AutomationBlockSetup.svelte    | 34 +++++++++++--------
 .../SetupPanel/QueryParamSelector.svelte      |  1 +
 .../automation/SetupPanel/RowSelector.svelte  |  1 +
 .../bindings/DrawerBindableInput.svelte       |  2 +-
 .../app/[application]/automate/_layout.svelte |  6 ++--
 8 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 67252f72b6..277b840db6 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -8,7 +8,7 @@
   export let title
   export let fillWidth
   let visible = false
-
+  $: console.log(fillWidth)
   export function show() {
     if (visible) {
       return
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index c969ef823d..53a5de3b51 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -19,7 +19,6 @@
   export let onSelect
   let testDataModal
   let blocks
-
   $: instanceId = $database._id
 
   $: {
@@ -69,7 +68,9 @@
             <Icon name="DeleteOutline" />
           </span>
           <ActionButton
-            on:click={() => testDataModal.show()}
+            on:click={() => {
+              testDataModal.show()
+            }}
             icon="MultipleCheck"
             size="S">Run test</ActionButton
           >
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 14ed1ef378..cce9c14a23 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -19,11 +19,11 @@
 
   // check to see if there is existing test data in the store
   let testData = $automationStore.selectedAutomation.automation.testData
-
   // Check the schema to see if required fields have been entered
   $: isError = !trigger.schema.outputs.required.every(
     required => testData[required]
   )
+
   function parseTestJSON(e) {
     try {
       const obj = JSON.parse(e.detail)
@@ -52,6 +52,7 @@
         <AutomationBlockSetup
           bind:testData
           {schemaProperties}
+          isTestModal
           block={trigger}
         />
       </div></Tab
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 3c77157acb..d322a4c22a 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -20,6 +20,8 @@
   export let webhookModal
   export let testData
   export let schemaProperties
+  export let isTestModal = false
+
   $: stepId = block.stepId
   $: bindings = getAvailableBindings(
     block || $automationStore.selectedBlock,
@@ -29,17 +31,20 @@
 
   $: inputData = testData ? testData : block.inputs
 
-  const onChange = debounce(async function (e, key) {
-    if (testData) {
-      testData[key] = e.detail
-    } else {
-      block.inputs[key] = e.detail
-      await automationStore.actions.save({
-        instanceId,
-        automation: $automationStore.selectedAutomation?.automation,
-      })
-    }
-  }, 800)
+  const onChange = debounce(
+    async function (e, key) {
+      if (isTestModal) {
+        testData[key] = e.detail
+      } else {
+        block.inputs[key] = e.detail
+        await automationStore.actions.save({
+          instanceId,
+          automation: $automationStore.selectedAutomation?.automation,
+        })
+      }
+    },
+    isTestModal ? 0 : 800
+  )
 
   function getAvailableBindings(block, automation) {
     if (!block || !automation) {
@@ -91,7 +96,7 @@
           value={inputData[key]}
         />
       {:else if value.customType === "email"}
-        {#if testData}
+        {#if isTestModal}
           <ModalBindableInput
             title={value.title}
             value={inputData[key]}
@@ -99,6 +104,7 @@
             type="email"
             on:change={e => onChange(e, key)}
             {bindings}
+            fillWidth
           />
         {:else}
           <DrawerBindableInput
@@ -152,7 +158,7 @@
           />
         </CodeEditorModal>
       {:else if value.type === "string" || value.type === "number"}
-        {#if testData}
+        {#if isTestModal}
           <ModalBindableInput
             title={value.title}
             value={inputData[key]}
@@ -164,7 +170,7 @@
         {:else}
           <div class="test">
             <DrawerBindableInput
-              fillWidth
+              fillWidth={true}
               title={value.title}
               panel={AutomationBindingPanel}
               type={value.customType}
diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
index 3cdce4eb1d..91dc369d80 100644
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -38,6 +38,7 @@
         label={field.name}
         type="string"
         {bindings}
+        fillWidth={true}
       />
     {/each}
   </div>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 57778cfe20..3f390e0a4f 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -69,6 +69,7 @@
               label={field}
               type="string"
               {bindings}
+              fillWidth={true}
             />
           {/if}
         {/if}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 502b56c4d4..e5bfab583c 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -14,7 +14,7 @@
   export let placeholder
   export let label
   export let disabled = false
-  export let fillWidth = false
+  export let fillWidth
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
index 22a49e04d2..841acb22c0 100644
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@@ -29,9 +29,9 @@
             >
               <use xlink:href="#spectrum-icon-18-WorkflowAdd" />
             </svg>
-            <Heading size="S">You have no automations</Heading>
-            <Body size="S">Let's fix that. Call the bots!</Body>
-            <Button on:click={() => modal.show()} size="S" cta
+            <Heading size="M">You have no automations</Heading>
+            <Body size="M">Let's fix that. Call the bots!</Body>
+            <Button on:click={() => modal.show()} size="M" cta
               >Create automation</Button
             >
           </Layout>