MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12832 from Budibase/revert-11830-global-bindings 

Revert "Global bindings"
This commit is contained in:
deanhannigan 2024-01-22 11:09:37 +00:00 committed by GitHub
parent fa36701f0f b2c790650b
commit 36c03ad2a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 503 additions and 684 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/builder/src/builderStore/componentUtils.js
View File

@ -92,14 +92,7 @@ export const findAllMatchingComponents = (rootComponent, selector) => {
} }
/** /**
* Recurses through the component tree and finds all components. * Finds the closes parent component which matches certain criteria
*/
export const findAllComponents = rootComponent => {
return findAllMatchingComponents(rootComponent, () => true)
}
/**
* Finds the closest parent component which matches certain criteria
*/ */
export const findClosestMatchingComponent = ( export const findClosestMatchingComponent = (
rootComponent, rootComponent,

367
packages/builder/src/builderStore/dataBinding.js
View File

@ -1,7 +1,6 @@
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
import { get } from "svelte/store" import { get } from "svelte/store"
import { import {
findAllComponents,
findAllMatchingComponents, findAllMatchingComponents,
findComponent, findComponent,
findComponentPath, findComponentPath,
@ -103,9 +102,6 @@ export const getAuthBindings = () => {
return bindings return bindings
} }
/**
* Gets all bindings for environment variables
*/
export const getEnvironmentBindings = () => { export const getEnvironmentBindings = () => {
let envVars = get(environment).variables let envVars = get(environment).variables
return envVars.map(variable => { return envVars.map(variable => {
@ -134,22 +130,26 @@ export const toBindingsArray = (valueMap, prefix, category) => {
if (!binding) { if (!binding) {
return acc return acc
} }
let config = { let config = {
type: "context", type: "context",
runtimeBinding: binding, runtimeBinding: binding,
readableBinding: `${prefix}.${binding}`, readableBinding: `${prefix}.${binding}`,
icon: "Brackets", icon: "Brackets",
} }
if (category) { if (category) {
config.category = category config.category = category
} }
acc.push(config) acc.push(config)
return acc 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) => { export const readableToRuntimeMap = (bindings, ctx) => {
if (!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) => { export const runtimeToReadableMap = (bindings, ctx) => {
if (!bindings || !ctx) { if (!bindings || !ctx) {
@ -188,23 +188,15 @@ export const getComponentBindableProperties = (asset, componentId) => {
if (!def?.context) { if (!def?.context) {
return [] return []
} }
const contexts = Array.isArray(def.context) ? def.context : [def.context]
// Get the bindings for the component // Get the bindings for the component
const componentContext = { return getProviderContextBindings(asset, component)
component,
definition: def,
contexts,
}
return generateComponentContextBindings(asset, componentContext)
} }
/** /**
* Gets all component contexts available to a certain component. This handles * Gets all data provider components above a component.
* both global and local bindings, taking into account a component's position
* in the component tree.
*/ */
export const getComponentContexts = ( export const getContextProviderComponents = (
asset, asset,
componentId, componentId,
type, type,
@ -213,55 +205,30 @@ export const getComponentContexts = (
if (!asset || !componentId) { if (!asset || !componentId) {
return [] return []
} }
let map = {}
// Processes all contexts exposed by a component // Get the component tree leading up to this component, ignoring the component
const processContexts = scope => 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) const def = store.actions.components.getDefinition(component._component)
if (!def?.context) { if (!def?.context) {
return return false
} }
if (!map[component._id]) {
map[component._id] = { // If no type specified, return anything that exposes context
component, if (!type) {
definition: def, return true
contexts: [],
}
} }
// Otherwise only match components with the specific context type
const contexts = Array.isArray(def.context) ? def.context : [def.context] const contexts = Array.isArray(def.context) ? def.context : [def.context]
contexts.forEach(context => { return contexts.find(context => context.type === type) != null
// 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)
} }
/** /**
@ -273,19 +240,20 @@ export const getActionProviders = (
actionType, actionType,
options = { includeSelf: false } options = { includeSelf: false }
) => { ) => {
if (!asset) { if (!asset || !componentId) {
return [] return []
} }
// Get all components // Get the component tree leading up to this component, ignoring the component
const components = findAllComponents(asset.props) // itself
const path = findComponentPath(asset.props, componentId)
if (!options?.includeSelf) {
path.pop()
}
// Find matching contexts and generate bindings // Find matching contexts and generate bindings
let providers = [] let providers = []
components.forEach(component => { path.forEach(component => {
if (!options?.includeSelf && component._id === componentId) {
return
}
const def = store.actions.components.getDefinition(component._component) const def = store.actions.components.getDefinition(component._component)
const actions = (def?.actions || []).map(action => { const actions = (def?.actions || []).map(action => {
return typeof action === "string" ? { type: action } : 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. * Gets all bindable data properties from component data contexts.
*/ */
const getContextBindings = (asset, componentId) => { const getContextBindings = (asset, componentId) => {
// Get all available contexts for this component // Extract any components which provide data contexts
const componentContexts = getComponentContexts(asset, componentId) const dataProviders = getContextProviderComponents(asset, componentId)
// Generate bindings for each context // Generate bindings for all matching components
return componentContexts return getProviderContextBindings(asset, dataProviders)
.map(componentContext => {
return generateComponentContextBindings(asset, componentContext)
})
.flat()
} }
/** /**
* 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 getProviderContextBindings = (asset, dataProviders) => {
const { component, definition, contexts } = componentContext if (!asset || !dataProviders) {
if (!component || !definition || !contexts?.length) {
return [] return []
} }
// Ensure providers is an array
if (!Array.isArray(dataProviders)) {
dataProviders = [dataProviders]
}
// Create bindings for each data provider // Create bindings for each data provider
let bindings = [] let bindings = []
contexts.forEach(context => { dataProviders.forEach(component => {
if (!context?.type) { const def = store.actions.components.getDefinition(component._component)
return const contexts = Array.isArray(def.context) ? def.context : [def.context]
}
let schema // Create bindings for each context block provided by this data provider
let table contexts.forEach(context => {
let readablePrefix if (!context?.type) {
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 return
} }
const info = getSchemaForDatasource(asset, datasource)
schema = info.schema
table = info.table
// Determine what to prefix bindings with let schema
if (datasource.type === "jsonarray") { let table
// For JSON arrays, use the array name as the readable prefix let readablePrefix
const split = datasource.label.split(".") let runtimeSuffix = context.suffix
readablePrefix = split[split.length - 1]
} else if (datasource.type === "viewV2") { if (context.type === "form") {
// For views, use the view name // Forms do not need table schemas
const view = Object.values(table?.views || {}).find( // Their schemas are built from their component field names
view => view.id === datasource.id 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() // Create the binding object
bindings.push({
// Generate safe unique runtime prefix type: "context",
let providerId = component._id runtimeBinding,
if (runtimeSuffix) { readableBinding,
providerId += `-${runtimeSuffix}` // Field schema and provider are required to construct relationship
} // datasource options, based on bindable properties
const safeComponentId = makePropSafe(providerId) fieldSchema,
providerId,
// Create bindable properties for each schema field // Table ID is used by JSON fields to know what table the field is in
keys.forEach(key => { tableId: table?._id,
const fieldSchema = schema[key] component: component._component,
category: bindingCategory.category,
// Make safe runtime binding icon: bindingCategory.icon,
const safeKey = key.split(".").map(makePropSafe).join(".") display: {
const runtimeBinding = `${safeComponentId}.${safeKey}` name: fieldSchema.name || key,
type: fieldSchema.type,
// 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,
},
}) })
}) })
}) })
@ -485,38 +460,25 @@ const generateComponentContextBindings = (asset, componentContext) => {
return bindings return bindings
} }
/** // Exclude a data context based on the component settings
* Checks if a certain data context is compatible with a certain instance of a const filterCategoryByContext = (component, context) => {
* configured component. const { _component } = 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
if (_component.endsWith("formblock")) { if (_component.endsWith("formblock")) {
if ( if (
(actionType === "Create" && type === "schema") || (component.actionType === "Create" && context.type === "schema") ||
(actionType === "View" && type === "form") (component.actionType === "View" && context.type === "form")
) { ) {
return false return false
} }
} }
// Allow the context by default
return true return true
} }
// Enrich binding category information for certain components // Enrich binding category information for certain components
const getComponentBindingCategory = (component, context, def) => { const getComponentBindingCategory = (component, context, def) => {
// Default category to component name
let icon = def.icon let icon = def.icon
let category = component._instanceName let category = component._instanceName
// Form block edge case
if (component._component.endsWith("formblock")) { if (component._component.endsWith("formblock")) {
if (context.type === "form") { if (context.type === "form") {
category = `${component._instanceName} - Fields` 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 = () => { export const getUserBindings = () => {
let bindings = [] let bindings = []
@ -604,7 +566,6 @@ const getDeviceBindings = () => {
/** /**
* Gets all selected rows bindings for tables in the current asset. * 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 => { const getSelectedRowsBindings = asset => {
let bindings = [] let bindings = []
@ -647,9 +608,6 @@ const getSelectedRowsBindings = asset => {
return bindings return bindings
} }
/**
* Generates a state binding for a certain key name
*/
export const makeStateBinding = key => { export const makeStateBinding = key => {
return { return {
type: "context", type: "context",
@ -704,9 +662,6 @@ const getUrlBindings = asset => {
return urlParamBindings.concat([queryParamsBinding]) return urlParamBindings.concat([queryParamsBinding])
} }
/**
* Generates all bindings for role IDs
*/
const getRoleBindings = () => { const getRoleBindings = () => {
return (get(rolesStore) || []).map(role => { return (get(rolesStore) || []).map(role => {
return { return {

19
packages/builder/src/builderStore/store/frontend.js
View File

@ -709,9 +709,10 @@ export const getFrontendStore = () => {
else { else {
if (setting.type === "dataProvider") { if (setting.type === "dataProvider") {
// Validate data provider exists, or else clear it // Validate data provider exists, or else clear it
const providers = findAllMatchingComponents( const treeId = parent?._id || component._id
screen?.props, const path = findComponentPath(screen?.props, treeId)
component => component._component?.endsWith("/dataprovider") const providers = path.filter(component =>
component._component?.endsWith("/dataprovider")
) )
// Validate non-empty values // Validate non-empty values
const valid = providers?.some(dp => value.includes?.(dp._id)) const valid = providers?.some(dp => value.includes?.(dp._id))
@ -733,16 +734,6 @@ export const getFrontendStore = () => {
return null 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 // Generate basic component structure
let instance = { let instance = {
_id: Helpers.uuid(), _id: Helpers.uuid(),
@ -752,7 +743,7 @@ export const getFrontendStore = () => {
hover: {}, hover: {},
active: {}, active: {},
}, },
_instanceName: name, _instanceName: `New ${definition.friendlyName || definition.name}`,
...presetProps, ...presetProps,
} }

58
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js
View File

@ -1,4 +1,5 @@
import { getComponentContexts } from "builderStore/dataBinding" import { getContextProviderComponents } from "builderStore/dataBinding"
import { store } from "builderStore"
import { capitalise } from "helpers" import { capitalise } from "helpers"
// Generates bindings for all components that provider "datasource like" // 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. // Some examples are saving rows or duplicating rows.
export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => { export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => {
// Get all form context providers // Get all form context providers
const formComponentContexts = getComponentContexts( const formComponents = getContextProviderComponents(
asset, asset,
componentId, componentId,
"form", "form",
{ { includeSelf: nested }
includeSelf: nested,
}
) )
// Get all schema context providers // Get all schema context providers
const schemaComponentContexts = getComponentContexts( const schemaComponents = getContextProviderComponents(
asset, asset,
componentId, componentId,
"schema", "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 // Check for duplicate contexts by the same component. In this case, attempt
// to label contexts with their suffixes // to label contexts with their suffixes
schemaComponentContexts.forEach(schemaContext => { schemaContexts.forEach(schemaContext => {
// Check if we have a form context for this component // Check if we have a form context for this component
const id = schemaContext.component._id 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) {
if (existing.contexts[0].suffix) { if (existing.context.suffix) {
const suffix = capitalise(existing.contexts[0].suffix) const suffix = capitalise(existing.context.suffix)
existing.readableSuffix = ` - ${suffix}` existing.readableSuffix = ` - ${suffix}`
} }
if (schemaContext.contexts[0].suffix) { if (schemaContext.context.suffix) {
const suffix = capitalise(schemaContext.contexts[0].suffix) const suffix = capitalise(schemaContext.context.suffix)
schemaContext.readableSuffix = ` - ${suffix}` schemaContext.readableSuffix = ` - ${suffix}`
} }
} }
}) })
// Generate bindings for all contexts // Generate bindings for all contexts
const allContexts = formComponentContexts.concat(schemaComponentContexts) const allContexts = formContexts.concat(schemaContexts)
return allContexts.map(({ component, contexts, readableSuffix }) => { return allContexts.map(({ component, context, readableSuffix }) => {
let readableBinding = component._instanceName let readableBinding = component._instanceName
let runtimeBinding = component._id let runtimeBinding = component._id
if (contexts[0].suffix) { if (context.suffix) {
runtimeBinding += `-${contexts[0].suffix}` runtimeBinding += `-${context.suffix}`
} }
if (readableSuffix) { if (readableSuffix) {
readableBinding += 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)
}

9
packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte
View File

@ -1,16 +1,15 @@
<script> <script>
import { Select } from "@budibase/bbui" import { Select } from "@budibase/bbui"
import { makePropSafe } from "@budibase/string-templates" import { makePropSafe } from "@budibase/string-templates"
import { currentAsset } from "builderStore" import { currentAsset, store } from "builderStore"
import { findAllMatchingComponents } from "builderStore/componentUtils" import { findComponentPath } from "builderStore/componentUtils"
export let value export let value
const getValue = component => `{{ literal ${makePropSafe(component._id)} }}` const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
$: providers = findAllMatchingComponents($currentAsset?.props, c => $: path = findComponentPath($currentAsset?.props, $store.selectedComponentId)
c._component?.endsWith("/dataprovider") $: providers = path.filter(c => c._component?.endsWith("/dataprovider"))
)
</script> </script>
<Select <Select

15
packages/builder/src/components/design/settings/controls/DataSourceSelect/DataSourceSelect.svelte
View File

@ -1,5 +1,6 @@
<script> <script>
import { import {
getContextProviderComponents,
readableToRuntimeBinding, readableToRuntimeBinding,
runtimeToReadableBinding, runtimeToReadableBinding,
} from "builderStore/dataBinding" } from "builderStore/dataBinding"
@ -29,7 +30,6 @@
import BindingBuilder from "components/integration/QueryBindingBuilder.svelte" import BindingBuilder from "components/integration/QueryBindingBuilder.svelte"
import IntegrationQueryEditor from "components/integration/index.svelte" import IntegrationQueryEditor from "components/integration/index.svelte"
import { makePropSafe as safe } from "@budibase/string-templates" import { makePropSafe as safe } from "@budibase/string-templates"
import { findAllComponents } from "builderStore/componentUtils"
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
import DataSourceCategory from "components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte" import DataSourceCategory from "components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
import { API } from "api" import { API } from "api"
@ -75,13 +75,12 @@
...query, ...query,
type: "query", type: "query",
})) }))
$: dataProviders = findAllComponents($currentAsset.props) $: contextProviders = getContextProviderComponents(
.filter(component => { $currentAsset,
return ( $store.selectedComponentId
component._component?.endsWith("/dataprovider") && )
component._id !== $store.selectedComponentId $: dataProviders = contextProviders
) .filter(component => component._component?.endsWith("/dataprovider"))
})
.map(provider => ({ .map(provider => ({
label: provider._instanceName, label: provider._instanceName,
name: provider._instanceName, name: provider._instanceName,

72
packages/client/manifest.json
View File

@ -573,6 +573,7 @@
"description": "A configurable data list that attaches to your backend tables.", "description": "A configurable data list that attaches to your backend tables.",
"icon": "JourneyData", "icon": "JourneyData",
"illegalChildren": ["section"], "illegalChildren": ["section"],
"requiredAncestors": ["dataprovider"],
"hasChildren": true, "hasChildren": true,
"size": { "size": {
"width": 400, "width": 400,
@ -710,12 +711,10 @@
], ],
"context": [ "context": [
{ {
"type": "schema", "type": "schema"
"scope": "local"
}, },
{ {
"type": "static", "type": "static",
"scope": "local",
"values": [ "values": [
{ {
"label": "Row index", "label": "Row index",
@ -1565,6 +1564,7 @@
"name": "Bar Chart", "name": "Bar Chart",
"description": "Bar chart", "description": "Bar chart",
"icon": "GraphBarVertical", "icon": "GraphBarVertical",
"requiredAncestors": ["dataprovider"],
"size": { "size": {
"width": 600, "width": 600,
"height": 400 "height": 400
@ -1727,6 +1727,7 @@
"width": 600, "width": 600,
"height": 400 "height": 400
}, },
"requiredAncestors": ["dataprovider"],
"settings": [ "settings": [
{ {
"type": "text", "type": "text",
@ -1880,6 +1881,7 @@
"width": 600, "width": 600,
"height": 400 "height": 400
}, },
"requiredAncestors": ["dataprovider"],
"settings": [ "settings": [
{ {
"type": "text", "type": "text",
@ -2045,6 +2047,7 @@
"width": 600, "width": 600,
"height": 400 "height": 400
}, },
"requiredAncestors": ["dataprovider"],
"settings": [ "settings": [
{ {
"type": "text", "type": "text",
@ -2174,6 +2177,7 @@
"width": 600, "width": 600,
"height": 400 "height": 400
}, },
"requiredAncestors": ["dataprovider"],
"settings": [ "settings": [
{ {
"type": "text", "type": "text",
@ -2303,6 +2307,7 @@
"width": 600, "width": 600,
"height": 400 "height": 400
}, },
"requiredAncestors": ["dataprovider"],
"settings": [ "settings": [
{ {
"type": "text", "type": "text",
@ -4076,6 +4081,7 @@
"width": 400, "width": 400,
"height": 320 "height": 320
}, },
"requiredAncestors": ["dataprovider"],
"settings": [ "settings": [
{ {
"type": "dataProvider", "type": "dataProvider",
@ -4631,6 +4637,7 @@
"name": "Table", "name": "Table",
"icon": "Table", "icon": "Table",
"illegalChildren": ["section"], "illegalChildren": ["section"],
"requiredAncestors": ["dataprovider"],
"hasChildren": true, "hasChildren": true,
"showEmptyState": false, "showEmptyState": false,
"size": { "size": {
@ -4721,6 +4728,7 @@
"name": "Date Range", "name": "Date Range",
"icon": "Calendar", "icon": "Calendar",
"styles": ["size"], "styles": ["size"],
"requiredAncestors": ["dataprovider"],
"hasChildren": false, "hasChildren": false,
"size": { "size": {
"width": 200, "width": 200,
@ -4828,6 +4836,7 @@
"width": 100, "width": 100,
"height": 35 "height": 35
}, },
"requiredAncestors": ["dataprovider"],
"settings": [ "settings": [
{ {
"type": "dataProvider", "type": "dataProvider",
@ -5602,38 +5611,7 @@
} }
] ]
} }
], ]
"context": {
"type": "static",
"suffix": "provider",
"values": [
{
"label": "Rows",
"key": "rows",
"type": "array"
},
{
"label": "Extra Info",
"key": "info",
"type": "string"
},
{
"label": "Rows Length",
"key": "rowsLength",
"type": "number"
},
{
"label": "Schema",
"key": "schema",
"type": "object"
},
{
"label": "Page Number",
"key": "pageNumber",
"type": "number"
}
]
}
}, },
"cardsblock": { "cardsblock": {
"block": true, "block": true,
@ -6036,8 +6014,7 @@
}, },
{ {
"type": "schema", "type": "schema",
"suffix": "repeater", "suffix": "repeater"
"scope": "local"
} }
] ]
}, },
@ -6183,10 +6160,6 @@
"type": "form", "type": "form",
"suffix": "form" "suffix": "form"
}, },
{
"type": "schema",
"suffix": "repeater"
},
{ {
"type": "static", "type": "static",
"suffix": "form", "suffix": "form",
@ -6503,23 +6476,6 @@
"suffix": "repeater" "suffix": "repeater"
} }
}, },
"grid": {
"name": "Grid",
"icon": "ViewGrid",
"hasChildren": true,
"settings": [
{
"type": "number",
"key": "cols",
"label": "Columns"
},
{
"type": "number",
"key": "rows",
"label": "Rows"
}
]
},
"gridblock": { "gridblock": {
"name": "Grid Block", "name": "Grid Block",
"icon": "Table", "icon": "Table",

140
packages/client/src/components/Component.svelte
View File

@ -9,7 +9,7 @@
</script> </script>
<script> <script>
import { getContext, setContext, onMount } from "svelte" import { getContext, setContext, onMount, onDestroy } from "svelte"
import { writable, get } from "svelte/store" import { writable, get } from "svelte/store"
import { import {
enrichProps, enrichProps,
@ -30,15 +30,6 @@
import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte" import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
import ComponentErrorState from "components/error-states/ComponentErrorState.svelte" import ComponentErrorState from "components/error-states/ComponentErrorState.svelte"
import { BudibasePrefix } from "../stores/components.js" import { BudibasePrefix } from "../stores/components.js"
import {
decodeJSBinding,
findHBSBlocks,
isJSBinding,
} from "@budibase/string-templates"
import {
getActionContextKey,
getActionDependentContextKeys,
} from "../utils/buttonActions.js"
export let instance = {} export let instance = {}
export let isLayout = false export let isLayout = false
@ -90,6 +81,7 @@
// Keep track of stringified representations of context and instance // Keep track of stringified representations of context and instance
// to avoid enriching bindings as much as possible // to avoid enriching bindings as much as possible
let lastContextKey
let lastInstanceKey let lastInstanceKey
// Visibility flag used by conditional UI // Visibility flag used by conditional UI
@ -106,13 +98,6 @@
// We clear these whenever a new instance is received. // We clear these whenever a new instance is received.
let ephemeralStyles let ephemeralStyles
// Single string of all HBS blocks, used to check if we use a certain binding
// or not
let bindingString = ""
// List of context keys which we use inside bindings
let knownContextKeyMap = {}
// Set up initial state for each new component instance // Set up initial state for each new component instance
$: initialise(instance) $: initialise(instance)
@ -170,6 +155,9 @@
hasMissingRequiredSettings) hasMissingRequiredSettings)
$: emptyState = empty && showEmptyState $: emptyState = empty && showEmptyState
// Enrich component settings
$: enrichComponentSettings($context, settingsDefinitionMap)
// Evaluate conditional UI settings and store any component setting changes // Evaluate conditional UI settings and store any component setting changes
// which need to be made // which need to be made
$: evaluateConditions(conditions) $: evaluateConditions(conditions)
@ -218,7 +206,6 @@
errorState, errorState,
parent: id, parent: id,
ancestors: [...($component?.ancestors ?? []), instance._component], ancestors: [...($component?.ancestors ?? []), instance._component],
path: [...($component?.path ?? []), id],
}) })
const initialise = (instance, force = false) => { const initialise = (instance, force = false) => {
@ -227,8 +214,7 @@
} }
// Ensure we're processing a new instance // Ensure we're processing a new instance
const stringifiedInstance = JSON.stringify(instance) const instanceKey = Helpers.hashString(JSON.stringify(instance))
const instanceKey = Helpers.hashString(stringifiedInstance)
if (instanceKey === lastInstanceKey && !force) { if (instanceKey === lastInstanceKey && !force) {
return return
} else { } else {
@ -288,54 +274,13 @@
return missing return missing
}) })
// When considering bindings we can ignore children, so we remove that
// before storing the reference stringified version
const noChildren = JSON.stringify({ ...instance, _children: null })
const bindings = findHBSBlocks(noChildren).map(binding => {
let sanitizedBinding = binding.replace(/\\"/g, '"')
if (isJSBinding(sanitizedBinding)) {
return decodeJSBinding(sanitizedBinding)
} else {
return sanitizedBinding
}
})
// The known context key map is built up at runtime, as changes to keys are
// encountered. We manually seed this to the required action keys as these
// are not encountered at runtime and so need computed in advance.
knownContextKeyMap = generateActionKeyMap(instance, settingsDefinition)
bindingString = bindings.join(" ")
// Run any migrations // Run any migrations
runMigrations(instance, settingsDefinition) runMigrations(instance, settingsDefinition)
// Force an initial enrichment of the new settings // Force an initial enrichment of the new settings
enrichComponentSettings(get(context), settingsDefinitionMap) enrichComponentSettings(get(context), settingsDefinitionMap, {
} force: true,
// Extracts a map of all context keys which are required by action settings
// to provide the functions to evaluate at runtime. This needs done manually
// as the action definitions themselves do not specify bindings for action
// keys, meaning we cannot do this while doing the other normal bindings.
const generateActionKeyMap = (instance, settingsDefinition) => {
let map = {}
settingsDefinition.forEach(setting => {
if (setting.type === "event") {
instance[setting.key]?.forEach(action => {
// We depend on the actual action key
const actionKey = getActionContextKey(action)
if (actionKey) {
map[actionKey] = true
}
// We also depend on any manually declared context keys
getActionDependentContextKeys(action)?.forEach(key => {
map[key] = true
})
})
}
}) })
return map
} }
const runMigrations = (instance, settingsDefinition) => { const runMigrations = (instance, settingsDefinition) => {
@ -436,7 +381,17 @@
} }
// Enriches any string component props using handlebars // Enriches any string component props using handlebars
const enrichComponentSettings = (context, settingsDefinitionMap) => { const enrichComponentSettings = (
context,
settingsDefinitionMap,
options = { force: false }
) => {
const contextChanged = context.key !== lastContextKey
if (!contextChanged && !options?.force) {
return
}
lastContextKey = context.key
// Record the timestamp so we can reference it after enrichment // Record the timestamp so we can reference it after enrichment
latestUpdateTime = Date.now() latestUpdateTime = Date.now()
const enrichmentTime = latestUpdateTime const enrichmentTime = latestUpdateTime
@ -551,46 +506,31 @@
}) })
} }
const handleContextChange = key => {
// Check if we already know if this key is used
let used = knownContextKeyMap[key]
// If we don't know, check and cache
if (used == null) {
used = bindingString.indexOf(`[${key}]`) !== -1
knownContextKeyMap[key] = used
}
// Enrich settings if we use this key
if (used) {
enrichComponentSettings($context, settingsDefinitionMap)
}
}
// Register an unregister component instance
onMount(() => { onMount(() => {
if ($appStore.isDevApp) { if (
if (!componentStore.actions.isComponentRegistered(id)) { $appStore.isDevApp &&
componentStore.actions.registerInstance(id, { !componentStore.actions.isComponentRegistered(id)
component: instance._component, ) {
getSettings: () => cachedSettings, componentStore.actions.registerInstance(id, {
getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }), component: instance._component,
getDataContext: () => get(context), getSettings: () => cachedSettings,
reload: () => initialise(instance, true), getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
setEphemeralStyles: styles => (ephemeralStyles = styles), getDataContext: () => get(context),
state: store, reload: () => initialise(instance, true),
}) setEphemeralStyles: styles => (ephemeralStyles = styles),
} state: store,
return () => { })
if (componentStore.actions.isComponentRegistered(id)) {
componentStore.actions.unregisterInstance(id)
}
}
} }
}) })
// Observe changes to context onDestroy(() => {
onMount(() => context.actions.observeChanges(handleContextChange)) if (
$appStore.isDevApp &&
componentStore.actions.isComponentRegistered(id)
) {
componentStore.actions.unregisterInstance(id)
}
})
</script> </script>
{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden} {#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}

2
packages/client/src/components/app/DataProvider.svelte
View File

@ -71,7 +71,7 @@
datasource: dataSource || {}, datasource: dataSource || {},
schema, schema,
rowsLength: $fetch.rows.length, rowsLength: $fetch.rows.length,
pageNumber: $fetch.pageNumber + 1,
// Undocumented properties. These aren't supposed to be used in builder // Undocumented properties. These aren't supposed to be used in builder
// bindings, but are used internally by other components // bindings, but are used internally by other components
id: $component?.id, id: $component?.id,

21
packages/client/src/components/app/EmptyPlaceholder.svelte
View File

@ -1,5 +1,6 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { Icon } from "@budibase/bbui"
const component = getContext("component") const component = getContext("component")
const { builderStore, componentStore } = getContext("sdk") const { builderStore, componentStore } = getContext("sdk")
@ -9,7 +10,15 @@
{#if $builderStore.inBuilder} {#if $builderStore.inBuilder}
<div class="component-placeholder"> <div class="component-placeholder">
{$component.name || definition?.name || "Component"} <Icon name="Help" color="var(--spectrum-global-color-blue-600)" />
<span
class="spectrum-Link"
on:click={() => {
builderStore.actions.requestAddComponent()
}}
>
Add components inside your {definition?.name || $component.type}
</span>
</div> </div>
{/if} {/if}
@ -23,4 +32,14 @@
font-size: var(--font-size-s); font-size: var(--font-size-s);
gap: var(--spacing-s); gap: var(--spacing-s);
} }
/* Common styles for all error states to use */
.component-placeholder :global(mark) {
background-color: var(--spectrum-global-color-gray-400);
padding: 0 4px;
border-radius: 2px;
}
.component-placeholder :global(.spectrum-Link) {
cursor: pointer;
}
</style> </style>

106
packages/client/src/components/app/GridBlock.svelte
View File

@ -19,36 +19,7 @@
export let onRowClick = null export let onRowClick = null
export let buttons = null export let buttons = null
const context = getContext("context") // parses columns to fix older formats
const component = getContext("component")
const {
styleable,
API,
builderStore,
notificationStore,
enrichButtonActions,
ActionTypes,
createContextStore,
Provider,
} = getContext("sdk")
let grid
$: columnWhitelist = parsedColumns
?.filter(col => col.active)
?.map(col => col.field)
$: schemaOverrides = getSchemaOverrides(parsedColumns)
$: enrichedButtons = enrichButtons(buttons)
$: parsedColumns = getParsedColumns(columns)
$: actions = [
{
type: ActionTypes.RefreshDatasource,
callback: () => grid?.getContext()?.rows.actions.refreshData(),
metadata: { dataSource: table },
},
]
// Parses columns to fix older formats
const getParsedColumns = columns => { const getParsedColumns = columns => {
// If the first element has an active key all elements should be in the new format // If the first element has an active key all elements should be in the new format
if (columns?.length && columns[0]?.active !== undefined) { if (columns?.length && columns[0]?.active !== undefined) {
@ -62,6 +33,28 @@
})) }))
} }
$: parsedColumns = getParsedColumns(columns)
const context = getContext("context")
const component = getContext("component")
const {
styleable,
API,
builderStore,
notificationStore,
enrichButtonActions,
ActionTypes,
createContextStore,
} = getContext("sdk")
let grid
$: columnWhitelist = parsedColumns
?.filter(col => col.active)
?.map(col => col.field)
$: schemaOverrides = getSchemaOverrides(parsedColumns)
$: enrichedButtons = enrichButtons(buttons)
const getSchemaOverrides = columns => { const getSchemaOverrides = columns => {
let overrides = {} let overrides = {}
columns?.forEach(column => { columns?.forEach(column => {
@ -85,6 +78,11 @@
const id = get(component).id const id = get(component).id
const gridContext = createContextStore(context) const gridContext = createContextStore(context)
gridContext.actions.provideData(id, row) gridContext.actions.provideData(id, row)
gridContext.actions.provideAction(
id,
ActionTypes.RefreshDatasource,
() => grid?.getContext()?.rows.actions.refreshData()
)
const fn = enrichButtonActions(settings.onClick, get(gridContext)) const fn = enrichButtonActions(settings.onClick, get(gridContext))
return await fn?.({ row }) return await fn?.({ row })
}, },
@ -96,31 +94,29 @@
use:styleable={$component.styles} use:styleable={$component.styles}
class:in-builder={$builderStore.inBuilder} class:in-builder={$builderStore.inBuilder}
> >
<Provider {actions}> <Grid
<Grid bind:this={grid}
bind:this={grid} datasource={table}
datasource={table} {API}
{API} {stripeRows}
{stripeRows} {initialFilter}
{initialFilter} {initialSortColumn}
{initialSortColumn} {initialSortOrder}
{initialSortOrder} {fixedRowHeight}
{fixedRowHeight} {columnWhitelist}
{columnWhitelist} {schemaOverrides}
{schemaOverrides} canAddRows={allowAddRows}
canAddRows={allowAddRows} canEditRows={allowEditRows}
canEditRows={allowEditRows} canDeleteRows={allowDeleteRows}
canDeleteRows={allowDeleteRows} canEditColumns={false}
canEditColumns={false} canExpandRows={false}
canExpandRows={false} canSaveSchema={false}
canSaveSchema={false} showControls={false}
showControls={false} notifySuccess={notificationStore.actions.success}
notifySuccess={notificationStore.actions.success} notifyError={notificationStore.actions.error}
notifyError={notificationStore.actions.error} buttons={enrichedButtons}
buttons={enrichedButtons} on:rowclick={e => onRowClick?.({ row: e.detail })}
on:rowclick={e => onRowClick?.({ row: e.detail })} />
/>
</Provider>
</div> </div>
<style> <style>

4
packages/client/src/components/app/Repeater.svelte
View File

@ -2,7 +2,6 @@
import { getContext } from "svelte" import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte" import Placeholder from "./Placeholder.svelte"
import Container from "./Container.svelte" import Container from "./Container.svelte"
import { ContextScopes } from "constants"
export let dataProvider export let dataProvider
export let noRowsMessage export let noRowsMessage
@ -10,7 +9,6 @@
export let hAlign export let hAlign
export let vAlign export let vAlign
export let gap export let gap
export let scope = ContextScopes.Local
const { Provider } = getContext("sdk") const { Provider } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
@ -24,7 +22,7 @@
<Placeholder /> <Placeholder />
{:else if rows.length > 0} {:else if rows.length > 0}
{#each rows as row, index} {#each rows as row, index}
<Provider data={{ ...row, index }} {scope}> <Provider data={{ ...row, index }}>
<slot /> <slot />
</Provider> </Provider>
{/each} {/each}

9
packages/client/src/components/app/blocks/MultiStepFormblock.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
import BlockComponent from "components/BlockComponent.svelte" import BlockComponent from "components/BlockComponent.svelte"
import { Helpers } from "@budibase/bbui"
import { getContext, setContext } from "svelte" import { getContext, setContext } from "svelte"
import { builderStore } from "stores" import { builderStore } from "stores"
import { Utils } from "@budibase/frontend-core" import { Utils } from "@budibase/frontend-core"
@ -42,7 +41,7 @@
let schema let schema
$: fetchSchema(dataSource) $: fetchSchema(dataSource)
$: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep) $: enrichedSteps = enrichSteps(steps, schema, $component.id)
$: updateCurrentStep(enrichedSteps, $builderStore, $component) $: updateCurrentStep(enrichedSteps, $builderStore, $component)
const updateCurrentStep = (steps, builderStore, component) => { const updateCurrentStep = (steps, builderStore, component) => {
@ -116,7 +115,6 @@
dataSource, dataSource,
}) })
return { return {
_stepId: Helpers.uuid(),
fields: getDefaultFields(fields || [], schema), fields: getDefaultFields(fields || [], schema),
title: title ?? defaultProps.title, title: title ?? defaultProps.title,
desc, desc,
@ -144,7 +142,7 @@
}, },
}} }}
> >
{#each enrichedSteps as step, stepIdx (step._stepId)} {#each enrichedSteps as step, stepIdx}
<BlockComponent <BlockComponent
type="formstep" type="formstep"
props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }} props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
@ -188,13 +186,12 @@
</BlockComponent> </BlockComponent>
</BlockComponent> </BlockComponent>
<BlockComponent type="text" props={{ text: step.desc }} order={1} /> <BlockComponent type="text" props={{ text: step.desc }} order={1} />
<BlockComponent type="container" order={2}> <BlockComponent type="container" order={2}>
<div <div
class="form-block fields" class="form-block fields"
class:mobile={$context.device.mobile} class:mobile={$context.device.mobile}
> >
{#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)} {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
{#if getComponentForField(field)} {#if getComponentForField(field)}
<BlockComponent <BlockComponent
type={getComponentForField(field)} type={getComponentForField(field)}

1
packages/client/src/components/app/blocks/TableBlock.svelte
View File

@ -231,7 +231,6 @@
paginate, paginate,
limit: rowCount, limit: rowCount,
}} }}
context="provider"
order={1} order={1}
> >
<BlockComponent <BlockComponent

2
packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte
View File

@ -10,7 +10,6 @@
export let noRowsMessage export let noRowsMessage
const component = getContext("component") const component = getContext("component")
const { ContextScopes } = getContext("sdk")
$: providerId = `${$component.id}-provider` $: providerId = `${$component.id}-provider`
$: dataProvider = `{{ literal ${safe(providerId)} }}` $: dataProvider = `{{ literal ${safe(providerId)} }}`
@ -56,7 +55,6 @@
noRowsMessage: noRowsMessage || "We couldn't find a row to display", noRowsMessage: noRowsMessage || "We couldn't find a row to display",
direction: "column", direction: "column",
hAlign: "center", hAlign: "center",
scope: ContextScopes.Global,
}} }}
> >
<slot /> <slot />

38
packages/client/src/components/app/forms/Form.svelte
View File

@ -21,7 +21,6 @@
export let editAutoColumns = false export let editAutoColumns = false
const context = getContext("context") const context = getContext("context")
const component = getContext("component")
const { API, fetchDatasourceSchema } = getContext("sdk") const { API, fetchDatasourceSchema } = getContext("sdk")
const getInitialFormStep = () => { const getInitialFormStep = () => {
@ -39,47 +38,28 @@
$: fetchSchema(dataSource) $: fetchSchema(dataSource)
$: schemaKey = generateSchemaKey(schema) $: schemaKey = generateSchemaKey(schema)
$: initialValues = getInitialValues( $: initialValues = getInitialValues(actionType, dataSource, $context)
actionType,
dataSource,
$component.path,
$context
)
$: resetKey = Helpers.hashString( $: resetKey = Helpers.hashString(
schemaKey + JSON.stringify(initialValues) + disabled + readonly schemaKey + JSON.stringify(initialValues) + disabled + readonly
) )
// Returns the closes data context which isn't a built in context // Returns the closes data context which isn't a built in context
const getInitialValues = (type, dataSource, path, context) => { const getInitialValues = (type, dataSource, context) => {
// Only inherit values for update forms // Only inherit values for update forms
if (type !== "Update") { if (type !== "Update") {
return {} return {}
} }
// Only inherit values for forms targeting internal tables // Only inherit values for forms targeting internal tables
const dsType = dataSource?.type if (!dataSource?.tableId) {
if (dsType !== "table" && dsType !== "viewV2") {
return {} return {}
} }
// Look up the component tree and find something that is provided by an // Don't inherit values representing built in contexts
// ancestor that matches our datasource. This is for backwards compatibility if (["user", "url"].includes(context.closestComponentId)) {
// as previously we could use the "closest" context. return {}
for (let id of path.reverse().slice(1)) {
// Check for matching view datasource
if (
dataSource.type === "viewV2" &&
context[id]?._viewId === dataSource.id
) {
return context[id]
}
// Check for matching table datasource
if (
dataSource.type === "table" &&
context[id]?.tableId === dataSource.tableId
) {
return context[id]
}
} }
return {} // Always inherit the closest datasource
const closestContext = context[`${context.closestComponentId}`] || {}
return closestContext || {}
} }
// Fetches the form schema from this form's dataSource // Fetches the form schema from this form's dataSource

19
packages/client/src/components/context/Provider.svelte
View File

@ -1,23 +1,20 @@
<script> <script>
import { getContext, setContext, onDestroy } from "svelte" import { getContext, setContext, onDestroy } from "svelte"
import { dataSourceStore, createContextStore } from "stores" import { dataSourceStore, createContextStore } from "stores"
import { ActionTypes, ContextScopes } from "constants" import { ActionTypes } from "constants"
import { generate } from "shortid" import { generate } from "shortid"
export let data export let data
export let actions export let actions
export let key export let key
export let scope = ContextScopes.Global
let context = getContext("context") // Clone and create new data context for this component tree
const context = getContext("context")
const component = getContext("component") const component = getContext("component")
const providerKey = key || $component.id const newContext = createContextStore(context)
setContext("context", newContext)
// Create a new layer of context if we are only locally scoped const providerKey = key || $component.id
if (scope === ContextScopes.Local) {
context = createContextStore(context)
setContext("context", context)
}
// Generate a permanent unique ID for this component and use it to register // Generate a permanent unique ID for this component and use it to register
// any datasource actions // any datasource actions
@ -33,7 +30,7 @@
const provideData = newData => { const provideData = newData => {
const dataKey = JSON.stringify(newData) const dataKey = JSON.stringify(newData)
if (dataKey !== lastDataKey) { if (dataKey !== lastDataKey) {
context.actions.provideData(providerKey, newData, scope) newContext.actions.provideData(providerKey, newData)
lastDataKey = dataKey lastDataKey = dataKey
} }
} }
@ -43,7 +40,7 @@
if (actionsKey !== lastActionsKey) { if (actionsKey !== lastActionsKey) {
lastActionsKey = actionsKey lastActionsKey = actionsKey
newActions?.forEach(({ type, callback, metadata }) => { newActions?.forEach(({ type, callback, metadata }) => {
context.actions.provideAction(providerKey, type, callback, scope) newContext.actions.provideAction(providerKey, type, callback)
// Register any "refresh datasource" actions with a singleton store // Register any "refresh datasource" actions with a singleton store
// so we can easily refresh data at all levels for any datasource // so we can easily refresh data at all levels for any datasource

5
packages/client/src/constants.js
View File

@ -12,10 +12,5 @@ export const ActionTypes = {
ScrollTo: "ScrollTo", ScrollTo: "ScrollTo",
} }
export const ContextScopes = {
Local: "local",
Global: "global",
}
export const DNDPlaceholderID = "dnd-placeholder" export const DNDPlaceholderID = "dnd-placeholder"
export const ScreenslotType = "screenslot" export const ScreenslotType = "screenslot"

3
packages/client/src/sdk.js
View File

@ -23,7 +23,7 @@ import { getAction } from "utils/getAction"
import Provider from "components/context/Provider.svelte" import Provider from "components/context/Provider.svelte"
import Block from "components/Block.svelte" import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte" import BlockComponent from "components/BlockComponent.svelte"
import { ActionTypes, ContextScopes } from "./constants" import { ActionTypes } from "./constants"
import { fetchDatasourceSchema } from "./utils/schema.js" import { fetchDatasourceSchema } from "./utils/schema.js"
import { getAPIKey } from "./utils/api.js" import { getAPIKey } from "./utils/api.js"
import { enrichButtonActions } from "./utils/buttonActions.js" import { enrichButtonActions } from "./utils/buttonActions.js"
@ -54,7 +54,6 @@ export default {
linkable, linkable,
getAction, getAction,
fetchDatasourceSchema, fetchDatasourceSchema,
ContextScopes,
getAPIKey, getAPIKey,
enrichButtonActions, enrichButtonActions,
processStringSync, processStringSync,

115
packages/client/src/stores/context.js
View File

@ -1,98 +1,59 @@
import { writable, derived } from "svelte/store" import { writable, derived } from "svelte/store"
import { ContextScopes } from "constants" import { Helpers } from "@budibase/bbui"
export const createContextStore = parentContext => { export const createContextStore = oldContext => {
const context = writable({}) const newContext = writable({})
let observers = [] const contexts = oldContext ? [oldContext, newContext] : [newContext]
// Derive the total context state at this point in the tree
const contexts = parentContext ? [parentContext, context] : [context]
const totalContext = derived(contexts, $contexts => { const totalContext = derived(contexts, $contexts => {
return $contexts.reduce((total, context) => ({ ...total, ...context }), {}) // The key is the serialized representation of context
let key = ""
for (let i = 0; i < $contexts.length - 1; i++) {
key += $contexts[i].key
}
key = Helpers.hashString(
key + JSON.stringify($contexts[$contexts.length - 1])
)
// Reduce global state
const reducer = (total, context) => ({ ...total, ...context })
const context = $contexts.reduce(reducer, {})
return {
...context,
key,
}
}) })
// Subscribe to updates in the parent context, so that we can proxy on any // Adds a data context layer to the tree
// change messages to our own subscribers const provideData = (providerId, data) => {
if (parentContext) {
parentContext.actions.observeChanges(key => {
broadcastChange(key)
})
}
// Provide some data in context
const provideData = (providerId, data, scope = ContextScopes.Global) => {
if (!providerId || data === undefined) { if (!providerId || data === undefined) {
return return
} }
newContext.update(state => {
state[providerId] = data
// Proxy message up the chain if we have a parent and are providing global // Keep track of the closest component ID so we can later hydrate a "data" prop.
// context // This is only required for legacy bindings that used "data" rather than a
if (scope === ContextScopes.Global && parentContext) { // component ID.
parentContext.actions.provideData(providerId, data, scope) state.closestComponentId = providerId
}
// Otherwise this is either the context root, or we're providing a local return state
// context override, so we need to update the local context instead })
else {
context.update(state => {
state[providerId] = data
return state
})
broadcastChange(providerId)
}
} }
// Provides some action in context // Adds an action context layer to the tree
const provideAction = ( const provideAction = (providerId, actionType, callback) => {
providerId,
actionType,
callback,
scope = ContextScopes.Global
) => {
if (!providerId || !actionType) { if (!providerId || !actionType) {
return return
} }
newContext.update(state => {
// Proxy message up the chain if we have a parent and are providing global state[`${providerId}_${actionType}`] = callback
// context return state
if (scope === ContextScopes.Global && parentContext) { })
parentContext.actions.provideAction(
providerId,
actionType,
callback,
scope
)
}
// Otherwise this is either the context root, or we're providing a local
// context override, so we need to update the local context instead
else {
const key = `${providerId}_${actionType}`
context.update(state => {
state[key] = callback
return state
})
broadcastChange(key)
}
}
const observeChanges = callback => {
observers.push(callback)
return () => {
observers = observers.filter(cb => cb !== callback)
}
}
const broadcastChange = key => {
observers.forEach(cb => cb(key))
} }
return { return {
subscribe: totalContext.subscribe, subscribe: totalContext.subscribe,
actions: { actions: { provideData, provideAction },
provideData,
provideAction,
observeChanges,
},
} }
} }

147
packages/client/src/utils/buttonActions.js
View File

@ -17,54 +17,6 @@ import { ActionTypes } from "constants"
import { enrichDataBindings } from "./enrichDataBinding" import { enrichDataBindings } from "./enrichDataBinding"
import { Helpers } from "@budibase/bbui" import { Helpers } from "@budibase/bbui"
// Default action handler, which extracts an action from context that was
// provided by another component and executes it with all action parameters
const contextActionHandler = async (action, context) => {
const key = getActionContextKey(action)
const fn = context[key]
if (fn) {
return await fn(action.parameters)
}
}
// Generates the context key, which is the key that this action depends on in
// context to provide the function it will run. This is broken out as a util
// because we reuse this inside the core Component.svelte file to determine
// what the required action context keys are for all action settings.
export const getActionContextKey = action => {
const type = action?.["##eventHandlerType"]
const key = (componentId, type) => `${componentId}_${type}`
switch (type) {
case "Scroll To Field":
return key(action.parameters.componentId, ActionTypes.ScrollTo)
case "Update Field Value":
return key(action.parameters.componentId, ActionTypes.UpdateFieldValue)
case "Validate Form":
return key(action.parameters.componentId, ActionTypes.ValidateForm)
case "Refresh Data Provider":
return key(action.parameters.componentId, ActionTypes.RefreshDatasource)
case "Clear Form":
return key(action.parameters.componentId, ActionTypes.ClearForm)
case "Change Form Step":
return key(action.parameters.componentId, ActionTypes.ChangeFormStep)
default:
return null
}
}
// If button actions depend on context, they must declare which keys they need
export const getActionDependentContextKeys = action => {
const type = action?.["##eventHandlerType"]
switch (type) {
case "Save Row":
case "Duplicate Row":
if (action.parameters?.providerId) {
return [action.parameters.providerId]
}
}
return []
}
const saveRowHandler = async (action, context) => { const saveRowHandler = async (action, context) => {
const { fields, providerId, tableId, notificationOverride } = const { fields, providerId, tableId, notificationOverride } =
action.parameters action.parameters
@ -80,21 +32,20 @@ const saveRowHandler = async (action, context) => {
} }
} }
if (tableId) { if (tableId) {
if (tableId.startsWith("view")) { payload.tableId = tableId
payload._viewId = tableId
} else {
payload.tableId = tableId
}
} }
try { try {
const row = await API.saveRow(payload) const row = await API.saveRow(payload)
if (!notificationOverride) { if (!notificationOverride) {
notificationStore.actions.success("Row saved") notificationStore.actions.success("Row saved")
} }
// Refresh related datasources // Refresh related datasources
await dataSourceStore.actions.invalidateDataSource(tableId, { await dataSourceStore.actions.invalidateDataSource(tableId, {
invalidateRelationships: true, invalidateRelationships: true,
}) })
return { row } return { row }
} catch (error) { } catch (error) {
// Abort next actions // Abort next actions
@ -113,11 +64,7 @@ const duplicateRowHandler = async (action, context) => {
} }
} }
if (tableId) { if (tableId) {
if (tableId.startsWith("view")) { payload.tableId = tableId
payload._viewId = tableId
} else {
payload.tableId = tableId
}
} }
delete payload._id delete payload._id
delete payload._rev delete payload._rev
@ -126,10 +73,12 @@ const duplicateRowHandler = async (action, context) => {
if (!notificationOverride) { if (!notificationOverride) {
notificationStore.actions.success("Row saved") notificationStore.actions.success("Row saved")
} }
// Refresh related datasources // Refresh related datasources
await dataSourceStore.actions.invalidateDataSource(tableId, { await dataSourceStore.actions.invalidateDataSource(tableId, {
invalidateRelationships: true, invalidateRelationships: true,
}) })
return { row } return { row }
} catch (error) { } catch (error) {
// Abort next actions // Abort next actions
@ -241,6 +190,17 @@ const navigationHandler = action => {
routeStore.actions.navigate(url, peek, externalNewTab) routeStore.actions.navigate(url, peek, externalNewTab)
} }
const scrollHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.ScrollTo,
{
field: action.parameters.field,
}
)
}
const queryExecutionHandler = async action => { const queryExecutionHandler = async action => {
const { datasourceId, queryId, queryParams, notificationOverride } = const { datasourceId, queryId, queryParams, notificationOverride } =
action.parameters action.parameters
@ -276,6 +236,47 @@ const queryExecutionHandler = async action => {
} }
} }
const executeActionHandler = async (
context,
componentId,
actionType,
params
) => {
const fn = context[`${componentId}_${actionType}`]
if (fn) {
return await fn(params)
}
}
const updateFieldValueHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.UpdateFieldValue,
{
type: action.parameters.type,
field: action.parameters.field,
value: action.parameters.value,
}
)
}
const validateFormHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.ValidateForm
)
}
const refreshDataProviderHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.RefreshDatasource
)
}
const logoutHandler = async action => { const logoutHandler = async action => {
await authStore.actions.logOut() await authStore.actions.logOut()
let redirectUrl = "/builder/auth/login" let redirectUrl = "/builder/auth/login"
@ -292,6 +293,23 @@ const logoutHandler = async action => {
} }
} }
const clearFormHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.ClearForm
)
}
const changeFormStepHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.ChangeFormStep,
action.parameters
)
}
const closeScreenModalHandler = action => { const closeScreenModalHandler = action => {
let url let url
if (action?.parameters) { if (action?.parameters) {
@ -399,10 +417,16 @@ const handlerMap = {
["Duplicate Row"]: duplicateRowHandler, ["Duplicate Row"]: duplicateRowHandler,
["Delete Row"]: deleteRowHandler, ["Delete Row"]: deleteRowHandler,
["Navigate To"]: navigationHandler, ["Navigate To"]: navigationHandler,
["Scroll To Field"]: scrollHandler,
["Execute Query"]: queryExecutionHandler, ["Execute Query"]: queryExecutionHandler,
["Trigger Automation"]: triggerAutomationHandler, ["Trigger Automation"]: triggerAutomationHandler,
["Validate Form"]: validateFormHandler,
["Update Field Value"]: updateFieldValueHandler,
["Refresh Data Provider"]: refreshDataProviderHandler,
["Log Out"]: logoutHandler, ["Log Out"]: logoutHandler,
["Clear Form"]: clearFormHandler,
["Close Screen Modal"]: closeScreenModalHandler, ["Close Screen Modal"]: closeScreenModalHandler,
["Change Form Step"]: changeFormStepHandler,
["Update State"]: updateStateHandler, ["Update State"]: updateStateHandler,
["Upload File to S3"]: s3UploadHandler, ["Upload File to S3"]: s3UploadHandler,
["Export Data"]: exportDataHandler, ["Export Data"]: exportDataHandler,
@ -437,12 +461,7 @@ export const enrichButtonActions = (actions, context) => {
return actions return actions
} }
// Get handlers for each action. If no bespoke handler is configured, fall const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
// back to simply executing this action from context.
const handlers = actions.map(def => {
return handlerMap[def["##eventHandlerType"]] || contextActionHandler
})
return async eventContext => { return async eventContext => {
// Button context is built up as actions are executed. // Button context is built up as actions are executed.
// Inherit any previous button context which may have come from actions // Inherit any previous button context which may have come from actions

16
packages/client/src/utils/componentProps.js
View File

@ -23,6 +23,16 @@ export const propsAreSame = (a, b) => {
* Data bindings are enriched, and button actions are enriched. * Data bindings are enriched, and button actions are enriched.
*/ */
export const enrichProps = (props, context, settingsDefinitionMap) => { export const enrichProps = (props, context, settingsDefinitionMap) => {
// Create context of all bindings and data contexts
// Duplicate the closest context as "data" which the builder requires
const totalContext = {
...context,
// This is only required for legacy bindings that used "data" rather than a
// component ID.
data: context[context.closestComponentId],
}
// We want to exclude any button actions from enrichment at this stage. // We want to exclude any button actions from enrichment at this stage.
// Extract top level button action settings. // Extract top level button action settings.
let normalProps = { ...props } let normalProps = { ...props }
@ -39,13 +49,13 @@ export const enrichProps = (props, context, settingsDefinitionMap) => {
let rawConditions = normalProps._conditions let rawConditions = normalProps._conditions
// Enrich all props except button actions // Enrich all props except button actions
let enrichedProps = enrichDataBindings(normalProps, context) let enrichedProps = enrichDataBindings(normalProps, totalContext)
// Enrich button actions. // Enrich button actions.
// Actions are enriched into a function at this stage, but actual data // Actions are enriched into a function at this stage, but actual data
// binding enrichment is done dynamically at runtime. // binding enrichment is done dynamically at runtime.
Object.keys(actionProps).forEach(prop => { Object.keys(actionProps).forEach(prop => {
enrichedProps[prop] = enrichButtonActions(actionProps[prop], context) enrichedProps[prop] = enrichButtonActions(actionProps[prop], totalContext)
}) })
// Conditions // Conditions
@ -56,7 +66,7 @@ export const enrichProps = (props, context, settingsDefinitionMap) => {
// action // action
condition.settingValue = enrichButtonActions( condition.settingValue = enrichButtonActions(
rawConditions[idx].settingValue, rawConditions[idx].settingValue,
context totalContext
) )
// Since we can't compare functions, we need to assume that conditions // Since we can't compare functions, we need to assume that conditions

10
packages/frontend-core/src/api/rows.js
View File

@ -19,12 +19,11 @@ export const buildRowEndpoints = API => ({
* @param suppressErrors whether or not to suppress error notifications * @param suppressErrors whether or not to suppress error notifications
*/ */
saveRow: async (row, suppressErrors = false) => { saveRow: async (row, suppressErrors = false) => {
const resourceId = row?._viewId || row?.tableId if (!row?.tableId) {
if (!resourceId) {
return return
} }
return await API.post({ return await API.post({
url: `/api/${resourceId}/rows`, url: `/api/${row._viewId || row.tableId}/rows`,
body: row, body: row,
suppressErrors, suppressErrors,
}) })
@ -36,12 +35,11 @@ export const buildRowEndpoints = API => ({
* @param suppressErrors whether or not to suppress error notifications * @param suppressErrors whether or not to suppress error notifications
*/ */
patchRow: async (row, suppressErrors = false) => { patchRow: async (row, suppressErrors = false) => {
const resourceId = row?._viewId || row?.tableId if (!row?.tableId && !row?._viewId) {
if (!resourceId) {
return return
} }
return await API.patch({ return await API.patch({
url: `/api/${resourceId}/rows`, url: `/api/${row._viewId || row.tableId}/rows`,
body: row, body: row,
suppressErrors, suppressErrors,
}) })