From d86c238d53097130d7d30ebb421642d24ea7e43b Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 13 Sep 2021 13:14:03 +0100
Subject: [PATCH] Improve test automation modal and handling of data

---
 packages/builder/assets/n8n.png               | Bin 0 -> 3078 bytes
 .../store/automation/Automation.js            |   4 +
 .../builderStore/store/automation/index.js    |  11 +-
 .../AutomationBuilder.svelte                  |   2 -
 .../FlowChart/ActionModal.svelte              |  13 +-
 .../FlowChart/FlowChart.svelte                |  20 ++-
 .../FlowChart/FlowItem.svelte                 |  40 +++---
 .../FlowChart/TestDataModal.svelte            |  69 ++++++++--
 .../SetupPanel/AutomationBlockSetup.svelte    | 126 +++++++++++-------
 .../automation/SetupPanel/RowSelector.svelte  |  50 ++++---
 .../automation/SetupPanel/SchemaSetup.svelte  |  11 +-
 .../automation/SetupPanel/SetupPanel.svelte   |   4 +-
 .../automate/[automation]/_layout.svelte      |   1 +
 .../app/[application]/automate/_layout.svelte |   3 +-
 14 files changed, 241 insertions(+), 113 deletions(-)
 create mode 100644 packages/builder/assets/n8n.png

diff --git a/packages/builder/assets/n8n.png b/packages/builder/assets/n8n.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9dad93e5a916f7af5a3648108cab859fcec4909
GIT binary patch
literal 3078
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
Ae*gdg

literal 0
HcmV?d00001

diff --git a/packages/builder/src/builderStore/store/automation/Automation.js b/packages/builder/src/builderStore/store/automation/Automation.js
index a9dce88258..dcbb747e38 100644
--- a/packages/builder/src/builderStore/store/automation/Automation.js
+++ b/packages/builder/src/builderStore/store/automation/Automation.js
@@ -13,6 +13,10 @@ export default class Automation {
     return this.automation.definition.trigger
   }
 
