From 7ed273e15897762d29af772fbbe11e0030a3e623 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Nov 2023 10:04:49 +0000
Subject: [PATCH 01/11] expand block when header is clicked

---
 .../FlowChart/FlowItemHeader.svelte              | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index 3c9e1a13b1..a935d5e3dd 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -97,6 +97,7 @@
   class:typing={typing && !automationNameError}
   class:typing-error={automationNameError}
   class="blockSection"
+  on:click={() => dispatch("toggle")}
 >
   <div class="splitHeader">
     <div class="center-items">
@@ -138,7 +139,20 @@
             on:input={e => {
               automationName = e.target.value.trim()
             }}
-            on:click={startTyping}
+            on:click={e => {
+              e.stopPropagation()
+              startTyping()
+            }}
+            on:keydown={async e => {
+              if (e.key === "Enter") {
+                typing = false
+                if (automationNameError) {
+                  automationName = stepNames[block.id] || block?.name
+                } else {
+                  await saveName()
+                }
+              }
+            }}
             on:blur={async () => {
               typing = false
               if (automationNameError) {

From 19f527d620283631a47ebb229db39f2e848f8c84 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 21 Nov 2023 13:46:34 +0000
Subject: [PATCH 02/11] fix disabled state interfering with column name input

---
 .../DataTable/modals/CreateEditColumn.svelte  | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 4eb1f962f0..309584e4c3 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -149,7 +149,7 @@
   }
   const initialiseField = (field, savingColumn) => {
     isCreating = !field
-
+    console.log("triggered")
     if (field && !savingColumn) {
       editableColumn = cloneDeep(field)
       originalName = editableColumn.name ? editableColumn.name + "" : null
@@ -171,7 +171,8 @@
           relationshipPart2 = part2
         }
       }
-    } else if (!savingColumn) {
+    }
+    if (!field && !savingColumn) {
       let highestNumber = 0
       Object.keys(table.schema).forEach(columnName => {
         const columnNumber = extractColumnNumber(columnName)
@@ -182,9 +183,9 @@
       })
 
       if (highestNumber >= 1) {
-        editableColumn.name = `Column 0${highestNumber + 1}`
+        //editableColumn.name = `Column 0${highestNumber + 1}`
       } else {
-        editableColumn.name = "Column 01"
+        //editableColumn.name = "Column 01"
       }
     }
 
@@ -535,13 +536,22 @@
   onMount(() => {
     mounted = true
   })
+  $: console.log(editableColumn)
 </script>
 
 <Layout noPadding gap="S">
   {#if mounted}
     <Input
+      value={editableColumn.name}
       autofocus
-      bind:value={editableColumn.name}
+      on:input={e => {
+        if (
+          !uneditable &&
+          !(linkEditDisabled && editableColumn.type === LINK_TYPE)
+        ) {
+          editableColumn.name = e.target.value
+        }
+      }}
       disabled={uneditable ||
         (linkEditDisabled && editableColumn.type === LINK_TYPE)}
       error={errors?.name}

From b1d4a572e781354cb5583032889008da74ff0f82 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Nov 2023 11:11:30 +0000
Subject: [PATCH 03/11] small ui fixes

---
 .../AutomationBuilder/FlowChart/FlowChart.svelte      |  9 ++-------
 .../AutomationBuilder/FlowChart/FlowItemHeader.svelte | 11 +++++++++--
 .../app/[application]/automation/_layout.svelte       |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 54e098c9d5..0813553a22 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -54,16 +54,11 @@
       }}
       class="buttons"
     >
-      <Icon hoverable size="M" name="Play" />
+      <Icon size="M" name="Play" />
       <div>Run test</div>
     </div>
     <div class="buttons">
