From b167fd08e1b4c2f3f1abb02f0583ddc1b78ff6cd Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 8 Nov 2023 13:27:25 +0000
Subject: [PATCH 1/2] Fix issues with automation layout styling

---
 .../SetupPanel/QueryParamSelector.svelte      |  8 +-
 .../automation/SetupPanel/RowSelector.svelte  | 84 ++++++++++---------
 .../SetupPanel/RowSelectorTypes.svelte        |  1 +
 .../common/LinkedRowSelector.svelte           |  4 +-
 4 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
index 6b3433babc..e68ab1feac 100644
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -41,8 +41,8 @@
 </div>
 
 {#if parameters.length}
-  <div class="schema-fields">
-    {#each parameters as field}
+  {#each parameters as field}
+    <div class="schema-fields">
       <Label>{field.name}</Label>
       <div class="field-width">
         <DrawerBindableInput
@@ -56,8 +56,8 @@
           updateOnChange={false}
         />
       </div>
-    {/each}
-  </div>
+    </div>
+  {/each}
 {/if}
 
 <style>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 21d90944e8..e4751e0f6a 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -114,33 +114,12 @@
 </div>
 {#if schemaFields.length}
   {#each schemaFields as [field, schema]}
-    <div class="schema-fields">
-      <Label>{field}</Label>
-      <div class="field-width">
-        {#if !schema.autocolumn && schema.type !== "attachment"}
-          {#if isTestModal}
-            <RowSelectorTypes
-              {isTestModal}
-              {field}
-              {schema}
-              bindings={parsedBindings}
-              {value}
-              {onChange}
-            />
-          {:else}
-            <DrawerBindableSlot
-              fillWidth
-              title={value.title}
-              panel={AutomationBindingPanel}
-              type={schema.type}
-              {schema}
-              value={value[field]}
-              on:change={e => onChange(e, field)}
-              {bindings}
-              allowJS={true}
-              updateOnChange={false}
-              drawerLeft="260px"
-            >
+    {#if !schema.autocolumn}
+      {#if schema.type !== "attachment"}
+        <div class="schema-fields">
+          <Label>{field}</Label>
+          <div class="field-width">
+            {#if isTestModal}
               <RowSelectorTypes
                 {isTestModal}
                 {field}
@@ -149,22 +128,45 @@
                 {value}
                 {onChange}
               />
-            </DrawerBindableSlot>
-          {/if}
-        {/if}
+            {:else}
+              <DrawerBindableSlot
+                fillWidth
+                title={value.title}
+                panel={AutomationBindingPanel}
+                type={schema.type}
+                {schema}
+                value={value[field]}
+                on:change={e => onChange(e, field)}
+                {bindings}
+                allowJS={true}
+                updateOnChange={false}
+                drawerLeft="260px"
+              >
+                <RowSelectorTypes
+                  {isTestModal}
+                  {field}
+                  {schema}
+                  bindings={parsedBindings}
+                  {value}
+                  {onChange}
+                />
+              </DrawerBindableSlot>
+            {/if}
 
-        {#if isUpdateRow && schema.type === "link"}
-          <div class="checkbox-field">
-            <Checkbox
-              value={meta.fields?.[field]?.clearRelationships}
-              text={"Clear relationships if empty?"}
-              size={"S"}
-              on:change={e => onChangeSetting(e, field)}
-            />
+            {#if isUpdateRow && schema.type === "link"}
+              <div class="checkbox-field">
+                <Checkbox
+                  value={meta.fields?.[field]?.clearRelationships}
+                  text={"Clear relationships if empty?"}
+                  size={"S"}
+                  on:change={e => onChangeSetting(e, field)}
+                />
+              </div>
+            {/if}
           </div>
-        {/if}
-      </div>
-    </div>
+        </div>
+      {/if}
+    {/if}
   {/each}
 {/if}
 
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
index 373d174541..86235297ae 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
@@ -67,6 +67,7 @@
     bind:linkedRows={value[field]}
     {schema}
     on:change={e => onChange(e, field)}
+    useLabel={false}
   />
 {:else if schema.type === "string" || schema.type === "number"}
   <svelte:component
diff --git a/packages/builder/src/components/common/LinkedRowSelector.svelte b/packages/builder/src/components/common/LinkedRowSelector.svelte
index d357a0a54d..839075ba89 100644
--- a/packages/builder/src/components/common/LinkedRowSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRowSelector.svelte
@@ -7,7 +7,7 @@
 
   export let schema
   export let linkedRows = []
-
+  export let useLabel = true
   const dispatch = createEventDispatcher()
 
   let rows = []
@@ -51,7 +51,7 @@
       linkedIds = e.detail ? [e.detail] : []
       dispatch("change", linkedIds)
     }}
-    {label}
+    label={useLabel ? label : null}
     sort
   />
 {:else}

From f7fabf152d0c3e8e41562f78077eb0eaf6f92dbf Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 8 Nov 2023 13:55:34 +0000
Subject: [PATCH 2/2] css fixes

---
 .../FlowChart/FlowChart.svelte                | 15 ++--
 .../SetupPanel/QueryParamSelector.svelte      |  8 +-
 .../automation/SetupPanel/RowSelector.svelte  | 82 +++++++++----------
 3 files changed, 51 insertions(+), 54 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index a3c6a06690..54e098c9d5 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -48,15 +48,14 @@
     <UndoRedoControl store={automationHistoryStore} />
   </div>
   <div class="controls">
-    <div class="buttons">
+    <div
+      on:click={() => {
+        testDataModal.show()
+      }}
+      class="buttons"
+    >
       <Icon hoverable size="M" name="Play" />
-      <div
-        on:click={() => {
-          testDataModal.show()
-        }}
-      >
-        Run test
-      </div>
+      <div>Run test</div>
     </div>
     <div class="buttons">
       <Icon
diff --git a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
index e68ab1feac..fcf8e7fddb 100644
--- a/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
@@ -27,7 +27,7 @@
   $: if (value?.queryId == null) value = { queryId: "" }
 </script>
 
-<div class="schema-fields">
+<div class="schema-field">
   <Label>Query</Label>
   <div class="field-width">
     <Select
@@ -42,7 +42,7 @@
 
 {#if parameters.length}
   {#each parameters as field}
-    <div class="schema-fields">
+    <div class="schema-field">
       <Label>{field.name}</Label>
       <div class="field-width">
         <DrawerBindableInput
@@ -65,7 +65,7 @@
     width: 320px;
   }
 
-  .schema-fields {
+  .schema-field {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -76,7 +76,7 @@
     margin-bottom: 10px;
   }
 
-  .schema-fields :global(label) {
+  .schema-field :global(label) {
     text-transform: capitalize;
   }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index e4751e0f6a..c4a67ab025 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -114,12 +114,33 @@
 </div>
 {#if schemaFields.length}
   {#each schemaFields as [field, schema]}
-    {#if !schema.autocolumn}
-      {#if schema.type !== "attachment"}
-        <div class="schema-fields">
-          <Label>{field}</Label>
-          <div class="field-width">
-            {#if isTestModal}
+    {#if !schema.autocolumn && schema.type !== "attachment"}
+      <div class="schema-fields">
+        <Label>{field}</Label>
+        <div class="field-width">
+          {#if isTestModal}
+            <RowSelectorTypes
+              {isTestModal}
+              {field}
+              {schema}
+              bindings={parsedBindings}
+              {value}
+              {onChange}
+            />
+          {:else}
+            <DrawerBindableSlot
+              fillWidth
+              title={value.title}
+              panel={AutomationBindingPanel}
+              type={schema.type}
+              {schema}
+              value={value[field]}
+              on:change={e => onChange(e, field)}
+              {bindings}
+              allowJS={true}
+              updateOnChange={false}
+              drawerLeft="260px"
+            >
               <RowSelectorTypes
                 {isTestModal}
                 {field}
@@ -128,44 +149,21 @@
                 {value}
                 {onChange}
               />
-            {:else}
-              <DrawerBindableSlot
-                fillWidth
-                title={value.title}
-                panel={AutomationBindingPanel}
-                type={schema.type}
-                {schema}
-                value={value[field]}
-                on:change={e => onChange(e, field)}
-                {bindings}
-                allowJS={true}
-                updateOnChange={false}
-                drawerLeft="260px"
-              >
-                <RowSelectorTypes
-                  {isTestModal}
-                  {field}
-                  {schema}
-                  bindings={parsedBindings}
-                  {value}
-                  {onChange}
-                />
-              </DrawerBindableSlot>
-            {/if}
+            </DrawerBindableSlot>
+          {/if}
 
-            {#if isUpdateRow && schema.type === "link"}
-              <div class="checkbox-field">
-                <Checkbox
-                  value={meta.fields?.[field]?.clearRelationships}
-                  text={"Clear relationships if empty?"}
-                  size={"S"}
-                  on:change={e => onChangeSetting(e, field)}
-                />
-              </div>
-            {/if}
-          </div>
+          {#if isUpdateRow && schema.type === "link"}
+            <div class="checkbox-field">
+              <Checkbox
+                value={meta.fields?.[field]?.clearRelationships}
+                text={"Clear relationships if empty?"}
+                size={"S"}
+                on:change={e => onChangeSetting(e, field)}
+              />
+            </div>
+          {/if}
         </div>
-      {/if}
+      </div>
     {/if}
   {/each}
 {/if}