Merge pull request #12519 from Budibase/revert-12427-feature/add-buttongroup-to-formblock

Revert "Add Buttongroup configuration support to Formblock/Tableblock"

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(
+    return findComponent($selectedScreen?.props, $store.selectedComponentId)
-      $selectedScreen?.props,
-      $store.selectedComponentId
-    )
-
-    const clone = selected ? cloneDeep(selected) : selected
-    store.actions.components.migrateSettings(clone)
-    return clone
   }
 )
 

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
           }
-
+          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)
       },
@@ -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(
-          const resetFields = settings.filter(setting => {
+            setting => name === setting.resetOn
-            return (
+          )
-              name === setting.resetOn ||
-              (Array.isArray(setting.resetOn) && setting.resetOn.includes(name))
-            )
-          })
           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)

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",
+            "type": "text",
-            "key": "buttons",
+            "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
+            }
           }
         ]
       },

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",
+              saveButtonLabel: sidePanelSaveLabel || "Save", //always show
-              buttons: Utils.buildDynamicButtonConfig({
+              deleteButtonLabel: deleteLabel,
-                _id: $component.id + "-form-edit",
-                showDeleteButton: deleteLabel !== "",
-                showSaveButton: true,
-                saveButtonLabel: sidePanelSaveLabel || "Save",
-                deleteButtonLabel: deleteLabel,
-                notificationOverride,
-                actionType: "Update",
-                dataSource,
-              }),
               actionType: "Update",
               rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
               fields: sidePanelFields || normalFields,
               title: editTitle,
               labelPosition: "left",
+              notificationOverride,
             }}
           />
         </BlockComponent>
@@ -295,23 +284,16 @@
           <BlockComponent
             name="New row form block"
             type="formblock"
-            context="form-new"
             props={{
               dataSource,
-              buttonPosition: "top",
+              showSaveButton: true,
-              buttons: Utils.buildDynamicButtonConfig({
+              showDeleteButton: false,
-                _id: $component.id + "-form-new",
+              saveButtonLabel: sidePanelSaveLabel || "Save", //always show
-                showDeleteButton: false,
-                showSaveButton: true,
-                saveButtonLabel: "Save",
-                notificationOverride,
-                actionType: "Create",
-                dataSource,
-              }),
               actionType: "Create",
               fields: sidePanelFields || normalFields,
               title: "Create Row",
               labelPosition: "left",
+              notificationOverride,
             }}
           />
         </BlockComponent>

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
+  // Accommodate old config to ensure delete button does not reappear
-  export let showDeleteButton
+  $: deleteLabel = showDeleteButton === false ? "" : deleteButtonLabel?.trim()
-  export let showSaveButton
+  $: saveLabel = showSaveButton === false ? "" : saveButtonLabel?.trim()
-  export let saveButtonLabel
-  export let deleteButtonLabel
 
   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)) || {}

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -1,18 +1,22 @@
 <script>
   import BlockComponent from "components/BlockComponent.svelte"
   import Placeholder from "components/app/Placeholder.svelte"
+  import { makePropSafe as safe } from "@budibase/string-templates"
   import { getContext } from "svelte"
 
   export let dataSource
+  export let actionUrl
   export let actionType
   export let size
   export let disabled
   export let fields
   export let title
   export let description
-  export let buttons
+  export let saveButtonLabel
-  export let buttonPosition = "bottom"
+  export let deleteButtonLabel
   export let schema
