From d0b3db07a61a12e7d045e90b6e259f18182fbbbd Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Mon, 13 Sep 2021 15:50:46 +0100 Subject: [PATCH] Require required schema fields before saving --- .../builderStore/store/automation/index.js | 1 - .../FlowChart/ExternalActions.js | 14 ++++++++ .../FlowChart/FlowItem.svelte | 28 ++++++++++----- .../FlowChart/TestDataModal.svelte | 13 ++++--- .../SetupPanel/AutomationBlockSetup.svelte | 36 ++++++++----------- .../automation/SetupPanel/SetupPanel.svelte | 3 -- .../automate/[automation]/_layout.svelte | 1 - .../app/[application]/automate/_layout.svelte | 1 - 8 files changed, 57 insertions(+), 40 deletions(-) create mode 100644 packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js index 36afe6aa08..36198821de 100644 --- a/packages/builder/src/builderStore/store/automation/index.js +++ b/packages/builder/src/builderStore/store/automation/index.js @@ -94,7 +94,6 @@ const automationActions = store => ({ addTestDataToAutomation: data => { store.update(state => { state.selectedAutomation.addTestData(data) - console.log(state) return state }) }, diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js new file mode 100644 index 0000000000..20fe7e3ffe --- /dev/null +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js @@ -0,0 +1,14 @@ +import DiscordLogo from "assets/discord.svg" +import ZapierLogo from "assets/zapier.png" +import IntegromatLogo from "assets/integromat.png" +import SlackLogo from "assets/slack.svg" +import n8nlogo from "assets/n8nlogo.png" + +export const externalActions = { + zapier: { name: "zapier", icon: ZapierLogo }, + discord: { name: "discord", icon: DiscordLogo }, + slack: { name: "slack", icon: SlackLogo }, + integromat: { name: "integromat", icon: IntegromatLogo }, + n8n:{ name: "n8n", icon: n8nlogo }, +} + diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index 4a6b409380..d12a3c3299 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -15,6 +15,7 @@ import ResultsModal from "./ResultsModal.svelte" import ActionModal from "./ActionModal.svelte" import { database } from "stores/backend" + import { externalActions } from "./ExternalActions" export let onSelect export let block @@ -70,15 +71,24 @@ class="splitHeader" >
- - - + {#if externalActions[block.stepId]} + {externalActions[block.stepId].name} + {:else} + + + + {/if}
When this happens: diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte index 8baf8b8951..7227438516 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte @@ -16,9 +16,7 @@ } // get the outputs so we can define the fields - let schemaProperties = Object.entries( - trigger.schema?.outputs?.properties || {} - ) + let schemaProperties = Object.entries(trigger.schema.outputs.properties || {}) // check to see if there is existing test data in the store $: testData = Object.keys( @@ -27,6 +25,11 @@ ? $automationStore.selectedAutomation.automation.testData : {} + // Checj the schema to see if required fields have been entered + $: isError = !trigger.schema.outputs.required.every( + required => testData[required] + ) + function parseTestJSON(e) { try { const obj = JSON.parse(e.detail) @@ -42,7 +45,9 @@ title="Add test data" confirmText="Save" showConfirmButton={true} + disabled={isError} onConfirm={() => { + automationStore.actions.addTestDataToAutomation(testData) automationStore.actions.trigger( $automationStore.selectedAutomation, testData @@ -53,7 +58,7 @@ {value.title || key} {#if value.type === "string" && value.enum} debouncedOnChange(e, key)} + on:change={e => onChange(e, key)} value={inputData[key]} /> {:else if value.customType === "email"} @@ -98,7 +98,7 @@ value={inputData[key]} panel={AutomationBindingPanel} type="email" - on:change={e => debouncedOnChange(e, key)} + on:change={e => onChange(e, key)} {bindings} /> {:else} @@ -107,51 +107,45 @@ panel={AutomationBindingPanel} type="email" value={inputData[key]} - on:change={e => debouncedOnChange(e, key)} + on:change={e => onChange(e, key)} {bindings} /> {/if} {:else if value.customType === "query"} debouncedOnChange(e, key)} + on:change={e => onChange(e, key)} value={inputData[key]} /> {:else if value.customType === "cron"} - debouncedOnChange(e, key)} - value={inputData[key]} - /> + onChange(e, key)} value={inputData[key]} /> {:else if value.customType === "queryParams"} debouncedOnChange(e, key)} + on:change={e => onChange(e, key)} value={inputData[key]} {bindings} /> {:else if value.customType === "table"} debouncedOnChange(e, key)} + on:change={e => onChange(e, key)} /> {:else if value.customType === "row"} debouncedOnChange(e, key)} + on:change={debounce(e => onChange(e, key), 800)} {bindings} /> {:else if value.customType === "webhookUrl"} {:else if value.customType === "triggerSchema"} - debouncedOnChange(e, key)} - value={value[key]} - /> + onChange(e, key)} value={value[key]} /> {:else if value.customType === "code"} 
{JSON.stringify(bindings, null, 2)}
{ - debouncedOnChange(e, key) + onChange(e, key) inputData[key] = e.detail.value }} value={inputData[key]} @@ -164,7 +158,7 @@ value={inputData[key]} panel={AutomationBindingPanel} type={value.customType} - on:change={e => debouncedOnChange(e, key)} + on:change={e => onChange(e, key)} {bindings} /> {:else} @@ -173,7 +167,7 @@ panel={AutomationBindingPanel} type={value.customType} value={inputData[key]} - on:change={e => debouncedOnChange(e, key)} + on:change={e => onChange(e, key)} {bindings} /> {/if} diff --git a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte index f4e2515756..b28ead272d 100644 --- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte +++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte @@ -10,9 +10,6 @@ $: 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 ad64f69078..3be71a1bbe 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,7 +7,6 @@ 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 e94b8fb3af..68b354217c 100644 --- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte @@ -7,7 +7,6 @@ $: automation = $automationStore.automations[0] let modal let webhookModal - $: console.log(automation)