-      <Icon
-        disabled={!$automationStore.testResults}
-        hoverable
-        size="M"
-        name="Multiple"
-      />
+      <Icon disabled={!$automationStore.testResults} size="M" name="Multiple" />
       <div
         class:disabled={!$automationStore.testResults}
         on:click={() => {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index a935d5e3dd..5ddba31bb8 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -182,7 +182,11 @@
             </StatusLight>
           </div>
           <Icon
-            on:click={() => dispatch("toggle")}
+            e.stopPropagation()
+            on:click={e => {
+              e.stopPropagation()
+              dispatch("toggle")
+            }}
             hoverable
             name={open ? "ChevronUp" : "ChevronDown"}
           />
@@ -209,7 +213,10 @@
         {/if}
         {#if !showTestStatus}
           <Icon
-            on:click={() => dispatch("toggle")}
+            on:click={e => {
+              e.stopPropagation()
+              dispatch("toggle")
+            }}
             hoverable
             name={open ? "ChevronUp" : "ChevronDown"}
           />
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index dd18dbba82..dd70a13371 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -111,7 +111,7 @@
   }
 
   .setup {
-    padding-top: var(--spectrum-global-dimension-size-200);
+    padding-top: 9px;
     border-left: var(--border-light);
     display: flex;
     flex-direction: column;

From 17d02af66867844734f2c1c383535104dd537ce3 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Nov 2023 11:11:59 +0000
Subject: [PATCH 04/11] update run test modal

---
 .../FlowChart/TestDataModal.svelte            | 79 ++++++++++++-------
 1 file changed, 50 insertions(+), 29 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 5c97d77ae8..13db389a2e 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -6,6 +6,7 @@
     TextArea,
     Label,
     notifications,
+    ActionButton,
   } from "@budibase/bbui"
   import { automationStore, selectedAutomation } from "builderStore"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
@@ -55,50 +56,70 @@
       notifications.error(error)
     }
   }
+
+  const toggle = () => {
+    selectedValues = !selectedValues
+    selectedJSON = !selectedJSON
+    console.log(selectedJSON)
+  }
+  let selectedValues = true
+  let selectedJSON = false
 </script>
 
 <ModalContent
   title="Add test data"
-  confirmText="Test"
-  size="M"
+  confirmText="TeRun testst"
+  size="L"
   showConfirmButton={true}
   disabled={isError}
   onConfirm={testAutomation}
   cancelText="Cancel"
 >
