diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 38b7cdf7c2..5f9be1f9cf 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -69,7 +69,14 @@ export const selectedComponent = derived( if (!$selectedScreen || !$store.selectedComponentId) { return null } - return findComponent($selectedScreen?.props, $store.selectedComponentId) + const selected = findComponent( + $selectedScreen?.props, + $store.selectedComponentId + ) + + const clone = selected ? Object.assign({}, selected) : selected + store.actions.components.migrateSettings(clone) + return clone } ) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index d869bbc731..7e510c3d26 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -601,17 +601,16 @@ export const getFrontendStore = () => { // Finally try an external table return validTables.find(table => table.sourceType === DB_TYPE_EXTERNAL) }, - processNestedSettings: enrichedComponent => { + migrateSettings: enrichedComponent => { const componentPrefix = "@budibase/standard-components" + let migrated = false if (enrichedComponent?._component == `${componentPrefix}/formblock`) { // Use default config if the 'buttons' prop has never been initialised if (!("buttons" in enrichedComponent)) { enrichedComponent["buttons"] = Utils.buildDynamicButtonConfig(enrichedComponent) - //Ensure existing Formblocks position their buttons at the top. - enrichedComponent["buttonPosition"] = - enrichedComponent["buttonPosition"] || "top" + migrated = true } else if (enrichedComponent["buttons"] == null) { // Ignore legacy config if 'buttons' has been reset by 'resetOn' const { _id, actionType, dataSource } = enrichedComponent @@ -620,8 +619,17 @@ export const getFrontendStore = () => { actionType, dataSource, }) + migrated = true + } + + // Ensure existing Formblocks position their buttons at the top. + if (!("buttonPosition" in enrichedComponent)) { + enrichedComponent["buttonPosition"] = "top" + migrated = true } } + + return migrated }, enrichEmptySettings: (component, opts) => { if (!component?._component) { @@ -743,8 +751,8 @@ export const getFrontendStore = () => { useDefaultValues: true, }) - // Process nested component settings - store.actions.components.processNestedSettings(instance) + // Migrate nested component settings + store.actions.components.migrateSettings(instance) // Add any extra properties the component needs let extras = {} @@ -869,7 +877,13 @@ export const getFrontendStore = () => { if (!component) { return false } - return patchFn(component, screen) + + // Mutates the fetched component with updates + const updated = patchFn(component, screen) + // Mutates the component with any required settings updates + const migrated = store.actions.components.migrateSettings(component) + + return updated || migrated } await store.actions.screens.patch(patchScreen, screenId) }, @@ -1299,9 +1313,7 @@ export const getFrontendStore = () => { }) } component[name] = value - - // Process nested component settings - store.actions.components.processNestedSettings(component) + return true } }, requestEjectBlock: componentId => { @@ -1309,7 +1321,6 @@ export const getFrontendStore = () => { }, handleEjectBlock: async (componentId, ejectedDefinition) => { let nextSelectedComponentId - console.log("EJECTING") await store.actions.screens.patch(screen => { const block = findComponent(screen.props, componentId) const parent = findComponentParent(screen.props, componentId) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte index c9094f89db..6093d2a45e 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte @@ -19,8 +19,6 @@ export let includeHidden = false export let tag - $: store.actions.components.processNestedSettings(componentInstance) - $: sections = getSections( componentInstance, componentDefinition, diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte index 5446514534..f23ecf451d 100644 --- a/packages/client/src/components/app/blocks/form/FormBlock.svelte +++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte @@ -117,7 +117,7 @@ actionUrl, dataSource, }), - buttonPosition, + buttonPosition: buttons ? buttonPosition : "top", } const fetchSchema = async () => { schema = (await fetchDatasourceSchema(dataSource)) || {} diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte index e74fd7d0f7..24d4cfa14c 100644 --- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte +++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte @@ -10,7 +10,7 @@ export let fields export let title export let description - export let buttons = [] + export let buttons export let buttonPosition = "bottom" export let schema