update styling of flow items

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

@@ -5,13 +5,7 @@
   import TestDataModal from "./TestDataModal.svelte"
   import { flip } from "svelte/animate"
   import { fly } from "svelte/transition"
-  import {
-    Heading,
-    Icon,
-    ActionButton,
-    notifications,
-    Modal,
-  } from "@budibase/bbui"
+  import { Icon, notifications, Modal } from "@budibase/bbui"
   import { ActionStepID } from "constants/backend/automations"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
   import { automationHistoryStore } from "builderStore"
@@ -20,7 +14,8 @@
 
   let testDataModal
   let confirmDeleteDialog
-
+  let scrolling = false
+  let hasScrolled = false
   $: blocks = getBlocks(automation)
 
   const getBlocks = automation => {
@@ -32,58 +27,74 @@
     return blocks
   }
 
-  async function deleteAutomation() {
+  const deleteAutomation = async () => {
     try {
       await automationStore.actions.delete($selectedAutomation)
     } catch (error) {
       notifications.error("Error deleting automation")
     }
   }
+
+  const handleScroll = e => {
+    if (e.target.scrollTop >= 30 && !hasScrolled) {
+      scrolling = true
+      hasScrolled = true
+    } else if (e.target.scrollTop < 30 && hasScrolled) {
+      // Set scrolling back to false if scrolled back to less than 100px
+      scrolling = false
+      hasScrolled = false
+    }
+  }
 </script>
 
-<div class="canvas">
-  <div class="header">
-    <Heading size="S">{automation.name}</Heading>
-    <div class="controls">
-      <UndoRedoControl store={automationHistoryStore} />
+<div class="header" class:scrolling>
+  <div class="header-left">
+    <UndoRedoControl store={automationHistoryStore} />
+  </div>
+  <div class="controls">
+    <div class="buttons">
+      <Icon hoverable size="M" name="Play" />
+      <div
+        on:click={() => {
+          testDataModal.show()
+        }}
+      >
+        Run test
+      </div>
+    </div>
+    <div class="buttons">
       <Icon
-        on:click={confirmDeleteDialog.show}
+        disabled={!$automationStore.testResults}
         hoverable
         size="M"
-        name="DeleteOutline"
+        name="Multiple"
       />
-      <div class="buttons">
-        <ActionButton
-          on:click={() => {
-            testDataModal.show()
-          }}
-          icon="MultipleCheck"
-          size="M">Run test</ActionButton
-        >
-        <ActionButton
-          disabled={!$automationStore.testResults}
-          on:click={() => {
-            $automationStore.showTestPanel = true
-          }}
-          size="M">Test Details</ActionButton
-        >
+      <div
+        class:disabled={!$automationStore.testResults}
+        on:click={() => {
+          $automationStore.showTestPanel = true
+        }}
+      >
+        Test details
       </div>
     </div>
   </div>
 </div>
-<div class="content">
-  {#each blocks as block, idx (block.id)}
-    <div
-      class="block"
-      animate:flip={{ duration: 500 }}
-      in:fly={{ x: 500, duration: 500 }}
-      out:fly|local={{ x: 500, duration: 500 }}
-    >
-      {#if block.stepId !== ActionStepID.LOOP}
-        <FlowItem {testDataModal} {block} {idx} />
-      {/if}
-    </div>
-  {/each}
+<div class="canvas" on:scroll={handleScroll}>
+  <div class="content">
+    {#each blocks as block, idx (block.id)}
+      <div
+        class="block"
+        animate:flip={{ duration: 500 }}
+        in:fly={{ x: 500, duration: 500 }}
+        out:fly|local={{ x: 500, duration: 500 }}
+      >
+        {#if block.stepId !== ActionStepID.LOOP}
+          <FlowItem {testDataModal} {block} {idx} />
+        {/if}
+      </div>
+    {/each}
+  </div>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -103,6 +114,12 @@
 <style>
   .canvas {
     padding: var(--spacing-l) var(--spacing-xl);
+    overflow-y: auto;
+    max-height: 100%;
+  }
+
+  .header-left :global(div) {
+    border-right: none;
   }
   /* Fix for firefox not respecting bottom padding in scrolling containers */
   .canvas > *:last-child {
@@ -117,23 +134,45 @@
   }
 
   .content {
-    display: inline-block;
-    text-align: left;
+    flex-grow: 1;
+    padding: 23px 23px 80px;
+    box-sizing: border-box;
+  }
+
+  .header.scrolling {
+    background: var(--background);
+    z-index: -1;
+    border-bottom: var(--border-light);
+    background: var(--background);
   }
 
   .header {
+    z-index: 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-left: var(--spacing-l);
+    transition: background 130ms ease-out;
+    flex: 0 0 48px;
+    padding-right: var(--spacing-xl);
+  }
+  .controls {
+    display: flex;
+    gap: var(--spacing-xl);
   }
-  .controls,
   .buttons {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    gap: var(--spacing-xl);
-  }
-  .buttons {
     gap: var(--spacing-s);
   }
+
+  .buttons:hover {
+    cursor: pointer;
+  }
+
+  .disabled {
+    pointer-events: none;
+    color: var(--spectrum-global-color-gray-500) !important;
+  }
 </style>

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

@@ -16,11 +16,7 @@
   import ActionModal from "./ActionModal.svelte"
   import FlowItemHeader from "./FlowItemHeader.svelte"
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
-  import {
-    ActionStepID,
-    TriggerStepID,
-    Features,
-  } from "constants/backend/automations"
+  import { ActionStepID, TriggerStepID } from "constants/backend/automations"
   import { permissions } from "stores/backend"
 
   export let block
@@ -172,28 +168,14 @@
     {block}
     {testDataModal}
     {idx}
+    {addLooping}
+    {deleteStep}
     on:toggle={() => (open = !open)}
   />
   {#if open}
     <Divider noMargin />
     <div class="blockSection">
       <Layout noPadding gap="S">
-        {#if !isTrigger}
-          <div>
-            <div class="block-options">
-              {#if !loopBlock && (block?.features?.[Features.LOOPING] || !block.features)}
-                <ActionButton on:click={() => addLooping()} icon="Reuse">
-                  Add Looping
-                </ActionButton>
-              {/if}
-              <ActionButton
-                on:click={() => deleteStep()}
-                icon="DeleteOutline"
-              />
-            </div>
-          </div>
-        {/if}
-
         {#if isAppAction}
           <Label>Role</Label>
           <RoleSelect bind:value={role} />

packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte

@@ -91,7 +91,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
     overflow: auto;
   }
   .centered {