Require required schema fields before saving

5 years ago · d0b3db07a6
8 changed files with 57 additions and 40 deletions
--- 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
    })
  },
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js
+++ 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 },
+}
+  
--- 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"
    >
      <div style="display: flex;">
-        <svg
-          width="35px"
-          height="35px"
-          class="spectrum-Icon"
-          style="color:grey;"
-          focusable="false"
-        >
-          <use xlink:href="#spectrum-icon-18-{block.icon}" />
-        </svg>
+        {#if externalActions[block.stepId]}
+          <img
+            alt={externalActions[block.stepId].name}
+            width="35px"
+            height="35px"
+            src={externalActions[block.stepId].icon}
+          />
+        {:else}
+          <svg
+            width="35px"
+            height="35px"
+            class="spectrum-Icon"
+            style="color:grey;"
+            focusable="false"
+          >
+            <use xlink:href="#spectrum-icon-18-{block.icon}" />
+          </svg>
+        {/if}
        <div class="iconAlign">
          <Body size="XS">When this happens:</Body>

--- 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 @@
  <Tabs selected="Form" quiet
    ><Tab icon="Form" title="Form"
      ><AutomationBlockSetup
-        {testData}
+        bind:testData
        {schemaProperties}
        block={trigger}
      /></Tab
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@ -30,7 +30,7 @@

  $: inputData = testData ? testData : block.inputs

-  const debouncedOnChange = debounce(async function (e, key) {
+  async function onChange(e, key) {
    if (testData) {
      testData[key] = e.detail
    } else {
@ -40,7 +40,7 @@
        automation: $automationStore.selectedAutomation?.automation,
      })
    }
-  }, 800)
+  }

  function getAvailableBindings(block, automation) {
    if (!block || !automation) {
@ -80,7 +80,7 @@
      <Label>{value.title || key}</Label>
      {#if value.type === "string" && value.enum}
        <Select
-          on:change={e => debouncedOnChange(e, key)}
+          on:change={e => onChange(e, key)}
          value={inputData[key]}
          options={value.enum}
          getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)}
@ -88,7 +88,7 @@
      {:else if value.customType === "password"}
        <Input
          type="password"
-          on:change={e => 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"}
        <QuerySelector
-          on:change={e => debouncedOnChange(e, key)}
+          on:change={e => onChange(e, key)}
          value={inputData[key]}
        />
      {:else if value.customType === "cron"}
-        <CronBuilder
-          on:change={e => debouncedOnChange(e, key)}
-          value={inputData[key]}
-        />
+        <CronBuilder on:change={e => onChange(e, key)} value={inputData[key]} />
      {:else if value.customType === "queryParams"}
        <QueryParamSelector
-          on:change={e => debouncedOnChange(e, key)}
+          on:change={e => onChange(e, key)}
          value={inputData[key]}
          {bindings}
        />
      {:else if value.customType === "table"}
        <TableSelector
          value={inputData[key]}
-          on:change={e => debouncedOnChange(e, key)}
+          on:change={e => onChange(e, key)}
        />
      {:else if value.customType === "row"}
        <RowSelector
          value={inputData[key]}
-          on:change={e => debouncedOnChange(e, key)}
+          on:change={debounce(e => onChange(e, key), 800)}
          {bindings}
        />
      {:else if value.customType === "webhookUrl"}
        <WebhookDisplay value={inputData[key]} />
      {:else if value.customType === "triggerSchema"}
-        <SchemaSetup
-          on:change={e => debouncedOnChange(e, key)}
-          value={value[key]}
-        />
+        <SchemaSetup on:change={e => onChange(e, key)} value={value[key]} />
      {:else if value.customType === "code"}
        <CodeEditorModal>
          <pre>{JSON.stringify(bindings, null, 2)}</pre>
          <Editor
            mode="javascript"
            on:change={e => {
-              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}
--- 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
--- 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)
    }
  }
--- 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)
 </script>

 <!-- routify:options index=3 -->