From d03f96ceb8327d46245700c404831e8afd9c3bbc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 28 Apr 2023 09:03:09 +0100 Subject: [PATCH 01/59] Make all blindings global and improve client component performance --- .../builder/src/builderStore/dataBinding.js | 34 ++++++--- .../src/builderStore/store/frontend.js | 7 +- .../controls/DataProviderSelect.svelte | 9 +-- packages/client/manifest.json | 11 --- .../client/src/components/Component.svelte | 71 ++++++++++++++----- .../src/components/context/Provider.svelte | 6 +- packages/client/src/stores/context.js | 61 +++++++--------- packages/client/src/utils/componentProps.js | 16 +---- .../client/src/utils/enrichDataBinding.js | 1 + yarn.lock | 12 ++-- 10 files changed, 127 insertions(+), 101 deletions(-) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 0d41931a55..9f253f9f75 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -199,15 +199,7 @@ export const getContextProviderComponents = ( return [] } - // Get the component tree leading up to this component, ignoring the component - // itself - const path = findComponentPath(asset.props, componentId) - if (!options?.includeSelf) { - path.pop() - } - - // Filter by only data provider components - return path.filter(component => { + return findAllMatchingComponents(asset.props, component => { const def = store.actions.components.getDefinition(component._component) if (!def?.context) { return false @@ -222,6 +214,30 @@ export const getContextProviderComponents = ( const contexts = Array.isArray(def.context) ? def.context : [def.context] return contexts.find(context => context.type === type) != null }) + // + // // Get the component tree leading up to this component, ignoring the component + // // itself + // const path = findComponentPath(asset.props, componentId) + // if (!options?.includeSelf) { + // path.pop() + // } + // + // // Filter by only data provider components + // return path.filter(component => { + // const def = store.actions.components.getDefinition(component._component) + // if (!def?.context) { + // return false + // } + // + // // If no type specified, return anything that exposes context + // if (!type) { + // return true + // } + // + // // Otherwise only match components with the specific context type + // const contexts = Array.isArray(def.context) ? def.context : [def.context] + // return contexts.find(context => context.type === type) != null + // }) } /** diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index e264dc099b..fb3eb8f1d9 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -621,10 +621,9 @@ export const getFrontendStore = () => { else { if (setting.type === "dataProvider") { // Validate data provider exists, or else clear it - const treeId = parent?._id || component._id - const path = findComponentPath(screen?.props, treeId) - const providers = path.filter(component => - component._component?.endsWith("/dataprovider") + const providers = findAllMatchingComponents( + screen?.props, + component => component._component?.endsWith("/dataprovider") ) // Validate non-empty values const valid = providers?.some(dp => value.includes?.(dp._id)) diff --git a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte index 83255ec325..9fd220e798 100644 --- a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte @@ -1,15 +1,16 @@ +
editTableNameModal.confirm()}> + +
Date: Fri, 19 Jan 2024 11:32:13 +0000 Subject: [PATCH 39/59] Support custom validation rules for ejected block fields (#12799) --- .../components/app/blocks/CardsBlock.svelte | 2 +- .../components/app/blocks/TableBlock.svelte | 2 +- .../src/components/app/forms/Form.svelte | 4 +-- .../src/components/app/forms/InnerForm.svelte | 35 +++++++++---------- 4 files changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte index 3e48247f92..e0985a8979 100644 --- a/packages/client/src/components/app/blocks/CardsBlock.svelte +++ b/packages/client/src/components/app/blocks/CardsBlock.svelte @@ -88,7 +88,7 @@ {#if title || enrichedSearchColumns?.length || showTitleButton} diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte index 9d0db43bf4..55c9c938c3 100644 --- a/packages/client/src/components/app/forms/InnerForm.svelte +++ b/packages/client/src/components/app/forms/InnerForm.svelte @@ -11,7 +11,7 @@ export let size export let schema export let table - export let disableValidation = false + export let disableSchemaValidation = false export let editAutoColumns = false // We export this store so that when we remount the inner form we can still @@ -156,17 +156,16 @@ if (!field) { return } - // Create validation function based on field schema - const schemaConstraints = schema?.[field]?.constraints - const validator = disableValidation + const schemaConstraints = disableSchemaValidation ? null - : createValidatorFromConstraints( - schemaConstraints, - validationRules, - field, - table - ) + : schema?.[field]?.constraints + const validator = createValidatorFromConstraints( + schemaConstraints, + validationRules, + field, + table + ) // Sanitise the default value to ensure it doesn't contain invalid data defaultValue = sanitiseValue(defaultValue, schema?.[field], type) @@ -332,15 +331,15 @@ const { value, error } = fieldState // Create new validator - const schemaConstraints = schema?.[field]?.constraints - const validator = disableValidation + const schemaConstraints = disableSchemaValidation ? null - : createValidatorFromConstraints( - schemaConstraints, - validationRules, - field, - table - ) + : schema?.[field]?.constraints + const validator = createValidatorFromConstraints( + schemaConstraints, + validationRules, + field, + table + ) // Update validator fieldInfo.update(state => { From 2f410cf0b69d8913b7bf4ec50ada30032b0863b3 Mon Sep 17 00:00:00 2001 From: Budibase Staging Release Bot <> Date: Fri, 19 Jan 2024 11:34:43 +0000 Subject: [PATCH 40/59] Bump version to 2.15.1 --- lerna.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lerna.json b/lerna.json index f058050495..5fe9a6b261 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.15.0", + "version": "2.15.1", "npmClient": "yarn", "packages": [ "packages/*", From 45fa40496fe3190d6fc6ae30281814879a728f03 Mon Sep 17 00:00:00 2001 From: Dean Date: Fri, 19 Jan 2024 14:53:39 +0000 Subject: [PATCH 41/59] Added default sizing for buttons in button group, swapped Multistep block component style props for consistency --- packages/client/manifest.json | 34 +++++++++---------- .../src/components/app/ButtonGroup.svelte | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 676d161864..2a9bc6f258 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6098,23 +6098,6 @@ } ] }, - { - "tag": "style", - "type": "select", - "label": "Size", - "key": "size", - "options": [ - { - "label": "Medium", - "value": "spectrum--medium" - }, - { - "label": "Large", - "value": "spectrum--large" - } - ], - "defaultValue": "spectrum--medium" - }, { "tag": "style", "type": "select", @@ -6131,6 +6114,23 @@ } ], "defaultValue": "bottom" + }, + { + "tag": "style", + "type": "select", + "label": "Size", + "key": "size", + "options": [ + { + "label": "Medium", + "value": "spectrum--medium" + }, + { + "label": "Large", + "value": "spectrum--large" + } + ], + "defaultValue": "spectrum--medium" } ], "actions": [ diff --git a/packages/client/src/components/app/ButtonGroup.svelte b/packages/client/src/components/app/ButtonGroup.svelte index 4954704b1b..3ee703e253 100644 --- a/packages/client/src/components/app/ButtonGroup.svelte +++ b/packages/client/src/components/app/ButtonGroup.svelte @@ -29,7 +29,7 @@ type, quiet, disabled, - size, + size: size || "M", }} /> {/each} From 50078f4f0f85b7a67bd549c9b73f7a165df62aa4 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Fri, 19 Jan 2024 14:59:08 +0000 Subject: [PATCH 42/59] Fix issue where flagClient could be undefined when running outside of test mode --- packages/server/src/utilities/redis.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/server/src/utilities/redis.ts b/packages/server/src/utilities/redis.ts index d833ed2c10..a4154b7b95 100644 --- a/packages/server/src/utilities/redis.ts +++ b/packages/server/src/utilities/redis.ts @@ -94,7 +94,7 @@ export async function setTestFlag(id: string) { } export async function checkTestFlag(id: string) { - const flag = await flagClient.get(id) + const flag = await flagClient?.get(id) return !!(flag && flag.testing) } From 6ad865aa2b3c10e1c0ead6eac164eec2a9af7c82 Mon Sep 17 00:00:00 2001 From: Dean Date: Fri, 19 Jan 2024 15:08:53 +0000 Subject: [PATCH 43/59] Updated submodules --- packages/account-portal | 2 +- packages/pro | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/account-portal b/packages/account-portal index 11469c40d7..05c90ce551 160000 --- a/packages/account-portal +++ b/packages/account-portal @@ -1 +1 @@ -Subproject commit 11469c40d73ea58f2aec80c12c1946289b67c6f2 +Subproject commit 05c90ce55144e260da6688335c16783eab79bf96 diff --git a/packages/pro b/packages/pro index 31f11bcd33..ce7722ed44 160000 --- a/packages/pro +++ b/packages/pro @@ -1 +1 @@ -Subproject commit 31f11bcd3323d2105a83ebfdee8facc2900bb879 +Subproject commit ce7722ed4474718596b465dcfd49bef36cab2e42 From 331a4e83a82a784ea653a502dd3f584db49372f3 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Fri, 19 Jan 2024 15:13:04 +0000 Subject: [PATCH 44/59] submodules --- packages/account-portal | 2 +- packages/pro | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/account-portal b/packages/account-portal index 11469c40d7..05c90ce551 160000 --- a/packages/account-portal +++ b/packages/account-portal @@ -1 +1 @@ -Subproject commit 11469c40d73ea58f2aec80c12c1946289b67c6f2 +Subproject commit 05c90ce55144e260da6688335c16783eab79bf96 diff --git a/packages/pro b/packages/pro index 31f11bcd33..ce7722ed44 160000 --- a/packages/pro +++ b/packages/pro @@ -1 +1 @@ -Subproject commit 31f11bcd3323d2105a83ebfdee8facc2900bb879 +Subproject commit ce7722ed4474718596b465dcfd49bef36cab2e42 From c48f71ab76a3fff26bc0afde62563ffe328b786e Mon Sep 17 00:00:00 2001 From: Budibase Staging Release Bot <> Date: Fri, 19 Jan 2024 15:42:36 +0000 Subject: [PATCH 45/59] Bump version to 2.15.2 --- lerna.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lerna.json b/lerna.json index 5fe9a6b261..3ab56dc0b1 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.15.1", + "version": "2.15.2", "npmClient": "yarn", "packages": [ "packages/*", From 242dd3ea52e644f827f98f29803c26177e163eee Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Fri, 19 Jan 2024 16:04:44 +0000 Subject: [PATCH 46/59] ux tweaks to new automations setting page --- .../pages/builder/app/[application]/settings/_layout.svelte | 6 +++--- .../_components/HistoryDetailsPanel.svelte | 0 .../_components/StatusRenderer.svelte | 0 .../{automation-history => automations}/index.svelte | 6 +++--- .../pages/builder/app/[application]/settings/index.svelte | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) rename packages/builder/src/pages/builder/app/[application]/settings/{automation-history => automations}/_components/HistoryDetailsPanel.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/settings/{automation-history => automations}/_components/StatusRenderer.svelte (100%) rename packages/builder/src/pages/builder/app/[application]/settings/{automation-history => automations}/index.svelte (97%) diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte index 899b58ecf0..65a13f0bd9 100644 --- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte @@ -15,9 +15,9 @@ Automations - See your automation history and edit advanced settings + See your automation history and edit advanced settings Chain automations - Allow automations to trigger from other automations + Allow automations to trigger from other automations
History - Free plan stores up to 1 day of automation history + Free plan stores up to 1 day of automation history
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte index 501d34b12e..1c763724a1 100644 --- a/packages/builder/src/pages/builder/app/[application]/settings/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/settings/index.svelte @@ -1,5 +1,5 @@ From 3ab791710cc60b4ff3aec77c2c06a81869ef1a18 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Mon, 22 Jan 2024 09:40:56 +0000 Subject: [PATCH 47/59] fix issue where readable binding wasn't working correctly with named steps --- .../automation/SetupPanel/AutomationBlockSetup.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index a5a3165aeb..2f9907794e 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -184,7 +184,8 @@ } if ( - (idx === 0 && automation.trigger?.event === "row:update") || + idx === 0 && + automation.trigger?.event === "row:update" && automation.trigger?.event === "row:save" ) { if (name !== "id" && name !== "revision") return `trigger.row.${name}` From 64951d6f29c39d054197133e82b251c4735d8e8c Mon Sep 17 00:00:00 2001 From: Dean Date: Mon, 22 Jan 2024 09:44:57 +0000 Subject: [PATCH 48/59] PR feedback --- packages/client/src/components/app/Repeater.svelte | 10 ++++------ .../components/app/blocks/form/FormBlockWrapper.svelte | 3 ++- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/client/src/components/app/Repeater.svelte b/packages/client/src/components/app/Repeater.svelte index 95f53a6d01..8796078311 100644 --- a/packages/client/src/components/app/Repeater.svelte +++ b/packages/client/src/components/app/Repeater.svelte @@ -2,6 +2,7 @@ import { getContext } from "svelte" import Placeholder from "./Placeholder.svelte" import Container from "./Container.svelte" + import { ContextScopes } from "constants" export let dataProvider export let noRowsMessage @@ -9,9 +10,9 @@ export let hAlign export let vAlign export let gap - export let nested = false + export let scope = ContextScopes.Local - const { Provider, ContextScopes } = getContext("sdk") + const { Provider } = getContext("sdk") const component = getContext("component") $: rows = dataProvider?.rows ?? [] @@ -23,10 +24,7 @@ {:else if rows.length > 0} {#each rows as row, index} - + {/each} diff --git a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte index 666c8dbd73..5b89018fdf 100644 --- a/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte +++ b/packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte @@ -10,6 +10,7 @@ export let noRowsMessage const component = getContext("component") + const { ContextScopes } = getContext("sdk") $: providerId = `${$component.id}-provider` $: dataProvider = `{{ literal ${safe(providerId)} }}` @@ -55,7 +56,7 @@ noRowsMessage: noRowsMessage || "We couldn't find a row to display", direction: "column", hAlign: "center", - nested: true, + scope: ContextScopes.Global, }} > From bd0202e7b5b74b6139302c8b64aafe77e595faee Mon Sep 17 00:00:00 2001 From: melohagan <101575380+melohagan@users.noreply.github.com> Date: Mon, 22 Jan 2024 10:25:21 +0000 Subject: [PATCH 49/59] Error deleting datasource on first attempt at deleting (#12819) * Add badge photo to the employee import * Update revisions from relationships when loop deleting tables --- .../server/src/api/controllers/datasource.ts | 22 ++++++++++++++++++- .../src/db/defaultData/employeeImport.ts | 10 +++++++++ .../src/db/linkedRows/LinkController.ts | 2 +- .../types/src/documents/app/table/schema.ts | 1 + 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/server/src/api/controllers/datasource.ts b/packages/server/src/api/controllers/datasource.ts index a702a8cd84..d70c13f800 100644 --- a/packages/server/src/api/controllers/datasource.ts +++ b/packages/server/src/api/controllers/datasource.ts @@ -9,8 +9,11 @@ import { CreateDatasourceResponse, Datasource, DatasourcePlus, + Document, FetchDatasourceInfoRequest, FetchDatasourceInfoResponse, + FieldType, + RelationshipFieldMetadata, SourceName, UpdateDatasourceResponse, UserCtx, @@ -218,9 +221,26 @@ async function destroyInternalTablesBySourceId(datasourceId: string) { [] ) + function updateRevisions(deletedLinks: RelationshipFieldMetadata[]) { + for (const link of deletedLinks) { + datasourceTableDocs.forEach((doc: Document) => { + if (doc._id === link.tableId) { + doc._rev = link.tableRev + } + }) + } + } + // Destroy the tables. for (const table of datasourceTableDocs) { - await sdk.tables.internal.destroy(table) + const deleted = await sdk.tables.internal.destroy(table) + // Update the revisions of any tables that remain to be deleted + const deletedLinks: RelationshipFieldMetadata[] = Object.values( + deleted.table.schema + ) + .filter(field => field.type === FieldType.LINK) + .map(field => field as RelationshipFieldMetadata) + updateRevisions(deletedLinks) } } diff --git a/packages/server/src/db/defaultData/employeeImport.ts b/packages/server/src/db/defaultData/employeeImport.ts index d2bab601a0..c3c2082285 100644 --- a/packages/server/src/db/defaultData/employeeImport.ts +++ b/packages/server/src/db/defaultData/employeeImport.ts @@ -13,6 +13,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Senior"], "Start Date": "2015-02-12T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Mandy", @@ -28,6 +29,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Senior"], "Start Date": "2017-09-10T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Holly", @@ -43,6 +45,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Senior"], "Start Date": "2022-02-12T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Francis", @@ -58,6 +61,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Apprentice"], "Start Date": "2021-03-10T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Richard", @@ -73,6 +77,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Apprentice"], "Start Date": "2020-07-09T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Donald", @@ -88,6 +93,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Junior"], "Start Date": "2018-04-13T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Maria", @@ -103,6 +109,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Manager"], "Start Date": "2016-05-22T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Suzy", @@ -118,6 +125,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Senior", "Manager"], "Start Date": "2019-05-01T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Patrick", @@ -133,6 +141,7 @@ export const employeeImport = [ type: "row", "Employee Level": ["Apprentice"], "Start Date": "2014-08-30T12:00:00.000", + "Badge Photo": [], }, { "First Name": "Brayden", @@ -148,5 +157,6 @@ export const employeeImport = [ type: "row", "Employee Level": ["Contractor"], "Start Date": "2022-11-09T12:00:00.000", + "Badge Photo": [], }, ] diff --git a/packages/server/src/db/linkedRows/LinkController.ts b/packages/server/src/db/linkedRows/LinkController.ts index f52694465f..a7de3ff8d8 100644 --- a/packages/server/src/db/linkedRows/LinkController.ts +++ b/packages/server/src/db/linkedRows/LinkController.ts @@ -440,7 +440,7 @@ class LinkController { if (field.type === FieldTypes.LINK && field.fieldName) { const linkedTable = await this._db.get(field.tableId) delete linkedTable.schema[field.fieldName] - await this._db.put(linkedTable) + field.tableRev = (await this._db.put(linkedTable)).rev } } catch (err: any) { logging.logWarn(err?.message, err) diff --git a/packages/types/src/documents/app/table/schema.ts b/packages/types/src/documents/app/table/schema.ts index 19a7303072..e9eb139ebc 100644 --- a/packages/types/src/documents/app/table/schema.ts +++ b/packages/types/src/documents/app/table/schema.ts @@ -21,6 +21,7 @@ interface BaseRelationshipFieldMetadata main?: boolean fieldName: string tableId: string + tableRev?: string subtype?: AutoFieldSubTypes.CREATED_BY | AutoFieldSubTypes.UPDATED_BY } From fa36701f0fdf2f7c1b3290ca847e041d9d567386 Mon Sep 17 00:00:00 2001 From: Conor Webb <126772285+ConorWebb96@users.noreply.github.com> Date: Mon, 22 Jan 2024 10:54:47 +0000 Subject: [PATCH 50/59] Added function to get correct plan display name (#12810) * Changed minPlan BUSINESS to PREMIUM_PLUS * Added new helper to display the correct string plan * Changed ManageAccessModal to use the new helper * Refactored to use plan title helper, removed title function * Removed capitalised function from svelte template * Fixed linting issues * Ran yarn lint. Fixed linting issues. --- .../DataTable/modals/ManageAccessModal.svelte | 5 ++++- packages/builder/src/helpers/planTitle.js | 11 ++++++++++ .../pages/builder/portal/account/usage.svelte | 21 ++----------------- .../server/src/sdk/app/permissions/index.ts | 2 +- 4 files changed, 18 insertions(+), 21 deletions(-) create mode 100644 packages/builder/src/helpers/planTitle.js diff --git a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte index 161757c570..09553c1bcd 100644 --- a/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte @@ -13,6 +13,7 @@ Icon, } from "@budibase/bbui" import { capitalise } from "helpers" + import { getFormattedPlanName } from "helpers/planTitle" import { get } from "svelte/store" export let resourceId @@ -99,7 +100,9 @@ {#if requiresPlanToModify} - {capitalise(requiresPlanToModify)} + {getFormattedPlanName(requiresPlanToModify)} {/if} diff --git a/packages/builder/src/helpers/planTitle.js b/packages/builder/src/helpers/planTitle.js new file mode 100644 index 0000000000..dc07e8be2f --- /dev/null +++ b/packages/builder/src/helpers/planTitle.js @@ -0,0 +1,11 @@ +import { PlanType } from "@budibase/types" + +export function getFormattedPlanName(userPlanType) { + let planName = "Free" + if (userPlanType === PlanType.PREMIUM_PLUS) { + planName = "Premium" + } else if (userPlanType === PlanType.ENTERPRISE_BASIC) { + planName = "Enterprise" + } + return `${planName} Plan` +} diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte index 9e7c402e91..8eb26c20d6 100644 --- a/packages/builder/src/pages/builder/portal/account/usage.svelte +++ b/packages/builder/src/pages/builder/portal/account/usage.svelte @@ -15,7 +15,7 @@ import { DashCard, Usage } from "components/usage" import { PlanModel } from "constants" import { sdk } from "@budibase/shared-core" - import { PlanType } from "@budibase/types" + import { getFormattedPlanName } from "helpers/planTitle" let staticUsage = [] let monthlyUsage = [] @@ -100,23 +100,6 @@ cancelAt = license?.billing?.subscription?.cancelAt } - const capitalise = string => { - if (string) { - return string.charAt(0).toUpperCase() + string.slice(1) - } - } - - const planTitle = () => { - const planType = license?.plan.type - let planName = license?.plan.type - if (planType === PlanType.PREMIUM_PLUS) { - planName = "Premium" - } else if (planType === PlanType.ENTERPRISE_BASIC) { - planName = "Enterprise" - } - return `${capitalise(planName)} Plan` - } - const getDaysRemaining = timestamp => { if (!timestamp) { return @@ -227,7 +210,7 @@ Date: Mon, 22 Jan 2024 11:03:05 +0000 Subject: [PATCH 51/59] Revert "Global bindings" --- .../src/builderStore/componentUtils.js | 9 +- .../builder/src/builderStore/dataBinding.js | 367 ++++++++---------- .../src/builderStore/store/frontend.js | 19 +- .../ButtonActionEditor/actions/utils.js | 58 ++- .../controls/DataProviderSelect.svelte | 9 +- .../DataSourceSelect/DataSourceSelect.svelte | 15 +- packages/client/manifest.json | 72 +--- .../client/src/components/Component.svelte | 140 ++----- .../src/components/app/DataProvider.svelte | 2 +- .../components/app/EmptyPlaceholder.svelte | 21 +- .../src/components/app/GridBlock.svelte | 106 +++-- .../client/src/components/app/Repeater.svelte | 4 +- .../app/blocks/MultiStepFormblock.svelte | 9 +- .../components/app/blocks/TableBlock.svelte | 1 - .../app/blocks/form/FormBlockWrapper.svelte | 2 - .../src/components/app/forms/Form.svelte | 38 +- .../src/components/context/Provider.svelte | 19 +- packages/client/src/constants.js | 5 - packages/client/src/sdk.js | 3 +- packages/client/src/stores/context.js | 115 ++---- packages/client/src/utils/buttonActions.js | 147 ++++--- packages/client/src/utils/componentProps.js | 16 +- packages/frontend-core/src/api/rows.js | 10 +- 23 files changed, 503 insertions(+), 684 deletions(-) diff --git a/packages/builder/src/builderStore/componentUtils.js b/packages/builder/src/builderStore/componentUtils.js index 733ce0948e..a7ee3ff351 100644 --- a/packages/builder/src/builderStore/componentUtils.js +++ b/packages/builder/src/builderStore/componentUtils.js @@ -92,14 +92,7 @@ export const findAllMatchingComponents = (rootComponent, selector) => { } /** - * Recurses through the component tree and finds all components. - */ -export const findAllComponents = rootComponent => { - return findAllMatchingComponents(rootComponent, () => true) -} - -/** - * Finds the closest parent component which matches certain criteria + * Finds the closes parent component which matches certain criteria */ export const findClosestMatchingComponent = ( rootComponent, diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 85d5046d8c..52368a0723 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -1,7 +1,6 @@ import { cloneDeep } from "lodash/fp" import { get } from "svelte/store" import { - findAllComponents, findAllMatchingComponents, findComponent, findComponentPath, @@ -103,9 +102,6 @@ export const getAuthBindings = () => { return bindings } -/** - * Gets all bindings for environment variables - */ export const getEnvironmentBindings = () => { let envVars = get(environment).variables return envVars.map(variable => { @@ -134,22 +130,26 @@ export const toBindingsArray = (valueMap, prefix, category) => { if (!binding) { return acc } + let config = { type: "context", runtimeBinding: binding, readableBinding: `${prefix}.${binding}`, icon: "Brackets", } + if (category) { config.category = category } + acc.push(config) + return acc }, []) } /** - * Utility to covert a map of readable bindings to runtime + * Utility - coverting a map of readable bindings to runtime */ export const readableToRuntimeMap = (bindings, ctx) => { if (!bindings || !ctx) { @@ -162,7 +162,7 @@ export const readableToRuntimeMap = (bindings, ctx) => { } /** - * Utility to covert a map of runtime bindings to readable bindings + * Utility - coverting a map of runtime bindings to readable */ export const runtimeToReadableMap = (bindings, ctx) => { if (!bindings || !ctx) { @@ -188,23 +188,15 @@ export const getComponentBindableProperties = (asset, componentId) => { if (!def?.context) { return [] } - const contexts = Array.isArray(def.context) ? def.context : [def.context] // Get the bindings for the component - const componentContext = { - component, - definition: def, - contexts, - } - return generateComponentContextBindings(asset, componentContext) + return getProviderContextBindings(asset, component) } /** - * Gets all component contexts available to a certain component. This handles - * both global and local bindings, taking into account a component's position - * in the component tree. + * Gets all data provider components above a component. */ -export const getComponentContexts = ( +export const getContextProviderComponents = ( asset, componentId, type, @@ -213,55 +205,30 @@ export const getComponentContexts = ( if (!asset || !componentId) { return [] } - let map = {} - // Processes all contexts exposed by a component - const processContexts = scope => component => { + // Get the component tree leading up to this component, ignoring the component + // itself + const path = findComponentPath(asset.props, componentId) + if (!options?.includeSelf) { + path.pop() + } + + // Filter by only data provider components + return path.filter(component => { const def = store.actions.components.getDefinition(component._component) if (!def?.context) { - return + return false } - if (!map[component._id]) { - map[component._id] = { - component, - definition: def, - contexts: [], - } + + // If no type specified, return anything that exposes context + if (!type) { + return true } + + // Otherwise only match components with the specific context type const contexts = Array.isArray(def.context) ? def.context : [def.context] - contexts.forEach(context => { - // Ensure type matches - if (type && context.type !== type) { - return - } - // Ensure scope matches - let contextScope = context.scope || "global" - if (contextScope !== scope) { - return - } - // Ensure the context is compatible with the component's current settings - if (!isContextCompatibleWithComponent(context, component)) { - return - } - map[component._id].contexts.push(context) - }) - } - - // Process all global contexts - const allComponents = findAllComponents(asset.props) - allComponents.forEach(processContexts("global")) - - // Process all local contexts - const localComponents = findComponentPath(asset.props, componentId) - localComponents.forEach(processContexts("local")) - - // Exclude self if required - if (!options?.includeSelf) { - delete map[componentId] - } - - // Only return components which provide at least 1 matching context - return Object.values(map).filter(x => x.contexts.length > 0) + return contexts.find(context => context.type === type) != null + }) } /** @@ -273,19 +240,20 @@ export const getActionProviders = ( actionType, options = { includeSelf: false } ) => { - if (!asset) { + if (!asset || !componentId) { return [] } - // Get all components - const components = findAllComponents(asset.props) + // Get the component tree leading up to this component, ignoring the component + // itself + const path = findComponentPath(asset.props, componentId) + if (!options?.includeSelf) { + path.pop() + } // Find matching contexts and generate bindings let providers = [] - components.forEach(component => { - if (!options?.includeSelf && component._id === componentId) { - return - } + path.forEach(component => { const def = store.actions.components.getDefinition(component._component) const actions = (def?.actions || []).map(action => { return typeof action === "string" ? { type: action } : action @@ -349,135 +317,142 @@ export const getDatasourceForProvider = (asset, component) => { * Gets all bindable data properties from component data contexts. */ const getContextBindings = (asset, componentId) => { - // Get all available contexts for this component - const componentContexts = getComponentContexts(asset, componentId) + // Extract any components which provide data contexts + const dataProviders = getContextProviderComponents(asset, componentId) - // Generate bindings for each context - return componentContexts - .map(componentContext => { - return generateComponentContextBindings(asset, componentContext) - }) - .flat() + // Generate bindings for all matching components + return getProviderContextBindings(asset, dataProviders) } /** - * Generates a set of bindings for a given component context + * Gets the context bindings exposed by a set of data provider components. */ -const generateComponentContextBindings = (asset, componentContext) => { - const { component, definition, contexts } = componentContext - if (!component || !definition || !contexts?.length) { +const getProviderContextBindings = (asset, dataProviders) => { + if (!asset || !dataProviders) { return [] } + // Ensure providers is an array + if (!Array.isArray(dataProviders)) { + dataProviders = [dataProviders] + } + // Create bindings for each data provider let bindings = [] - contexts.forEach(context => { - if (!context?.type) { - return - } + dataProviders.forEach(component => { + const def = store.actions.components.getDefinition(component._component) + const contexts = Array.isArray(def.context) ? def.context : [def.context] - let schema - let table - let readablePrefix - let runtimeSuffix = context.suffix - - if (context.type === "form") { - // Forms do not need table schemas - // Their schemas are built from their component field names - schema = buildFormSchema(component, asset) - readablePrefix = "Fields" - } else if (context.type === "static") { - // Static contexts are fully defined by the components - schema = {} - const values = context.values || [] - values.forEach(value => { - schema[value.key] = { - name: value.label, - type: value.type || "string", - } - }) - } else if (context.type === "schema") { - // Schema contexts are generated dynamically depending on their data - const datasource = getDatasourceForProvider(asset, component) - if (!datasource) { + // Create bindings for each context block provided by this data provider + contexts.forEach(context => { + if (!context?.type) { return } - const info = getSchemaForDatasource(asset, datasource) - schema = info.schema - table = info.table - // Determine what to prefix bindings with - if (datasource.type === "jsonarray") { - // For JSON arrays, use the array name as the readable prefix - const split = datasource.label.split(".") - readablePrefix = split[split.length - 1] - } else if (datasource.type === "viewV2") { - // For views, use the view name - const view = Object.values(table?.views || {}).find( - view => view.id === datasource.id + let schema + let table + let readablePrefix + let runtimeSuffix = context.suffix + + if (context.type === "form") { + // Forms do not need table schemas + // Their schemas are built from their component field names + schema = buildFormSchema(component, asset) + readablePrefix = "Fields" + } else if (context.type === "static") { + // Static contexts are fully defined by the components + schema = {} + const values = context.values || [] + values.forEach(value => { + schema[value.key] = { + name: value.label, + type: value.type || "string", + } + }) + } else if (context.type === "schema") { + // Schema contexts are generated dynamically depending on their data + const datasource = getDatasourceForProvider(asset, component) + if (!datasource) { + return + } + const info = getSchemaForDatasource(asset, datasource) + schema = info.schema + table = info.table + + // Determine what to prefix bindings with + if (datasource.type === "jsonarray") { + // For JSON arrays, use the array name as the readable prefix + const split = datasource.label.split(".") + readablePrefix = split[split.length - 1] + } else if (datasource.type === "viewV2") { + // For views, use the view name + const view = Object.values(table?.views || {}).find( + view => view.id === datasource.id + ) + readablePrefix = view?.name + } else { + // Otherwise use the table name + readablePrefix = info.table?.name + } + } + if (!schema) { + return + } + + const keys = Object.keys(schema).sort() + + // Generate safe unique runtime prefix + let providerId = component._id + if (runtimeSuffix) { + providerId += `-${runtimeSuffix}` + } + + if (!filterCategoryByContext(component, context)) { + return + } + + const safeComponentId = makePropSafe(providerId) + + // Create bindable properties for each schema field + keys.forEach(key => { + const fieldSchema = schema[key] + + // Make safe runtime binding + const safeKey = key.split(".").map(makePropSafe).join(".") + const runtimeBinding = `${safeComponentId}.${safeKey}` + + // Optionally use a prefix with readable bindings + let readableBinding = component._instanceName + if (readablePrefix) { + readableBinding += `.${readablePrefix}` + } + readableBinding += `.${fieldSchema.name || key}` + + const bindingCategory = getComponentBindingCategory( + component, + context, + def ) - readablePrefix = view?.name - } else { - // Otherwise use the table name - readablePrefix = info.table?.name - } - } - if (!schema) { - return - } - const keys = Object.keys(schema).sort() - - // Generate safe unique runtime prefix - let providerId = component._id - if (runtimeSuffix) { - providerId += `-${runtimeSuffix}` - } - const safeComponentId = makePropSafe(providerId) - - // Create bindable properties for each schema field - keys.forEach(key => { - const fieldSchema = schema[key] - - // Make safe runtime binding - const safeKey = key.split(".").map(makePropSafe).join(".") - const runtimeBinding = `${safeComponentId}.${safeKey}` - - // Optionally use a prefix with readable bindings - let readableBinding = component._instanceName - if (readablePrefix) { - readableBinding += `.${readablePrefix}` - } - readableBinding += `.${fieldSchema.name || key}` - - // Determine which category this binding belongs in - const bindingCategory = getComponentBindingCategory( - component, - context, - definition - ) - - // Temporarily append scope for debugging - const scope = `[${(context.scope || "global").toUpperCase()}]` - - // Create the binding object - bindings.push({ - type: "context", - runtimeBinding, - readableBinding: `${scope} ${readableBinding}`, - // Field schema and provider are required to construct relationship - // datasource options, based on bindable properties - fieldSchema, - providerId, - // Table ID is used by JSON fields to know what table the field is in - tableId: table?._id, - component: component._component, - category: bindingCategory.category, - icon: bindingCategory.icon, - display: { - name: `${scope} ${fieldSchema.name || key}`, - type: fieldSchema.type, - }, + // Create the binding object + bindings.push({ + type: "context", + runtimeBinding, + readableBinding, + // Field schema and provider are required to construct relationship + // datasource options, based on bindable properties + fieldSchema, + providerId, + // Table ID is used by JSON fields to know what table the field is in + tableId: table?._id, + component: component._component, + category: bindingCategory.category, + icon: bindingCategory.icon, + display: { + name: fieldSchema.name || key, + type: fieldSchema.type, + }, + }) }) }) }) @@ -485,38 +460,25 @@ const generateComponentContextBindings = (asset, componentContext) => { return bindings } -/** - * Checks if a certain data context is compatible with a certain instance of a - * configured component. - */ -const isContextCompatibleWithComponent = (context, component) => { - if (!component) { - return false - } - const { _component, actionType } = component - const { type } = context - - // Certain types of form blocks only allow certain contexts +// Exclude a data context based on the component settings +const filterCategoryByContext = (component, context) => { + const { _component } = component if (_component.endsWith("formblock")) { if ( - (actionType === "Create" && type === "schema") || - (actionType === "View" && type === "form") + (component.actionType === "Create" && context.type === "schema") || + (component.actionType === "View" && context.type === "form") ) { return false } } - - // Allow the context by default return true } // Enrich binding category information for certain components const getComponentBindingCategory = (component, context, def) => { - // Default category to component name let icon = def.icon let category = component._instanceName - // Form block edge case if (component._component.endsWith("formblock")) { if (context.type === "form") { category = `${component._instanceName} - Fields` @@ -534,7 +496,7 @@ const getComponentBindingCategory = (component, context, def) => { } /** - * Gets all bindable properties from the logged-in user. + * Gets all bindable properties from the logged in user. */ export const getUserBindings = () => { let bindings = [] @@ -604,7 +566,6 @@ const getDeviceBindings = () => { /** * Gets all selected rows bindings for tables in the current asset. - * TODO: remove in future because we don't need a separate store for this */ const getSelectedRowsBindings = asset => { let bindings = [] @@ -647,9 +608,6 @@ const getSelectedRowsBindings = asset => { return bindings } -/** - * Generates a state binding for a certain key name - */ export const makeStateBinding = key => { return { type: "context", @@ -704,9 +662,6 @@ const getUrlBindings = asset => { return urlParamBindings.concat([queryParamsBinding]) } -/** - * Generates all bindings for role IDs - */ const getRoleBindings = () => { return (get(rolesStore) || []).map(role => { return { diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index ce2cac9781..b05b127b1c 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -709,9 +709,10 @@ export const getFrontendStore = () => { else { if (setting.type === "dataProvider") { // Validate data provider exists, or else clear it - const providers = findAllMatchingComponents( - screen?.props, - component => component._component?.endsWith("/dataprovider") + const treeId = parent?._id || component._id + const path = findComponentPath(screen?.props, treeId) + const providers = path.filter(component => + component._component?.endsWith("/dataprovider") ) // Validate non-empty values const valid = providers?.some(dp => value.includes?.(dp._id)) @@ -733,16 +734,6 @@ export const getFrontendStore = () => { return null } - // Find all existing components of this type so that we can give this - // component a unique name - const screen = get(selectedScreen).props - const otherComponents = findAllMatchingComponents( - screen, - x => x._component === definition.component && x._id !== screen._id - ) - let name = definition.friendlyName || definition.name - name = `${name} ${otherComponents.length + 1}` - // Generate basic component structure let instance = { _id: Helpers.uuid(), @@ -752,7 +743,7 @@ export const getFrontendStore = () => { hover: {}, active: {}, }, - _instanceName: name, + _instanceName: `New ${definition.friendlyName || definition.name}`, ...presetProps, } diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js index bdcd3a7838..aa076fdd3e 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js @@ -1,4 +1,5 @@ -import { getComponentContexts } from "builderStore/dataBinding" +import { getContextProviderComponents } from "builderStore/dataBinding" +import { store } from "builderStore" import { capitalise } from "helpers" // Generates bindings for all components that provider "datasource like" @@ -7,49 +8,58 @@ import { capitalise } from "helpers" // Some examples are saving rows or duplicating rows. export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => { // Get all form context providers - const formComponentContexts = getComponentContexts( + const formComponents = getContextProviderComponents( asset, componentId, "form", - { - includeSelf: nested, - } + { includeSelf: nested } ) + // Get all schema context providers - const schemaComponentContexts = getComponentContexts( + const schemaComponents = getContextProviderComponents( asset, componentId, "schema", - { - includeSelf: nested, - } + { includeSelf: nested } ) + // Generate contexts for all form providers + const formContexts = formComponents.map(component => ({ + component, + context: extractComponentContext(component, "form"), + })) + + // Generate contexts for all schema providers + const schemaContexts = schemaComponents.map(component => ({ + component, + context: extractComponentContext(component, "schema"), + })) + // Check for duplicate contexts by the same component. In this case, attempt // to label contexts with their suffixes - schemaComponentContexts.forEach(schemaContext => { + schemaContexts.forEach(schemaContext => { // Check if we have a form context for this component const id = schemaContext.component._id - const existing = formComponentContexts.find(x => x.component._id === id) + const existing = formContexts.find(x => x.component._id === id) if (existing) { - if (existing.contexts[0].suffix) { - const suffix = capitalise(existing.contexts[0].suffix) + if (existing.context.suffix) { + const suffix = capitalise(existing.context.suffix) existing.readableSuffix = ` - ${suffix}` } - if (schemaContext.contexts[0].suffix) { - const suffix = capitalise(schemaContext.contexts[0].suffix) + if (schemaContext.context.suffix) { + const suffix = capitalise(schemaContext.context.suffix) schemaContext.readableSuffix = ` - ${suffix}` } } }) // Generate bindings for all contexts - const allContexts = formComponentContexts.concat(schemaComponentContexts) - return allContexts.map(({ component, contexts, readableSuffix }) => { + const allContexts = formContexts.concat(schemaContexts) + return allContexts.map(({ component, context, readableSuffix }) => { let readableBinding = component._instanceName let runtimeBinding = component._id - if (contexts[0].suffix) { - runtimeBinding += `-${contexts[0].suffix}` + if (context.suffix) { + runtimeBinding += `-${context.suffix}` } if (readableSuffix) { readableBinding += readableSuffix @@ -60,3 +70,13 @@ export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => { } }) } + +// Gets a context definition of a certain type from a component definition +const extractComponentContext = (component, contextType) => { + const def = store.actions.components.getDefinition(component?._component) + if (!def) { + return null + } + const contexts = Array.isArray(def.context) ? def.context : [def.context] + return contexts.find(context => context?.type === contextType) +} diff --git a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte index 9fd220e798..83255ec325 100644 --- a/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte @@ -1,16 +1,15 @@