From 8d700655ba66aae7bc4397d1eabd06741fc7b5cf Mon Sep 17 00:00:00 2001 From: Duarte Velez Grilo Date: Wed, 18 Oct 2023 16:06:51 +0100 Subject: [PATCH 001/100] Update manifest.json Added used camera preference option. --- packages/client/manifest.json | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 8d0a4e456f..f294dbbc80 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3419,6 +3419,22 @@ "value": "custom" } }, + { + "type": "select", + "label": "Preferred camera", + "key": "preferredCamera", + "defaultValue": "environment", + "options": [ + { + "label": "Front", + "value": "user" + }, + { + "label": "Back", + "value": "environment" + } + ] + }, { "type": "event", "label": "On change", From 5e4821e6a5e22473e869bf71f2499649ae453d26 Mon Sep 17 00:00:00 2001 From: Duarte Velez Grilo Date: Wed, 18 Oct 2023 16:12:12 +0100 Subject: [PATCH 002/100] Update CodeScannerField.svelte Added preferred camera setting. --- .../client/src/components/app/forms/CodeScannerField.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/client/src/components/app/forms/CodeScannerField.svelte b/packages/client/src/components/app/forms/CodeScannerField.svelte index c408f78d7c..1a57d8fbe2 100644 --- a/packages/client/src/components/app/forms/CodeScannerField.svelte +++ b/packages/client/src/components/app/forms/CodeScannerField.svelte @@ -14,6 +14,7 @@ export let beepOnScan export let beepFrequency export let customFrequency + export let preferredCamera let fieldState let fieldApi @@ -48,6 +49,7 @@ {beepOnScan} {beepFrequency} {customFrequency} + {preferredCamera} /> {/if} From ad3a80c629e4748bc1f27bb4193f8912100b9d33 Mon Sep 17 00:00:00 2001 From: Duarte Velez Grilo Date: Wed, 18 Oct 2023 16:13:50 +0100 Subject: [PATCH 003/100] Update CodeScanner.svelte Added preferred camera setting. --- packages/client/src/components/app/forms/CodeScanner.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/app/forms/CodeScanner.svelte b/packages/client/src/components/app/forms/CodeScanner.svelte index 04d6919157..891154939f 100644 --- a/packages/client/src/components/app/forms/CodeScanner.svelte +++ b/packages/client/src/components/app/forms/CodeScanner.svelte @@ -11,6 +11,7 @@ export let beepOnScan = false export let beepFrequency = 2637 export let customFrequency = 1046 + export let preferredCamera = "environment" const dispatch = createEventDispatcher() @@ -20,7 +21,7 @@ let cameraEnabled let cameraStarted = false let html5QrCode - let cameraSetting = { facingMode: "environment" } + let cameraSetting = { facingMode: "{preferredCamera}" } let cameraConfig = { fps: 25, qrbox: { width: 250, height: 250 }, From 92e091818b20113ecc332da17d227ca0247e1217 Mon Sep 17 00:00:00 2001 From: Duarte Velez Grilo Date: Thu, 19 Oct 2023 11:11:10 +0100 Subject: [PATCH 004/100] Update CodeScanner.svelte Removed quotes ("") from variable reference. I believe this is what is causing the test failure. --- packages/client/src/components/app/forms/CodeScanner.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/app/forms/CodeScanner.svelte b/packages/client/src/components/app/forms/CodeScanner.svelte index 891154939f..f68f0791f6 100644 --- a/packages/client/src/components/app/forms/CodeScanner.svelte +++ b/packages/client/src/components/app/forms/CodeScanner.svelte @@ -21,7 +21,7 @@ let cameraEnabled let cameraStarted = false let html5QrCode - let cameraSetting = { facingMode: "{preferredCamera}" } + let cameraSetting = { facingMode: {preferredCamera} } let cameraConfig = { fps: 25, qrbox: { width: 250, height: 250 }, From 02fb5f3865c9ebb453a5889cd0c459139b98140a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 4 Sep 2023 08:14:31 +0100 Subject: [PATCH 005/100] Add prototype of form block field layout --- packages/client/manifest.json | 364 ++++++++++++++++++ .../app/blocks/form/InnerFormBlock.svelte | 35 +- .../app/forms/AttachmentField.svelte | 2 + .../components/app/forms/DateTimeField.svelte | 2 + .../src/components/app/forms/Field.svelte | 79 ++-- .../app/forms/MultiFieldSelect.svelte | 2 + .../components/app/forms/OptionsField.svelte | 2 + .../components/app/forms/StringField.svelte | 2 + 8 files changed, 448 insertions(+), 40 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 8d0a4e456f..faf279194f 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -2597,6 +2597,34 @@ "barTitle": "Justify text" } ] + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -2654,6 +2682,34 @@ "type": "validation/number", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -2706,6 +2762,34 @@ "label": "Disabled", "key": "disabled", "defaultValue": false + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -2763,6 +2847,34 @@ "type": "validation/string", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -2931,6 +3043,34 @@ "type": "validation/string", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -3093,6 +3233,34 @@ "type": "validation/array", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -3173,6 +3341,34 @@ "type": "validation/boolean", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -3252,6 +3448,34 @@ "type": "validation/string", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -3333,6 +3557,34 @@ "type": "validation/datetime", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -3434,6 +3686,34 @@ "type": "validation/string", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -3610,6 +3890,34 @@ "type": "validation/attachment", "label": "Validation", "key": "validation" + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -3678,6 +3986,34 @@ "label": "Disabled", "key": "disabled", "defaultValue": false + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, @@ -3730,6 +4066,34 @@ "label": "Disabled", "key": "disabled", "defaultValue": false + }, + { + "type": "select", + "label": "Layout", + "key": "span", + "defaultValue": 6, + "showInBar": true, + "barStyle": "buttons", + "options": [ + { + "label": "1 column", + "value": 6, + "barIcon": "Stop", + "barTitle": "1 column" + }, + { + "label": "2 columns", + "value": 3, + "barIcon": "ColumnTwoA", + "barTitle": "2 columns" + }, + { + "label": "3 columns", + "value": 2, + "barIcon": "ViewColumn", + "barTitle": "3 columns" + } + ] } ] }, diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte index ec5daa21b1..8e6984b182 100644 --- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte +++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte @@ -2,6 +2,7 @@ import BlockComponent from "components/BlockComponent.svelte" import Placeholder from "components/app/Placeholder.svelte" import { makePropSafe as safe } from "@budibase/string-templates" + import { getContext } from "svelte" export let dataSource export let actionUrl @@ -32,6 +33,7 @@ barcodeqr: "codescanner", bb_reference: "bbreferencefield", } + const context = getContext("context") let formId @@ -213,16 +215,18 @@ {/if} {#key fields} - - {#each fields as field, idx} - {#if getComponentForField(field) && field.active} - - {/if} - {/each} + +
+ {#each fields as field, idx} + {#if getComponentForField(field) && field.active} + + {/if} + {/each} +
{/key} @@ -232,3 +236,14 @@ text="Choose your table and add some fields to your form to get started" /> {/if} + + diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte index e24115ebc0..bc788a726d 100644 --- a/packages/client/src/components/app/forms/AttachmentField.svelte +++ b/packages/client/src/components/app/forms/AttachmentField.svelte @@ -11,6 +11,7 @@ export let extensions export let onChange export let maximum = undefined + export let span let fieldState let fieldApi @@ -72,6 +73,7 @@ {field} {disabled} {validation} + {span} type="attachment" bind:fieldState bind:fieldApi diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte index 6bcd20d250..661c0c2fad 100644 --- a/packages/client/src/components/app/forms/DateTimeField.svelte +++ b/packages/client/src/components/app/forms/DateTimeField.svelte @@ -13,6 +13,7 @@ export let validation export let defaultValue export let onChange + export let span let fieldState let fieldApi @@ -31,6 +32,7 @@ {disabled} {validation} {defaultValue} + {span} type="datetime" bind:fieldState bind:fieldApi diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index 5d4da5afef..d8b2c7a327 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/packages/client/src/components/app/forms/Field.svelte @@ -12,6 +12,7 @@ export let type export let disabled = false export let validation + export let span = 6 // Get contexts const formContext = getContext("form") @@ -62,40 +63,58 @@ }) - -
- {#key $component.editing} - - {/key} -
- {#if !formContext} - - {:else if !fieldState} - - {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)} - - {:else} - - {#if fieldState.error} -
{fieldState.error}
- {/if} +
+ {#key $component.editing} + + {/key} +
+ {#if !formContext} + + {:else if !fieldState} + + {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)} + + {:else} + + {#if fieldState.error} +
{fieldState.error}
{/if} -
+ {/if}
- +
From a209280daa33c248f78844685ddca66692499c70 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 24 Oct 2023 15:17:22 +0100 Subject: [PATCH 012/100] 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 013/100] 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 014/100] 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 015/100] 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 017/100] 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 018/100] 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 019/100] 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 020/100] 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 022/100] 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 023/100] 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 @@