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] 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>