Ensure state never gets out of sync when saving app metadata by using server response to update state

packages/builder/src/builderStore/index.js

@@ -2,7 +2,6 @@ import { getFrontendStore } from "./store/frontend"
 import { getAutomationStore } from "./store/automation"
 import { getThemeStore } from "./store/theme"
 import { derived } from "svelte/store"
-import { LAYOUT_NAMES } from "../constants"
 import { findComponent, findComponentPath } from "./componentUtils"
 import { RoleUtils } from "@budibase/frontend-core"
 
@@ -28,6 +27,10 @@ export const selectedComponent = derived(
   }
 )
 
+// For legacy compatibility only, but with the new design UI this is just
+// the selected screen
+export const currentAsset = selectedScreen
+
 export const sortedScreens = derived(store, $store => {
   return $store.screens.slice().sort((a, b) => {
     // Sort by role first
@@ -66,12 +69,3 @@ export const selectedComponentPath = derived(
     ).map(component => component._id)
   }
 )
-
-export const mainLayout = derived(store, $store => {
-  return $store.layouts?.find(
-    layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
-  )
-})
-
-// For compatibility
-export const currentAsset = selectedScreen

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

@@ -1,6 +1,6 @@
 import { get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { currentAsset, selectedScreen, selectedComponent } from "builderStore"
+import { selectedScreen, selectedComponent } from "builderStore"
 import {
   datasources,
   integrations,
@@ -155,12 +155,12 @@ export const getFrontendStore = () => {
     theme: {
       save: async theme => {
         const appId = get(store).appId
-        await API.saveAppMetadata({
+        const app = await API.saveAppMetadata({
           appId,
           metadata: { theme },
         })
         store.update(state => {
-          state.theme = theme
+          state.theme = app.theme
           return state
         })
       },
@@ -168,12 +168,12 @@ export const getFrontendStore = () => {
     customTheme: {
       save: async customTheme => {
         const appId = get(store).appId
-        await API.saveAppMetadata({
+        const app = await API.saveAppMetadata({
           appId,
           metadata: { customTheme },
         })
         store.update(state => {
-          state.customTheme = customTheme
+          state.customTheme = app.customTheme
           return state
         })
       },
@@ -181,12 +181,12 @@ export const getFrontendStore = () => {
     navigation: {
       save: async navigation => {
         const appId = get(store).appId
-        await API.saveAppMetadata({
+        const app = await API.saveAppMetadata({
           appId,
           metadata: { navigation },
         })
         store.update(state => {
-          state.navigation = navigation
+          state.navigation = app.navigation
           return state
         })
       },
@@ -407,7 +407,7 @@ export const getFrontendStore = () => {
         }
         if (componentName.endsWith("/formstep")) {
           const parentForm = findClosestMatchingComponent(
-            get(currentAsset).props,
+            get(selectedScreen).props,
             get(selectedComponent)._id,
             component => component._component.endsWith("/form")
           )