Move screen setting updates into store and use patches. Make screen settings generic

packages/builder/src/builderStore/store/frontend.js

@@ -292,35 +292,46 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      updateHomeScreen: async (screen, makeHomeScreen = true) => {
-        if (!screen) {
+      updateSetting: async (screen, name, value) => {
+        if (!screen || !name) {
           return
         }
 
-        // Find any existing home screen for this role so we can remove it,
-        // if we are setting this to be the new home screen
-        if (makeHomeScreen) {
-          const roleId = screen.routing.roleId
-          let existingHomeScreen = get(store).screens.find(s => {
-            return (
-              s.routing.roleId === roleId &&
-              s.routing.homeScreen &&
-              s._id !== screen._id
-            )
-          })
-          if (existingHomeScreen) {
-            const patch = screen => {
-              screen.routing.homeScreen = false
-            }
-            await store.actions.screens.patch(patch, existingHomeScreen._id)
+        // Apply setting update
+        const patch = screen => {
+          if (!screen) {
+            return false
           }
+          // Skip update if the value is the same
+          if (Helpers.deepGet(screen, name) === value) {
+            return false
+          }
+          Helpers.deepSet(screen, name, value)
         }
+        await store.actions.screens.patch(patch, screen._id)
 
-        // Update the passed in screen
-        const patch = screen => {
-          screen.routing.homeScreen = makeHomeScreen
+        // Ensure we don't have more than one home screen for this new role.
+        // This could happen after updating multiple different settings.
+        const state = get(store)
+        const updatedScreen = state.screens.find(s => s._id === screen._id)
+        if (!updatedScreen) {
+          return
+        }
+        const otherHomeScreens = state.screens.filter(s => {
+          return (
+            s.routing.roleId === updatedScreen.routing.roleId &&
+            s.routing.homeScreen &&
+            s._id !== screen._id
+          )
+        })
+        if (otherHomeScreens.length) {
+          const patch = screen => {
+            screen.routing.homeScreen = false
+          }
+          for (let otherHomeScreen of otherHomeScreens) {
+            await store.actions.screens.patch(patch, otherHomeScreen._id)
+          }
         }
-        await store.actions.screens.patch(patch, screen._id)
       },
       removeCustomLayout: async screen => {
         // Pull relevant settings from old layout, if required
@@ -697,7 +708,7 @@ export const getFrontendStore = () => {
           component._conditions = conditions
         })
       },
-      updateProp: async (name, value) => {
+      updateSetting: async (name, value) => {
         await store.actions.components.patch(component => {
           if (!name || !component) {
             return false

packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte

@@ -18,7 +18,7 @@
     const dataSource = form?.dataSource
     const fields = makeDatasourceFormComponents(dataSource)
     try {
-      await store.actions.components.updateProp(
+      await store.actions.components.updateSetting(
         "_children",
         fields.map(field => field.json())
       )

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -138,7 +138,7 @@
           $goto("./components")
         }
       } else if (type === "update-prop") {
-        await store.actions.components.updateProp(data.prop, data.value)
+        await store.actions.components.updateSetting(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
         confirmDeleteComponent(data.id)
       } else if (type === "duplicate-component" && data.id) {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte

@@ -5,7 +5,6 @@
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
   import { getComponentForSetting } from "components/design/settings/componentSettings"
-  import { Utils } from "@budibase/frontend-core"
 
   export let componentDefinition
   export let componentInstance
@@ -29,9 +28,9 @@
     ]
   }
 
-  const updateProp = async (key, value) => {
+  const updateSetting = async (key, value) => {
     try {
-      await store.actions.components.updateProp(key, value)
+      await store.actions.components.updateSetting(key, value)
     } catch (error) {
       notifications.error("Error updating component prop")
     }
@@ -84,7 +83,7 @@
         label="Name"
         key="_instanceName"
         value={componentInstance._instanceName}
-        onChange={val => updateProp("_instanceName", val)}
+        onChange={val => updateSetting("_instanceName", val)}
       />
     {/if}
     {#each section.settings as setting (setting.key)}
@@ -97,7 +96,7 @@
           value={componentInstance[setting.key]}
           defaultValue={setting.defaultValue}
           nested={setting.nested}
-          onChange={val => updateProp(setting.key, val)}
+          onChange={val => updateSetting(setting.key, val)}
           highlighted={$store.highlightedSettingKey === setting.key}
           props={{
             // Generic settings

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte

@@ -1,7 +1,7 @@
 <script>
   import Panel from "components/design/Panel.svelte"
   import { get } from "svelte/store"
-  import { get as deepGet, setWith } from "lodash"
+  import { Helpers } from "@budibase/bbui"
   import {
     Input,
     Layout,
@@ -67,19 +67,11 @@
       }
     }
 
-    // Home screen changes need to be handled manually
-    if (key === "routing.homeScreen") {
-      console.log(value)
-      await store.actions.screens.updateHomeScreen(get(selectedScreen), value)
-      return
-    }
-
     // Update screen setting
     try {
-      await store.actions.screens.patch(screen => {
-        setWith(screen, key.split("."), value, Object)
-      })
+      await store.actions.screens.updateSetting(get(selectedScreen), key, value)
     } catch (error) {
+      console.log(error)
       notifications.error("Error saving screen settings")
     }
   }
@@ -174,7 +166,7 @@
         control={setting.control}
         label={setting.label}
         key={setting.key}
-        value={deepGet($selectedScreen, setting.key)}
+        value={Helpers.deepGet($selectedScreen, setting.key)}
         onChange={val => setScreenSetting(setting, val)}
         props={{ ...setting.props, error: errors[setting.key] }}
         {bindings}