From 387eecca0f4be0238b9b582f02c8ff2e7656367c Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 11 Jan 2022 16:54:43 +0000
Subject: [PATCH] Updating to use automation setup to use action button instead
 of custom chevron div and using the action button in the automation code
 editor so that bindings can be hidden/shown if they are taking up too much of
 screen.

---
 .../FlowChart/FlowItem.svelte                  | 18 +++++++-----------
 .../SetupPanel/AutomationBlockSetup.svelte     | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 7f379ba138..38e59419bb 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -9,6 +9,7 @@
     Modal,
     Button,
     StatusLight,
+    ActionButton,
   } from "@budibase/bbui"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
@@ -119,19 +120,13 @@
     <div class="blockSection">
       <Layout noPadding gap="S">
         <div class="splitHeader">
-          <div
-            on:click|stopPropagation={() => {
-              setupToggled = !setupToggled
-            }}
-            class="center-items"
+          <ActionButton
+            on:click={() => (setupToggled = !setupToggled)}
+            quiet
+            icon={setupToggled ? "ChevronDown" : "ChevronRight"}
           >
-            {#if setupToggled}
-              <Icon size="M" name="ChevronDown" />
-            {:else}
-              <Icon size="M" name="ChevronRight" />
-            {/if}
             <Detail size="S">Setup</Detail>
-          </div>
+          </ActionButton>
           {#if !isTrigger}
             <div on:click={() => deleteStep()}>
               <Icon name="DeleteOutline" />
@@ -187,6 +182,7 @@
   .splitHeader {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
   .iconAlign {
     padding: 0 0 0 var(--spacing-m);
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index d648b3f989..928897d6f5 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -10,6 +10,7 @@
     ActionButton,
     Drawer,
     Modal,
+    Detail,
   } from "@budibase/bbui"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
 
@@ -37,6 +38,7 @@
   let drawer
   let tempFilters = lookForFilters(schemaProperties) || []
   let fillWidth = true
+  let codeBindingOpen = false
 
   $: stepId = block.stepId
   $: bindings = getAvailableBindings(
@@ -233,7 +235,16 @@
         <SchemaSetup on:change={e => onChange(e, key)} value={inputData[key]} />
       {:else if value.customType === "code"}
         <CodeEditorModal>
-          <pre>{JSON.stringify(bindings, null, 2)}</pre>
+          <ActionButton
+            on:click={() => (codeBindingOpen = !codeBindingOpen)}
+            quiet
+            icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"}
+          >
+            <Detail size="S">Bindings</Detail>
+          </ActionButton>
+          {#if codeBindingOpen}
+            <pre>{JSON.stringify(bindings, null, 2)}</pre>
+          {/if}
           <Editor
             mode="javascript"
             on:change={e => {