-  <Tabs selected="Form" quiet>
-    <Tab icon="Form" title="Form">
-      <div class="tab-content-padding">
-        <AutomationBlockSetup
-          {testData}
-          {schemaProperties}
-          isTestModal
-          block={trigger}
-        />
-      </div></Tab
-    >
-    <Tab icon="FileJson" title="JSON">
-      <div class="tab-content-padding">
-        <Label>JSON</Label>
-        <div class="text-area-container">
-          <TextArea
-            value={JSON.stringify($selectedAutomation.testData, null, 2)}
-            error={failedParse}
-            on:change={e => parseTestJSON(e)}
-          />
-        </div>
-      </div>
-    </Tab>
-  </Tabs>
+  <div class="size">
+    <div class="options">
+      <ActionButton quiet selected={selectedValues} on:click={toggle}
+        >Use values</ActionButton
+      >
+      <ActionButton quiet selected={selectedJSON} on:click={toggle}
+        >Use JSON</ActionButton
+      >
+    </div>
+  </div>
+
+  {#if selectedValues}
+    <div class="tab-content-padding">
+      <AutomationBlockSetup
+        {testData}
+        {schemaProperties}
+        isTestModal
+        block={trigger}
+      />
+    </div>
+  {/if}
+  {#if selectedJSON}
+    <div class="text-area-container">
+      <TextArea
+        value={JSON.stringify($selectedAutomation.testData, null, 2)}
+        error={failedParse}
+        on:change={e => parseTestJSON(e)}
+      />
+    </div>
+  {/if}
 </ModalContent>
 
 <style>
   .text-area-container :global(textarea) {
-    min-height: 200px;
-    height: 200px;
+    min-height: 300px;
+    height: 300px;
   }
 
   .tab-content-padding {
-    padding: 0 var(--spacing-xl);
+    padding: 0 var(--spacing-s);
+  }
+
+  .options {
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
 </style>

From 82438ab75fb0d808d97a56f03231e0028aa10a16 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Nov 2023 12:18:43 +0000
Subject: [PATCH 05/11] adjusting automatiom side panel

---
 .../AutomationPanel/AutomationPanel.svelte    | 28 +++++++++++++++----
 .../src/components/design/Panel.svelte        | 11 ++++++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index fc52b7323a..bb03303665 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,20 +1,38 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, Button, Layout } from "@budibase/bbui"
+  import { Modal, Button, Layout, Icon } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
 
   export let modal
   export let webhookModal
 </script>
 
-<Panel title="Automations" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button cta on:click={modal.show}>Add automation</Button>
-  </Layout>
+<Panel title="Automations" borderRight noHeaderBorder titleCSS={false}>
+  <span class="panel-title-content" slot="panel-title-content">
+    <div class="header">
+      <div>Automations</div>
+      <div on:click={modal.show} class="spacing">
+        <Icon name="Add" />
+      </div>
+    </div>
+  </span>
   <AutomationList />
 </Panel>
 
 <Modal bind:this={modal}>
   <CreateAutomationModal {webhookModal} />
 </Modal>
+
+<style>
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-m);
+  }
+
+  .spacing {
+    margin-left: 130px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 3d5938c174..07ec354ae6 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -14,7 +14,8 @@
   export let wide = false
   export let extraWide = false
   export let closeButtonIcon = "Close"
-
+  export let noHeaderBorder = false
+  export let titleCSS = true
   $: customHeaderContent = $$slots["panel-header-content"]
   $: customTitleContent = $$slots["panel-title-content"]
 </script>
@@ -26,14 +27,14 @@
   class:borderLeft
   class:borderRight
 >
-  <div class="header" class:custom={customHeaderContent}>
+  <div class="header" class:noHeaderBorder class:custom={customHeaderContent}>
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
     {/if}
     {#if icon}
       <Icon name={icon} />
     {/if}
-    <div class="title">
+    <div class:title={titleCSS}>
       {#if customTitleContent}
         <slot name="panel-title-content" />
       {:else}
@@ -97,6 +98,10 @@
     border-bottom: var(--border-light);
     gap: var(--spacing-m);
   }
+
+  .noHeaderBorder {
+    border-bottom: none !important;
+  }
   .title {
     flex: 1 1 auto;
     width: 0;

From 77ab89e95e33c470c522dfa0b3034b0c219cf8d4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Nov 2023 12:21:48 +0000
Subject: [PATCH 06/11] type

---
 .../automation/AutomationBuilder/FlowChart/TestDataModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 13db389a2e..71816a92c3 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -68,7 +68,7 @@
 
 <ModalContent
   title="Add test data"
-  confirmText="TeRun testst"
+  confirmText="Run test"
   size="L"
   showConfirmButton={true}
   disabled={isError}

From c6c0ca33d04230938f9b214c612915e3df1f21ec Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 27 Nov 2023 10:20:10 +0000
Subject: [PATCH 07/11] hover state of add icon

---
 .../automation/AutomationPanel/AutomationPanel.svelte        | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index bb03303665..e16d8f6a92 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -12,7 +12,7 @@
   <span class="panel-title-content" slot="panel-title-content">
     <div class="header">
       <div>Automations</div>
-      <div on:click={modal.show} class="spacing">
+      <div on:click={modal.show} class="add-automation-button">
         <Icon name="Add" />
       </div>
     </div>
@@ -32,7 +32,8 @@
     gap: var(--spacing-m);
   }
 
-  .spacing {
+  .add-automation-button {
     margin-left: 130px;
+    cursor: pointer;
   }
 </style>

From 45ab9a54be408126f1945a7d4fa0d42299c41295 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 27 Nov 2023 10:40:20 +0000
Subject: [PATCH 08/11] lint

---
 .../AutomationBuilder/FlowChart/TestDataModal.svelte           | 3 ---
 .../automation/AutomationPanel/AutomationPanel.svelte          | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 71816a92c3..00e5cc6218 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -1,10 +1,7 @@
 <script>
   import {
     ModalContent,
-    Tabs,
-    Tab,
     TextArea,
-    Label,
     notifications,
     ActionButton,
   } from "@budibase/bbui"
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index e16d8f6a92..aa40d77397 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, Button, Layout, Icon } from "@budibase/bbui"
+  import { Modal, Icon } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
 
   export let modal

From 88d575d2f011105a5b6b05137e961b60058c44a1 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 28 Nov 2023 14:07:17 +0000
Subject: [PATCH 09/11] removing logging

---
 .../backend/DataTable/modals/CreateEditColumn.svelte      | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 309584e4c3..929236ccc0 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -149,7 +149,6 @@
   }
   const initialiseField = (field, savingColumn) => {
     isCreating = !field
-    console.log("triggered")
     if (field && !savingColumn) {
       editableColumn = cloneDeep(field)
       originalName = editableColumn.name ? editableColumn.name + "" : null
@@ -172,7 +171,7 @@
         }
       }
     }
