Make workflow builder scrollable and improve UX around selecting and editing worflow blocks

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>

packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte

@@ -14,44 +14,49 @@
     : []
 </script>
 
-<label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label>
+<div class="container">
-{#each workflowParams as [parameter, type]}
+  <!-- <label class="selected-label">{workflowBlock.type}: {workflowBlock.name}</label> -->
-  <div class="block-field">
+  {#each workflowParams as [parameter, type]}
-    <label class="label">{parameter}</label>
+    <div class="block-field">
-    {#if Array.isArray(type)}
+      <label class="label">{parameter}</label>
-      <Select bind:value={workflowBlock.args[parameter]} thin>
+      {#if Array.isArray(type)}
-        {#each type as option}
+        <Select bind:value={workflowBlock.args[parameter]} thin secondary>
-          <option value={option}>{option}</option>
+          {#each type as option}
-        {/each}
+            <option value={option}>{option}</option>
-      </Select>
+          {/each}
-    {:else if type === 'component'}
+        </Select>
-      <ComponentSelector bind:value={workflowBlock.args[parameter]} />
+      {:else if type === 'component'}
-    {:else if type === 'accessLevel'}
+        <ComponentSelector bind:value={workflowBlock.args[parameter]} />
-      <Select bind:value={workflowBlock.args[parameter]} thin secondary>
+      {:else if type === 'accessLevel'}
-        <option value="ADMIN">Admin</option>
+        <Select bind:value={workflowBlock.args[parameter]} thin secondary>
-        <option value="POWER_USER">Power User</option>
+          <option value="ADMIN">Admin</option>
-      </Select>
+          <option value="POWER_USER">Power User</option>
-    {:else if type === 'password'}
+        </Select>
-      <Input type="password" thin bind:value={workflowBlock.args[parameter]} />
+      {:else if type === 'password'}
-    {:else if type === 'number'}
+        <Input
-      <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
+          type="password"
-    {:else if type === 'longText'}
+          thin
-      <TextArea
+          bind:value={workflowBlock.args[parameter]} />
-        type="text"
+      {:else if type === 'number'}
-        thin
+        <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
-        bind:value={workflowBlock.args[parameter]}
+      {:else if type === 'longText'}
-        label="" />
+        <TextArea type="text" thin bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'model'}
+      {:else if type === 'model'}
-      <ModelSelector bind:value={workflowBlock.args[parameter]} />
+        <ModelSelector bind:value={workflowBlock.args[parameter]} />
-    {:else if type === 'record'}
+      {:else if type === 'record'}
-      <RecordSelector value={workflowBlock.args[parameter]} />
+        <RecordSelector value={workflowBlock.args[parameter]} />
-    {:else if type === 'string'}
+      {:else if type === 'string'}
-      <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
+        <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
-    {/if}
+      {/if}
-  </div>
+    </div>
-{/each}
+  {/each}
+</div>
 
 <style>
+  .container {
+    margin-top: -20px;
+  }
+
   .block-field {
     display: grid;
   }

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;
+    bottom: 20px;
-    right: 0;
+    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 {

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;

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;
+    border-radius: var(--border-radius-m);
-    transition: 0.3s all;
+    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>

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

@@ -35,7 +35,6 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 20px 40px;
   }
 
   .nav {