diff --git a/lerna.json b/lerna.json index dd7190c4b..a1b8faab3 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "0.9.125-alpha.7", + "version": "0.9.125-alpha.11", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/auth/package.json b/packages/auth/package.json index ec7565163..f99ac5c90 100644 --- a/packages/auth/package.json +++ b/packages/auth/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/auth", - "version": "0.9.125-alpha.7", + "version": "0.9.125-alpha.11", "description": "Authentication middlewares for budibase builder and apps", "main": "src/index.js", "author": "Budibase", diff --git a/packages/auth/src/cache/user.js b/packages/auth/src/cache/user.js index 669192a90..2b2693ca0 100644 --- a/packages/auth/src/cache/user.js +++ b/packages/auth/src/cache/user.js @@ -6,8 +6,10 @@ const EXPIRY_SECONDS = 3600 /** * The default populate user function */ -const populateFromDB = (userId, tenantId) => { - return getGlobalDB(tenantId).get(userId) +const populateFromDB = async (userId, tenantId) => { + const user = await getGlobalDB(tenantId).get(userId) + user.budibaseAccess = true + return user } /** diff --git a/packages/bbui/package.json b/packages/bbui/package.json index f7e06046a..56c390342 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -1,7 +1,7 @@ { "name": "@budibase/bbui", "description": "A UI solution used in the different Budibase projects.", - "version": "0.9.125-alpha.7", + "version": "0.9.125-alpha.11", "license": "AGPL-3.0", "svelte": "src/index.js", "module": "dist/bbui.es.js", diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index 83f71d385..b518ac3d9 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -12,6 +12,7 @@ export let dataCy = null export let size = "M" export let active = false + export let fullWidth = false function longPress(element) { if (!longPressable) return @@ -40,6 +41,7 @@ class:spectrum-ActionButton--quiet={quiet} class:spectrum-ActionButton--emphasized={emphasized} class:is-selected={selected} + class:fullWidth class="spectrum-ActionButton spectrum-ActionButton--size{size}" class:active {disabled} @@ -71,6 +73,9 @@ diff --git a/packages/builder/assets/discord.svg b/packages/builder/assets/discord.svg new file mode 100644 index 000000000..3efe1ec11 --- /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 000000000..1fbbe63e7 Binary files /dev/null and b/packages/builder/assets/integromat.png differ diff --git a/packages/builder/assets/n8n.png b/packages/builder/assets/n8n.png new file mode 100644 index 000000000..b9dad93e5 Binary files /dev/null and b/packages/builder/assets/n8n.png differ diff --git a/packages/builder/assets/slack.svg b/packages/builder/assets/slack.svg new file mode 100644 index 000000000..adcae7e39 --- /dev/null +++ b/packages/builder/assets/slack.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/builder/assets/zapier.png b/packages/builder/assets/zapier.png new file mode 100644 index 000000000..380533144 Binary files /dev/null and b/packages/builder/assets/zapier.png differ diff --git a/packages/builder/cypress/integration/createAutomation.spec.js b/packages/builder/cypress/integration/createAutomation.spec.js index e5040c3c4..0620a15e2 100644 --- a/packages/builder/cypress/integration/createAutomation.spec.js +++ b/packages/builder/cypress/integration/createAutomation.spec.js @@ -7,26 +7,42 @@ context("Create a automation", () => { // https://on.cypress.io/interacting-with-elements it("should create a automation", () => { cy.createTestTableWithData() - + cy.wait(2000) cy.contains("Automate").click() cy.get("[data-cy='new-screen'] > .spectrum-Icon").click() - cy.get(".spectrum-Dialog-grid").within(() => { + cy.get(".modal-inner-wrapper").within(() => { cy.get("input").type("Add Row") + cy.contains("Row Created").click() + cy.wait(500) cy.get(".spectrum-Button--cta").click() }) - // Add trigger - cy.contains("Trigger").click() - cy.contains("Row Created").click() - cy.get(".setup").within(() => { - cy.get(".spectrum-Picker-label").click() - cy.contains("dog").click() - }) + // Setup trigger + cy.contains("Setup").click() + cy.get(".spectrum-Picker-label").click() + cy.wait(500) + cy.contains("dog").click() // Create action - cy.contains("Internal").click() - cy.contains("Create Row").click() - cy.get(".setup").within(() => { + cy.contains("Add Action").click() + cy.get(".modal-inner-wrapper").within(() => { + cy.wait(1000) + cy.contains("Create Row").trigger('mouseover').click().click() + cy.get(".spectrum-Button--cta").click() + }) + cy.contains("Setup").click() + cy.get(".spectrum-Picker-label").click() + cy.contains("dog").click() + cy.get(".spectrum-Textfield-input") + .first() + .type("goodboy") + cy.get(".spectrum-Textfield-input") + .eq(1) + .type("11") + + cy.contains("Run test").click() + cy.get(".modal-inner-wrapper").within(() => { + cy.wait(1000) cy.get(".spectrum-Picker-label").click() cy.contains("dog").click() cy.get(".spectrum-Textfield-input") @@ -35,19 +51,12 @@ context("Create a automation", () => { cy.get(".spectrum-Textfield-input") .eq(1) .type("11") + cy.get(".spectrum-Textfield-input") + .eq(2) + .type("123456") + cy.get(".spectrum-Textfield-input") + .eq(3) + .type("123456") }) - - // Save - cy.contains("Save Automation").click() - - // Activate Automation - cy.get("[data-cy=activate-automation]").click() - }) - - it("should add row when a new row is added", () => { - cy.contains("Data").click() - cy.addRow(["Rover", 15]) - cy.reload() - cy.contains("goodboy").should("have.text", "goodboy") }) }) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 261b84057..8bda515fb 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -37,9 +37,8 @@ Cypress.Commands.add("createApp", name => { cy.contains("Create app").click() }) .then(() => { - cy.get(".selected > .content", { - timeout: 20000, - }).should("be.visible") + cy.expandBudibaseConnection() + cy.get(".nav-item.selected > .content").should("be.visible") }) }) @@ -83,6 +82,7 @@ Cypress.Commands.add("createTable", tableName => { Cypress.Commands.add("addColumn", (tableName, columnName, type) => { // Select Table + cy.selectTable(tableName) cy.contains(".nav-item", tableName).click() cy.contains("Create column").click() @@ -161,3 +161,15 @@ Cypress.Commands.add("createScreen", (screenName, route) => { cy.get(".spectrum-Button--cta").click() }) }) + +Cypress.Commands.add("expandBudibaseConnection", () => { + if (Cypress.$(".nav-item > .content > .opened").length === 0) { + // expand the Budibase DB connection string + cy.get(".icon.arrow").eq(0).click() + } +}) + +Cypress.Commands.add("selectTable", tableName => { + cy.expandBudibaseConnection() + cy.contains(".nav-item", tableName).click() +}) diff --git a/packages/builder/package.json b/packages/builder/package.json index 14b0d8479..ad74b263a 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "0.9.125-alpha.7", + "version": "0.9.125-alpha.11", "license": "AGPL-3.0", "private": true, "scripts": { @@ -65,10 +65,10 @@ } }, "dependencies": { - "@budibase/bbui": "^0.9.125-alpha.7", - "@budibase/client": "^0.9.125-alpha.7", + "@budibase/bbui": "^0.9.125-alpha.11", + "@budibase/client": "^0.9.125-alpha.11", "@budibase/colorpicker": "1.1.2", - "@budibase/string-templates": "^0.9.125-alpha.7", + "@budibase/string-templates": "^0.9.125-alpha.11", "@sentry/browser": "5.19.1", "@spectrum-css/page": "^3.0.1", "@spectrum-css/vars": "^3.0.1", diff --git a/packages/builder/src/builderStore/store/automation/Automation.js b/packages/builder/src/builderStore/store/automation/Automation.js index a9dce8825..dcbb747e3 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 f8e7db04a..db06ce172 100644 --- a/packages/builder/src/builderStore/store/automation/index.js +++ b/packages/builder/src/builderStore/store/automation/index.js @@ -17,7 +17,6 @@ const automationActions = store => ({ state.blockDefinitions = { TRIGGER: jsonResponses[1].trigger, ACTION: jsonResponses[1].action, - LOGIC: jsonResponses[1].logic, } // if previously selected find the new obj and select it if (selected) { @@ -80,9 +79,14 @@ 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`) + const response = await api.post(`/api/automations/${_id}/test`, testData) + const json = await response.json() + store.update(state => { + state.selectedAutomation.testResults = json + return state + }) }, select: automation => { store.update(state => { @@ -91,6 +95,12 @@ const automationActions = store => ({ return state }) }, + addTestDataToAutomation: data => { + store.update(state => { + state.selectedAutomation.addTestData(data) + return state + }) + }, addBlockToAutomation: block => { store.update(state => { const newBlock = state.selectedAutomation.addBlock(cloneDeep(block)) @@ -132,7 +142,6 @@ export const getAutomationStore = () => { blockDefinitions: { TRIGGER: [], ACTION: [], - LOGIC: [], }, selectedAutomation: null, } diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte index 62faff3ca..7ce77a58e 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte @@ -1,10 +1,8 @@ {#if automation} - {/if} diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte deleted file mode 100644 index a04541cfa..000000000 --- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte +++ /dev/null @@ -1,114 +0,0 @@ - - -
- {#each tabs as tab, idx} -
- onChangeTab(idx)} - > - {tab.label} - -
- {/each} -
- (selectedIndex = null)} - bind:this={popover} - {anchor} - align="left" -> - - {#each blocks as [stepId, blockDefinition]} - addBlockToAutomation(stepId, blockDefinition)} - /> - {/each} - - - - - - - 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 000000000..8820259e9 --- /dev/null +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte @@ -0,0 +1,136 @@ + + + { + blockComplete = true + addBlockToAutomation() + }} +> + Select an app or event. + + Apps + +
+ {#each Object.entries(external) as [idx, action]} +
selectAction(action)} + > +
+ zapier + + {idx.charAt(0).toUpperCase() + idx.slice(1)} +
+
+ {/each} +
+ + Actions + +
+ {#each Object.entries(internal) as [idx, action]} +
selectAction(action)} + > +
+ + + {action.name} +
+
+ {/each} +
+ + + + diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte index 931490b19..5aec39abe 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte @@ -6,6 +6,7 @@ xmlns="http://www.w3.org/2000/svg" > 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 000000000..843445a3c --- /dev/null +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js @@ -0,0 +1,11 @@ +import DiscordLogo from "assets/discord.svg" +import ZapierLogo from "assets/zapier.png" +import IntegromatLogo from "assets/integromat.png" +import SlackLogo from "assets/slack.svg" + +export const externalActions = { + zapier: { name: "zapier", icon: ZapierLogo }, + discord: { name: "discord", icon: DiscordLogo }, + slack: { name: "slack", icon: SlackLogo }, + integromat: { name: "integromat", icon: IntegromatLogo }, +} diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte index e960271b8..53a5de3b5 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte @@ -1,12 +1,25 @@ -{#if !blocks.length}Add a trigger to your automation to get started{/if} -
- {#each blocks as block, idx (block.id)} -
- - {#if idx !== blocks.length - 1} - - {/if} +
+
+
+
+ {automation.name} +
+ deleteAutomation()} class="iconPadding"> + + + { + testDataModal.show() + }} + icon="MultipleCheck" + size="S">Run test +
+
- {/each} -
+ {#each blocks as block, idx (block.id)} +
+ + {#if idx !== blocks.length - 1} +
+ +
+ {/if} +
+ {/each} +
+ + + +
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index 439db6263..5898537da 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -1,86 +1,204 @@
onSelect(block)} + on:click={() => { + onSelect(block) + }} > -
- {#if block.type === "TRIGGER"} - - When this happens... - {:else if block.type === "ACTION"} - - Do this... - {:else if block.type === "LOGIC"} - - Only continue if... - {/if} -
- {#if block.type === "TRIGGER"}Trigger{:else}Step {blockIdx + 1}{/if} +
+
{ + blockComplete = !blockComplete + }} + class="splitHeader" + > +
+ {#if externalActions[block.stepId]} + {externalActions[block.stepId].name} + {:else} + + + + {/if} +
+ {#if isTrigger} + When this happens: + {:else} + Do this: + {/if} + + {block?.name?.toUpperCase() || ""} +
+
+ {#if testResult} + resultsModal.show()}> + View response + + {/if} +
+
+ {#if !blockComplete} + +
+ +
+
{ + setupToggled = !setupToggled + }} + class="center-items" + > + {#if setupToggled} + + {:else} + + {/if} + Setup +
+ {#if !isTrigger} +
deleteStep()}> + +
+ {/if} +
+ + {#if setupToggled} + + {#if lastStep} + + {/if} + + {/if} +
- {#if block.type !== "TRIGGER" || allowDeleteTrigger} -
- {/if} -
-
-

- -

+ {/if} + + + + + + + + + + + +
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte new file mode 100644 index 000000000..7dfdff20a --- /dev/null +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte @@ -0,0 +1,114 @@ + + + +
+
+ {#if isTrigger || testResult[0].outputs.success} +
+ +
+ {:else} +
+ +
+ {/if} +
+
+ +
{ + inputToggled = !inputToggled + }} + class="toggle splitHeader" + > +
+
+ + Input + +
+
+
+ {#if inputToggled} + + {:else} + + {/if} +
+
+ {#if inputToggled} +
+