PR feedback and refactoring

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
   }
 )
 

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)

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,

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)) || {}

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