Merge pull request #6904 from Budibase/fix/automation-form-not-mapping

fixed automation app:trigger not mapping test modal form

packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte

@@ -15,16 +15,20 @@
   let trigger = {}
   let schemaProperties = {}
 
-  // clone the trigger so we're not mutating the reference
-  $: trigger = cloneDeep(
-    $automationStore.selectedAutomation.automation.definition.trigger
-  )
+  $: {
+    // clone the trigger so we're not mutating the reference
+    trigger = cloneDeep(
+      $automationStore.selectedAutomation.automation.definition.trigger
+    )
 
-  // get the outputs so we can define the fields
-  $: schemaProperties = Object.entries(trigger?.schema?.outputs?.properties)
+    // get the outputs so we can define the fields
+    let schema = Object.entries(trigger.schema?.outputs?.properties || {})
 
-  if (!$automationStore.selectedAutomation.automation.testData) {
-    $automationStore.selectedAutomation.automation.testData = {}
+    if (trigger?.event === "app:trigger") {
+      schema = [["fields", { customType: "fields" }]]
+    }
+
+    schemaProperties = schema
   }
 
   // check to see if there is existing test data in the store

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

@@ -1,6 +1,7 @@
 <script>
   import TableSelector from "./TableSelector.svelte"
   import RowSelector from "./RowSelector.svelte"
+  import FieldSelector from "./FieldSelector.svelte"
   import SchemaSetup from "./SchemaSetup.svelte"
   import {
     Button,
@@ -31,6 +32,7 @@
   import { getSchemaForTable } from "builderStore/dataBinding"
   import { Utils } from "@budibase/frontend-core"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
+  import { cloneDeep } from "lodash/fp"
 
   export let block
   export let testData
@@ -41,13 +43,25 @@
   let tempFilters = lookForFilters(schemaProperties) || []
   let fillWidth = true
   let codeBindingOpen = false
+  let inputData
 
   $: stepId = block.stepId
   $: bindings = getAvailableBindings(
     block || $automationStore.selectedBlock,
     $automationStore.selectedAutomation?.automation?.definition
   )
-  $: inputData = testData ? testData : block.inputs
+
+  $: getInputData(testData, block.inputs)
+  const getInputData = (testData, blockInputs) => {
+    let newInputData = testData || blockInputs
+
+    if (block.event === "app:trigger" && !newInputData?.fields) {
+      newInputData = cloneDeep(blockInputs)
+    }
+
+    inputData = newInputData
+  }
+
   $: tableId = inputData ? inputData.tableId : null
   $: table = tableId
     ? $tables.list.find(table => table._id === inputData.tableId)
@@ -73,15 +87,13 @@
           [key]: e.detail,
         })
         testData[key] = e.detail
-        await automationStore.actions.save(
-          $automationStore.selectedAutomation?.automation
-        )
       } else {
         block.inputs[key] = e.detail
-        await automationStore.actions.save(
-          $automationStore.selectedAutomation?.automation
-        )
       }
+
+      await automationStore.actions.save(
+        $automationStore.selectedAutomation?.automation
+      )
     } catch (error) {
       notifications.error("Error saving automation")
     }
@@ -185,11 +197,13 @@
 <div class="fields">
   {#each schemaProperties as [key, value]}
     <div class="block-field">
-      <Label
-        tooltip={value.title === "Binding / Value"
-          ? "If using the String input type, please use a comma or newline separated string"
-          : null}>{value.title || (key === "row" ? "Table" : key)}</Label
-      >
+      {#if key !== "fields"}
+        <Label
+          tooltip={value.title === "Binding / Value"
+            ? "If using the String input type, please use a comma or newline separated string"
+            : null}>{value.title || (key === "row" ? "Table" : key)}</Label
+        >
+      {/if}
       {#if value.type === "string" && value.enum}
         <Select
           on:change={e => onChange(e, key)}
@@ -280,6 +294,14 @@
           on:change={e => onChange(e, key)}
           value={inputData[key]}
         />
+      {:else if value.customType === "fields"}
+        <FieldSelector
+          {block}
+          value={inputData[key]}
+          on:change={e => onChange(e, key)}
+          {bindings}
+          {isTestModal}
+        />
       {:else if value.customType === "triggerSchema"}
         <SchemaSetup on:change={e => onChange(e, key)} value={inputData[key]} />
       {:else if value.customType === "code"}

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

@@ -0,0 +1,114 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import RowSelectorTypes from "./RowSelectorTypes.svelte"
+
+  const dispatch = createEventDispatcher()
+
+  export let value
+  export let bindings
+  export let block
+  export let isTestModal
+
+  let schemaFields
+
+  $: {
+    let fields = {}
+
+    for (const [key, type] of Object.entries(block?.inputs?.fields)) {
+      fields = {
+        ...fields,
+        [key]: {
+          type: type,
+          name: key,
+          fieldName: key,
+          constraints: { type: type },
+        },
+      }
+
+      if (value[key] === type) {
+        value[key] = INITIAL_VALUES[type.toUpperCase()]
+      }
+    }
+
+    schemaFields = Object.entries(fields)
+  }
+
+  const INITIAL_VALUES = {
+    BOOLEAN: null,
+    NUMBER: null,
+    DATETIME: null,
+    STRING: "",
+    OPTIONS: [],
+    ARRAY: [],
+  }
+
+  const coerce = (value, type) => {
+    const re = new RegExp(/{{([^{].*?)}}/g)
+    if (re.test(value)) {
+      return value
+    }
+
+    if (type === "boolean") {
+      if (typeof value === "boolean") {
+        return value
+      }
+      return value === "true"
+    }
+    if (type === "number") {
+      if (typeof value === "number") {
+        return value
+      }
+      return Number(value)
+    }
+    if (type === "options") {
+      return [value]
+    }
+    if (type === "array") {
+      if (Array.isArray(value)) {
+        return value
+      }
+      return value.split(",").map(x => x.trim())
+    }
+
+    if (type === "link") {
+      if (Array.isArray(value)) {
+        return value
+      }
+
+      return [value]
+    }
+
+    return value
+  }
+
+  const onChange = (e, field, type) => {
+    value[field] = coerce(e.detail, type)
+    dispatch("change", value)
+  }
+</script>
+
+{#if schemaFields.length && isTestModal}
+  <div class="schema-fields">
+    {#each schemaFields as [field, schema]}
+      <RowSelectorTypes
+        {isTestModal}
+        {field}
+        {schema}
+        {bindings}
+        {value}
+        {onChange}
+      />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .schema-fields {
+    display: grid;
+    grid-gap: var(--spacing-s);
+    margin-top: var(--spacing-s);
+  }
+  .schema-fields :global(label) {
+    text-transform: capitalize;
+  }
+</style>