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

packages/bbui/src/Drawer/Drawer.svelte

@@ -6,7 +6,7 @@
   import Heading from "../Typography/Heading.svelte"
 
   export let title
-
+  export let fillWidth
   let visible = false
 
   export function show() {
@@ -34,7 +34,7 @@
 
 {#if visible}
   <Portal>
-    <section class="drawer" transition:slide>
+    <section class:fillWidth class="drawer" transition:slide>
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
@@ -63,6 +63,10 @@
     z-index: 2;
   }
 
+  .fillWidth {
+    width: calc(100% - 260px) !important;
+  }
+
   header {
     display: flex;
     justify-content: space-between;

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

@@ -124,7 +124,7 @@
 <div class="fields">
   {#each schemaProperties as [key, value]}
     <div class="block-field">
-      <Label>{value.title || key}</Label>
+      <Label>{value.title || (key === "row" ? "Table" : key)}</Label>
       {#if value.type === "string" && value.enum}
         <Select
           on:change={e => onChange(e, key)}
@@ -170,6 +170,7 @@
           />
         {:else}
           <DrawerBindableInput
+            fillWidth
             title={value.title}
             panel={AutomationBindingPanel}
             type="email"
@@ -229,14 +230,17 @@
             {bindings}
           />
         {:else}
-          <DrawerBindableInput
+          <div class="test">
-            title={value.title}
+            <DrawerBindableInput
-            panel={AutomationBindingPanel}
+              fillWidth
-            type={value.customType}
+              title={value.title}
-            value={inputData[key]}
+              panel={AutomationBindingPanel}
-            on:change={e => onChange(e, key)}
+              type={value.customType}
-            {bindings}
+              value={inputData[key]}
-          />
+              on:change={e => onChange(e, key)}
+              {bindings}
+            />
+          </div>
         {/if}
       {/if}
     </div>
@@ -259,4 +263,8 @@
     display: grid;
     grid-gap: 5px;
   }
+
+  .test :global(.drawer) {
+    width: 10000px !important;
+  }
 </style>

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -14,6 +14,7 @@
   export let placeholder
   export let label
   export let disabled = false
+  export let fillWidth = false
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -45,7 +46,7 @@
     </div>
   {/if}
 </div>
-<Drawer bind:this={bindingDrawer} {title}>
+<Drawer {fillWidth} bind:this={bindingDrawer} {title}>
   <svelte:fragment slot="description">
     Add the objects on the left to enrich your text.
   </svelte:fragment>