fix automation fields

packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte

@@ -1,4 +1,4 @@
-<script>    
+<script>
   import { goto } from "@sveltech/routify"
   import { automationStore, backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
@@ -24,7 +24,7 @@
       automation,
     })
     notifier.success("Automation deleted.")
-    $goto('../automate')
+    $goto("../automate")
   }
 </script>
 

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

@@ -1,6 +1,6 @@
 <script>
   import { backendUiStore } from "builderStore"
-  import { Select } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
 

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

@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Input, Drawer, Body, Button } from "@budibase/bbui"
+  import { Icon, Input, Drawer, Label, Body, Button } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
@@ -14,6 +14,7 @@
   export let thin = true
   export let title = "Bindings"
   export let placeholder
+  export let label
 
   let bindingDrawer
 
@@ -32,6 +33,7 @@
 
 <div class="control">
   <Input
+    {label}
     {thin}
     value={readableValue}
     on:change={event => onChange(event.target.value)}
@@ -67,7 +69,6 @@
 
   .icon {
     right: 2px;
-    top: 2px;
     bottom: 2px;
     position: absolute;
     align-items: center;
@@ -80,7 +81,9 @@
     border-bottom-right-radius: var(--border-radius-m);
     color: var(--grey-7);
     font-size: 14px;
+    height: 40px;
   }
+
   .icon:hover {
     color: var(--ink);
     cursor: pointer;

packages/builder/src/components/deploy/DeploymentHistory.svelte

@@ -119,11 +119,13 @@
             {#if deployment.status.toLowerCase() === 'pending'}
               <Spinner size="10" />
             {/if}
-            <div on:click={() => showErrorReasonModal(deployment.err)} class={`deployment-status ${deployment.status}`}>
+            <div
+              on:click={() => showErrorReasonModal(deployment.err)}
+              class={`deployment-status ${deployment.status}`}>
               <span>
                 {deployment.status}
                 {#if deployment.status === DeploymentStatus.FAILURE}
-                  <i class="ri-information-line"/>
+                  <i class="ri-information-line" />
                 {/if}
               </span>
             </div>

packages/builder/src/pages/[application]/automate/[automation]/index.svelte

@@ -1,6 +1,5 @@
 <script>
   import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
 </script>
-  
+
 <AutomationBuilder />
-  

packages/builder/src/pages/[application]/automate/index.svelte

@@ -1,18 +1,19 @@
 <script>
   import { goto, leftover } from "@sveltech/routify"
-  import { onMount } from 'svelte'
+  import { onMount } from "svelte"
   import { automationStore } from "builderStore"
 
   onMount(async () => {
-      // navigate to first automation in list, if not already selected
-      if (
-        !$leftover &&
-        $automationStore.automations.length > 0 &&
-        (!$automationStore.selectedAutomation || !$automationStore.selectedAutomation?.automation?._id)
-      ) {
-        $goto(`../${$automationStore.automations[0]._id}`)
-      }
-    })
+    // navigate to first automation in list, if not already selected
+    if (
+      !$leftover &&
+      $automationStore.automations.length > 0 &&
+      (!$automationStore.selectedAutomation ||
+        !$automationStore.selectedAutomation?.automation?._id)
+    ) {
+      $goto(`../${$automationStore.automations[0]._id}`)
+    }
+  })
 </script>
 
 <i>Create your first automation to get started</i>
@@ -23,4 +24,4 @@
     color: var(--grey-5);
     margin-top: 2px;
   }
-</style>
+</style>

packages/builder/src/pages/[application]/data/_layout.svelte

@@ -17,11 +17,11 @@
     },
   ]
 
-  let tab = $isActive('./datasource') ? "datasource" : "table"
+  let tab = $isActive("./datasource") ? "datasource" : "table"
 
   function selectFirstTableOrSource({ detail }) {
     const type = detail.heading.key
-    if (type === 'datasource') {
+    if (type === "datasource") {
       $goto("./datasource")
     } else {
       $goto("./table")
@@ -34,7 +34,10 @@
 <!-- routify:options index=0 -->
 <div class="root">
   <div class="nav">
-    <Switcher headings={tabs} bind:value={tab} on:change={selectFirstTableOrSource}>
+    <Switcher
+      headings={tabs}
+      bind:value={tab}
+      on:change={selectFirstTableOrSource}>
       <div class="title">
         <i
           data-cy={`new-${tab}`}

packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte

@@ -3,9 +3,7 @@
   import { backendUiStore } from "builderStore"
 
   if ($params.query) {
-    const query = $backendUiStore.queries.find(
-      m => m._id === $params.query
-    )
+    const query = $backendUiStore.queries.find(m => m._id === $params.query)
     if (query) {
       backendUiStore.actions.queries.select(query)
     }

packages/builder/src/pages/[application]/data/datasource/index.svelte

@@ -1,29 +1,30 @@
 <script>
-    import { backendUiStore } from "builderStore"
-    import { goto, leftover } from "@sveltech/routify"
-    import { onMount } from "svelte"
+  import { backendUiStore } from "builderStore"
+  import { goto, leftover } from "@sveltech/routify"
+  import { onMount } from "svelte"
 
-    onMount(async () => {
-      // navigate to first table in list, if not already selected
-      // and this is the final url (i.e. no selectedTable)
-      if (
-        !$leftover &&
-        $backendUiStore.datasources.length > 0 && !$backendUiStore.selectedDatasourceId
-      ) {
-        // this file routes as .../tables/index, so, go up one.
-        $goto(`../${$backendUiStore.datasources[0]._id}`)
-      }
-    })
-  </script>
-  
-  {#if $backendUiStore.tables.length === 0}
-    <i>Connect your first datasource to start building.</i>
-  {:else}<i>Select a datasource to edit</i>{/if}
-  
-  <style>
-    i {
-      font-size: var(--font-size-m);
-      color: var(--grey-5);
-      margin-top: 2px;
+  onMount(async () => {
+    // navigate to first table in list, if not already selected
+    // and this is the final url (i.e. no selectedTable)
+    if (
+      !$leftover &&
+      $backendUiStore.datasources.length > 0 &&
+      !$backendUiStore.selectedDatasourceId
+    ) {
+      // this file routes as .../tables/index, so, go up one.
+      $goto(`../${$backendUiStore.datasources[0]._id}`)
     }
-  </style>
+  })
+</script>
+
+{#if $backendUiStore.tables.length === 0}
+  <i>Connect your first datasource to start building.</i>
+{:else}<i>Select a datasource to edit</i>{/if}
+
+<style>
+  i {
+    font-size: var(--font-size-m);
+    color: var(--grey-5);
+    margin-top: 2px;
+  }
+</style>