allow new automation from button action setup

packages/builder/src/builderStore/store/automation/Automation.js

@@ -56,4 +56,13 @@ export default class Automation {
     steps.splice(stepIdx, 1)
     this.automation.definition.steps = steps
   }
+
+  constructBlock(type, stepId, blockDefinition) {
+    return {
+      ...blockDefinition,
+      inputs: blockDefinition.inputs || {},
+      stepId,
+      type,
+    }
+  }
 }

packages/builder/src/builderStore/store/automation/index.js

@@ -2,6 +2,7 @@ import { writable } from "svelte/store"
 import api from "../../api"
 import Automation from "./Automation"
 import { cloneDeep } from "lodash/fp"
+import analytics from "analytics"
 
 const automationActions = store => ({
   fetch: async () => {
@@ -93,6 +94,9 @@ const automationActions = store => ({
       state.selectedBlock = newBlock
       return state
     })
+    analytics.captureEvent("Added Automation Block", {
+      name: block.name,
+    })
   },
   deleteAutomationBlock: block => {
     store.update(state => {

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -49,16 +49,9 @@
   }
 
   function addBlockToAutomation(stepId, blockDefinition) {
-    const newBlock = {
+    const newBlock = $automationStore.selectedAutomation.constructBlock(
-      ...blockDefinition,
+      selectedTab, stepId, blockDefinition)
-      inputs: blockDefinition.inputs || {},
-      stepId,
-      type: selectedTab,
-    }
     automationStore.actions.addBlockToAutomation(newBlock)
-    analytics.captureEvent("Added Automation Block", {
-      name: blockDefinition.name,
-    })
     closePopover()
     if (stepId === "WEBHOOK") {
       webhookModal.show()

packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte

@@ -8,7 +8,6 @@
   }))
 
   let addNewName = ""
-  let addNewType = "string"
 
   function addField() {
     if (!addNewName) return
@@ -76,7 +75,6 @@
       bind:value={addNewName}
       placeholder="Enter field name" />
   </div>
-  <!--button on:click={addField}>Add</button-->
 </div>
 
 <style>
@@ -110,4 +108,8 @@
     border: 1px solid var(--grey-4);
     border-radius: 0px;
   }
+
+  select.grid-field {
+    border-left: none;
+  }
 </style>

packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte

@@ -3,6 +3,7 @@
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import actionTypes from "./actions"
   import { createEventDispatcher } from "svelte"
+  import { automationStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
   const eventTypeKey = "##eventHandlerType"
@@ -13,17 +14,11 @@
   let addActionDropdown
   let selectedAction
 
-  let draftEventHandler = { parameters: [] }
-
   $: actions = event || []
   $: selectedActionComponent =
     selectedAction &&
     actionTypes.find(t => t.name === selectedAction[eventTypeKey]).component
 
-  const updateEventHandler = (updatedHandler, index) => {
-    actions[index] = updatedHandler
-  }
-
   const deleteAction = index => {
     actions.splice(index, 1)
     actions = actions
@@ -44,9 +39,44 @@
     selectedAction = action
   }
 
-  const saveEventData = () => {
+  const saveEventData = async () => {
+    // e.g. The Trigger Automation action exposes beforeSave, so it can
+    // create any automations it needs to
+    for (let action of actions) {
+      if (action[eventTypeKey] === "Trigger Automation") {
+        await createAutomation(action.parameters)
+      }
+    }
     dispatch("change", actions)    
   }
+
+    // called by the parent modal when actions are saved
+  const createAutomation = async parameters => {
+    if (parameters.automationId || !parameters.newAutomationName) return
+
+    await automationStore.actions.create({name: parameters.newAutomationName})
+
+    const appActionDefinition = $automationStore.blockDefinitions.TRIGGER.APP
+
+    const newBlock = $automationStore.selectedAutomation.constructBlock(
+      "TRIGGER", "APP", appActionDefinition)
+
+
+    newBlock.inputs = {
+      fields: Object.entries(parameters.fields).reduce((fields, [key, value]) => {
+        fields[key] = value.type
+        return fields
+      }, {})
+    }
+
+    automationStore.actions.addBlockToAutomation(newBlock)
+
+    await automationStore.actions.save(
+      $automationStore.selectedAutomation)
+
+    parameters.automationId = $automationStore.selectedAutomation.automation._id
+    delete parameters.newAutomationName
+  }
 </script>
 
 <ModalContent title="Actions" confirmText="Save" onConfirm={saveEventData}>

packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte

@@ -1,6 +1,6 @@
 <script>
   // accepts an array of field names, and outputs an object of { FieldName: value }
-  import { DataList, Label, TextButton, Spacer, Select } from "@budibase/bbui"
+  import { DataList, Label, TextButton, Spacer, Select, Input } from "@budibase/bbui"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import { CloseCircleIcon, AddIcon } from "components/common/Icons"
@@ -14,6 +14,7 @@
 
   export let parameterFields
   export let schemaFields
+  export let fieldLabel="Column"
 
   const emptyField = () => ({ name: "", value: "" })
 
@@ -59,7 +60,7 @@
         // value and type is needed by the client, so it can parse
         // a string into a correct type
         newParameterFields[field.name] = {
-          type: schemaFields.find(f => f.name === field.name).type,
+          type: schemaFields ? schemaFields.find(f => f.name === field.name).type : "string",
           value: readableToRuntimeBinding(bindableProperties, field.value),
         }
       }
@@ -73,13 +74,17 @@
 
 {#if fields}
   {#each fields as field}
-    <Label size="m" color="dark">Column</Label>
+    <Label size="m" color="dark">{fieldLabel}</Label>
+    {#if schemaFields}
       <Select secondary bind:value={field.name} on:blur={rebuildParameters}>
         <option value="" />
         {#each schemaFields as schemaField}
           <option value={schemaField.name}>{schemaField.name}</option>
         {/each}
       </Select>
+    {:else}
+      <Input secondary bind:value={field.name} on:blur={rebuildParameters}/> 
+    {/if}
     <Label size="m" color="dark">Value</Label>
     <DataList secondary bind:value={field.value} on:blur={rebuildParameters}>
       <option value="" />
@@ -100,7 +105,7 @@
     <Spacer small />
 
     <TextButton text small blue on:click={addField}>
-      Add Field
+      Add {fieldLabel}
       <div style="height: 20px; width: 20px;">
         <AddIcon />
       </div>

packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte

@@ -1,11 +1,15 @@
 <script>
-  import { Select, Label } from "@budibase/bbui"
+  import { Select, Label, Input } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import SaveFields from "./SaveFields.svelte"
 
-  export let parameters
+  export let parameters = {}
 
-  const automationSchema = automation => {
+  let newOrExisting = parameters.automationId ? "existing" : "new"
+
+  $: automations = $automationStore.automations
+    .filter(a => a.definition.trigger?.stepId === "APP")
+    .map(automation => {
       const schema = Object.entries(
         automation.definition.trigger.inputs.fields
       ).map(([name, type]) => ({ name, type }))
@@ -15,11 +19,9 @@
         _id: automation._id,
         schema,
       }
-  }
+    })
 
-  $: automations = $automationStore.automations
+  $: hasAutomations = automations && automations.length > 0
-    .filter(a => a.definition.trigger && a.definition.trigger.stepId === "APP")
-    .map(automationSchema)
 
   $: selectedAutomation =
     parameters &&
@@ -29,30 +31,63 @@
   const onFieldsChanged = e => {
     parameters.fields = e.detail
   }
+
+  const setNew = () => {
+    newOrExisting = "new"
+    parameters.automationId = undefined
+  }
+
+  const setExisting = () => {
+    newOrExisting = "existing"
+    parameters.newAutomationName = ""
+  }
+
 </script>
 
 <div class="root">
 
-  {#if !automations || automations.length === 0}
+  <div class="radio-container" on:click={setNew}>
-    <div class="cannot-use">
+    <input 
-      You must have an automation that has an "App Action" trigger.
+      type="radio" 
+      value="new" 
+      bind:group={newOrExisting}
+      disabled={!hasAutomations}> 
+      
+    <Label disabled={!hasAutomations}>Create a new automation </Label>
+
   </div>
-  {:else}
+
+  <div class="radio-container" on:click={setExisting}>
+
+    <input 
+      type="radio" 
+      value="existing" 
+      bind:group={newOrExisting}
+      disabled={!hasAutomations}> 
+      
+    <Label disabled={!hasAutomations}>Use an existing automation </Label>
+
+  </div>
+
   <Label size="m" color="dark">Automation</Label>
-    <Select secondary bind:value={parameters.automationId}>
+
+  {#if newOrExisting=== "existing"}
+    <Select secondary bind:value={parameters.automationId} placeholder="Choose automation">
       <option value="" />
       {#each automations as automation}
         <option value={automation._id}>{automation.name}</option>
       {/each}
     </Select>
+  {:else}
+    <Input secondary bind:value={parameters.newAutomationName} placeholder="Enter automation name" />
+  {/if}
 
-    {#if selectedAutomation}
   <SaveFields
     parameterFields={parameters.fields}
-        schemaFields={selectedAutomation.schema}
+    schemaFields={newOrExisting === "existing" && selectedAutomation && selectedAutomation.schema}
+    fieldLabel="Field"
     on:fieldschanged={onFieldsChanged} />
-    {/if}
+
-  {/if}
 </div>
 
 <style>
@@ -64,16 +99,33 @@
     align-items: baseline;
   }
 
-  .root :global(> div:nth-child(2)) {
+  .root :global(> div:nth-child(4)) {
-    grid-column-start: 2;
+    grid-column: 2 / span 4;
-    grid-column-end: 6;
   }
 
-  .cannot-use {
+  .radio-container {
-    color: var(--red);
+    display: grid;
-    font-size: var(--font-size-s);
+    grid-template-columns: auto 1fr;
-    text-align: center;
-    width: 70%;
-    margin: auto;
   }
+
+  .radio-container:nth-child(1) {
+    grid-column: 1 / span 2;
+  }
+
+  .radio-container:nth-child(2) {
+    grid-column: 3 / span 3;
+  }
+
+  .radio-container :global(> label) {
+    margin-left: var(--spacing-m);
+  }
+
+  .radio-container > input {
+    margin-bottom: var(--spacing-s);
+  }
+
+  .radio-container > input:focus {
+    outline: none;
+  }
+
 </style>