From a6fc56c764805351e4c23b2719fe0d9a82cb9967 Mon Sep 17 00:00:00 2001 From: Michael Drury Date: Thu, 7 Dec 2023 10:17:36 +0000 Subject: [PATCH] Revert "Add Buttongroup configuration support to Formblock/Tableblock" --- packages/builder/src/builderStore/index.js | 10 +- .../src/builderStore/store/frontend.js | 54 +------ packages/client/manifest.json | 62 +++++--- .../components/app/blocks/TableBlock.svelte | 32 +---- .../app/blocks/form/FormBlock.svelte | 33 ++--- .../app/blocks/form/InnerFormBlock.svelte | 129 ++++++++++++++--- packages/frontend-core/src/utils/utils.js | 135 ------------------ 7 files changed, 172 insertions(+), 283 deletions(-) diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index dd54dcf13e..ece17cb46f 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -8,7 +8,6 @@ import { derived, get } from "svelte/store" import { findComponent, findComponentPath } from "./componentUtils" import { RoleUtils } from "@budibase/frontend-core" import { createHistoryStore } from "builderStore/store/history" -import { cloneDeep } from "lodash/fp" export const store = getFrontendStore() export const automationStore = getAutomationStore() @@ -70,14 +69,7 @@ export const selectedComponent = derived( if (!$selectedScreen || !$store.selectedComponentId) { return null } - const selected = findComponent( - $selectedScreen?.props, - $store.selectedComponentId - ) - - const clone = selected ? cloneDeep(selected) : selected - store.actions.components.migrateSettings(clone) - return clone + return findComponent($selectedScreen?.props, $store.selectedComponentId) } ) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 7e510c3d26..a4729b4a8a 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -601,36 +601,6 @@ export const getFrontendStore = () => { // Finally try an external table return validTables.find(table => table.sourceType === DB_TYPE_EXTERNAL) }, - 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) - migrated = true - } else if (enrichedComponent["buttons"] == null) { - // Ignore legacy config if 'buttons' has been reset by 'resetOn' - const { _id, actionType, dataSource } = enrichedComponent - enrichedComponent["buttons"] = Utils.buildDynamicButtonConfig({ - _id, - 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) { return @@ -702,6 +672,7 @@ export const getFrontendStore = () => { component[setting.key] = setting.defaultValue } } + // Validate non-empty settings else { if (setting.type === "dataProvider") { @@ -751,9 +722,6 @@ export const getFrontendStore = () => { useDefaultValues: true, }) - // Migrate nested component settings - store.actions.components.migrateSettings(instance) - // Add any extra properties the component needs let extras = {} if (definition.hasChildren) { @@ -877,13 +845,7 @@ export const getFrontendStore = () => { if (!component) { return false } - - // 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 + return patchFn(component, screen) } await store.actions.screens.patch(patchScreen, screenId) }, @@ -1285,13 +1247,9 @@ export const getFrontendStore = () => { const settings = getComponentSettings(component._component) const updatedSetting = settings.find(setting => setting.key === name) - // Can be a single string or array of strings - const resetFields = settings.filter(setting => { - return ( - name === setting.resetOn || - (Array.isArray(setting.resetOn) && setting.resetOn.includes(name)) - ) - }) + const resetFields = settings.filter( + setting => name === setting.resetOn + ) resetFields?.forEach(setting => { component[setting.key] = null }) @@ -1313,7 +1271,6 @@ export const getFrontendStore = () => { }) } component[name] = value - return true } }, requestEjectBlock: componentId => { @@ -1321,6 +1278,7 @@ export const getFrontendStore = () => { }, handleEjectBlock: async (componentId, ejectedDefinition) => { let nextSelectedComponentId + await store.actions.screens.patch(screen => { const block = findComponent(screen.props, componentId) const parent = findComponentParent(screen.props, componentId) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 3b99ddb7b5..fdb0ad9db1 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6112,32 +6112,54 @@ } ] }, - { - "tag": "style", - "type": "select", - "label": "Button position", - "key": "buttonPosition", - "options": [ - { - "label": "Bottom", - "value": "bottom" - }, - { - "label": "Top", - "value": "top" - } - ], - "defaultValue": "bottom" - }, { "section": true, "name": "Buttons", + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + }, "settings": [ { - "type": "buttonConfiguration", - "key": "buttons", + "type": "text", + "key": "saveButtonLabel", + "label": "Save button", "nested": true, - "resetOn": ["actionType", "dataSource"] + "defaultValue": "Save" + }, + { + "type": "text", + "key": "deleteButtonLabel", + "label": "Delete button", + "nested": true, + "defaultValue": "Delete", + "dependsOn": { + "setting": "actionType", + "value": "Update" + } + }, + { + "type": "url", + "label": "Navigate after button press", + "key": "actionUrl", + "placeholder": "Choose a screen", + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } + }, + { + "type": "boolean", + "label": "Hide notifications", + "key": "notificationOverride", + "defaultValue": false, + "dependsOn": { + "setting": "actionType", + "value": "View", + "invert": true + } } ] }, diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte index c8b6a07e3d..1cb77cb3e5 100644 --- a/packages/client/src/components/app/blocks/TableBlock.svelte +++ b/packages/client/src/components/app/blocks/TableBlock.svelte @@ -5,7 +5,6 @@ import BlockComponent from "components/BlockComponent.svelte" import { makePropSafe as safe } from "@budibase/string-templates" import { enrichSearchColumns, enrichFilter } from "utils/blocks.js" - import { Utils } from "@budibase/frontend-core" export let title export let dataSource @@ -34,7 +33,6 @@ export let notificationOverride const { fetchDatasourceSchema, API } = getContext("sdk") - const component = getContext("component") const stateKey = `ID_${generate()}` let formId @@ -261,25 +259,16 @@ name="Details form block" type="formblock" bind:id={detailsFormBlockId} - context="form-edit" props={{ dataSource, - buttonPosition: "top", - buttons: Utils.buildDynamicButtonConfig({ - _id: $component.id + "-form-edit", - showDeleteButton: deleteLabel !== "", - showSaveButton: true, - saveButtonLabel: sidePanelSaveLabel || "Save", - deleteButtonLabel: deleteLabel, - notificationOverride, - actionType: "Update", - dataSource, - }), + saveButtonLabel: sidePanelSaveLabel || "Save", //always show + deleteButtonLabel: deleteLabel, actionType: "Update", rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`, fields: sidePanelFields || normalFields, title: editTitle, labelPosition: "left", + notificationOverride, }} /> @@ -295,23 +284,16 @@ diff --git a/packages/client/src/components/app/blocks/form/FormBlock.svelte b/packages/client/src/components/app/blocks/form/FormBlock.svelte index f23ecf451d..e4d3b55eff 100644 --- a/packages/client/src/components/app/blocks/form/FormBlock.svelte +++ b/packages/client/src/components/app/blocks/form/FormBlock.svelte @@ -4,31 +4,28 @@ import Block from "components/Block.svelte" import { makePropSafe as safe } from "@budibase/string-templates" import InnerFormBlock from "./InnerFormBlock.svelte" - import { Utils } from "@budibase/frontend-core" export let actionType export let dataSource export let size export let disabled export let fields - export let buttons - export let buttonPosition - export let title export let description + export let showDeleteButton + export let showSaveButton + export let saveButtonLabel + export let deleteButtonLabel export let rowId export let actionUrl export let noRowsMessage export let notificationOverride - // Legacy - export let showDeleteButton - export let showSaveButton - export let saveButtonLabel - export let deleteButtonLabel + // Accommodate old config to ensure delete button does not reappear + $: deleteLabel = showDeleteButton === false ? "" : deleteButtonLabel?.trim() + $: saveLabel = showSaveButton === false ? "" : saveButtonLabel?.trim() const { fetchDatasourceSchema } = getContext("sdk") - const component = getContext("component") const convertOldFieldFormat = fields => { if (!fields) { @@ -101,23 +98,11 @@ fields: fieldsOrDefault, title, description, + saveButtonLabel: saveLabel, + deleteButtonLabel: deleteLabel, schema, repeaterId, notificationOverride, - buttons: - buttons || - Utils.buildDynamicButtonConfig({ - _id: $component.id, - showDeleteButton, - showSaveButton, - saveButtonLabel, - deleteButtonLabel, - notificationOverride, - actionType, - actionUrl, - dataSource, - }), - 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 24d4cfa14c..52ef3ac80c 100644 --- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte +++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte @@ -1,18 +1,22 @@