fix debounce / store test data bug

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

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
           >

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

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}

packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte

@@ -38,6 +38,7 @@
         label={field.name}
         type="string"
         {bindings}
+        fillWidth={true}
       />
     {/each}
   </div>

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -69,6 +69,7 @@
               label={field}
               type="string"
               {bindings}
+              fillWidth={true}
             />
           {/if}
         {/if}

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

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>