From 7fd79d3d4edee2b6ccde29e795bf75c9c7b02813 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 6 Sep 2021 14:31:55 +0100
Subject: [PATCH] Update flow chart styling and event handling

---
 .../bbui/src/ActionButton/ActionButton.svelte |   5 +
 .../AutomationBuilder.svelte                  |   1 -
 .../AutomationBuilder/FlowChart/Arrow.svelte  |   1 +
 .../FlowChart/FlowChart.svelte                |  80 +++++--
 .../FlowChart/FlowItem.svelte                 | 224 ++++++++++++++----
 .../FlowChart/TestDataModal.svelte            |  12 +
 .../CreateAutomationModal.svelte              |  31 ++-
 .../SetupPanel/AutomationBlockSetup.svelte    |   8 +-
 .../automate/[automation]/_layout.svelte      |  15 --
 9 files changed, 273 insertions(+), 104 deletions(-)
 create mode 100644 packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
 delete mode 100644 packages/builder/src/pages/builder/app/[application]/automate/[automation]/_layout.svelte

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 83f71d385b..b518ac3d92 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -12,6 +12,7 @@
   export let dataCy = null
   export let size = "M"
   export let active = false
+  export let fullWidth = false
 
   function longPress(element) {
     if (!longPressable) return
@@ -40,6 +41,7 @@
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
   class:is-selected={selected}
+  class:fullWidth
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   class:active
   {disabled}
@@ -71,6 +73,9 @@
 </button>
 
 <style>
+  .fullWidth {
+    width: 100%;
+  }
   .active,
   .active svg {
     color: var(--spectrum-global-color-blue-600);
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index 62faff3caa..46440a68f6 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -4,7 +4,6 @@
   import BlockList from "./BlockList.svelte"
 
   $: automation = $automationStore.selectedAutomation?.automation
-
   function onSelect(block) {
     automationStore.update(state => {
       state.selectedBlock = block
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
index 931490b197..5aec39abeb 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
@@ -6,6 +6,7 @@
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
+    stroke-dasharray="5,5"
     d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z"
     fill="var(--grey-5)"
   />
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 16ef04a7ca..de89ebbb12 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -3,11 +3,15 @@
   import Arrow from "./Arrow.svelte"
   import { flip } from "svelte/animate"
   import { fade, fly } from "svelte/transition"
+  import { Body, Detail, Icon, Label, StatusLight } from "@budibase/bbui"
 
   export let automation
   export let onSelect
   let blocks
 
+  // TODO: ADD LOGIC FOR SWITCHING THIS
+  let published = true
+
   $: {
     blocks = []
     if (automation) {
@@ -20,33 +24,53 @@
 </script>
 
 <section class="canvas">
-  {#each blocks as block, idx (block.id)}
-    <div
-      class="block"
-      animate:flip={{ duration: 600 }}
-      in:fade|local
-      out:fly|local={{ x: 100 }}
-    >
-      <FlowItem {onSelect} {block} />
-      {#if idx !== blocks.length - 1}
-        <Arrow />
-      {/if}
+  <div class="content">
+    <div class="title">
+      <div class="subtitle">
+        <Detail size="L">{automation.name}</Detail>
+        <div
+          style="display:flex;
+          color: var(--spectrum-global-color-gray-400);"
+        >
+          <span class="iconPadding">
+            <Icon name="DeleteOutline" />
+          </span>
+          <Label>Delete</Label>
+        </div>
+      </div>
+      <div style="margin-left: calc(-1 * var(--spacing-s))">
+        <StatusLight positive={published} notice={!published}
+          >{#if published}
+            <Body size="XS">Automation is published</Body>{:else}
+            <Body size="XS">Automation is not published</Body>{/if}</StatusLight
+        >
+      </div>
     </div>
-  {/each}
+    {#each blocks as block, idx (block.id)}
+      <div
+        class="block"
+        animate:flip={{ duration: 600 }}
+        in:fade|local
+        out:fly|local={{ x: 100 }}
+      >
+        <FlowItem {onSelect} {block} />
+        {#if idx !== blocks.length - 1}
+          <Arrow />
+        {/if}
+      </div>
+    {/each}
+  </div>
 </section>
 
 <style>
-  section {
+  .canvas {
     margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
     padding: var(--spacing-l) 40px 0 40px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
     overflow-y: auto;
-    flex: 1 1 auto;
+    text-align: center;
   }
   /* Fix for firefox not respecting bottom padding in scrolling containers */
-  section > *:last-child {
+  .canvas > *:last-child {
     padding-bottom: 40px;
   }
 
@@ -56,4 +80,24 @@
     justify-content: flex-start;
     align-items: center;
   }
+
+  .content {
+    display: inline-block;
+    text-align: left;
+  }
+
+  .title {
+    padding-bottom: var(--spacing-xl);
+  }
+
+  .subtitle {
+    padding-bottom: var(--spacing-xl);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .iconPadding {
+    display: flex;
+    padding-right: var(--spacing-m);
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 439db62639..d36204897e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -1,21 +1,83 @@
 <script>
   import { automationStore } from "builderStore"
-  import AutomationBlockTagline from "./AutomationBlockTagline.svelte"
-  import { Icon } from "@budibase/bbui"
+  import {
+    Icon,
+    Divider,
+    Layout,
+    Body,
+    Detail,
+    Modal,
+    Button,
+    ActionButton,
+    notifications,
+  } from "@budibase/bbui"
+  import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
+  import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte"
+  import TestDataModal from "./TestDataModal.svelte"
+  import ActionModal from "./ActionModal.svelte"
+  import { database } from "stores/backend"
 
   export let onSelect
   export let block
+
   let selected
+  let webhookModal
+  let testDataModal
+  let actionModal
+  let setupComplete
+  let testToggled
+
+  $: setupToggled = !setupComplete || false
+
+  $: instanceId = $database._id
+  $: schemaKey = Object.keys(block.schema?.inputs?.properties || {})
 
   $: selected = $automationStore.selectedBlock?.id === block.id
   $: steps =
     $automationStore.selectedAutomation?.automation?.definition?.steps ?? []
+
   $: blockIdx = steps.findIndex(step => step.id === block.id)
   $: allowDeleteTrigger = !steps.length
 
   function deleteStep() {
     automationStore.actions.deleteAutomationBlock(block)
   }
+
+  async function testAutomation() {
+    const result = await automationStore.actions.trigger({
+      automation: $automationStore.selectedAutomation.automation,
+    })
+    if (result.status === 200) {
+      notifications.success(
+        `Automation ${$automationStore.selectedAutomation.automation.name} triggered successfully.`
+      )
+    } else {
+      notifications.error(
+        `Failed to trigger automation ${$automationStore.selectedAutomation.automation.name}.`
+      )
+    }
+    return result
+  }
+
+  async function saveAutomation() {
+    await automationStore.actions.save({
+      instanceId,
+      automation: $automationStore.selectedAutomation.automation,
+    })
+    notifications.success(
+      `Automation ${$automationStore.selectedAutomation.automation.name} saved.`
+    )
+  }
+
+  function onContinue() {
+    const testResult = testAutomation()
+    const saveResult = saveAutomation()
+
+    if (testResult && saveResult) {
+      setupComplete = true
+      testToggled = true
+    }
+  }
 </script>
 
 <div
@@ -23,64 +85,124 @@
   class:selected
   on:click={() => onSelect(block)}
 >
-  <header>
-    {#if block.type === "TRIGGER"}
-      <Icon name="Light" />
-      <span>When this happens...</span>
-    {:else if block.type === "ACTION"}
-      <Icon name="FlashOn" />
-      <span>Do this...</span>
-    {:else if block.type === "LOGIC"}
-      <Icon name="Branch2" />
-      <span>Only continue if...</span>
-    {/if}
-    <div class="label">
-      {#if block.type === "TRIGGER"}Trigger{:else}Step {blockIdx + 1}{/if}
+  <div class="blockSection">
+    <div style="display: flex;">
+      <svg
+        width="35px"
+        height="35px"
+        class="spectrum-Icon"
+        style="color:grey;"
+        focusable="false"
+      >
+        <use xlink:href="#spectrum-icon-18-{block.icon}" />
+      </svg>
+      <div class="iconAlign">
+        <Body size="XS">When this happens:</Body>
+
+        <Detail size="S">{block.name.toUpperCase()}</Detail>
+      </div>
     </div>
-    {#if block.type !== "TRIGGER" || allowDeleteTrigger}
-      <div on:click|stopPropagation={deleteStep}><Icon name="Close" /></div>
-    {/if}
-  </header>
-  <hr />
-  <p>
-    <AutomationBlockTagline {block} />
-  </p>
+  </div>
+  <Divider noMargin />
+  <div class="blockSection">
+    <Layout noPadding gap="S">
+      <div class="setup">
+        <div
+          on:click={() => {
+            if (!setupComplete) {
+              setupToggled = !setupToggled
+            }
+          }}
+          class="toggle"
+        >
+          {#if setupToggled}
+            <Icon size="M" name="ChevronDown" />
+          {:else}
+            <Icon size="M" name="ChevronRight" />
+          {/if}
+          <Detail size="S">Setup</Detail>
+        </div>
+        <div on:click={() => deleteStep()}>
+          <Icon name="DeleteOutline" />
+        </div>
+      </div>
+
+      {#if setupToggled}
+        <AutomationBlockSetup {block} {webhookModal} />
+        {#if block.inputs[schemaKey]}
+          <Button on:click={() => onContinue()} cta
+            >Continue and test trigger</Button
+          >
+        {/if}
+      {/if}
+    </Layout>
+  </div>
+
+  <Divider noMargin />
+  <div class="blockSection">
+    <Layout noPadding gap="S">
+      <div
+        on:click={() => {
+          if (setupComplete) {
+            testToggled = !testToggled
+          }
+        }}
+        class="toggle"
+      >
+        {#if testToggled}
+          <Icon size="M" name="ChevronDown" />
+        {:else}
+          <Icon size="M" name="ChevronRight" />
+        {/if}
+        <Detail size="S">Test</Detail>
+      </div>
+      {#if testToggled}
+        <ActionButton on:click={testDataModal.show()} fullWidth icon="Add"
+          >Add test data</ActionButton
+        >
+        <Button on:click={() => actionModal.show()} cta
+          >Save trigger and continue to action</Button
+        >
+      {/if}
+    </Layout>
+  </div>
+
+  <Modal bind:this={actionModal} width="30%">
+    <ActionModal />
+  </Modal>
+
+  <Modal bind:this={webhookModal} width="30%">
+    <CreateWebhookModal />
+  </Modal>
+
+  <Modal bind:this={testDataModal} width="30%">
+    <TestDataModal />
+  </Modal>
 </div>
 
 <style>
+  .toggle {
+    display: flex;
+    align-items: center;
+  }
+  .setup {
+    display: flex;
+    justify-content: space-between;
+  }
+  .iconAlign {
+    padding: 0 0 0 var(--spacing-m);
+    display: inline-block;
+  }
   .block {
     width: 360px;
-    padding: 20px;
-    border-radius: var(--border-radius-m);
-    transition: 0.3s all ease;
-    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
     font-size: 16px;
-    background-color: var(--spectrum-global-color-gray-50);
+    background-color: var(--spectrum-alias-background-color-secondary);
     color: var(--grey-9);
-  }
-  .block.selected,
-  .block:hover {
-    transform: scale(1.1);
-    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.15);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px 4px 4px 4px;
   }
 
-  header {
-    font-size: 16px;
-    font-weight: 600;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xs);
-  }
-  header span {
-    flex: 1 1 auto;
-  }
-  header .label {
-    font-size: 14px;
-    padding: var(--spacing-s);
-    border-radius: var(--border-radius-m);
-    background-color: var(--grey-2);
-    color: var(--grey-8);
+  .blockSection {
+    padding: var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
new file mode 100644
index 0000000000..31139fdc9e
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { ModalContent } from "@budibase/bbui"
+</script>
+
+<ModalContent
+  title="Add test data"
+  confirmText="Save"
+  showConfirmButton={true}
+  cancelText="Cancel"
+>
+  test
+</ModalContent>
diff --git a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
index 43bb2ff777..799cd930dd 100644
--- a/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
@@ -3,7 +3,7 @@
   import { database } from "stores/backend"
   import { automationStore } from "builderStore"
   import { notifications } from "@budibase/bbui"
-  import { Input, ModalContent, Layout, Body } from "@budibase/bbui"
+  import { Input, ModalContent, Layout, Body, Icon } from "@budibase/bbui"
   import analytics from "analytics"
 
   let name
@@ -18,17 +18,18 @@
       name,
       instanceId,
     })
-    const newBlock = await $automationStore.selectedAutomation.constructBlock(
+    const newBlock = $automationStore.selectedAutomation.constructBlock(
       "TRIGGER",
       triggerVal.stepId,
       triggerVal
     )
+
     automationStore.actions.addBlockToAutomation(newBlock)
     if (triggerVal.stepId === "WEBHOOK") {
       webhookModal.show()
     }
-
     notifications.success(`Automation ${name} created.`)
+
     $goto(`./${$automationStore.selectedAutomation.automation._id}`)
     analytics.captureEvent("Automation Created", { name })
   }
@@ -56,16 +57,16 @@
   <Layout noPadding>
     <Body size="S">Triggers</Body>
 
-    <div class="integration-list">
+    <div class="item-list">
       {#each triggers as [idx, trigger]}
         <div
-          class="integration hoverable"
+          class="item"
           class:selected={selectedTrigger === trigger.name}
           on:click={() => selectTrigger(trigger)}
         >
-          <div style="display: flex; margin-left: 8%">
-            <i class={trigger.icon} />
-            <span style="margin-left:5px;">
+          <div class="item-body">
+            <Icon name={trigger.icon} />
+            <span class="icon-spacing">
               <Body size="S">{trigger.name}</Body></span
             >
           </div>
@@ -76,13 +77,21 @@
 </ModalContent>
 
 <style>
-  .integration-list {
+  .icon-spacing {
+    margin-left: var(--spacing-m);
+  }
+  .item-body {
+    display: flex;
+    margin-left: var(--spacing-m);
+  }
+  .item-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     grid-gap: var(--spectrum-alias-grid-baseline);
   }
 
-  .integration {
+  .item {
+    cursor: pointer;
     display: grid;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
     padding: var(--spectrum-alias-item-padding-s);
@@ -93,8 +102,6 @@
     box-sizing: border-box;
     border-width: 2px;
   }
-
-  .integration:hover,
   .selected {
     background: var(--spectrum-alias-background-color-tertiary);
   }
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index d1c5d104d3..e571102625 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -15,6 +15,7 @@
 
   export let block
   export let webhookModal
+
   $: inputs = Object.entries(block.schema?.inputs?.properties || {})
   $: stepId = block.stepId
   $: bindings = getAvailableBindings(
@@ -55,7 +56,6 @@
 </script>
 
 <div class="fields">
-  <div class="block-label">{block.name}</div>
   {#each inputs as [key, value]}
     <div class="block-field">
       <Label>{value.title}</Label>
@@ -131,10 +131,4 @@
     display: grid;
     grid-gap: 5px;
   }
-
-  .block-label {
-    font-weight: 600;
-    font-size: var(--font-size-s);
-    color: var(--grey-7);
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/[automation]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/[automation]/_layout.svelte
deleted file mode 100644
index 3be71a1bbe..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/automate/[automation]/_layout.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import { automationStore } from "builderStore"
-  import { params } from "@roxi/routify"
-
-  if ($params.automation) {
-    const automation = $automationStore.automations.find(
-      m => m._id === $params.automation
-    )
-    if (automation) {
-      automationStore.actions.select(automation)
-    }
-  }
-</script>
-
-<slot />