From c5df68973e4511de1574254538d15809c4dc1d86 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 28 Jun 2023 15:05:46 +0100
Subject: [PATCH 1/4] update Trigger Automation button action to be more
 intuitive

---
 .../actions/TriggerAutomation.svelte          | 154 +++++-------------
 1 file changed, 44 insertions(+), 110 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
index 4c54761650..2786d9ff50 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Select, Label, Input, Checkbox, Icon } from "@budibase/bbui"
   import { automationStore } from "builderStore"
-  import SaveFields from "./SaveFields.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
 
   export let parameters = {}
@@ -11,11 +11,10 @@
     NEW: "new",
     EXISTING: "existing",
   }
-
+  $: console.log(parameters.fields)
   let automationStatus = parameters.automationId
     ? AUTOMATION_STATUS.EXISTING
     : AUTOMATION_STATUS.NEW
-
   $: {
     if (automationStatus === AUTOMATION_STATUS.NEW) {
       parameters.synchronous = false
@@ -23,6 +22,7 @@
     parameters.synchronous = automations.find(
       automation => automation._id === parameters.automationId
     )?.synchronous
+    parameters
   }
   $: automations = $automationStore.automations
     .filter(a => a.definition.trigger?.stepId === TriggerStepID.APP)
@@ -42,35 +42,16 @@
         synchronous: hasCollectBlock,
       }
     })
+
   $: hasAutomations = automations && automations.length > 0
   $: selectedAutomation = automations?.find(
     a => a._id === parameters?.automationId
   )
   $: selectedSchema = selectedAutomation?.schema
-
   $: error = parameters.timeout > 120 ? "Timeout must be less than 120s" : null
 
