Update automation section to use spectrum

packages/bbui/src/Icon/Icon.svelte

@@ -10,6 +10,8 @@
   export let m = false
   export let l = false
   export let xl = false
+  export let hoverable = false
+  export let disabled = false
 
   $: rotation = directions.indexOf(direction) * 45
   $: useDefault = ![s, m, l, xl].includes(true)
@@ -17,6 +19,8 @@
 
 <svg
   on:click
+  class:hoverable
+  class:disabled
   class:spectrum-Icon--sizeS={s}
   class:spectrum-Icon--sizeM={m || useDefault}
   class:spectrum-Icon--sizeL={l}
@@ -28,3 +32,19 @@
   style={`transform: rotate(${rotation}deg)`}>
   <use xlink:href="#spectrum-icon-18-{name}" />
 </svg>
+
+<style>
+  svg.hoverable {
+    pointer-events: all;
+    transition: color var(--spectrum-global-animation-duration-100, 130ms);
+  }
+  svg.hoverable:hover {
+    color: var(--spectrum-alias-icon-color-selected);
+    cursor: pointer;
+  }
+
+  svg.disabled {
+    color: var(--spectrum-global-color-gray-500) !important;
+    pointer-events: none !important;
+  }
+</style>

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -52,9 +52,9 @@
     border-radius: var(--border-radius-m);
     transition: 0.3s all ease;
     box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
-    background-color: var(--ink);
     font-size: 16px;
-    color: var(--background);
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--grey-9);
   }
   .block.selected,
   .block:hover {
@@ -77,9 +77,9 @@
   header .label {
     font-size: 14px;
     padding: var(--spacing-s);
-    color: var(--grey-8);
     border-radius: var(--border-radius-m);
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--grey-2);
+    color: var(--grey-8);
   }
   header i {
     font-size: 20px;
@@ -93,22 +93,12 @@
   }
 
   .ACTION {
-    background-color: var(--background);
-    color: var(--ink);
   }
 
   .TRIGGER {
-    background-color: var(--ink);
-    color: var(--background);
-  }
-  .TRIGGER header .label {
-    background-color: var(--grey-9);
-    color: var(--grey-5);
   }
 
   .LOGIC {
-    background-color: var(--background);
-    color: var(--ink);
   }
 
   p {

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

@@ -29,14 +29,13 @@
   onConfirm={createAutomation}
   disabled={!valid}>
   <Input bind:value={name} label="Name" />
-  <div slot="footer">
-    <a
-      target="_blank"
-      href="https://docs.budibase.com/automate/introduction-to-automate">
-      <i class="ri-information-line" />
-      <span>Learn about automations</span>
-    </a>
-  </div>
+  <a
+    slot="footer"
+    target="_blank"
+    href="https://docs.budibase.com/automate/introduction-to-automate">
+    <i class="ri-information-line" />
+    <span>Learn about automations</span>
+  </a>
 </ModalContent>
 
 <style>

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

@@ -49,62 +49,64 @@
   }
 </script>
 
