diff --git a/packages/builder/assets/discord.svg b/packages/builder/assets/discord.svg new file mode 100644 index 0000000000..3efe1ec110 --- /dev/null +++ b/packages/builder/assets/discord.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/builder/assets/integromat.png b/packages/builder/assets/integromat.png new file mode 100644 index 0000000000..1fbbe63e74 Binary files /dev/null and b/packages/builder/assets/integromat.png differ diff --git a/packages/builder/assets/slack.svg b/packages/builder/assets/slack.svg new file mode 100644 index 0000000000..c37dc5eb49 --- /dev/null +++ b/packages/builder/assets/slack.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/assets/zapier.png b/packages/builder/assets/zapier.png new file mode 100644 index 0000000000..3805331440 Binary files /dev/null and b/packages/builder/assets/zapier.png differ diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte new file mode 100644 index 0000000000..0cd4f147be --- /dev/null +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte @@ -0,0 +1,140 @@ + + + { + blockComplete = true + addBlockToAutomation() + }} +> + Select an app or event. + + Apps + +
+ {#each Object.entries(externalActions) as [idx, action]} +
selectAction(action)} + > +
+ val.name === idx).logo} + alt="zapier" + /> + + {idx.charAt(0).toUpperCase() + idx.slice(1)} +
+
+ {/each} +
+ + Actions + +
+ {#each Object.entries(internalActions) as [idx, action]} +
selectAction(action)} + > +
+ + + {action.name} +
+
+ {/each} +
+ + + + diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index d36204897e..cca59345ee 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -10,6 +10,7 @@ Button, ActionButton, notifications, + StatusLight, } from "@budibase/bbui" import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte" import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte" @@ -25,6 +26,7 @@ let testDataModal let actionModal let setupComplete + let blockComplete let testToggled $: setupToggled = !setupComplete || false @@ -83,92 +85,105 @@
onSelect(block)} + on:click={() => { + blockComplete = false + onSelect(block) + }} >
-
- - - -
- When this happens: +
+
+ + + +
+ When this happens: - {block.name.toUpperCase()} + {block?.name?.toUpperCase() || ""} +
+ {#if blockComplete} + + {/if}
- -
- -
+ {#if !blockComplete} + +
+ +
+
{ + if (!setupComplete) { + setupToggled = !setupToggled + } + }} + class="toggle" + > + {#if setupToggled} + + {:else} + + {/if} + Setup +
+
deleteStep()}> + +
+
+ + {#if setupToggled} + + {#if block.inputs[schemaKey]} + + {/if} + {/if} + +
+ + +
+
{ - if (!setupComplete) { - setupToggled = !setupToggled + if (setupComplete) { + testToggled = !testToggled } }} class="toggle" > - {#if setupToggled} + {#if testToggled} {:else} {/if} - Setup + Test
-
deleteStep()}> - -
-
- - {#if setupToggled} - - {#if block.inputs[schemaKey]} - Add test data + {/if} - {/if} - -
- - -
- -
{ - if (setupComplete) { - testToggled = !testToggled - } - }} - class="toggle" - > - {#if testToggled} - - {:else} - - {/if} - Test -
- {#if testToggled} - Add test data - - {/if} - -
+ +
+ {/if} - + @@ -185,7 +200,7 @@ display: flex; align-items: center; } - .setup { + .splitHeader { display: flex; justify-content: space-between; } 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 0d0582a34e..5123e50bc6 100644 --- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte @@ -2,7 +2,6 @@ import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui" import { automationStore } from "builderStore" import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte" - import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte" import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte" import CreateWebhookModal from "components/automation/shared/CreateWebhookModal.svelte" $: automation = $automationStore.selectedAutomation?.automation @@ -40,11 +39,6 @@
{/if}
- {#if $automationStore.selectedAutomation} -
- -
- {/if} @@ -82,19 +76,6 @@ gap: var(--spacing-l); overflow: hidden; } - - .setup { - padding: var(--spectrum-global-dimension-size-200); - border-left: var(--border-light); - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: stretch; - gap: var(--spacing-l); - background-color: var(--background); - overflow-y: auto; - } - .centered { top: 0; bottom: 0; diff --git a/packages/server/src/automations/steps/bash.js b/packages/server/src/automations/steps/bash.js index 6c44c1bbbb..2be6ad7db3 100644 --- a/packages/server/src/automations/steps/bash.js +++ b/packages/server/src/automations/steps/bash.js @@ -4,7 +4,7 @@ const { processStringSync } = require("@budibase/string-templates") exports.definition = { name: "Bash Scripting", tagline: "Execute a bash command", - icon: "ri-terminal-box-line", + icon: "JourneyEvent", description: "Run a bash script", type: "ACTION", internal: true, diff --git a/packages/server/src/automations/steps/createRow.js b/packages/server/src/automations/steps/createRow.js index e3c90fb15b..6bb5e3c42e 100644 --- a/packages/server/src/automations/steps/createRow.js +++ b/packages/server/src/automations/steps/createRow.js @@ -6,7 +6,7 @@ const usage = require("../../utilities/usageQuota") exports.definition = { name: "Create Row", tagline: "Create a {{inputs.enriched.table.name}} row", - icon: "ri-save-3-line", + icon: "SaveFloppy", description: "Add a row to your database", type: "ACTION", internal: true, diff --git a/packages/server/src/automations/steps/delay.js b/packages/server/src/automations/steps/delay.js index 899d8f8401..ad59df54c5 100644 --- a/packages/server/src/automations/steps/delay.js +++ b/packages/server/src/automations/steps/delay.js @@ -2,7 +2,7 @@ let { wait } = require("../../utilities") exports.definition = { name: "Delay", - icon: "ri-time-line", + icon: "Clock", tagline: "Delay for {{inputs.time}} milliseconds", description: "Delay the automation until an amount of time has passed", stepId: "DELAY", diff --git a/packages/server/src/automations/steps/deleteRow.js b/packages/server/src/automations/steps/deleteRow.js index 10f39d2d0c..4e014ccc20 100644 --- a/packages/server/src/automations/steps/deleteRow.js +++ b/packages/server/src/automations/steps/deleteRow.js @@ -4,7 +4,7 @@ const usage = require("../../utilities/usageQuota") exports.definition = { description: "Delete a row from your database", - icon: "ri-delete-bin-line", + icon: "DeleteOutline", name: "Delete Row", tagline: "Delete a {{inputs.enriched.table.name}} row", type: "ACTION", diff --git a/packages/server/src/automations/steps/executeQuery.js b/packages/server/src/automations/steps/executeQuery.js index d5799a8f7d..2ca0b21449 100644 --- a/packages/server/src/automations/steps/executeQuery.js +++ b/packages/server/src/automations/steps/executeQuery.js @@ -4,7 +4,7 @@ const { buildCtx } = require("./utils") exports.definition = { name: "External Data Connector", tagline: "Execute Data Connector", - icon: "ri-database-2-line", + icon: "Data", description: "Execute a query in an external data connector", type: "ACTION", stepId: "EXECUTE_QUERY", diff --git a/packages/server/src/automations/steps/executeScript.js b/packages/server/src/automations/steps/executeScript.js index 70298b9f8f..c56dfbd4e9 100644 --- a/packages/server/src/automations/steps/executeScript.js +++ b/packages/server/src/automations/steps/executeScript.js @@ -4,7 +4,7 @@ const { buildCtx } = require("./utils") exports.definition = { name: "JS Scripting", tagline: "Execute JavaScript Code", - icon: "ri-terminal-box-line", + icon: "Code", description: "Run a piece of JavaScript code in your automation", type: "ACTION", internal: true, diff --git a/packages/server/src/automations/steps/filter.js b/packages/server/src/automations/steps/filter.js index 84bdc10c1d..80d3198cba 100644 --- a/packages/server/src/automations/steps/filter.js +++ b/packages/server/src/automations/steps/filter.js @@ -18,7 +18,7 @@ exports.PrettyFilterConditions = PrettyFilterConditions exports.definition = { name: "Filter", tagline: "{{inputs.field}} {{inputs.condition}} {{inputs.value}}", - icon: "ri-git-branch-line", + icon: "Branch2", description: "Filter any automations which do not meet certain conditions", type: "LOGIC", internal: true, diff --git a/packages/server/src/automations/steps/outgoingWebhook.js b/packages/server/src/automations/steps/outgoingWebhook.js index ea0f0ce6be..6194e1052b 100644 --- a/packages/server/src/automations/steps/outgoingWebhook.js +++ b/packages/server/src/automations/steps/outgoingWebhook.js @@ -20,7 +20,7 @@ const BODY_REQUESTS = [RequestType.POST, RequestType.PUT, RequestType.PATCH] exports.definition = { name: "Outgoing webhook", tagline: "Send a {{inputs.requestMethod}} request", - icon: "ri-send-plane-line", + icon: "Send", description: "Send a request of specified method to a URL", type: "ACTION", internal: true, diff --git a/packages/server/src/automations/steps/sendSmtpEmail.js b/packages/server/src/automations/steps/sendSmtpEmail.js index 552c9b4d36..9e4b5a6a3c 100644 --- a/packages/server/src/automations/steps/sendSmtpEmail.js +++ b/packages/server/src/automations/steps/sendSmtpEmail.js @@ -3,7 +3,7 @@ const { sendSmtpEmail } = require("../../utilities/workerRequests") exports.definition = { description: "Send an email using SMTP", tagline: "Send SMTP email to {{inputs.to}}", - icon: "ri-mail-open-line", + icon: "Email", name: "Send Email (SMTP)", type: "ACTION", internal: true, diff --git a/packages/server/src/automations/steps/serverLog.js b/packages/server/src/automations/steps/serverLog.js index 82e7d073e3..b88a731d56 100644 --- a/packages/server/src/automations/steps/serverLog.js +++ b/packages/server/src/automations/steps/serverLog.js @@ -7,7 +7,7 @@ exports.definition = { name: "Backend log", tagline: "Console log a value in the backend", - icon: "ri-server-line", + icon: "Monitoring", description: "Logs the given text to the server (using console.log)", type: "ACTION", internal: true, diff --git a/packages/server/src/automations/steps/updateRow.js b/packages/server/src/automations/steps/updateRow.js index 961f75dee7..ac5eb16fcd 100644 --- a/packages/server/src/automations/steps/updateRow.js +++ b/packages/server/src/automations/steps/updateRow.js @@ -4,7 +4,7 @@ const automationUtils = require("../automationUtils") exports.definition = { name: "Update Row", tagline: "Update a {{inputs.enriched.table.name}} row", - icon: "ri-refresh-line", + icon: "Refresh", description: "Update a row in your database", type: "ACTION", internal: true,