Merge branch 'feature/automation-redesign' of github.com:Budibase/budibase into feature/automation-query

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

@@ -18,12 +18,12 @@
   // get the outputs so we can define the fields
 
   // check to see if there is existing test data in the store
-  let testData = $automationStore.selectedAutomation.automation.testData
-
+  $: 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

@@ -31,6 +31,7 @@
   export let webhookModal
   export let testData
   export let schemaProperties
+  export let isTestModal = false
   let drawer
   let tempFilters = lookForFilters(schemaProperties) || []
   let fillWidth = true
@@ -49,8 +50,9 @@
     : { schema: {} }
   $: schemaFields = table ? Object.values(table.schema) : []
 
-  const onChange = debounce(async function (e, key) {
-    if (testData) {
+  const onChange = debounce(
+    async function (e, key) {
+      if (isTestModal) {
         testData[key] = e.detail
       } else {
         block.inputs[key] = e.detail
@@ -59,7 +61,9 @@
           automation: $automationStore.selectedAutomation?.automation,
         })
       }
-  }, 800)
+    },
+    isTestModal ? 0 : 800
+  )
 
   function getAvailableBindings(block, automation) {
     if (!block || !automation) {
@@ -160,7 +164,7 @@
           value={inputData[key]}
         />
       {:else if value.customType === "email"}
-        {#if testData}
+        {#if isTestModal}
           <ModalBindableInput
             title={value.title}
             value={inputData[key]}
@@ -168,6 +172,7 @@
             type="email"
             on:change={e => onChange(e, key)}
             {bindings}
+            fillWidth
           />
         {:else}
           <DrawerBindableInput
@@ -221,7 +226,7 @@
           />
         </CodeEditorModal>
       {:else if value.type === "string" || value.type === "number"}
-        {#if testData}
+        {#if isTestModal}
           <ModalBindableInput
             title={value.title}
             value={inputData[key]}
@@ -233,7 +238,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>