-    if (!field && !savingColumn) {
+    if (!savingColumn) {
       let highestNumber = 0
       Object.keys(table.schema).forEach(columnName => {
         const columnNumber = extractColumnNumber(columnName)
@@ -183,9 +182,9 @@
       })
 
       if (highestNumber >= 1) {
-        //editableColumn.name = `Column 0${highestNumber + 1}`
+        editableColumn.name = `Column 0${highestNumber + 1}`
       } else {
-        //editableColumn.name = "Column 01"
+        editableColumn.name = "Column 01"
       }
     }
 
@@ -536,7 +535,6 @@
   onMount(() => {
     mounted = true
   })
-  $: console.log(editableColumn)
 </script>
 
 <Layout noPadding gap="S">

From 96e9f46d7c169253c3d95224e4c693bde53ce8fe Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 4 Dec 2023 14:21:35 +0000
Subject: [PATCH 10/11] pr comments

---
 .../AutomationBuilder/FlowChart/TestDataModal.svelte           | 1 -
 .../components/automation/AutomationBuilder/TestPanel.svelte   | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 00e5cc6218..76def72bf6 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -57,7 +57,6 @@
   const toggle = () => {
     selectedValues = !selectedValues
     selectedJSON = !selectedJSON
-    console.log(selectedJSON)
   }
   let selectedValues = true
   let selectedJSON = false
diff --git a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
index c2626fb3c2..88bbef6bd7 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
@@ -9,7 +9,7 @@
 <div class="title">
   <div class="title-text">
     <Icon name="MultipleCheck" />
-    <div style="padding-left: var(--spacing-l)">Test Details</div>
+    <div style="padding-left: var(--spacing-l); ">Test Details</div>
   </div>
   <div style="padding-right: var(--spacing-xl)">
     <Icon
@@ -40,6 +40,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    padding-top: var(--spacing-s);
   }
 
   .title :global(h1) {

From 442d0853d3a9f808b6d5dfb84e467939a93f753e Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 5 Dec 2023 14:37:49 +0000
Subject: [PATCH 11/11] fix plus icon colour and hover

---
 .../automation/AutomationPanel/AutomationPanel.svelte        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index aa40d77397..f01ba6ba4a 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -34,6 +34,11 @@
 
   .add-automation-button {
     margin-left: 130px;
+    color: var(--grey-7);
     cursor: pointer;
   }
+
+  .add-automation-button:hover {
+    color: var(--ink);
+  }
 </style>