From 5f2b4f3ef9bbb8fad0f8aa3996f3565d98d383e3 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 17 Oct 2023 11:51:23 +0100 Subject: [PATCH 01/46] initial styling and input updates for naming --- .../FlowChart/FlowItem.svelte | 14 +- .../FlowChart/FlowItemHeader.svelte | 130 ++++++++++++++++-- 2 files changed, 133 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index 6c964c84a9..0517fe1034 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -104,13 +104,19 @@ } -
{}}> +
{}} + on:click={() => {}} +> {#if loopBlock}
{ showLooping = !showLooping }} + on:keydown={() => {}} class="splitHeader" >
@@ -129,7 +135,11 @@
-
{}}> +
{}} + on:click={() => {}} + >
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte index c09474a370..0bbd2d2318 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte @@ -1,6 +1,6 @@ -
-
dispatch("toggle")} class="splitHeader"> +
+
{#if externalActions[block.stepId]} {#if isTrigger} Trigger - When this happens: {:else} Step {idx} - Do this: {/if} - {block?.name?.toUpperCase() || ""} + { + automationNameError = getAutomationNameError(e.target.value) + automationName = e.target.value + if (!automationNameError) { + automationNameError = false // Reset the error when input is valid + } + }} + value={automationName} + on:click={startTyping} + on:blur={() => { + typing = false + if (automationNameError) { + automationName = block?.name + automationNameError = null + } + }} + />
@@ -89,18 +130,46 @@
{/if}
{ onSelect(block) }} > - + {#if !showTestStatus} + + + + + + + {/if} + dispatch("toggle")} + hoverable + name={open ? "ChevronUp" : "ChevronDown"} + />
+ {#if automationNameError} +
+ +
+ +
+ +
+ {/if}
From a209280daa33c248f78844685ddca66692499c70 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 24 Oct 2023 15:17:22 +0100 Subject: [PATCH 02/46] naming automations --- .../builderStore/store/automation/index.js | 24 ++++++++ .../FlowChart/FlowItemHeader.svelte | 56 +++++++++++++------ 2 files changed, 63 insertions(+), 17 deletions(-) diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js index c22240370b..dd28d14461 100644 --- a/packages/builder/src/builderStore/store/automation/index.js +++ b/packages/builder/src/builderStore/store/automation/index.js @@ -221,6 +221,30 @@ const automationActions = store => ({ newAutomation.definition.steps.splice(blockIdx, 0, block) await store.actions.save(newAutomation) }, + saveAutomationName: async (stepId, name) => { + const automation = get(selectedAutomation) + let newAutomation = cloneDeep(automation) + if (!automation) { + return + } + newAutomation.definition.stepNames = { + ...newAutomation.definition.stepNames, + [stepId]: name, + } + + await store.actions.save(newAutomation) + }, + deleteAutomationName: async stepId => { + const automation = get(selectedAutomation) + let newAutomation = cloneDeep(automation) + if (!automation) { + return + } + delete newAutomation.definition.stepNames[stepId] + + await store.actions.save(newAutomation) + }, + deleteAutomationBlock: async block => { const automation = get(selectedAutomation) let newAutomation = cloneDeep(automation) diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte index 0bbd2d2318..7cc124f44c 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte @@ -3,6 +3,7 @@ import { Icon, Body, StatusLight, AbsTooltip } from "@budibase/bbui" import { externalActions } from "./ExternalActions" import { createEventDispatcher } from "svelte" + import { Features } from "constants/backend/automations" export let block export let open @@ -10,16 +11,19 @@ export let testResult export let isTrigger export let idx + export let addLooping + export let deleteStep - $: console.log($selectedAutomation) let validRegex = /^[A-Za-z0-9_\s]+$/ let typing = false - let automationName = block?.name || "" - - $: automationNameError = getAutomationNameError(automationName) const dispatch = createEventDispatcher() + $: stepNames = $selectedAutomation.definition.stepNames + $: automationName = stepNames[block.id] || block.name || "" + $: automationNameError = getAutomationNameError(automationName) + $: status = updateStatus(testResult, isTrigger) + $: isTrigger = isTrigger || block.type === "TRIGGER" $: { if (!testResult) { testResult = $automationStore.testResults?.steps?.filter(step => @@ -27,9 +31,9 @@ )?.[0] } } - $: isTrigger = isTrigger || block.type === "TRIGGER" - - $: status = updateStatus(testResult, isTrigger) + $: loopBlock = $selectedAutomation?.definition.steps.find( + x => x.blockToLoop === block.id + ) async function onSelect(block) { await automationStore.update(state => { @@ -53,9 +57,11 @@ } const getAutomationNameError = name => { - let invalidRoleName = !validRegex.test(name) - if (invalidRoleName) { - return "Please enter a role name consisting of only alphanumeric symbols and underscores" + if (name.length > 0) { + let invalidRoleName = !validRegex.test(name) + if (invalidRoleName) { + return "Please enter a role name consisting of only alphanumeric symbols and underscores" + } } return null } @@ -63,6 +69,18 @@ const startTyping = async () => { typing = true } + + const saveName = async () => { + if (automationNameError) { + return + } + + if (automationName.length === 0) { + automationStore.actions.deleteAutomationName(block.id) + } else { + automationStore.actions.saveAutomationName(block.id, automationName) + } + }
{ automationNameError = getAutomationNameError(e.target.value) automationName = e.target.value @@ -106,13 +125,14 @@ automationNameError = false // Reset the error when input is valid } }} - value={automationName} on:click={startTyping} - on:blur={() => { + on:blur={async () => { typing = false if (automationNameError) { - automationName = block?.name + automationName = stepNames[block.id] automationNameError = null + } else { + await saveName() } }} /> @@ -137,11 +157,13 @@ }} > {#if !showTestStatus} - - - + {#if !isTrigger && !loopBlock && (block?.features?.[Features.LOOPING] || !block.features)} + + + + {/if} - + {/if} Date: Tue, 24 Oct 2023 15:17:39 +0100 Subject: [PATCH 03/46] update bindings to use names --- .../SetupPanel/AutomationBlockSetup.svelte | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index ce8c5c344c..fa1f0c76c9 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -183,20 +183,17 @@ } } const outputs = Object.entries(schema) - let bindingIcon = "" - let bindindingRank = 0 - + let bindingRank = 0 if (idx === 0) { bindingIcon = automation.trigger.icon } else if (isLoopBlock) { bindingIcon = "Reuse" - bindindingRank = idx + 1 + bindingRank = idx + 1 } else { bindingIcon = allSteps[idx].icon - bindindingRank = idx - loopBlockCount + bindingRank = idx - loopBlockCount } - bindings = bindings.concat( outputs.map(([name, value]) => { let runtimeName = isLoopBlock @@ -205,12 +202,21 @@ ? `steps[${idx - loopBlockCount}].${name}` : `steps.${idx - loopBlockCount}.${name}` const runtime = idx === 0 ? `trigger.${name}` : runtimeName - const categoryName = - idx === 0 - ? "Trigger outputs" - : isLoopBlock - ? "Loop Outputs" - : `Step ${idx - loopBlockCount} outputs` + + let bindingName = + automation.stepNames[allSteps[bindingRank - loopBlockCount].id] + + let categoryName + if (idx === 0) { + categoryName = "Trigger outputs" + } else if (isLoopBlock) { + categoryName = "Loop Outputs" + } else if (bindingName) { + categoryName = `${bindingName} outputs` + } else { + categoryName = `Step ${idx - loopBlockCount} outputs` + } + return { readableBinding: runtime, runtimeBinding: runtime, @@ -221,7 +227,7 @@ display: { type: value.type, name: name, - rank: bindindingRank, + rank: bindingRank, }, } }) From 791020580720c7098274329b64a7e82895363a11 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 24 Oct 2023 15:17:57 +0100 Subject: [PATCH 04/46] update styling of flow items --- .../FlowChart/FlowChart.svelte | 139 +++++++++++------- .../FlowChart/FlowItem.svelte | 24 +-- .../[application]/automation/_layout.svelte | 1 - 3 files changed, 92 insertions(+), 72 deletions(-) diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte index 63a3478ef3..784cdf2357 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte @@ -5,13 +5,7 @@ import TestDataModal from "./TestDataModal.svelte" import { flip } from "svelte/animate" import { fly } from "svelte/transition" - import { - Heading, - Icon, - ActionButton, - notifications, - Modal, - } from "@budibase/bbui" + import { Icon, notifications, Modal } from "@budibase/bbui" import { ActionStepID } from "constants/backend/automations" import UndoRedoControl from "components/common/UndoRedoControl.svelte" import { automationHistoryStore } from "builderStore" @@ -20,7 +14,8 @@ let testDataModal let confirmDeleteDialog - + let scrolling = false + let hasScrolled = false $: blocks = getBlocks(automation) const getBlocks = automation => { @@ -32,58 +27,74 @@ return blocks } - async function deleteAutomation() { + const deleteAutomation = async () => { try { await automationStore.actions.delete($selectedAutomation) } catch (error) { notifications.error("Error deleting automation") } } + + const handleScroll = e => { + if (e.target.scrollTop >= 30 && !hasScrolled) { + scrolling = true + hasScrolled = true + } else if (e.target.scrollTop < 30 && hasScrolled) { + // Set scrolling back to false if scrolled back to less than 100px + scrolling = false + hasScrolled = false + } + } -
-
- {automation.name} -
- +
+
+ +
+
+
+ +
{ + testDataModal.show() + }} + > + Run test +
+
+
-
- { - testDataModal.show() - }} - icon="MultipleCheck" - size="M">Run test - { - $automationStore.showTestPanel = true - }} - size="M">Test Details +
{ + $automationStore.showTestPanel = true + }} + > + Test details
-
- {#each blocks as block, idx (block.id)} -
- {#if block.stepId !== ActionStepID.LOOP} - - {/if} -
- {/each} +
+
+ {#each blocks as block, idx (block.id)} +
+ {#if block.stepId !== ActionStepID.LOOP} + + {/if} +
+ {/each} +
.canvas { padding: var(--spacing-l) var(--spacing-xl); + overflow-y: auto; + max-height: 100%; + } + + .header-left :global(div) { + border-right: none; } /* Fix for firefox not respecting bottom padding in scrolling containers */ .canvas > *:last-child { @@ -117,23 +134,45 @@ } .content { - display: inline-block; - text-align: left; + flex-grow: 1; + padding: 23px 23px 80px; + box-sizing: border-box; + } + + .header.scrolling { + background: var(--background); + z-index: -1; + border-bottom: var(--border-light); + background: var(--background); } .header { + z-index: 1; display: flex; justify-content: space-between; align-items: center; + padding-left: var(--spacing-l); + transition: background 130ms ease-out; + flex: 0 0 48px; + padding-right: var(--spacing-xl); + } + .controls { + display: flex; + gap: var(--spacing-xl); } - .controls, .buttons { display: flex; justify-content: flex-end; align-items: center; - gap: var(--spacing-xl); - } - .buttons { gap: var(--spacing-s); } + + .buttons:hover { + cursor: pointer; + } + + .disabled { + pointer-events: none; + color: var(--spectrum-global-color-gray-500) !important; + } diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index 0517fe1034..7d00ee4ac1 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -16,11 +16,7 @@ import ActionModal from "./ActionModal.svelte" import FlowItemHeader from "./FlowItemHeader.svelte" import RoleSelect from "components/design/settings/controls/RoleSelect.svelte" - import { - ActionStepID, - TriggerStepID, - Features, - } from "constants/backend/automations" + import { ActionStepID, TriggerStepID } from "constants/backend/automations" import { permissions } from "stores/backend" export let block @@ -172,28 +168,14 @@ {block} {testDataModal} {idx} + {addLooping} + {deleteStep} on:toggle={() => (open = !open)} /> {#if open}
- {#if !isTrigger} -
-
- {#if !loopBlock && (block?.features?.[Features.LOOPING] || !block.features)} - addLooping()} icon="Reuse"> - Add Looping - - {/if} - deleteStep()} - icon="DeleteOutline" - /> -
-
- {/if} - {#if isAppAction} diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte index 0afe257e60..dd18dbba82 100644 --- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte @@ -91,7 +91,6 @@ flex-direction: column; justify-content: flex-start; align-items: stretch; - gap: var(--spacing-l); overflow: auto; } .centered { From edb511cbce84e9ed22dd8a502d0a66353516c693 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Wed, 25 Oct 2023 11:57:52 +0100 Subject: [PATCH 05/46] update field styling and ux for individual blocks --- packages/builder/.gitignore | 3 +- .../FlowChart/FlowItem.svelte | 14 +- .../SetupPanel/AutomationBlockSetup.svelte | 434 +++++++++--------- .../automation/SetupPanel/RowSelector.svelte | 122 ++--- .../SetupPanel/RowSelectorTypes.svelte | 4 - 5 files changed, 297 insertions(+), 280 deletions(-) diff --git a/packages/builder/.gitignore b/packages/builder/.gitignore index e5c961d509..abc5671984 100644 --- a/packages/builder/.gitignore +++ b/packages/builder/.gitignore @@ -5,4 +5,5 @@ package-lock.json release/ dist/ routify -.routify/ \ No newline at end of file +.routify/ +svelte.config.js \ No newline at end of file diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index 7d00ee4ac1..2cdb1e1e72 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -100,19 +100,13 @@ } -
{}} - on:click={() => {}} -> +
{}}> {#if loopBlock}
{ showLooping = !showLooping }} - on:keydown={() => {}} class="splitHeader" >
@@ -131,11 +125,7 @@
-
{}} - on:click={() => {}} - > +
{}}>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index fa1f0c76c9..3a96363751 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -295,245 +295,248 @@
{#each schemaProperties as [key, value]} {#if canShowField(key, value)} -
- {#if key !== "fields" && value.type !== "boolean"} +
+ {#if key !== "fields" && value.type !== "boolean" && value.customType !== "row"} {/if} - {#if value.type === "string" && value.enum && canShowField(key, value)} - onChange(e, key)} - /> -
- {:else if value.type === "date"} - onChange(e, key)} - {bindings} - allowJS={true} - updateOnChange={false} - drawerLeft="260px" - > - onChange(e, key)} + placeholder={false} + options={value.enum} + getOptionLabel={(x, idx) => + value.pretty ? value.pretty[idx] : x} /> - - {:else if value.customType === "column"} - onChange(e, key)} - value={inputData[key]} - /> - {:else if value.customType === "email"} - {#if isTestModal} - onChange(e, key)} - {bindings} - fillWidth - updateOnChange={false} - /> - {:else} - + onChange(e, key)} + /> +
+ {:else if value.type === "date"} + onChange(e, key)} {bindings} - allowJS={false} + allowJS={true} updateOnChange={false} drawerLeft="260px" - /> - {/if} - {:else if value.customType === "query"} - onChange(e, key)} - value={inputData[key]} - /> - {:else if value.customType === "cron"} - onChange(e, key)} - value={inputData[key]} - /> - {:else if value.customType === "queryParams"} - onChange(e, key)} - value={inputData[key]} - {bindings} - /> - {:else if value.customType === "table"} - onChange(e, key)} - /> - {:else if value.customType === "row"} - { - if (e.detail?.key) { - onChange(e, e.detail.key) - } else { - onChange(e, key) - } - }} - {bindings} - {isTestModal} - {isUpdateRow} - /> - {:else if value.customType === "webhookUrl"} - onChange(e, key)} - value={inputData[key]} - /> - {:else if value.customType === "fields"} - onChange(e, key)} - {bindings} - {isTestModal} - /> - {:else if value.customType === "triggerSchema"} - onChange(e, key)} - value={inputData[key]} - /> - {:else if value.customType === "code"} - - {#if codeMode == EditorModes.JS} - (codeBindingOpen = !codeBindingOpen)} - quiet - icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"} - > - Bindings - - {#if codeBindingOpen} - 
{JSON.stringify(bindings, null, 2)}
- {/if} - {/if} - { - // need to pass without the value inside - onChange({ detail: e.detail }, key) - inputData[key] = e.detail - }} - completions={stepCompletions} - mode={codeMode} - autocompleteEnabled={codeMode != EditorModes.JS} - height={500} - /> -
- {#if codeMode == EditorModes.Handlebars} - -
-
- Add available bindings by typing - }} - -
-
- {/if} -
- - {:else if value.customType === "loopOption"} - onChange(e, key)} - {bindings} - updateOnChange={false} + value={inputData[key]} + options={Object.keys(table?.schema || {})} /> - {:else} -
+ {:else if value.customType === "filters"} + Define filters + + + (tempFilters = e.detail)} + /> + + {:else if value.customType === "password"} + onChange(e, key)} + value={inputData[key]} + /> + {:else if value.customType === "email"} + {#if isTestModal} + onChange(e, key)} + {bindings} + fillWidth + updateOnChange={false} + /> + {:else} onChange(e, key)} {bindings} + allowJS={false} updateOnChange={false} - placeholder={value.customType === "queryLimit" - ? queryLimit - : ""} drawerLeft="260px" /> -
+ {/if} + {:else if value.customType === "query"} + onChange(e, key)} + value={inputData[key]} + /> + {:else if value.customType === "cron"} + onChange(e, key)} + value={inputData[key]} + /> + {:else if value.customType === "queryParams"} + onChange(e, key)} + value={inputData[key]} + {bindings} + /> + {:else if value.customType === "table"} + onChange(e, key)} + /> + {:else if value.customType === "row"} + { + if (e.detail?.key) { + onChange(e, e.detail.key) + } else { + onChange(e, key) + } + }} + {bindings} + {isTestModal} + {isUpdateRow} + /> + {:else if value.customType === "webhookUrl"} + onChange(e, key)} + value={inputData[key]} + /> + {:else if value.customType === "fields"} + onChange(e, key)} + {bindings} + {isTestModal} + /> + {:else if value.customType === "triggerSchema"} + onChange(e, key)} + value={inputData[key]} + /> + {:else if value.customType === "code"} + + {#if codeMode == EditorModes.JS} + (codeBindingOpen = !codeBindingOpen)} + quiet + icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"} + > + Bindings + + {#if codeBindingOpen} + 
{JSON.stringify(bindings, null, 2)}
+ {/if} + {/if} + { + // need to pass without the value inside + onChange({ detail: e.detail }, key) + inputData[key] = e.detail + }} + completions={stepCompletions} + mode={codeMode} + autocompleteEnabled={codeMode != EditorModes.JS} + height={500} + /> +
+ {#if codeMode == EditorModes.Handlebars} + +
+
+ Add available bindings by typing + }} + +
+
+ {/if} +
+ + {:else if value.customType === "loopOption"} + table.name} - getOptionValue={table => table._id} -/> +
+ +
+ onChange(e, field)} - label={field} value={value[field]} options={schema.constraints.inclusion} /> @@ -46,7 +45,6 @@ {:else if schema.type === "boolean"} { automationNameError = getAutomationNameError(e.target.value) From 230dc169fa86bdaa63976b03407e1d3ab166db4b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 26 Oct 2023 10:11:34 +0100 Subject: [PATCH 07/46] Revert previous fix for relationship column dragging --- .../grid/cells/RelationshipCell.svelte | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte index e6d83e0bea..925c840478 100644 --- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte @@ -260,31 +260,29 @@ class:wrap={editable || contentLines > 1} on:wheel={e => (focused ? e.stopPropagation() : null)} > - {#if Array.isArray(value) && value.length} - {#each value as relationship} - {#if relationship[primaryDisplay] || relationship.primaryDisplay} -
- showRelationship(relationship._id) - : null} - > - {readable( - relationship[primaryDisplay] || relationship.primaryDisplay - )} - - {#if editable} - toggleRow(relationship)} - /> - {/if} -
- {/if} - {/each} - {/if} + {#each value || [] as relationship} + {#if relationship[primaryDisplay] || relationship.primaryDisplay} +
+ showRelationship(relationship._id) + : null} + > + {readable( + relationship[primaryDisplay] || relationship.primaryDisplay + )} + + {#if editable} + toggleRow(relationship)} + /> + {/if} +
+ {/if} + {/each} {#if editable}
@@ -320,7 +318,7 @@
- {:else if Array.isArray(searchResults) && searchResults.length} + {:else if searchResults?.length}
{#each searchResults as row, idx}
Date: Thu, 26 Oct 2023 10:23:51 +0100 Subject: [PATCH 08/46] fix bug with smtp name containing parentheses --- .../AutomationBuilder/FlowChart/FlowItemHeader.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte index 87934d6520..0d35f955ef 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte @@ -57,14 +57,15 @@ } const getAutomationNameError = name => { - if (name.length > 0) { + if (name !== block.name && block.name.includes(name)) { + if (name?.length > 0) { let invalidRoleName = !validRegex.test(name) if (invalidRoleName) { return "Please enter a role name consisting of only alphanumeric symbols and underscores" } } return null - } + }} const startTyping = async () => { typing = true From 8203139c69639c48190c008336e096e9129619a2 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 26 Oct 2023 11:27:20 +0100 Subject: [PATCH 09/46] fix bug in adding trigger --- .../FlowChart/FlowItemHeader.svelte | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte index 0d35f955ef..8b907ae0f6 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte @@ -20,7 +20,7 @@ const dispatch = createEventDispatcher() $: stepNames = $selectedAutomation.definition.stepNames - $: automationName = stepNames[block.id] || block.name || "" + $: automationName = stepNames?.[block.id] || block?.name || "" $: automationNameError = getAutomationNameError(automationName) $: status = updateStatus(testResult, isTrigger) $: isTrigger = isTrigger || block.type === "TRIGGER" @@ -32,7 +32,7 @@ } } $: loopBlock = $selectedAutomation?.definition.steps.find( - x => x.blockToLoop === block.id + x => x.blockToLoop === block?.id ) async function onSelect(block) { @@ -59,13 +59,14 @@ const getAutomationNameError = name => { if (name !== block.name && block.name.includes(name)) { if (name?.length > 0) { - let invalidRoleName = !validRegex.test(name) - if (invalidRoleName) { - return "Please enter a role name consisting of only alphanumeric symbols and underscores" + let invalidRoleName = !validRegex.test(name) + if (invalidRoleName) { + return "Please enter a role name consisting of only alphanumeric symbols and underscores" + } } + return null } - return null - }} + } const startTyping = async () => { typing = true From 73a7b8eb50de6f4a4660887974cea14fe4599624 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 26 Oct 2023 11:27:34 +0100 Subject: [PATCH 10/46] fix formatting of selectors --- .../SetupPanel/AutomationBlockSetup.svelte | 14 ++++- .../SetupPanel/CodeEditorModal.svelte | 9 ++- .../SetupPanel/QueryParamSelector.svelte | 63 +++++++++++-------- 3 files changed, 57 insertions(+), 29 deletions(-) diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index 3a96363751..4a0f1094ad 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -283,6 +283,14 @@ return !dependsOn || !!inputData[dependsOn] } + function shouldRenderField(value) { + return ( + value.customType !== "row" && + value.customType !== "code" && + value.customType !== "queryParams" + ) + } + onMount(async () => { try { await environment.loadVariables() @@ -295,15 +303,15 @@
{#each schemaProperties as [key, value]} {#if canShowField(key, value)} -
- {#if key !== "fields" && value.type !== "boolean" && value.customType !== "row"} +
+ {#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)} {/if} -
+
{#if value.type === "string" && value.enum && canShowField(key, value)} query._id} - getOptionLabel={query => query.name} - /> +
+ +
+ { - automationNameError = getAutomationNameError(e.target.value) - automationName = e.target.value - if (!automationNameError) { - automationNameError = false // Reset the error when input is valid - } + automationName = e.target.value.trim() }} on:click={startTyping} on:blur={async () => { typing = false if (automationNameError) { automationName = stepNames[block.id] - automationNameError = null } else { await saveName() } @@ -225,7 +220,7 @@ font-family: var(--font-sans); color: var(--ink); background-color: transparent; - border: none; + border: 1px solid transparent; font-size: var(--spectrum-alias-font-size-default); width: 260px; box-sizing: border-box; @@ -246,11 +241,13 @@ } .typing { - border: 0.5px solid var(--spectrum-global-color-static-blue-500); + border: 1px solid var(--spectrum-global-color-static-blue-500); + border-radius: 4px 4px 4px 4px; } .typing-error { - border: 0.5px solid var(--spectrum-global-color-static-red-500); + border: 1px solid var(--spectrum-global-color-static-red-500); + border-radius: 4px 4px 4px 4px; } .error-icon :global(.spectrum-Icon) { diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index 4a0f1094ad..de3a66e216 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -204,7 +204,7 @@ const runtime = idx === 0 ? `trigger.${name}` : runtimeName let bindingName = - automation.stepNames[allSteps[bindingRank - loopBlockCount].id] + automation.stepNames?.[allSteps[bindingRank - loopBlockCount].id] let categoryName if (idx === 0) { @@ -287,7 +287,8 @@ return ( value.customType !== "row" && value.customType !== "code" && - value.customType !== "queryParams" + value.customType !== "queryParams" && + value.customType !== "cron" ) } From 23cdac5906605a34af5aadf6f4bb9ab07998c8fb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 26 Oct 2023 17:37:59 +0100 Subject: [PATCH 12/46] Update grids to support pagination with REST queries and to simplify some logic --- .../src/components/grid/stores/datasource.js | 6 ------ .../grid/stores/datasources/nonPlus.js | 6 ------ .../grid/stores/datasources/table.js | 6 ------ .../grid/stores/datasources/viewV2.js | 6 ------ .../src/components/grid/stores/rows.js | 10 ++++----- packages/frontend-core/src/fetch/DataFetch.js | 21 +++++++++++++++---- 6 files changed, 22 insertions(+), 33 deletions(-) diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js index 958f4541bd..7ee3a19b8a 100644 --- a/packages/frontend-core/src/components/grid/stores/datasource.js +++ b/packages/frontend-core/src/components/grid/stores/datasource.js @@ -160,11 +160,6 @@ export const createActions = context => { return getAPI()?.actions.canUseColumn(name) } - // Gets the default number of rows for a single page - const getFeatures = () => { - return getAPI()?.actions.getFeatures() - } - return { datasource: { ...datasource, @@ -177,7 +172,6 @@ export const createActions = context => { getRow, isDatasourceValid, canUseColumn, - getFeatures, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js b/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js index 017c16a03c..acdf509278 100644 --- a/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js +++ b/packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js @@ -35,11 +35,6 @@ export const createActions = context => { return $columns.some(col => col.name === name) || $sticky?.name === name } - const getFeatures = () => { - // We don't support any features - return {} - } - return { nonPlus: { actions: { @@ -50,7 +45,6 @@ export const createActions = context => { getRow, isDatasourceValid, canUseColumn, - getFeatures, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/datasources/table.js b/packages/frontend-core/src/components/grid/stores/datasources/table.js index 2f49ab1d38..847dfd2c6b 100644 --- a/packages/frontend-core/src/components/grid/stores/datasources/table.js +++ b/packages/frontend-core/src/components/grid/stores/datasources/table.js @@ -1,5 +1,4 @@ import { get } from "svelte/store" -import TableFetch from "../../../../fetch/TableFetch" const SuppressErrors = true @@ -46,10 +45,6 @@ export const createActions = context => { return $columns.some(col => col.name === name) || $sticky?.name === name } - const getFeatures = () => { - return new TableFetch({ API }).determineFeatureFlags() - } - return { table: { actions: { @@ -60,7 +55,6 @@ export const createActions = context => { getRow, isDatasourceValid, canUseColumn, - getFeatures, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js b/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js index 35f57a5fc4..ed31d0ae44 100644 --- a/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js +++ b/packages/frontend-core/src/components/grid/stores/datasources/viewV2.js @@ -1,5 +1,4 @@ import { get } from "svelte/store" -import ViewV2Fetch from "../../../../fetch/ViewV2Fetch" const SuppressErrors = true @@ -46,10 +45,6 @@ export const createActions = context => { ) } - const getFeatures = () => { - return new ViewV2Fetch({ API }).determineFeatureFlags() - } - return { viewV2: { actions: { @@ -60,7 +55,6 @@ export const createActions = context => { getRow, isDatasourceValid, canUseColumn, - getFeatures, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js index 51c46f8263..82185d6b91 100644 --- a/packages/frontend-core/src/components/grid/stores/rows.js +++ b/packages/frontend-core/src/components/grid/stores/rows.js @@ -114,10 +114,6 @@ export const createActions = context => { const $allFilters = get(allFilters) const $sort = get(sort) - // Determine how many rows to fetch per page - const features = datasource.actions.getFeatures() - const limit = features?.supportsPagination ? RowPageSize : null - // Create new fetch model const newFetch = fetchData({ API, @@ -126,8 +122,12 @@ export const createActions = context => { filter: $allFilters, sortColumn: $sort.column, sortOrder: $sort.order, - limit, + limit: RowPageSize, paginate: true, + + // Disable client side limiting, so that for queries and custom data + // sources we don't impose fake row limits. We want all the data. + clientSideLimiting: false, }, }) diff --git a/packages/frontend-core/src/fetch/DataFetch.js b/packages/frontend-core/src/fetch/DataFetch.js index 857072601e..92115efef0 100644 --- a/packages/frontend-core/src/fetch/DataFetch.js +++ b/packages/frontend-core/src/fetch/DataFetch.js @@ -43,6 +43,11 @@ export default class DataFetch { // Pagination config paginate: true, + + // Client side feature customisation + clientSideSearching: true, + clientSideSorting: true, + clientSideLimiting: true, } // State of the fetch @@ -208,24 +213,32 @@ export default class DataFetch { * Fetches some filtered, sorted and paginated data */ async getPage() { - const { sortColumn, sortOrder, sortType, limit } = this.options + const { + sortColumn, + sortOrder, + sortType, + limit, + clientSideSearching, + clientSideSorting, + clientSideLimiting, + } = this.options const { query } = get(this.store) // Get the actual data let { rows, info, hasNextPage, cursor, error } = await this.getData() // If we don't support searching, do a client search - if (!this.features.supportsSearch) { + if (!this.features.supportsSearch && clientSideSearching) { rows = runLuceneQuery(rows, query) } // If we don't support sorting, do a client-side sort - if (!this.features.supportsSort) { + if (!this.features.supportsSort && clientSideSorting) { rows = luceneSort(rows, sortColumn, sortOrder, sortType) } // If we don't support pagination, do a client-side limit - if (!this.features.supportsPagination) { + if (!this.features.supportsPagination && clientSideLimiting) { rows = luceneLimit(rows, limit) } From fd15f771ef8266f2f8852cd1a585106add862e40 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 26 Oct 2023 19:03:04 +0100 Subject: [PATCH 13/46] Refactor how relationship cells fetch and cache primary display columns to fix issues with store stale data --- .../grid/cells/RelationshipCell.svelte | 25 ++-------- .../src/components/grid/stores/cache.js | 49 +++++++++++++++++++ .../src/components/grid/stores/index.js | 2 + 3 files changed, 56 insertions(+), 20 deletions(-) create mode 100644 packages/frontend-core/src/components/grid/stores/cache.js diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte index 925c840478..0db022777f 100644 --- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte @@ -1,27 +1,10 @@ - -
- +
table._id !== "ta_users")} + options={$tables.list.filter(table => table._id !== TableNames.USERS)} getOptionLabel={table => table.name} getOptionValue={table => table._id} /> diff --git a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte index 1645ded66b..3434219384 100644 --- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte +++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte @@ -22,7 +22,7 @@