-<div class="block-label">{block.name}</div>
-{#each inputs as [key, value]}
-  <div class="block-field">
-    <Label extraSmall grey>{value.title}</Label>
-    {#if value.type === 'string' && value.enum}
-      <Select bind:value={block.inputs[key]} extraThin secondary>
-        <option value="">Choose an option</option>
-        {#each value.enum as option, idx}
-          <option value={option}>
-            {value.pretty ? value.pretty[idx] : option}
-          </option>
-        {/each}
-      </Select>
-    {:else if value.customType === 'password'}
-      <Input type="password" extraThin bind:value={block.inputs[key]} />
-    {:else if value.customType === 'email'}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
-        type={'email'}
-        extraThin
-        value={block.inputs[key]}
-        on:change={e => (block.inputs[key] = e.detail)}
-        {bindings} />
-    {:else if value.customType === 'table'}
-      <TableSelector bind:value={block.inputs[key]} />
-    {:else if value.customType === 'row'}
-      <RowSelector bind:value={block.inputs[key]} {bindings} />
-    {:else if value.customType === 'webhookUrl'}
-      <WebhookDisplay value={block.inputs[key]} />
-    {:else if value.customType === 'triggerSchema'}
-      <SchemaSetup bind:value={block.inputs[key]} />
-    {:else if value.type === 'string' || value.type === 'number'}
-      <DrawerBindableInput
-        panel={AutomationBindingPanel}
-        type={value.customType}
-        extraThin
-        value={block.inputs[key]}
-        on:change={e => (block.inputs[key] = e.detail)}
-        {bindings} />
-    {/if}
-  </div>
-{/each}
+<div class="fields">
+  <div class="block-label">{block.name}</div>
+  {#each inputs as [key, value]}
+    <div class="block-field">
+      <Label>{value.title}</Label>
+      {#if value.type === 'string' && value.enum}
+        <Select
+          bind:value={block.inputs[key]}
+          options={value.enum}
+          getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)} />
+      {:else if value.customType === 'password'}
+        <Input type="password" bind:value={block.inputs[key]} />
+      {:else if value.customType === 'email'}
+        <DrawerBindableInput
+          panel={AutomationBindingPanel}
+          type={'email'}
+          value={block.inputs[key]}
+          on:change={e => (block.inputs[key] = e.detail)}
+          {bindings} />
+      {:else if value.customType === 'table'}
+        <TableSelector bind:value={block.inputs[key]} />
+      {:else if value.customType === 'row'}
+        <RowSelector bind:value={block.inputs[key]} {bindings} />
+      {:else if value.customType === 'webhookUrl'}
+        <WebhookDisplay value={block.inputs[key]} />
+      {:else if value.customType === 'triggerSchema'}
+        <SchemaSetup bind:value={block.inputs[key]} />
+      {:else if value.type === 'string' || value.type === 'number'}
+        <DrawerBindableInput
+          panel={AutomationBindingPanel}
+          type={value.customType}
+          value={block.inputs[key]}
+          on:change={e => (block.inputs[key] = e.detail)}
+          {bindings} />
+      {/if}
+    </div>
+  {/each}
+</div>
 {#if stepId === 'WEBHOOK'}
-  <Button secondary on:click={() => webhookModal.show()}>
-    Set Up Webhook
-  </Button>
+  <Button secondary on:click={() => webhookModal.show()}>Set Up Webhook</Button>
 {/if}
 
 <style>
+  .fields {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
+  }
+
   .block-field {
     display: grid;
   }
 
   .block-label {
     font-weight: 500;
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     color: var(--grey-7);
   }
 </style>

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

@@ -19,30 +19,24 @@
   }
 </script>
 
-<div class="block-field">
-  <Select bind:value={value.tableId} extraThin secondary>
-    <option value="">Choose an option</option>
-    {#each $tables.list as table}
-      <option value={table._id}>{table.name}</option>
-    {/each}
-  </Select>
-</div>
+<Select
+  bind:value={value.tableId}
+  options={$tables.list}
+  getOptionLabel={table => table.name}
+  getOptionValue={table => table._id} />
 
 {#if schemaFields.length}
   <div class="schema-fields">
     {#each schemaFields as [field, schema]}
       {#if !schema.autocolumn}
         {#if schemaHasOptions(schema)}
-          <Select label={field} extraThin secondary bind:value={value[field]}>
-            <option value="">Choose an option</option>
-            {#each schema.constraints.inclusion as option}
-              <option value={option}>{option}</option>
-            {/each}
-          </Select>
+          <Select
+            label={field}
+            bind:value={value[field]}
+            options={schema.constraints.inclusion} />
         {:else if schema.type === 'string' || schema.type === 'number'}
           <DrawerBindableInput
             panel={AutomationBindingPanel}
-            extraThin
             value={value[field]}
             on:change={e => (value[field] = e.detail)}
             label={field}
@@ -57,8 +51,8 @@
 <style>
   .schema-fields {
     display: grid;
-    grid-gap: var(--spacing-xl);
-    margin-top: var(--spacing-xl);
+    grid-gap: var(--spacing-s);
+    margin-top: var(--spacing-s);
   }
   .schema-fields :global(label) {
     text-transform: capitalize;

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

@@ -6,6 +6,24 @@
     name,
     type,
   }))
+  const typeOptions = [
+    {
+      label: "Text",
+      value: "string",
+    },
+    {
+      label: "Number",
+      value: "number",
+    },
+    {
+      label: "Boolean",
+      value: "boolean",
+    },
+    {
+      label: "DateTime",
+      value: "datetime",
+    },
+  ]
 
   function addField() {
     const newValue = { ...value }
@@ -22,7 +40,7 @@
   const fieldNameChanged = originalName => e => {
     // reconstruct using fieldsArray, so field order is preserved
     let entries = [...fieldsArray]
-    const newName = e.target.value
+    const newName = e.detail
     if (newName) {
       entries.find(f => f.name === originalName).name = newName
     } else {
@@ -46,16 +64,9 @@
         placeholder="Enter field name"
         on:change={fieldNameChanged(field.name)} />
       <Select
-        secondary
-        extraThin
         value={field.type}
-        on:blur={e => (value[field.name] = e.target.value)}>
-        <option>string</option>
-        <option>number</option>
-        <option>boolean</option>
-        <option>datetime</option>
-      </Select>
-
+        on:change={e => (value[field.name] = e.target.value)}
+        options={typeOptions} />
       <i
         class="remove-field ri-delete-bin-line"
         on:click={() => removeField(field.name)} />

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

@@ -1,9 +1,8 @@
 <script>
   import { automationStore } from "builderStore"
   import { database } from "stores/backend"
-  import { notifications } from "@budibase/bbui"
+  import { notifications, Icon, Button, Modal } from "@budibase/bbui"
   import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
-  import { Button, Modal } from "@budibase/bbui"
   import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
 
   let webhookModal
@@ -30,7 +29,9 @@
       automation: $automationStore.selectedAutomation.automation,
     })
     if (result.status === 200) {
-      notifications.success(`Automation ${automation.name} triggered successfully.`)
+      notifications.success(
+        `Automation ${automation.name} triggered successfully.`
+      )
     } else {
       notifications.error(`Failed to trigger automation ${automation.name}.`)
     }
@@ -47,17 +48,19 @@
 
 <div class="title">
   <h1>Setup</h1>
-  <i
-    class:highlighted={automationLive}
-    class:hoverable={automationLive}
-    on:click={() => setAutomationLive(false)}
-    class="ri-stop-circle-fill" />
-  <i
-    class:highlighted={!automationLive}
-    class:hoverable={!automationLive}
+  <Icon
+    l
+    disabled={!automationLive}
+    hoverable={automationLive}
+    name="PauseCircle"
+    on:click={() => setAutomationLive(false)} />
+  <Icon
+    l
+    name="PlayCircle"
+    disabled={automationLive}
+    hoverable={!automationLive}
     data-cy="activate-automation"
-    on:click={() => setAutomationLive(true)}
-    class="ri-play-circle-fill" />
+    on:click={() => setAutomationLive(true)} />
 </div>
 {#if $automationStore.selectedBlock}
   <AutomationBlockSetup
@@ -92,29 +95,10 @@
     margin: 0;
     flex: 1 1 auto;
   }
-  .title i {
-    font-size: 20px;
-    color: var(--grey-5);
-  }
-  .title i.highlighted {
-    color: var(--ink);
-  }
-  .title i.hoverable:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
 
   .block-label {
     font-size: var(--font-size-xs);
     font-weight: 500;
     color: var(--grey-7);
   }
-
-  .footer {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: stretch;
-  }
 </style>

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

@@ -5,11 +5,8 @@
   export let value
 </script>
 
-<div class="block-field">
-  <Select bind:value secondary extraThin>
-    <option value="">Choose an option</option>
-    {#each $tables.list as table}
-      <option value={table._id}>{table.name}</option>
-    {/each}
-  </Select>
-</div>
+<Select
+  bind:value
+  options={$tables.list}
+  getOptionLabel={table => table.name}
+  getOptionValue={table => table._id} />

packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte

@@ -58,12 +58,13 @@
       bindable value{propCount > 1 ? 's' : ''}.
     </p>
   {/if}
-  <div slot="footer">
-    <a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
-      <i class="ri-information-line" />
-      <span>Learn about webhooks</span>
-    </a>
-  </div>
+  <a
+    slot="footer"
+    target="_blank"
+    href="https://docs.budibase.com/automate/steps/triggers">
+    <i class="ri-information-line" />
+    <span>Learn about webhooks</span>
+  </a>
 </ModalContent>
 
 <style>

packages/builder/src/components/automation/Shared/WebhookDisplay.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { notifications } from "@budibase/bbui"
-  import { Input } from "@budibase/bbui"
+  import { Input, Icon, notifications } from "@budibase/bbui"
   import { store, hostingStore } from "builderStore"
 
   export let value
@@ -29,10 +28,10 @@
 </script>
 
 <div>
-  <Input disabled="true" thin value={fullWebhookURL(value)} />
-  <span on:click={() => copyToClipboard()}>
-    <i class="ri-clipboard-line copy-icon" />
-  </span>
+  <Input readonly value={fullWebhookURL(value)} />
+  <div class="icon" on:click={() => copyToClipboard()}>
+    <Icon s name="Copy" />
+  </div>
 </div>
 
 <style>
@@ -40,26 +39,31 @@
     position: relative;
   }
 
-  div :global(input:disabled) {
-    color: var(--grey-7);
-  }
-
-  span {
+  .icon {
+    right: 1px;
+    bottom: 1px;
     position: absolute;
-    border: none;
-    border-radius: 50%;
-    height: 24px;
-    width: 24px;
-    background: var(--background);
-    right: var(--spacing-s);
-    bottom: 9px;
-    display: flex;
-    flex-direction: row;
     justify-content: center;
     align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
+        var(--spectrum-global-animation-duration-100, 130ms),
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
   }
-
-  span:hover {
-    background-color: var(--grey-3);
+  .icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
   }
 </style>

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

@@ -6,7 +6,6 @@
   } from "builderStore/dataBinding"
   import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
-  const dispatch = createEventDispatcher()
 
   export let panel = BindingPanel
   export let value = ""
@@ -14,9 +13,10 @@
   export let thin = true
   export let title = "Bindings"
   export let placeholder
+  export let label
 
+  const dispatch = createEventDispatcher()
   let bindingDrawer
-
   $: tempValue = value
   $: readableValue = runtimeToReadableBinding(bindings, value)
 
@@ -32,6 +32,7 @@
 
 <div class="control">
   <Input
+    {label}
     value={readableValue}
     on:change={event => onChange(event.detail)}
     {placeholder} />
@@ -66,7 +67,6 @@
 
   .icon {
     right: 1px;
-    top: 1px;
     bottom: 1px;
     position: absolute;
     justify-content: center;
@@ -84,6 +84,7 @@
         var(--spectrum-global-animation-duration-100, 130ms),
       box-shadow var(--spectrum-global-animation-duration-100, 130ms),
       border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
   }
   .icon:hover {
     cursor: pointer;

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

@@ -37,12 +37,13 @@
   {#if webhookUrls.length === 0}
     <h5>No webhooks found.</h5>
   {/if}
-  <div slot="footer">
-    <a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
-      <i class="ri-information-line" />
-      <span>Learn about webhooks</span>
-    </a>
-  </div>
+  <a
+    slot="footer"
+    target="_blank"
+    href="https://docs.budibase.com/automate/steps/triggers">
+    <i class="ri-information-line" />
+    <span>Learn about webhooks</span>
+  </a>
 </ModalContent>
 
 <style>

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

@@ -13,7 +13,7 @@
     <slot />
   </div>
   {#if $automationStore.selectedAutomation}
-    <div class="nav setup">
+    <div class="setup">
       <SetupPanel />
     </div>
   {/if}
@@ -45,4 +45,14 @@
     gap: var(--spacing-l);
     overflow: hidden;
   }
+
+  .setup {
+    padding: var(--spectrum-global-dimension-size-200);
+    border-left: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
 </style>