+  addTestData(data) {
+    this.automation.testData = data
+  }
+
   addBlock(block) {
     // Make sure to add trigger if doesn't exist
     if (!this.hasTrigger() && block.type === "TRIGGER") {
diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index f8e7db04a0..36afe6aa08 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -80,9 +80,9 @@ const automationActions = store => ({
     const { _id } = automation
     return await api.post(`/api/automations/${_id}/trigger`)
   },
-  test: async ({ automation }) => {
+  test: async ({ automation }, testData) => {
     const { _id } = automation
-    return await api.post(`/api/automations/${_id}/test`)
+    return await api.post(`/api/automations/${_id}/test`, testData)
   },
   select: automation => {
     store.update(state => {
@@ -91,6 +91,13 @@ const automationActions = store => ({
       return state
     })
   },
+  addTestDataToAutomation: data => {
+    store.update(state => {
+      state.selectedAutomation.addTestData(data)
+      console.log(state)
+      return state
+    })
+  },
   addBlockToAutomation: block => {
     store.update(state => {
       const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
index 46440a68f6..7ce77a58e3 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte
@@ -1,7 +1,6 @@
 <script>
   import { automationStore } from "builderStore"
   import Flowchart from "./FlowChart/FlowChart.svelte"
-  import BlockList from "./BlockList.svelte"
 
   $: automation = $automationStore.selectedAutomation?.automation
   function onSelect(block) {
@@ -13,6 +12,5 @@
 </script>
 
 {#if automation}
-  <BlockList />
   <Flowchart {automation} {onSelect} />
 {/if}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index 0cd4f147be..052d319181 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -4,7 +4,11 @@
   import DiscordLogo from "assets/discord.svg"
   import ZapierLogo from "assets/zapier.png"
   import IntegromatLogo from "assets/integromat.png"
-  import SlackLogo from "assets/integromat.png"
+  import SlackLogo from "assets/slack.svg"
+  import n8nlogo from "assets/n8nlogo.png"
+
+  import { database } from "stores/backend"
+  $: instanceId = $database._id
 
   let selectedAction
   let actionVal
@@ -15,6 +19,7 @@
     { name: "discord", logo: DiscordLogo },
     { name: "slack", logo: SlackLogo },
     { name: "integromat", logo: IntegromatLogo },
+    { name: "n8n", logo: n8nlogo },
   ]
   let actions = Object.entries($automationStore.blockDefinitions.ACTION)
 
@@ -39,13 +44,17 @@
     selectedAction = action.name
   }
 
-  function addBlockToAutomation() {
+  async function addBlockToAutomation() {
     const newBlock = $automationStore.selectedAutomation.constructBlock(
       "ACTION",
       actionVal.stepId,
       actionVal
     )
     automationStore.actions.addBlockToAutomation(newBlock)
+    await automationStore.actions.save({
+      instanceId,
+      automation: $automationStore.selectedAutomation?.automation,
+    })
   }
 </script>
 
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 2398d2754a..b87f1009b7 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -2,14 +2,23 @@
   import { automationStore } from "builderStore"
 
   import FlowItem from "./FlowItem.svelte"
+  import TestDataModal from "./TestDataModal.svelte"
+
   import Arrow from "./Arrow.svelte"
   import { flip } from "svelte/animate"
   import { fade, fly } from "svelte/transition"
-  import { Detail, Icon, ActionButton, notifications } from "@budibase/bbui"
+  import {
+    Detail,
+    Icon,
+    ActionButton,
+    notifications,
+    Modal,
+  } from "@budibase/bbui"
   import { database } from "stores/backend"
 
   export let automation
   export let onSelect
+  let testDataModal
   let blocks
 
   $: instanceId = $database._id
@@ -61,7 +70,7 @@
             <Icon name="DeleteOutline" />
           </span>
           <ActionButton
-            on:change={() => testAutomation()}
+            on:click={() => testDataModal.show()}
             icon="MultipleCheck"
             size="S">Run test</ActionButton
           >
@@ -75,21 +84,24 @@
         in:fade|local
         out:fly|local={{ x: 500 }}
       >
-        <FlowItem {onSelect} {block} />
+        <FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
         {#if idx !== blocks.length - 1}
           <Arrow />
         {/if}
       </div>
     {/each}
   </div>
+  <Modal bind:this={testDataModal} width="30%">
+    <TestDataModal {testAutomation} />
+  </Modal>
 </section>
 
 <style>
   .canvas {
     margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
-    padding: var(--spacing-l) 40px 0 40px;
     overflow-y: auto;
     text-align: center;
+    height: 100%;
   }
   /* Fix for firefox not respecting bottom padding in scrolling containers */
   .canvas > *:last-child {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index bc2ded8870..4a6b409380 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -12,17 +12,15 @@
   } from "@budibase/bbui"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
   import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte"
-  import TestDataModal from "./TestDataModal.svelte"
   import ResultsModal from "./ResultsModal.svelte"
-
   import ActionModal from "./ActionModal.svelte"
   import { database } from "stores/backend"
 
   export let onSelect
   export let block
+  export let testDataModal
   let selected
   let webhookModal
-  let testDataModal
   let actionModal
   let resultsModal
   let setupToggled
@@ -61,13 +59,17 @@
   class={`block ${block.type} hoverable`}
   class:selected
   on:click={() => {
-    blockComplete = false
     onSelect(block)
   }}
 >
   <div class="blockSection">
-    <div class="splitHeader">
-      <div>
+    <div
+      on:click={() => {
+        blockComplete = !blockComplete
+      }}
+      class="splitHeader"
+    >
+      <div style="display: flex;">
         <svg
           width="35px"
           height="35px"
@@ -83,13 +85,11 @@
           <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
         </div>
       </div>
-      {#if !blockComplete}
-        <span on:click={() => resultsModal.show()}>
-          <StatusLight positive={true} negative={false}
-            ><Body size="XS">View response</Body></StatusLight
-          >
-        </span>
-      {/if}
+      <span on:click={() => resultsModal.show()}>
+        <StatusLight positive={true} negative={false}
+          ><Body size="XS">View response</Body></StatusLight
+        >
+      </span>
     </div>
   </div>
   {#if !blockComplete}
@@ -98,7 +98,7 @@
       <Layout noPadding gap="S">
         <div class="splitHeader">
           <div
-            on:click={() => {
+            on:click|stopPropagation={() => {
               setupToggled = !setupToggled
             }}
             class="toggle"
@@ -118,10 +118,14 @@
         </div>
 
         {#if setupToggled}
-          <AutomationBlockSetup {block} {webhookModal} />
+          <AutomationBlockSetup
+            schemaProperties={Object.entries(block.schema.inputs.properties)}
+            {block}
+            {webhookModal}
+          />
           {#if lastStep}
             <Button on:click={() => testDataModal.show()} cta
-              >Test Automation</Button
+              >Continue and test automation</Button
             >
           {/if}
           <Button
@@ -149,10 +153,6 @@
   <Modal bind:this={webhookModal} width="30%">
     <CreateWebhookModal />
   </Modal>
-
-  <Modal bind:this={testDataModal} width="30%">
-    <TestDataModal />
-  </Modal>
 </div>
 
 <style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 9de0265dc9..8baf8b8951 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -4,23 +4,70 @@
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
   import { cloneDeep } from "lodash/fp"
 
-  let trigger = cloneDeep($automationStore.automation?.defintion.trigger)
+  let failedParse = null
+
+  // clone the trigger so we're not mutating the reference
+  let trigger = cloneDeep(
+    $automationStore.selectedAutomation.automation.definition.trigger
+  )
+
+  if (!$automationStore.selectedAutomation.automation.testData) {
+    $automationStore.selectedAutomation.automation.testData = {}
+  }
+
+  // get the outputs so we can define the fields
+  let schemaProperties = Object.entries(
+    trigger.schema?.outputs?.properties || {}
+  )
+
+  // check to see if there is existing test data in the store
+  $: testData = Object.keys(
+    $automationStore.selectedAutomation?.automation?.testData
+  ).length
+    ? $automationStore.selectedAutomation.automation.testData
+    : {}
+
+  function parseTestJSON(e) {
+    try {
+      const obj = JSON.parse(e.detail)
+      failedParse = null
+      automationStore.actions.addTestDataToAutomation(obj)
+    } catch (e) {
+      failedParse = "Invalid JSON"
+    }
+  }
 </script>
 
 <ModalContent
   title="Add test data"
   confirmText="Save"
   showConfirmButton={true}
+  onConfirm={() => {
+    automationStore.actions.trigger(
+      $automationStore.selectedAutomation,
+      testData
+    )
+  }}
   cancelText="Cancel"
 >
-  <div class="tabs-positioning">
-    <Tabs selected="Form" quiet
-      ><Tab icon="Form" title="Form"
-        ><AutomationBlockSetup block={trigger} /></Tab
-      >>
-      <Tab icon="FileJson" title="JSON">
-        <Label>JSON</Label><TextArea />
-      </Tab>
-    </Tabs>
-  </div>
+  <Tabs selected="Form" quiet
+    ><Tab icon="Form" title="Form"
+      ><AutomationBlockSetup
+        {testData}
+        {schemaProperties}
+        block={trigger}
+      /></Tab
+    >
+    <Tab icon="FileJson" title="JSON">
+      <Label>JSON</Label><TextArea
+        value={JSON.stringify(
+          $automationStore.selectedAutomation.automation.testData,
+          null,
+          2
+        )}
+        error={failedParse}
+        on:change={e => parseTestJSON(e)}
+      />
+    </Tab>
+  </Tabs>
 </ModalContent>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 7930a38274..8e96c596a7 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -13,24 +13,34 @@
   import CronBuilder from "./CronBuilder.svelte"
   import Editor from "components/integration/QueryEditor.svelte"
   import { database } from "stores/backend"
+  import { debounce } from "lodash"
+  import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
 
   export let block
   export let webhookModal
-  $: inputs = Object.entries(block.schema?.inputs?.properties || {})
+  export let testData
+  export let schemaProperties
+
   $: stepId = block.stepId
   $: bindings = getAvailableBindings(
-    block,
+    block || $automationStore.selectedBlock,
     $automationStore.selectedAutomation?.automation?.definition
   )
   $: instanceId = $database._id
 
-  async function saveOnChange(e, key) {
-    block.inputs[key] = e.detail
-    await automationStore.actions.save({
-      instanceId,
-      automation: $automationStore.selectedAutomation?.automation,
-    })
-  }
+  $: inputData = testData ? testData : block.inputs
+
+  const debouncedOnChange = debounce(async function (e, key) {
+    if (testData) {
+      testData[key] = e.detail
+    } else {
+      block.inputs[key] = e.detail
+      await automationStore.actions.save({
+        instanceId,
+        automation: $automationStore.selectedAutomation?.automation,
+      })
+    }
+  }, 800)
 
   function getAvailableBindings(block, automation) {
     if (!block || !automation) {
@@ -65,64 +75,75 @@
 </script>
 
 <div class="fields">
-  {#each inputs as [key, value]}
+  {#each schemaProperties as [key, value]}
     <div class="block-field">
-      <Label>{value.title}</Label>
+      <Label>{value.title || key}</Label>
       {#if value.type === "string" && value.enum}
         <Select
-          on:change={e => saveOnChange(e, key)}
-          value={block.inputs[key]}
+          on:change={e => debouncedOnChange(e, key)}
+          value={inputData[key]}
           options={value.enum}
           getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)}
         />
       {:else if value.customType === "password"}
         <Input
           type="password"
-          on:change={e => saveOnChange(e, key)}
-          value={block.inputs[key]}
+          on:change={e => debouncedOnChange(e, key)}
+          value={inputData[key]}
         />
       {:else if value.customType === "email"}
-        <DrawerBindableInput
-          title={value.title}
-          panel={AutomationBindingPanel}
-          type="email"
-          value={block.inputs[key]}
-          on:change={e => saveOnChange(e, key)}
-          {bindings}
-        />
+        {#if testData}
+          <ModalBindableInput
+            title={value.title}
+            value={inputData[key]}
+            panel={AutomationBindingPanel}
+            type="email"
+            on:change={e => debouncedOnChange(e, key)}
+            {bindings}
+          />
+        {:else}
+          <DrawerBindableInput
+            title={value.title}
+            panel={AutomationBindingPanel}
+            type="email"
+            value={inputData[key]}
+            on:change={e => debouncedOnChange(e, key)}
+            {bindings}
+          />
+        {/if}
       {:else if value.customType === "query"}
         <QuerySelector
-          on:change={e => saveOnChange(e, key)}
-          value={block.inputs[key]}
+          on:change={e => debouncedOnChange(e, key)}
+          value={inputData[key]}
         />
       {:else if value.customType === "cron"}
         <CronBuilder
-          on:change={e => saveOnChange(e, key)}
-          value={block.inputs[key]}
+          on:change={e => debouncedOnChange(e, key)}
+          value={inputData[key]}
         />
       {:else if value.customType === "queryParams"}
         <QueryParamSelector
-          on:change={e => saveOnChange(e, key)}
-          value={block.inputs[key]}
+          on:change={e => debouncedOnChange(e, key)}
+          value={inputData[key]}
           {bindings}
         />
       {:else if value.customType === "table"}
         <TableSelector
-          value={block.inputs[key]}
-          on:change={e => saveOnChange(e, key)}
+          value={inputData[key]}
+          on:change={e => debouncedOnChange(e, key)}
         />
       {:else if value.customType === "row"}
         <RowSelector
-          value={block.inputs[key]}
-          on:change={e => saveOnChange(e, key)}
+          value={inputData[key]}
+          on:change={e => debouncedOnChange(e, key)}
           {bindings}
         />
       {:else if value.customType === "webhookUrl"}
-        <WebhookDisplay value={block.inputs[key]} />
+        <WebhookDisplay value={inputData[key]} />
       {:else if value.customType === "triggerSchema"}
         <SchemaSetup
-          on:change={e => saveOnChange(e, key)}
-          value={block.inputs[key]}
+          on:change={e => debouncedOnChange(e, key)}
+          value={value[key]}
         />
       {:else if value.customType === "code"}
         <CodeEditorModal>
@@ -130,21 +151,32 @@
           <Editor
             mode="javascript"
             on:change={e => {
-              saveOnChange(e, key)
-              block.inputs[key] = e.detail.value
+              debouncedOnChange(e, key)
+              inputData[key] = e.detail.value
             }}
-            value={block.inputs[key]}
+            value={inputData[key]}
           />
         </CodeEditorModal>
       {:else if value.type === "string" || value.type === "number"}
-        <DrawerBindableInput
-          title={value.title}
-          panel={AutomationBindingPanel}
-          type={value.customType}
-          value={block.inputs[key]}
-          on:change={e => saveOnChange(e, key)}
-          {bindings}
-        />
+        {#if testData}
+          <ModalBindableInput
+            title={value.title}
+            value={inputData[key]}
+            panel={AutomationBindingPanel}
+            type={value.customType}
+            on:change={e => debouncedOnChange(e, key)}
+            {bindings}
+          />
+        {:else}
+          <DrawerBindableInput
+            title={value.title}
+            panel={AutomationBindingPanel}
+            type={value.customType}
+            value={inputData[key]}
+            on:change={e => debouncedOnChange(e, key)}
+            {bindings}
+          />
+        {/if}
       {/if}
     </div>
   {/each}
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 7c8ec76155..57778cfe20 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -4,18 +4,24 @@
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
+  import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
+  import { automationStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
 
-  const onChange = e => {
-    value = e.detail
-    dispatch("change", e.detail)
-  }
-
   export let value
   export let bindings
   $: table = $tables.list.find(table => table._id === value?.tableId)
   $: schemaFields = Object.entries(table?.schema ?? {})
+  const onChangeTable = e => {
+    value = { tableId: e.detail }
+    dispatch("change", value)
+  }
+
+  const onChange = (e, field) => {
+    value[field] = e.detail
+    dispatch("change", value)
+  }
 
   // Ensure any nullish tableId values get set to empty string so
   // that the select works
@@ -27,7 +33,7 @@
 </script>
 
 <Select
-  on:change={onChange}
+  on:change={onChangeTable}
   value={value.tableId}
   options={$tables.list}
   getOptionLabel={table => table.name}
@@ -40,23 +46,31 @@
       {#if !schema.autocolumn}
         {#if schemaHasOptions(schema)}
           <Select
-            on:change={onChange}
+            on:change={e => onChange(e, field)}
             label={field}
             value={value[field]}
             options={schema.constraints.inclusion}
           />
         {:else if schema.type === "string" || schema.type === "number"}
-          <DrawerBindableInput
-            panel={AutomationBindingPanel}
-            value={value[field]}
-            on:change={e => {
-              value[field] = e.detail
-              dispatch("change", e.detail)
-            }}
-            label={field}
-            type="string"
-            {bindings}
-          />
+          {#if $automationStore.selectedAutomation.automation.testData}
+            <ModalBindableInput
+              value={value[field]}
+              panel={AutomationBindingPanel}
+              label={field}
+              type={value.customType}
+              on:change={e => onChange(e, field)}
+              {bindings}
+            />
+          {:else}
+            <DrawerBindableInput
+              panel={AutomationBindingPanel}
+              value={value[field]}
+              on:change={e => onChange(e, field)}
+              label={field}
+              type="string"
+              {bindings}
+            />
+          {/if}
         {/if}
       {/if}
     {/each}
diff --git a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
index 78ec776ad5..54f5b90164 100644
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
@@ -31,15 +31,13 @@
   function addField() {
     const newValue = { ...value }
     newValue[""] = "string"
-    value = newValue
-    dispatch("change", value)
+    dispatch("change", newValue)
   }
 
   function removeField(name) {
     const newValues = { ...value }
     delete newValues[name]
-    value = newValues
-    dispatch("change", value)
+    dispatch("change", newValues)
   }
 
   const fieldNameChanged = originalName => e => {
@@ -74,7 +72,10 @@
       />
       <Select
         value={field.type}
-        on:change={e => (value[field.name] = e.target.value)}
+        on:change={e => {
+          value[field.name] = e.target.value
+          dispatch("change", value)
+        }}
         options={typeOptions}
       />
       <i
diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
index bf6c45074c..f4e2515756 100644
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@@ -10,7 +10,9 @@
   $: instanceId = $database._id
   $: automation = $automationStore.selectedAutomation?.automation
   $: automationLive = automation?.live
-
+  $: console.log(
+    $automationStore.selectedBlock.definition.trigger.schema.outputs.properties
+  )
   function setAutomationLive(live) {
     if (automationLive === live) {
       return
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/[automation]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/[automation]/_layout.svelte
index 3be71a1bbe..ad64f69078 100644
--- a/packages/builder/src/pages/builder/app/[application]/automate/[automation]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/[automation]/_layout.svelte
@@ -7,6 +7,7 @@
       m => m._id === $params.automation
     )
     if (automation) {
+      console.log(automation)
       automationStore.actions.select(automation)
     }
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
index 82554fc8aa..e94b8fb3af 100644
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@@ -4,9 +4,10 @@
   import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
   import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
   import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte"
-  $: automation = $automationStore.selectedAutomation?.automation
+  $: automation = $automationStore.automations[0]
   let modal
   let webhookModal
+  $: console.log(automation)
 </script>
 
 <!-- routify:options index=3 -->