From 053ea4e499d7d13ec501757099d6f10b1ac71106 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 20 Sep 2021 16:23:33 +0100
Subject: [PATCH 1/3] add multiselect / date / boolean types to automations

---
 .../FlowChart/FlowChart.svelte                | 29 ++++++++++++++-----
 .../SetupPanel/AutomationBlockSetup.svelte    |  5 +---
 .../automation/SetupPanel/RowSelector.svelte  | 22 ++++++++++++--
 .../automation/SetupPanel/SchemaSetup.svelte  | 17 ++++++-----
 4 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 92cc6e7cee..81fcd26d35 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -1,9 +1,8 @@
 <script>
   import { automationStore } from "builderStore"
-
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import FlowItem from "./FlowItem.svelte"
   import TestDataModal from "./TestDataModal.svelte"
-
   import { flip } from "svelte/animate"
   import { fade, fly } from "svelte/transition"
   import {
@@ -13,13 +12,12 @@
     notifications,
     Modal,
   } from "@budibase/bbui"
-  import { database } from "stores/backend"
 
   export let automation
   export let onSelect
   let testDataModal
   let blocks
-  $: instanceId = $database._id
+  let confirmDeleteDialog
 
   $: {
     blocks = []
@@ -35,6 +33,7 @@
     await automationStore.actions.delete(
       $automationStore.selectedAutomation?.automation
     )
+    notifications.success("Automation deleted.")
   }
 
   async function testAutomation() {
@@ -63,8 +62,8 @@
           style="display:flex;
           color: var(--spectrum-global-color-gray-400);"
         >
-          <span on:click={() => deleteAutomation()} class="iconPadding">
-            <Icon name="DeleteOutline" />
+          <span on:click={confirmDeleteDialog.show} class="iconPadding">
+            <div class="icon"><Icon name="DeleteOutline" /></div>
           </span>
           <ActionButton
             on:click={() => {
@@ -92,6 +91,17 @@
       </div>
     {/each}
   </div>
+  <ConfirmDialog
+    bind:this={confirmDeleteDialog}
+    okText="Delete Automation"
+    onOk={deleteAutomation}
+    title="Confirm Deletion"
+  >
+    Are you sure you wish to delete the automation
+    <i>{automation.name}?</i>
+    This action cannot be undone.
+  </ConfirmDialog>
+
   <Modal bind:this={testDataModal} width="30%">
     <TestDataModal {testAutomation} />
   </Modal>
@@ -139,9 +149,14 @@
     justify-content: space-between;
   }
 
-  .iconPadding {
+  .icon {
     cursor: pointer;
     display: flex;
     padding-right: var(--spacing-m);
   }
+
+  .icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index ea3c60932c..adc22e5daf 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -20,7 +20,6 @@
   import QueryParamSelector from "./QueryParamSelector.svelte"
   import CronBuilder from "./CronBuilder.svelte"
   import Editor from "components/integration/QueryEditor.svelte"
-  import { database } from "stores/backend"
   import { debounce } from "lodash"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import FilterDrawer from "components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterDrawer.svelte"
@@ -35,13 +34,11 @@
   let drawer
   let tempFilters = lookForFilters(schemaProperties) || []
   let fillWidth = true
-
   $: stepId = block.stepId
   $: bindings = getAvailableBindings(
     block || $automationStore.selectedBlock,
     $automationStore.selectedAutomation?.automation?.definition
   )
-  $: instanceId = $database._id
 
   $: inputData = testData ? testData : block.inputs
   $: tableId = inputData ? inputData.tableId : null
@@ -210,7 +207,7 @@
       {:else if value.customType === "webhookUrl"}
         <WebhookDisplay value={inputData[key]} />
       {:else if value.customType === "triggerSchema"}
-        <SchemaSetup on:change={e => onChange(e, key)} value={value[key]} />
+        <SchemaSetup on:change={e => onChange(e, key)} value={inputData[key]} />
       {:else if value.customType === "code"}
         <CodeEditorModal>
           <pre>{JSON.stringify(bindings, null, 2)}</pre>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 3f390e0a4f..1d54c86b4a 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 { tables } from "stores/backend"
-  import { Select } from "@budibase/bbui"
+  import { Select, Toggle, DatePicker, Multiselect } from "@budibase/bbui"
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
@@ -44,13 +44,31 @@
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if !schema.autocolumn}
-        {#if schemaHasOptions(schema)}
+        {#if schemaHasOptions(schema) && schema.type !== "array"}
           <Select
             on:change={e => onChange(e, field)}
             label={field}
             value={value[field]}
             options={schema.constraints.inclusion}
           />
+        {:else if schema.type === "datetime"}
+          <DatePicker
+            label={field}
+            value={value[field]}
+            on:change={e => onChange(e, field)}
+          />
+        {:else if schema.type === "boolean"}
+          <Toggle
+            text={field}
+            value={value[field]}
+            on:change={e => onChange(e, field)}
+          />
+        {:else if schema.type === "array"}
+          <Multiselect
+            bind:value={value[field]}
+            label={field}
+            options={schema.constraints.inclusion}
+          />
         {:else if schema.type === "string" || schema.type === "number"}
           {#if $automationStore.selectedAutomation.automation.testData}
             <ModalBindableInput
diff --git a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
index 54f5b90164..730de6270a 100644
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
@@ -5,10 +5,14 @@
   const dispatch = createEventDispatcher()
 
   export let value = {}
-  $: fieldsArray = Object.entries(value).map(([name, type]) => ({
-    name,
-    type,
-  }))
+
+  $: fieldsArray = value
+    ? Object.entries(value).map(([name, type]) => ({
+        name,
+        type,
+      }))
+    : []
+
   const typeOptions = [
     {
       label: "Text",
@@ -73,7 +77,7 @@
       <Select
         value={field.type}
         on:change={e => {
-          value[field.name] = e.target.value
+          value[field.name] = e.detail
           dispatch("change", value)
         }}
         options={typeOptions}
@@ -88,9 +92,7 @@
 
 <style>
   .root {
-    position: relative;
     max-width: 100%;
-    overflow-x: auto;
     /* so we can show the "+" button beside the "fields" label*/
     top: -26px;
   }
@@ -110,7 +112,6 @@
     /*grid-template-rows: auto auto;
     grid-template-columns: auto;*/
     position: relative;
-    overflow: hidden;
   }
 
   .field :global(select) {

From 14945d9f0d6a6532be902764d1dc21eec6b63563 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Sep 2021 12:05:58 +0100
Subject: [PATCH 2/3] use color alias for actions instead of hard-coding the
 color

---
 .../automation/AutomationBuilder/FlowChart/ActionModal.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index 9af78df1b6..b822973b62 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -123,7 +123,7 @@
     padding: var(--spectrum-alias-item-padding-s);
     background: var(--spectrum-alias-background-color-secondary);
     transition: 0.3s all;
-    border: solid #3b3d3c;
+    border: solid var(--spectrum-alias-border-color);
     border-radius: 5px;
     box-sizing: border-box;
     border-width: 2px;

From 1d9fccb666008b50b4d4dc8a37c40bba8b4f99e9 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Sep 2021 20:30:58 +0100
Subject: [PATCH 3/3] update icon to use hoverable

---
 .../AutomationBuilder/FlowChart/FlowChart.svelte  | 15 ++++++++-------
 .../AutomationPanel/CreateAutomationModal.svelte  |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 81fcd26d35..c05a103fac 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -62,8 +62,14 @@
           style="display:flex;
           color: var(--spectrum-global-color-gray-400);"
         >
-          <span on:click={confirmDeleteDialog.show} class="iconPadding">
-            <div class="icon"><Icon name="DeleteOutline" /></div>
+          <span class="iconPadding">
+            <div class="icon">
+              <Icon
+                on:click={confirmDeleteDialog.show}
+                hoverable
+                name="DeleteOutline"
+              />
+            </div>
           </span>
           <ActionButton
             on:click={() => {
@@ -154,9 +160,4 @@
     display: flex;
     padding-right: var(--spacing-m);
   }
-
-  .icon:hover {
-    cursor: pointer;
-    color: var(--spectrum-alias-text-color-hover);
-  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
index 6580cd0b87..7700a4a1c2 100644
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@@ -102,7 +102,7 @@
     padding: var(--spectrum-alias-item-padding-s);
     background: var(--spectrum-alias-background-color-secondary);
     transition: 0.3s all;
-    border: solid #3b3d3c;
+    border: solid var(--spectrum-alias-border-color);
     border-radius: 5px;
     box-sizing: border-box;
     border-width: 2px;