+  export let repeaterId
+  export let notificationOverride
 
   const FieldTypeToComponentMap = {
     string: "stringfield",
@@ -33,7 +37,74 @@
 
   let formId
 
-  $: renderHeader = buttons || title
+  $: onSave = [
+    {
+      "##eventHandlerType": "Validate Form",
+      parameters: {
+        componentId: formId,
+      },
+    },
+    {
+      "##eventHandlerType": "Save Row",
+      parameters: {
+        providerId: formId,
+        tableId: dataSource?.resourceId,
+        notificationOverride,
+      },
+    },
+    {
+      "##eventHandlerType": "Close Screen Modal",
+    },
+    {
+      "##eventHandlerType": "Close Side Panel",
+    },
+    // Clear a create form once submitted
+    ...(actionType !== "Create"
+      ? []
+      : [
+          {
+            "##eventHandlerType": "Clear Form",
+            parameters: {
+              componentId: formId,
+            },
+          },
+        ]),
+    {
+      "##eventHandlerType": "Navigate To",
+      parameters: {
+        url: actionUrl,
+      },
+    },
+  ]
+  $: onDelete = [
+    {
+      "##eventHandlerType": "Delete Row",
+      parameters: {
+        confirm: true,
+        tableId: dataSource?.resourceId,
+        rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`,
+        revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`,
+        notificationOverride,
+      },
+    },
+    {
+      "##eventHandlerType": "Close Screen Modal",
+    },
+    {
+      "##eventHandlerType": "Close Side Panel",
+    },
+    {
+      "##eventHandlerType": "Navigate To",
+      parameters: {
+        url: actionUrl,
+      },
+    },
+  ]
+
+  $: renderDeleteButton = deleteButtonLabel && actionType === "Update"
+  $: renderSaveButton = saveButtonLabel && actionType !== "View"
+  $: renderButtons = renderDeleteButton || renderSaveButton
+  $: renderHeader = renderButtons || title
 
   const getComponentForField = field => {
     const fieldSchemaName = field.field || field.name
@@ -113,14 +184,42 @@
               props={{ text: title || "" }}
               order={0}
             />
-            {#if buttonPosition == "top"}
+            {#if renderButtons}
               <BlockComponent
-                type="buttongroup"
+                type="container"
                 props={{
-                  buttons,
+                  direction: "row",
+                  hAlign: "stretch",
+                  vAlign: "center",
+                  gap: "M",
+                  wrap: true,
                 }}
-                order={0}
+                order={1}
-              />
+              >
+                {#if renderDeleteButton}
+                  <BlockComponent
+                    type="button"
+                    props={{
+                      text: deleteButtonLabel,
+                      onClick: onDelete,
+                      quiet: true,
+                      type: "secondary",
+                    }}
+                    order={0}
+                  />
+                {/if}
+                {#if renderSaveButton}
+                  <BlockComponent
+                    type="button"
+                    props={{
+                      text: saveButtonLabel,
+                      onClick: onSave,
+                      type: "cta",
+                    }}
+                    order={1}
+                  />
+                {/if}
+              </BlockComponent>
             {/if}
           </BlockComponent>
         </BlockComponent>
@@ -146,20 +245,6 @@
         </BlockComponent>
       {/key}
     </BlockComponent>
-    {#if buttonPosition === "bottom"}
-      <BlockComponent
-        type="buttongroup"
-        props={{
-          buttons,
-        }}
-        styles={{
-          normal: {
-            "margin-top": "16",
-          },
-        }}
-        order={1}
-      />
-    {/if}
   </BlockComponent>
 {:else}
   <Placeholder

packages/frontend-core/src/utils/utils.js

@@ -1,6 +1,3 @@
-import { makePropSafe as safe } from "@budibase/string-templates"
-import { Helpers } from "@budibase/bbui"
-
 /**
  * Utility to wrap an async function and ensure all invocations happen
  * sequentially.
@@ -109,135 +106,3 @@ export const domDebounce = callback => {
     }
   }
 }
-
-/**
- * Build the default FormBlock button configs per actionType
- * Parse any legacy button config and mirror its the outcome
- *
- * @param {any} props
- * */
-export const buildDynamicButtonConfig = props => {
-  const {
-    _id,
-    actionType,
-    dataSource,
-    notificationOverride,
-    actionUrl,
-    showDeleteButton,
-    deleteButtonLabel,
-    showSaveButton,
-    saveButtonLabel,
-  } = props || {}
-
-  if (!_id) {
-    console.log("MISSING ID")
-    return
-  }
-  const formId = `${_id}-form`
-  const repeaterId = `${_id}-repeater`
-  const resourceId = dataSource?.resourceId
-
-  // Accommodate old config to ensure delete button does not reappear
-  const deleteText = showDeleteButton === false ? "" : deleteButtonLabel?.trim()
-  const saveText = showSaveButton === false ? "" : saveButtonLabel?.trim()
-
-  const onSave = [
-    {
-      "##eventHandlerType": "Validate Form",
-      parameters: {
-        componentId: formId,
-      },
-    },
-    {
-      "##eventHandlerType": "Save Row",
-      parameters: {
-        providerId: formId,
-        tableId: resourceId,
-        notificationOverride,
-      },
-    },
-    {
-      "##eventHandlerType": "Close Screen Modal",
-    },
-    {
-      "##eventHandlerType": "Close Side Panel",
-    },
-    // Clear a create form once submitted
-    ...(actionType !== "Create"
-      ? []
-      : [
-          {
-            "##eventHandlerType": "Clear Form",
-            parameters: {
-              componentId: formId,
-            },
-          },
-        ]),
-
-    ...(actionUrl
-      ? [
-          {
-            "##eventHandlerType": "Navigate To",
-            parameters: {
-              url: actionUrl,
-            },
-          },
-        ]
-      : []),
-  ]
-
-  const onDelete = [
-    {
-      "##eventHandlerType": "Delete Row",
-      parameters: {
-        confirm: true,
-        tableId: resourceId,
-        rowId: `{{ ${safe(repeaterId)}.${safe("_id")} }}`,
-        revId: `{{ ${safe(repeaterId)}.${safe("_rev")} }}`,
-        notificationOverride,
-      },
-    },
-    {
-      "##eventHandlerType": "Close Screen Modal",
-    },
-    {
-      "##eventHandlerType": "Close Side Panel",
-    },
-
-    ...(actionUrl
-      ? [
-          {
-            "##eventHandlerType": "Navigate To",
-            parameters: {
-              url: actionUrl,
-            },
-          },
-        ]
-      : []),
-  ]
-
-  const defaultButtons = []
-
-  if (["Update", "Create"].includes(actionType) && showSaveButton !== false) {
-    defaultButtons.push({
-      text: saveText || "Save",
-      _id: Helpers.uuid(),
-      _component: "@budibase/standard-components/button",
-      onClick: onSave,
-      type: "cta",
-    })
-  }
-
-  if (actionType == "Update" && showDeleteButton !== false) {
-    defaultButtons.push({
-      text: deleteText || "Delete",
-      _id: Helpers.uuid(),
-      _component: "@budibase/standard-components/button",
-      onClick: onDelete,
-      quiet: true,
-      type: "secondary",
-    })
-  }
-
-  return defaultButtons
-}