add multiselect / date / boolean types to automations

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>

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>

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

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) {