From c728329d51ea26c1f16ec8232596b0fa05c7233f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Sep 2020 12:24:57 +0100
Subject: [PATCH 1/3] Improve responsiveness, handle scrolling and tidy up CSS
 in automations page

---
 .../AutomationBuilder.svelte                  |   4 +-
 .../AutomationBuilder/flowchart/Arrow.svelte  |   2 +-
 .../flowchart/FlowChart.svelte                |   2 +-
 .../AutomationList/AutomationList.svelte      |  56 ++-------
 .../CreateAutomationModal.svelte              |  79 +++++++------
 .../AutomationPanel/AutomationPanel.svelte    |   6 +-
 .../BlockList/AutomationBlock.svelte          |  27 ++---
 .../automation/SetupPanel/SetupPanel.svelte   | 109 ++++++++----------
 .../[application]/automate/_layout.svelte     |  27 ++---
 9 files changed, 125 insertions(+), 187 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index c46783092c..ad49776605 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -61,7 +61,7 @@
 
   footer {
     position: absolute;
-    bottom: 20px;
+    bottom: var(--spacing-xl);
     right: 30px;
     display: flex;
     align-items: flex-end;
@@ -80,7 +80,7 @@
     justify-content: center;
   }
   footer > button:first-child {
-    margin-right: 20px;
+    margin-right: var(--spacing-m);
   }
 
   .play-button.highlighted {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte
index eaf84c3088..4dab01d6f1 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte
@@ -10,6 +10,6 @@
 
 <style>
   svg {
-    margin: 8px 0;
+    margin: var(--spacing-m) 0;
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
index 2465a421d8..1d7ebb35f8 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte
@@ -37,7 +37,7 @@
 <style>
   section {
     position: absolute;
-    padding: 20px 40px;
+    padding: 40px;
     display: flex;
     align-items: center;
     flex-direction: column;
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
index e944d0e39d..6926522677 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte
@@ -46,22 +46,18 @@
     flex-direction: column;
   }
 
-  i {
-    color: #adaec4;
-  }
-
-  i:hover {
-    cursor: pointer;
-  }
-
   ul {
     list-style-type: none;
     padding: 0;
+    margin: var(--spacing-xl) 0 0 0;
     flex: 1;
   }
 
-  .live {
-    color: var(--primary);
+  i {
+    color: var(--grey-6);
+  }
+  i.live {
+    color: var(--purple);
   }
 
   li {
@@ -70,51 +66,23 @@
 
   .automation-item {
     display: flex;
-    border-radius: 5px;
-    padding-left: 12px;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
-    height: 36px;
-    margin-bottom: 4px;
+    border-radius: var(--border-radius-m);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin-bottom: var(--spacing-xs);
     color: var(--ink);
   }
-
   .automation-item i {
     font-size: 24px;
-    margin-right: 10px;
+    margin-right: var(--spacing-m);
   }
-
   .automation-item:hover {
     cursor: pointer;
     background: var(--grey-1);
   }
-
   .automation-item.selected {
     background: var(--grey-2);
   }
-
-  .new-automation-button {
-    cursor: pointer;
-    border: 1px solid var(--grey-4);
-    border-radius: 3px;
-    width: 100%;
-    padding: 8px 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: white;
-    color: var(--ink);
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 2ms;
-  }
-
-  .new-automation-button:hover {
-    background: var(--grey-1);
-  }
-
-  .icon {
-    color: var(--ink);
-    font-size: 16px;
-    margin-right: 4px;
-  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
index 7cd3d3f05a..6f07c97f4d 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte
@@ -22,67 +22,74 @@
   }
 </script>
 
-<header>
-  <i class="ri-stackshare-line" />
-  Create Automation
-</header>
-<div>
-  <Input bind:value={name} label="Name" />
+<div class="container">
+  <header>
+    <i class="ri-stackshare-line" />
+    Create Automation
+  </header>
+  <div class="content">
+    <Input bind:value={name} label="Name" />
+  </div>
+  <footer>
+    <a href="https://docs.budibase.com">
+      <i class="ri-information-line" />
+      <span>Learn about automations</span>
+    </a>
+    <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
+    <ActionButton disabled={!valid} on:click={createAutomation}>
+      Save
+    </ActionButton>
+  </footer>
 </div>
-<footer>
-  <a href="https://docs.budibase.com">
-    <i class="ri-information-line" />
-    Learn about automations
-  </a>
-  <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
-  <ActionButton disabled={!valid} on:click={createAutomation}>Save</ActionButton>
-</footer>
 
 <style>
+  .container {
+    padding: var(--spacing-xl);
+  }
+
   header {
-    font-size: 24px;
+    font-size: var(--font-size-xl);
     color: var(--ink);
     font-weight: bold;
-    padding: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
   }
-
   header i {
-    margin-right: 10px;
+    margin-right: var(--spacing-m);
     font-size: 20px;
-    background: var(--blue-light);
-    color: var(--grey-4);
-    padding: 8px;
+    background: var(--purple);
+    color: var(--white);
+    padding: var(--spacing-s);
+    border-radius: var(--border-radius-m);
+    display: inline-block;
   }
 
-  div {
-    padding: 0 30px 30px 30px;
-  }
-
-  label {
-    font-size: 18px;
-    font-weight: 500;
+  .content {
+    padding: var(--spacing-xl) 0;
   }
 
   footer {
     display: grid;
     grid-auto-flow: column;
-    grid-gap: 5px;
+    grid-gap: var(--spacing-m);
     grid-auto-columns: 3fr 1fr 1fr;
-    padding: 20px;
-    background: var(--grey-1);
-    border-radius: 0.5rem;
   }
-
   footer a {
-    color: var(--primary);
+    color: var(--ink);
     font-size: 14px;
     vertical-align: middle;
     display: flex;
     align-items: center;
+    text-decoration: none;
+  }
+  footer a span {
+    text-decoration: underline;
   }
-
   footer i {
     font-size: 20px;
-    margin-right: 10px;
+    margin-right: var(--spacing-m);
+    text-decoration: none;
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index 1042f5456b..1940f88d44 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -20,7 +20,7 @@
       class="hoverable"
       class:selected={selectedTab === 'ADD'}
       on:click={() => (selectedTab = 'ADD')}>
-      Add step
+      Steps
     </span>
   {/if}
 </header>
@@ -37,11 +37,11 @@
     background: none;
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: var(--spacing-xl);
   }
 
   .automation-header {
-    margin-right: 20px;
+    margin-right: var(--spacing-xl);
   }
 
   span:not(.selected) {
diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
index 8de97dea20..884a109de5 100644
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte
@@ -33,26 +33,15 @@
     display: grid;
     grid-template-columns: 20px auto;
     align-items: center;
-    margin-top: 16px;
-    padding: 12px;
+    margin-top: var(--spacing-s);
+    padding: var(--spacing-m);
     border-radius: var(--border-radius-m);
   }
-
   .automation-block:hover {
     background-color: var(--grey-1);
   }
-
-  .automation-text {
-    margin-left: 16px;
-  }
-
-  .icon {
-    height: 40px;
-    width: 40px;
-    background: var(--blue-light);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .automation-block:first-child {
+    margin-top: 0;
   }
 
   i {
@@ -60,14 +49,16 @@
     font-size: 20px;
   }
 
-  h4 {
+  .automation-text {
+    margin-left: 16px;
+  }
+  .automation-text h4 {
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 5px;
     margin-top: 0;
   }
-
-  p {
+  .automation-text p {
     font-size: 12px;
     color: var(--grey-7);
     margin: 0;
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index b17fad7a2b..39ffaa370b 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -24,7 +24,9 @@
   }
 
   function deleteAutomationBlock() {
-    automationStore.actions.deleteAutomationBlock($automationStore.selectedBlock)
+    automationStore.actions.deleteAutomationBlock(
+      $automationStore.selectedBlock
+    )
   }
 
   async function testAutomation() {
@@ -56,10 +58,24 @@
       Setup
     </span>
   </header>
-  {#if $automationStore.selectedBlock}
-    <AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
-    <div class="buttons">
-      <Button green wide data-cy="save-automation-setup" on:click={saveAutomation}>
+  <div class="content">
+    {#if $automationStore.selectedBlock}
+      <AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
+    {:else if $automationStore.selectedAutomation}
+      <div class="block-label">
+        Automation
+        <b>{automation.name}</b>
+      </div>
+      <Button secondary wide on:click={testAutomation}>Test Automation</Button>
+    {/if}
+  </div>
+  <div class="buttons">
+    {#if $automationStore.selectedBlock}
+      <Button
+        green
+        wide
+        data-cy="save-automation-setup"
+        on:click={saveAutomation}>
         Save Automation
       </Button>
       <Button
@@ -67,30 +83,20 @@
         red
         wide
         on:click={deleteAutomationBlock}>
-        Delete Block
+        Delete Step
       </Button>
-    </div>
-  {:else if $automationStore.selectedAutomation}
-    <div class="panel">
-      <div class="panel-body">
-        <div class="block-label">
-          Automation
-          <b>{automation.name}</b>
-        </div>
-      </div>
-      <Button secondary wide on:click={testAutomation}>Test Automation</Button>
-      <div class="buttons">
-        <Button
-          green
-          wide
-          data-cy="save-automation-setup"
-          on:click={saveAutomation}>
-          Save Automation
-        </Button>
-        <Button red wide on:click={deleteAutomation}>Delete Automation</Button>
-      </div>
-    </div>
-  {/if}
+    {:else if $automationStore.selectedAutomation}
+      <Button
+        green
+        wide
+        data-cy="save-automation-setup"
+        on:click={saveAutomation}>
+        Save Automation
+      </Button>
+      <Button red wide on:click={deleteAutomation}>Delete Automation</Button>
+    {/if}
+  </div>
+
 </section>
 
 <style>
@@ -98,29 +104,24 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    justify-content: space-between;
-  }
-
-  .panel-body {
-    flex: 1;
-  }
-
-  .panel {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-start;
+    align-items: stretch;
   }
 
   header {
     font-size: 18px;
     font-weight: 600;
-    font-family: inter;
+    font-family: inter, sans-serif;
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: var(--spacing-xl);
     color: var(--ink);
   }
-
+  header > span {
+    color: var(--grey-5);
+    margin-right: var(--spacing-xl);
+    cursor: pointer;
+  }
   .selected {
     color: var(--ink);
   }
@@ -129,31 +130,15 @@
     font-weight: 500;
     font-size: 14px;
     color: var(--grey-7);
-    margin-bottom: 20px;
+    margin-bottom: var(--spacing-xl);
   }
 
-  header > span {
-    color: var(--grey-5);
-    margin-right: 20px;
-    cursor: pointer;
-  }
-
-  label {
-    font-weight: 500;
-    font-size: 14px;
-    color: var(--ink);
+  .content {
+    flex: 1 0 auto;
   }
 
   .buttons {
-    position: absolute;
-    bottom: 20px;
     display: grid;
-    width: 260px;
-    gap: 12px;
-  }
-
-  .access-level label {
-    font-weight: normal;
-    color: var(--ink);
+    gap: var(--spacing-m);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte
index 82f04ffcdc..b4fa599f89 100644
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@@ -1,23 +1,19 @@
-<!-- routify:options index=3 -->
 <script>
   import { automationStore } from "builderStore"
   import { AutomationPanel, SetupPanel } from "components/automation"
 </script>
 
+<!-- routify:options index=3 -->
 <div class="root">
   <div class="nav">
-    <div class="inner">
-      <AutomationPanel />
-    </div>
+    <AutomationPanel />
   </div>
   <div class="content">
     <slot />
   </div>
   {#if $automationStore.selectedAutomation}
     <div class="nav">
-      <div class="inner">
-        <SetupPanel />
-      </div>
+      <SetupPanel />
     </div>
   {/if}
 </div>
@@ -25,28 +21,19 @@
 <style>
   .content {
     position: relative;
-    background: var(--grey-1);
   }
 
   .root {
-    height: 100%;
+    height: calc(100% - 60px);
     display: grid;
-    grid-template-columns: 300px minmax(0, 1fr) 300px;
+    grid-template-columns: 300px minmax(510px, 1fr) 300px;
     background: var(--grey-1);
     line-height: 1;
   }
 
-  .content {
-    flex: 1 1 auto;
-  }
-
   .nav {
-    overflow: auto;
-    width: 300px;
+    overflow-y: auto;
     background: var(--white);
-  }
-
-  .inner {
-    padding: 20px;
+    padding: var(--spacing-xl);
   }
 </style>

From aa47d18bb131b713e69a372a4a62867f34ea6c6e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Sep 2020 12:25:14 +0100
Subject: [PATCH 2/3] Sort automation steps by name

---
 .../AutomationPanel/BlockList/BlockList.svelte        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
index 5dd709c4b2..1455f60ef1 100644
--- a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte
@@ -1,11 +1,14 @@
 <script>
+  import { sortBy } from "lodash/fp"
   import { automationStore } from "builderStore"
   import AutomationBlock from "./AutomationBlock.svelte"
   import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
 
   let selectedTab = "TRIGGER"
   let buttonProps = []
-  $: blocks = Object.entries($automationStore.blockDefinitions[selectedTab])
+  $: blocks = sortBy(entry => entry[1].name)(
+    Object.entries($automationStore.blockDefinitions[selectedTab])
+  )
 
   $: {
     if ($automationStore.selectedAutomation.hasTrigger()) {
@@ -37,3 +40,9 @@
     {/each}
   </div>
 </section>
+
+<style>
+  #blocklist {
+    margin-top: var(--spacing-xl);
+  }
+</style>

From d473307b7fb3f867c8b1b4c1762c978347851c31 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 23 Sep 2020 12:30:38 +0100
Subject: [PATCH 3/3] Treat automation step inputs of type number as string,
 and let server handle types

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte           | 2 +-
 .../automation/SetupPanel/ParamInputs/RecordSelector.svelte     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 695fe130e6..950df5cd19 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -66,7 +66,7 @@
         <RecordSelector bind:value={block.inputs[key]} {bindings} />
       {:else if value.type === 'string' || value.type === 'number'}
         <BindableInput
-          type={value.type}
+          type="string"
           thin
           bind:value={block.inputs[key]}
           {bindings} />
diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte b/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
index 1e52ea33a1..d560107642 100644
--- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/ParamInputs/RecordSelector.svelte
@@ -44,7 +44,7 @@
             thin
             bind:value={value[field]}
             label={field}
-            type={schema.type}
+            type="string"
             {bindings} />
         {/if}
       </div>