Update automation section to use spectrum

2021-04-22 10:58:04 +01:00 · 2021-04-22 10:58:04 +01:00 · 5770035650
parent 1a067fd492
commit 5770035650
13 changed files with 188 additions and 174 deletions
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/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>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/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 {
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/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>
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/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>
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/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;
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/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)} />
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/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>
--- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
+++ b/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} />
--- a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
+++ b/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>
--- a/packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
+++ b/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>
--- a/packages/builder/src/components/common/DrawerBindableInput.svelte
+++ b/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;
--- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
+++ b/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>
--- a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
+++ b/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>