From 1f702827536a8c5c42d433873e07c9480863f823 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Sun, 11 Apr 2021 12:02:01 +0100
Subject: [PATCH] fix automation fields

---
 .../EditAutomationPopover.svelte              |  4 +-
 .../automation/SetupPanel/RowSelector.svelte  |  2 +-
 .../common/DrawerBindableInput.svelte         |  7 ++-
 .../deploy/DeploymentHistory.svelte           |  6 ++-
 .../automate/[automation]/index.svelte        |  3 +-
 .../pages/[application]/automate/index.svelte | 23 ++++----
 .../pages/[application]/data/_layout.svelte   |  9 ++--
 .../[query]/_layout.svelte                    |  4 +-
 .../data/datasource/index.svelte              | 53 ++++++++++---------
 9 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
index a99a16e240..81c38e553b 100644
--- a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
+++ b/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>
 
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 4fcdb6cd84..4f36e6157a 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/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"
 
diff --git a/packages/builder/src/components/common/DrawerBindableInput.svelte b/packages/builder/src/components/common/DrawerBindableInput.svelte
index 647638e8c9..e7723aba85 100644
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/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;
diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index c49abd433e..0933b1a676 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/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>
diff --git a/packages/builder/src/pages/[application]/automate/[automation]/index.svelte b/packages/builder/src/pages/[application]/automate/[automation]/index.svelte
index 031a72fad3..1a15ed48c6 100644
--- a/packages/builder/src/pages/[application]/automate/[automation]/index.svelte
+++ b/packages/builder/src/pages/[application]/automate/[automation]/index.svelte
@@ -1,6 +1,5 @@
 <script>
   import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
 </script>
-  
+
 <AutomationBuilder />
-  
\ No newline at end of file
diff --git a/packages/builder/src/pages/[application]/automate/index.svelte b/packages/builder/src/pages/[application]/automate/index.svelte
index 98e5b80a18..f6568417a8 100644
--- a/packages/builder/src/pages/[application]/automate/index.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index 0674c93c88..5a31d7db92 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/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}`}
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
index e2e7ea3e44..222df8aee0 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/_layout.svelte
+++ b/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)
     }
diff --git a/packages/builder/src/pages/[application]/data/datasource/index.svelte b/packages/builder/src/pages/[application]/data/datasource/index.svelte
index 73b369ad6f..dafaf14e47 100644
--- a/packages/builder/src/pages/[application]/data/datasource/index.svelte
+++ b/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>
\ No newline at end of file
+  })
+</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>