From 6dcaa3c4d8327020c4ee294d0475b97d6912e367 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 10 Sep 2020 07:46:01 +0100
Subject: [PATCH] Make workflow builder scrollable and improve UX around
 selecting and editing worflow blocks

---
 .../ParamInputs/RecordSelector.svelte         |  2 +-
 .../SetupPanel/WorkflowBlockSetup.svelte      | 77 ++++++++++---------
 .../WorkflowBuilder/WorkflowBuilder.svelte    | 54 ++++++++-----
 .../flowchart/FlowChart.svelte                |  7 +-
 .../WorkflowBuilder/flowchart/FlowItem.svelte | 23 +++++-
 .../[application]/workflow/_layout.svelte     |  1 -
 6 files changed, 100 insertions(+), 64 deletions(-)

diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
index ffa2a9c1b6..cc177888d1 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
@@ -15,7 +15,7 @@
   }
 </script>
 
-<div class="bb-margin-xl block-field">
+<div class="block-field">
   <select class="budibase__input" bind:value={value.model}>
     {#each $backendUiStore.models as model}
       <option value={model}>{model.name}</option>
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index edbdc2ba90..39c965cea3 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -14,44 +14,49 @@
     : []
 </script>
 
-<label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label>
-{#each workflowParams as [parameter, type]}
-  <div class="block-field">
-    <label class="label">{parameter}</label>
-    {#if Array.isArray(type)}
-      <Select bind:value={workflowBlock.args[parameter]} thin>
-        {#each type as option}
-          <option value={option}>{option}</option>
-        {/each}
-      </Select>
-    {:else if type === 'component'}
-      <ComponentSelector bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'accessLevel'}
-      <Select bind:value={workflowBlock.args[parameter]} thin secondary>
-        <option value="ADMIN">Admin</option>
-        <option value="POWER_USER">Power User</option>
-      </Select>
-    {:else if type === 'password'}
-      <Input type="password" thin bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'number'}
-      <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'longText'}
-      <TextArea
-        type="text"
-        thin
-        bind:value={workflowBlock.args[parameter]}
-        label="" />
-    {:else if type === 'model'}
-      <ModelSelector bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'record'}
-      <RecordSelector value={workflowBlock.args[parameter]} />
-    {:else if type === 'string'}
-      <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
-    {/if}
-  </div>
-{/each}
+<div class="container">
+  <!-- <label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label> -->
+  {#each workflowParams as [parameter, type]}
+    <div class="block-field">
+      <label class="label">{parameter}</label>
+      {#if Array.isArray(type)}
+        <Select bind:value={workflowBlock.args[parameter]} thin secondary>
+          {#each type as option}
+            <option value={option}>{option}</option>
+          {/each}
+        </Select>
+      {:else if type === 'component'}
+        <ComponentSelector bind:value={workflowBlock.args[parameter]} />
+      {:else if type === 'accessLevel'}
+        <Select bind:value={workflowBlock.args[parameter]} thin secondary>
+          <option value="ADMIN">Admin</option>
+          <option value="POWER_USER">Power User</option>
+        </Select>
+      {:else if type === 'password'}
+        <Input
+          type="password"
+          thin
+          bind:value={workflowBlock.args[parameter]} />
+      {:else if type === 'number'}
+        <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
+      {:else if type === 'longText'}
+        <TextArea type="text" thin bind:value={workflowBlock.args[parameter]} />
+      {:else if type === 'model'}
+        <ModelSelector bind:value={workflowBlock.args[parameter]} />
+      {:else if type === 'record'}
+        <RecordSelector value={workflowBlock.args[parameter]} />
+      {:else if type === 'string'}
+        <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
+      {/if}
+    </div>
+  {/each}
+</div>
 
 <style>
+  .container {
+    margin-top: -20px;
+  }
+
   .block-field {
     display: grid;
   }
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
index 86f873b719..cb50ce40c6 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
@@ -37,31 +37,41 @@
 
 <section>
   <Flowchart blocks={uiTree} {onSelect} />
-  <footer>
-    {#if selectedWorkflow}
-      <button
-        class:highlighted={workflowLive}
-        class:hoverable={workflowLive}
-        class="stop-button hoverable">
-        <i class="ri-stop-fill" on:click={() => setWorkflowLive(false)} />
-      </button>
-      <button
-        class:highlighted={!workflowLive}
-        class:hoverable={!workflowLive}
-        class="play-button hoverable"
-        data-cy="activate-workflow"
-        on:click={() => setWorkflowLive(true)}>
-        <i class="ri-play-fill" />
-      </button>
-    {/if}
-  </footer>
 </section>
+<footer>
+  {#if selectedWorkflow}
+    <button
+      class:highlighted={workflowLive}
+      class:hoverable={workflowLive}
+      class="stop-button hoverable">
+      <i class="ri-stop-fill" on:click={() => setWorkflowLive(false)} />
+    </button>
+    <button
+      class:highlighted={!workflowLive}
+      class:hoverable={!workflowLive}
+      class="play-button hoverable"
+      data-cy="activate-workflow"
+      on:click={() => setWorkflowLive(true)}>
+      <i class="ri-play-fill" />
+    </button>
+  {/if}
+</footer>
 
 <style>
+  section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    overflow: auto;
+    height: 100%;
+    position: relative;
+  }
+
   footer {
     position: absolute;
-    bottom: 0;
-    right: 0;
+    bottom: 20px;
+    right: 30px;
     display: flex;
     align-items: flex-end;
   }
@@ -77,7 +87,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 24px;
+  }
+  footer > button:first-child {
+    margin-right: 20px;
   }
 
   .play-button.highlighted {
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
index a1f488fecb..d055568a1a 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <section class="canvas">
-  {#each blocks as block, idx}
+  {#each blocks as block, idx (block.id)}
     <FlowItem {onSelect} {block} />
     {#if idx !== blocks.length - 1}
       <Arrow />
@@ -16,6 +16,11 @@
 </section>
 
 <style>
+  section {
+    position: absolute;
+    padding: 20px 40px;
+  }
+
   .canvas {
     display: flex;
     align-items: center;
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
index e680375833..484cb33490 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
@@ -1,15 +1,27 @@
 <script>
   import { fade } from "svelte/transition"
+  import { workflowStore } from "builderStore"
 
   export let onSelect
   export let block
+  let selected = false
 
   function selectBlock() {
     onSelect(block)
   }
+
+  $: selected =
+    $workflowStore.selectedWorkflowBlock != null &&
+    $workflowStore.selectedWorkflowBlock.id === block.id
+
+  console.log(selected)
 </script>
 
-<div transition:fade class={`${block.type} hoverable`} on:click={selectBlock}>
+<div
+  transition:fade
+  class={`${block.type} hoverable`}
+  class:selected
+  on:click={selectBlock}>
   <header>
     {#if block.type === 'TRIGGER'}
       <i class="ri-lightbulb-fill" />
@@ -32,8 +44,8 @@
   div {
     width: 320px;
     padding: 20px;
-    border-radius: 5px;
-    transition: 0.3s all;
+    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;
@@ -69,9 +81,12 @@
 
   p {
     color: inherit;
+    margin-bottom: 0;
   }
 
+  div.selected,
   div:hover {
-    transform: scale(1.05);
+    transform: scale(1.1);
+    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.15);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte
index 182abd388e..6a7d5795ed 100644
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@@ -35,7 +35,6 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 20px 40px;
   }
 
   .nav {