-  const onFieldsChanged = e => {
-    parameters.fields = Object.entries(e.detail || {}).reduce(
-      (acc, [key, value]) => {
-        acc[key.trim()] = value
-        return acc
-      },
-      {}
-    )
-  }
-
-  const setNew = () => {
-    automationStatus = AUTOMATION_STATUS.NEW
-    parameters.automationId = undefined
-    parameters.fields = {}
-  }
-
-  const setExisting = () => {
-    automationStatus = AUTOMATION_STATUS.EXISTING
-    parameters.newAutomationName = ""
-    parameters.fields = {}
-    parameters.automationId = automations[0]?._id
+  const onFieldsChanged = field => {
+    parameters.fields = { ...parameters.fields, ...field }
   }
 
   const onChange = value => {
@@ -83,30 +64,9 @@
 </script>
 
 <div class="root">
-  <div class="radios">
-    <div class="radio-container" on:click={setNew}>
-      <input
-        type="radio"
-        value={AUTOMATION_STATUS.NEW}
-        bind:group={automationStatus}
-      />
-      <Label small>Create a new automation</Label>
-    </div>
-    <div class="radio-container" on:click={hasAutomations ? setExisting : null}>
-      <input
-        type="radio"
-        value={AUTOMATION_STATUS.EXISTING}
-        bind:group={automationStatus}
-        disabled={!hasAutomations}
-      />
-      <Label small grey={!hasAutomations}>Use an existing automation</Label>
-    </div>
-  </div>
-
   <div class="params">
     <Label small>Automation</Label>
-
-    {#if automationStatus === AUTOMATION_STATUS.EXISTING}
+    <div style="width: 100%">
       <Select
         on:change={onChange}
         bind:value={parameters.automationId}
@@ -115,42 +75,47 @@
         getOptionLabel={x => x.name}
         getOptionValue={x => x._id}
       />
-    {:else}
-      <Input
-        bind:value={parameters.newAutomationName}
-        placeholder="Enter automation name"
-      />
-    {/if}
-
-    {#if parameters.synchronous}
-      <Label small />
-
+    </div>
+  </div>
+  <div class="params">
+    <!-- {#if parameters.synchronous}
       <div class="synchronous-info">
         <Icon name="Info" />
-        <div>
-          <i
-            >This automation will run synchronously as it contains a Collect
-            step</i
-          >
-        </div>
+        <div>This automation will run synchronously</div>
       </div>
-      <Label small />
+    {/if}  -->
+    {#if parameters.synchronous}
+      <Label small>Timeout</Label>
 
       <div class="timeout-width">
-        <Input
-          label="Timeout in seconds (120 max)"
-          type="number"
-          {error}
-          bind:value={parameters.timeout}
-        />
+        <Input type="number" {error} bind:value={parameters.timeout} />
       </div>
     {/if}
+  </div>
+  <div class="fields">
+    {#if selectedSchema && selectedSchema.length}
+      {#each selectedSchema as field, idx}
+        {#if idx === 0}
+          <Label small>Fields</Label>
+        {:else}
+          <Label small />
+        {/if}
+        <Input disabled value={field.name} />
+        <DrawerBindableInput
+          value={parameters.fields && parameters.fields[field.name]}
+          {bindings}
+          on:change={event => onFieldsChanged({ [field.name]: event.detail })}
+        />
+      {/each}
+    {/if}
+  </div>
+
+  <div class="param-margin">
     <Label small />
     <Checkbox
       text="Do not display default notification"
       bind:value={parameters.notificationOverride}
     />
-    <br />
     <Checkbox text="Require confirmation" bind:value={parameters.confirm} />
 
     {#if parameters.confirm}
@@ -161,18 +126,6 @@
       />
     {/if}
   </div>
-
-  <div class="fields">
-    {#key parameters.automationId}
-      <SaveFields
-        schemaFields={selectedSchema}
-        parameterFields={parameters.fields}
-        fieldLabel="Field"
-        on:change={onFieldsChanged}
-        {bindings}
-      />
-    {/key}
-  </div>
 </div>
 
 <style>
@@ -184,12 +137,15 @@
     width: 30%;
   }
 
+  .param-margin {
+    margin-top: var(--spacing-l);
+  }
+
   .params {
-    display: grid;
-    column-gap: var(--spacing-l);
-    row-gap: var(--spacing-s);
-    grid-template-columns: 60px 1fr;
+    display: flex;
+    flex-wrap: nowrap;
     align-items: center;
+    gap: 25px;
   }
 
   .synchronous-info {
@@ -202,29 +158,7 @@
     display: grid;
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
-    grid-template-columns: 60px 1fr auto 1fr auto;
+    grid-template-columns: 0.1fr 0.5fr 0.5fr;
     align-items: center;
   }
-
-  .radios,
-  .radio-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  .radios {
-    gap: var(--spacing-m);
-    margin-bottom: var(--spacing-l);
-  }
-  .radio-container {
-    gap: var(--spacing-m);
-  }
-  .radio-container :global(label) {
-    margin: 0;
-  }
-
-  input[type="radio"]:checked {
-    background: var(--blue);
-  }
 </style>

From 847684daf1692786ff6cd8c1e3c98a62850ba4da Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 28 Jun 2023 15:59:04 +0100
Subject: [PATCH 2/4] update sync automation css

---
 .../actions/TriggerAutomation.svelte            | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
index 2786d9ff50..8b3578f983 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Select, Label, Input, Checkbox, Icon } from "@budibase/bbui"
+  import { Select, Label, Input, Checkbox, Icon, Body } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
@@ -77,13 +77,16 @@
       />
     </div>
   </div>
-  <div class="params">
-    <!-- {#if parameters.synchronous}
+  <div class="fields">
+    <Label small />
+    {#if parameters.synchronous}
       <div class="synchronous-info">
-        <Icon name="Info" />
-        <div>This automation will run synchronously</div>
+        <Icon size="XS" name="Info" />
+        <Body size="XS">This automation will run synchronously</Body>
       </div>
-    {/if}  -->
+    {/if}
+  </div>
+  <div class="fields">
     {#if parameters.synchronous}
       <Label small>Timeout</Label>
 
@@ -151,6 +154,8 @@
   .synchronous-info {
     display: flex;
     gap: var(--spacing-s);
+
+    margin-top: calc(var(--spacing-m) * -1);
   }
 
   .fields {

From 8c7657a1b6cc74a4440021437c09b18c463e828b Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 28 Jun 2023 16:35:40 +0100
Subject: [PATCH 3/4] css tidy

---
 .../actions/TriggerAutomation.svelte          | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
index 8b3578f983..cb2fe717a0 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
@@ -64,8 +64,10 @@
 </script>
 
 <div class="root">
-  <div class="params">
-    <Label small>Automation</Label>
+  <div class="fields">
+    <div class:title-padding={parameters.synchronous}>
+      <Label small>Automation</Label>
+    </div>
     <div style="width: 100%">
       <Select
         on:change={onChange}
@@ -75,26 +77,22 @@
         getOptionLabel={x => x.name}
         getOptionValue={x => x._id}
       />
+      {#if parameters.synchronous}
+        <div class="synchronous-info">
+          <Icon size="XS" name="Info" />
+          <Body size="XS">This automation will run synchronously</Body>
+        </div>
+      {/if}
     </div>
   </div>
-  <div class="fields">
-    <Label small />
-    {#if parameters.synchronous}
-      <div class="synchronous-info">
-        <Icon size="XS" name="Info" />
-        <Body size="XS">This automation will run synchronously</Body>
-      </div>
-    {/if}
-  </div>
-  <div class="fields">
-    {#if parameters.synchronous}
+  {#if parameters.synchronous}
+    <div class="fields">
       <Label small>Timeout</Label>
-
       <div class="timeout-width">
         <Input type="number" {error} bind:value={parameters.timeout} />
       </div>
-    {/if}
-  </div>
+    </div>
+  {/if}
   <div class="fields">
     {#if selectedSchema && selectedSchema.length}
       {#each selectedSchema as field, idx}
@@ -144,18 +142,20 @@
     margin-top: var(--spacing-l);
   }
 
+  .title-padding {
+    padding-bottom: 20px;
+  }
+
   .params {
     display: flex;
     flex-wrap: nowrap;
-    align-items: center;
     gap: 25px;
   }
 
   .synchronous-info {
     display: flex;
     gap: var(--spacing-s);
-
-    margin-top: calc(var(--spacing-m) * -1);
+    margin-top: var(--spacing-s);
   }
 
   .fields {
@@ -163,7 +163,7 @@
     display: grid;
     column-gap: var(--spacing-l);
     row-gap: var(--spacing-s);
-    grid-template-columns: 0.1fr 0.5fr 0.5fr;
+    grid-template-columns: 15% auto auto;
     align-items: center;
   }
 </style>

From 61853e447faa3aca8d5da326c5a23fdbdbfe914a Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 28 Jun 2023 16:37:17 +0100
Subject: [PATCH 4/4] remove log

---
 .../controls/ButtonActionEditor/actions/TriggerAutomation.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
index cb2fe717a0..72d38cded0 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
@@ -11,7 +11,6 @@
     NEW: "new",
     EXISTING: "existing",
   }
-  $: console.log(parameters.fields)
   let automationStatus = parameters.automationId
     ? AUTOMATION_STATUS.EXISTING
     : AUTOMATION_STATUS.NEW