Merge pull request #6733 from Budibase/409-fixes-master

Frontend store improvements for conflicts and performance

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, mainLayout, selectedComponent } from "builderStore"
+import { selectedScreen, selectedComponent } from "builderStore"
 import {
   datasources,
   integrations,
@@ -11,7 +11,6 @@ import {
 import { API } from "api"
 import analytics, { Events } from "analytics"
 import {
-  findComponentType,
   findComponentParent,
   findClosestMatchingComponent,
   findAllMatchingComponents,
@@ -21,6 +20,7 @@ import {
 } from "../componentUtils"
 import { Helpers } from "@budibase/bbui"
 import { DefaultAppTheme, LAYOUT_NAMES } from "../../constants"
+import { Utils } from "@budibase/frontend-core"
 
 const INITIAL_FRONTEND_STATE = {
   apps: [],
@@ -61,6 +61,26 @@ const INITIAL_FRONTEND_STATE = {
 export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
 
+  // This is a fake implementation of a "patch" API endpoint to try and prevent
+  // 409s. All screen doc mutations (aside from creation) use this function,
+  // which queues up invocations sequentially and ensures pending mutations are
+  // always applied to the most up-to-date doc revision.
+  // This is slightly better than just a traditional "patch" endpoint and this
+  // supports deeply mutating the current doc rather than just appending data.
+  const sequentialScreenPatch = Utils.sequential(async (patchFn, screenId) => {
+    const state = get(store)
+    const screen = state.screens.find(screen => screen._id === screenId)
+    if (!screen) {
+      return
+    }
+    let clone = cloneDeep(screen)
+    const result = patchFn(clone)
+    if (result === false) {
+      return
+    }
+    return await store.actions.screens.save(clone)
+  })
+
   store.actions = {
     reset: () => {
       store.set({ ...INITIAL_FRONTEND_STATE })
@@ -137,12 +157,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
         })
       },
@@ -150,12 +170,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
         })
       },
@@ -163,33 +183,35 @@ 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
-        })
-      },
-    },
-    routing: {
-      fetch: async () => {
-        const response = await API.fetchAppRoutes()
-        store.update(state => {
-          state.routes = response.routes
           return state
         })
       },
     },
     screens: {
       select: screenId => {
-        store.update(state => {
+        // Check this screen exists
-          let screens = state.screens
+        const state = get(store)
-          let screen =
+        const screen = state.screens.find(screen => screen._id === screenId)
-            screens.find(screen => screen._id === screenId) || screens[0]
+        if (!screen) {
-          if (!screen) return state
+          return
+        }
 
+        // Check screen isn't already selected
+        if (
+          state.selectedScreenId === screen._id &&
+          state.selectedComponentId === screen.props?._id
+        ) {
+          return
+        }
+
+        // Select new screen
+        store.update(state => {
           state.selectedScreenId = screen._id
           state.selectedComponentId = screen.props?._id
           return state
@@ -198,25 +220,40 @@ export const getFrontendStore = () => {
       save: async screen => {
         const creatingNewScreen = screen._id === undefined
         const savedScreen = await API.saveScreen(screen)
+        const routesResponse = await API.fetchAppRoutes()
         store.update(state => {
+          // Update screen object
           const idx = state.screens.findIndex(x => x._id === savedScreen._id)
           if (idx !== -1) {
             state.screens.splice(idx, 1, savedScreen)
           } else {
             state.screens.push(savedScreen)
           }
+
+          // Select the new screen if creating a new one
+          if (creatingNewScreen) {
+            state.selectedScreenId = savedScreen._id
+            state.selectedComponentId = savedScreen.props._id
+          }
+
+          // Update routes
+          state.routes = routesResponse.routes
+
           return state
         })
-
-        // Refresh routes
-        await store.actions.routing.fetch()
-
-        // Select the new screen if creating a new one
-        if (creatingNewScreen) {
-          store.actions.screens.select(savedScreen._id)
-        }
         return savedScreen
       },
+      patch: async (patchFn, screenId) => {
+        // Default to the currently selected screen
+        if (!screenId) {
+          const state = get(store)
+          screenId = state.selectedScreenId
+        }
+        if (!screenId || !patchFn) {
+          return
+        }
+        return await sequentialScreenPatch(patchFn, screenId)
+      },
       delete: async screens => {
         const screensToDelete = Array.isArray(screens) ? screens : [screens]
 
@@ -238,60 +275,78 @@ export const getFrontendStore = () => {
         promises.push(store.actions.links.delete(deleteUrls))
         await Promise.all(promises)
         const deletedIds = screensToDelete.map(screen => screen._id)
+        const routesResponse = await API.fetchAppRoutes()
         store.update(state => {
           // Remove deleted screens from state
           state.screens = state.screens.filter(screen => {
             return !deletedIds.includes(screen._id)
           })
+
           // Deselect the current screen if it was deleted
           if (deletedIds.includes(state.selectedScreenId)) {
             state.selectedScreenId = null
+            state.selectedComponentId = null
           }
+
+          // Update routing
+          state.routes = routesResponse.routes
+
           return state
         })
-
-        // Refresh routes
-        await store.actions.routing.fetch()
       },
-      updateHomeScreen: async (screen, makeHomeScreen = true) => {
+      updateSetting: async (screen, name, value) => {
-        let promises = []
+        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) {
-            existingHomeScreen.routing.homeScreen = false
-            promises.push(store.actions.screens.save(existingHomeScreen))
-          }
         }
 
-        // Update the passed in screen
+        // Apply setting update
-        screen.routing.homeScreen = makeHomeScreen
+        const patch = screen => {
-        promises.push(store.actions.screens.save(screen))
+          if (!screen) {
-        return await Promise.all(promises)
+            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)
+
+        // 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)
+          }
+        }
       },
       removeCustomLayout: async screen => {
         // Pull relevant settings from old layout, if required
         const layout = get(store).layouts.find(x => x._id === screen.layoutId)
-        screen.layoutId = null
+        const patch = screen => {
-        screen.showNavigation = layout?.props.navigation !== "None"
+          screen.layoutId = null
-        screen.width = layout?.props.width || "Large"
+          screen.showNavigation = layout?.props.navigation !== "None"
-        await store.actions.screens.save(screen)
+          screen.width = layout?.props.width || "Large"
+        }
+        await store.actions.screens.patch(patch, screen._id)
       },
     },
     preview: {
-      saveSelected: async () => {
-        const selectedAsset = get(currentAsset)
-        return await store.actions.screens.save(selectedAsset)
-      },
       setDevice: device => {
         store.update(state => {
           state.previewDevice = device
@@ -301,41 +356,28 @@ export const getFrontendStore = () => {
     },
     layouts: {
       select: layoutId => {
+        // Check this layout exists
+        const state = get(store)
+        const layout = state.layouts.find(layout => layout._id === layoutId)
+        if (!layout) {
+          return
+        }
+
+        // Check layout isn't already selected
+        if (
+          state.selectedLayoutId === layout._id &&
+          state.selectedComponentId === layout.props?._id
+        ) {
+          return
+        }
+
+        // Select new layout
         store.update(state => {
-          const layout =
-            store.actions.layouts.find(layoutId) || get(store).layouts[0]
-          if (!layout) return
           state.selectedLayoutId = layout._id
           state.selectedComponentId = layout.props?._id
           return state
         })
       },
-      save: async layout => {
-        const creatingNewLayout = layout._id === undefined
-        const savedLayout = await API.saveLayout(layout)
-        store.update(state => {
-          const idx = state.layouts.findIndex(x => x._id === savedLayout._id)
-          if (idx !== -1) {
-            state.layouts.splice(idx, 1, savedLayout)
-          } else {
-            state.layouts.push(savedLayout)
-          }
-          return state
-        })
-
-        // Select layout if creating a new one
-        if (creatingNewLayout) {
-          store.actions.layouts.select(savedLayout._id)
-        }
-        return savedLayout
-      },
-      find: layoutId => {
-        if (!layoutId) {
-          return get(mainLayout)
-        }
-        const storeContents = get(store)
-        return storeContents.layouts.find(layout => layout._id === layoutId)
-      },
       delete: async layout => {
         if (!layout?._id) {
           return
@@ -345,10 +387,6 @@ export const getFrontendStore = () => {
           layoutRev: layout._rev,
         })
         store.update(state => {
-          // Select main layout if we deleted the selected layout
-          if (layout._id === state.selectedLayoutId) {
-            state.selectedLayoutId = get(mainLayout)._id
-          }
           state.layouts = state.layouts.filter(x => x._id !== layout._id)
           return state
         })
@@ -386,7 +424,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")
           )
@@ -407,48 +445,59 @@ export const getFrontendStore = () => {
         }
       },
       create: async (componentName, presetProps) => {
-        const selected = get(selectedComponent)
+        const state = get(store)
-        const asset = get(currentAsset)
-
-        // Create new component
         const componentInstance = store.actions.components.createInstance(
           componentName,
           presetProps
         )
-        if (!componentInstance || !asset) {
+        if (!componentInstance) {
           return
         }
 
-        // Find parent node to attach this component to
+        // Patch selected screen
-        let parentComponent
+        await store.actions.screens.patch(screen => {
-        if (selected) {
+          // Find the selected component
-          // Use current screen or layout as parent if no component is selected
+          const currentComponent = findComponent(
-          const definition = store.actions.components.getDefinition(
+            screen.props,
-            selected._component
+            state.selectedComponentId
           )
-          if (definition?.hasChildren) {
+          if (!currentComponent) {
-            // Use selected component if it allows children
+            return false
-            parentComponent = selected
-          } else {
-            // Otherwise we need to use the parent of this component
-            parentComponent = findComponentParent(asset?.props, selected._id)
           }
-        } else {
-          // Use screen or layout if no component is selected
-          parentComponent = asset?.props
-        }
 
-        // Attach component
+          // Find parent node to attach this component to
-        if (!parentComponent) {
+          let parentComponent
-          return
+          if (currentComponent) {
-        }
+            // Use selected component as parent if one is selected
-        if (!parentComponent._children) {
+            const definition = store.actions.components.getDefinition(
-          parentComponent._children = []
+              currentComponent._component
-        }
+            )
-        parentComponent._children.push(componentInstance)
+            if (definition?.hasChildren) {
+              // Use selected component if it allows children
+              parentComponent = currentComponent
+            } else {
+              // Otherwise we need to use the parent of this component
+              parentComponent = findComponentParent(
+                screen.props,
+                currentComponent._id
+              )
+            }
+          } else {
+            // Use screen or layout if no component is selected
+            parentComponent = screen.props
+          }
 
-        // Save components and update UI
+          // Attach new component
-        await store.actions.preview.saveSelected()
+          if (!parentComponent) {
+            return false
+          }
+          if (!parentComponent._children) {
+            parentComponent._children = []
+          }
+          parentComponent._children.push(componentInstance)
+        })
+
+        // Select new component
         store.update(state => {
           state.selectedComponentId = componentInstance._id
           return state
@@ -461,50 +510,58 @@ export const getFrontendStore = () => {
 
         return componentInstance
       },
+      patch: async (patchFn, componentId, screenId) => {
+        // Use selected component by default
+        if (!componentId && !screenId) {
+          const state = get(store)
+          componentId = state.selectedComponentId
+          screenId = state.selectedScreenId
+        }
+        // Invalid if only a screen or component ID provided
+        if (!componentId || !screenId || !patchFn) {
+          return
+        }
+        const patchScreen = screen => {
+          let component = findComponent(screen.props, componentId)
+          if (!component) {
+            return false
+          }
+          return patchFn(component, screen)
+        }
+        await store.actions.screens.patch(patchScreen, screenId)
+      },
       delete: async component => {
         if (!component) {
           return
         }
-        const asset = get(currentAsset)
+        let parentId
-        if (!asset) {
-          return
-        }
 
-        // Fetch full definition
+        // Patch screen
-        component = findComponent(asset.props, component._id)
+        await store.actions.screens.patch(screen => {
+          // Check component exists
+          component = findComponent(screen.props, component._id)
+          if (!component) {
+            return false
+          }
 
-        // Ensure we aren't deleting the screen slot
+          // Check component has a valid parent
-        if (component._component?.endsWith("/screenslot")) {
+          const parent = findComponentParent(screen.props, component._id)
-          throw "You can't delete the screen slot"
+          if (!parent) {
-        }
+            return false
-
+          }
-        // Ensure we aren't deleting something that contains the screen slot
+          parentId = parent._id
-        const screenslot = findComponentType(
-          component,
-          "@budibase/standard-components/screenslot"
-        )
-        if (screenslot != null) {
-          throw "You can't delete a component that contains the screen slot"
-        }
-
-        const parent = findComponentParent(asset.props, component._id)
-        if (parent) {
           parent._children = parent._children.filter(
             child => child._id !== component._id
           )
-          store.update(state => {
+        })
-            state.selectedComponentId = parent._id
+
-            return state
+        // Select the deleted component's parent
-          })
+        store.update(state => {
-        }
+          state.selectedComponentId = parentId
-        await store.actions.preview.saveSelected()
+          return state
+        })
       },
       copy: (component, cut = false, selectParent = true) => {
-        const selectedAsset = get(currentAsset)
-        if (!selectedAsset) {
-          return null
-        }
-
         // Update store with copied component
         store.update(state => {
           state.componentToPaste = cloneDeep(component)
@@ -512,13 +569,11 @@ export const getFrontendStore = () => {
           return state
         })
 
-        // Remove the component from its parent if we're cutting
+        // Select the parent if cutting
         if (cut) {
-          const parent = findComponentParent(selectedAsset.props, component._id)
+          const screen = get(selectedScreen)
+          const parent = findComponentParent(screen?.props, component._id)
           if (parent) {
-            parent._children = parent._children.filter(
-              child => child._id !== component._id
-            )
             if (selectParent) {
               store.update(state => {
                 state.selectedComponentId = parent._id
@@ -528,24 +583,42 @@ export const getFrontendStore = () => {
           }
         }
       },
-      paste: async (targetComponent, mode) => {
+      paste: async (targetComponent, mode, targetScreen) => {
-        let promises = []
+        const state = get(store)
-        store.update(state => {
+        if (!state.componentToPaste) {
-          // Stop if we have nothing to paste
+          return
-          if (!state.componentToPaste) {
+        }
-            return state
+        let newComponentId
+
+        // Patch screen
+        const patch = screen => {
+          // Get up to date ref to target
+          targetComponent = findComponent(screen.props, targetComponent._id)
+          if (!targetComponent) {
+            return
           }
           const cut = state.componentToPaste.isCut
-
+          const originalId = state.componentToPaste._id
-          // Clone the component to paste and make unique if copying
-          delete state.componentToPaste.isCut
           let componentToPaste = cloneDeep(state.componentToPaste)
-          if (cut) {
+          delete componentToPaste.isCut
-            state.componentToPaste = null
+
-          } else {
+          // Make new component unique if copying
+          if (!cut) {
             makeComponentUnique(componentToPaste)
           }
+          newComponentId = componentToPaste._id
 
+          // Delete old component if cutting
+          if (cut) {
+            const parent = findComponentParent(screen.props, originalId)
+            if (parent?._children) {
+              parent._children = parent._children.filter(
+                component => component._id !== originalId
+              )
+            }
+          }
+
+          // Paste new component
           if (mode === "inside") {
             // Paste inside target component if chosen
             if (!targetComponent._children) {
@@ -553,66 +626,106 @@ export const getFrontendStore = () => {
             }
             targetComponent._children.push(componentToPaste)
           } else {
-            // Otherwise find the parent so we can paste in the correct order
+            // Otherwise paste in the correct order in the parent's children
-            // in the parents child components
-            const selectedAsset = get(currentAsset)
-            if (!selectedAsset) {
-              return state
-            }
             const parent = findComponentParent(
-              selectedAsset.props,
+              screen.props,
               targetComponent._id
             )
-            if (!parent) {
+            if (!parent?._children) {
-              return state
+              return false
             }
-
+            const targetIndex = parent._children.findIndex(component => {
-            // Insert the component in the correct position
+              return component._id === targetComponent._id
-            const targetIndex = parent._children.indexOf(targetComponent)
+            })
             const index = mode === "above" ? targetIndex : targetIndex + 1
-            parent._children.splice(index, 0, cloneDeep(componentToPaste))
+            parent._children.splice(index, 0, componentToPaste)
           }
+        }
+        const targetScreenId = targetScreen?._id || state.selectedScreenId
+        await store.actions.screens.patch(patch, targetScreenId)
 
-          // Save and select the new component
+        store.update(state => {
-          promises.push(store.actions.preview.saveSelected())
+          // Remove copied component if cutting
-          state.selectedComponentId = componentToPaste._id
+          if (state.componentToPaste.isCut) {
+            delete state.componentToPaste
+          }
+          state.selectedScreenId = targetScreenId
+          state.selectedComponentId = newComponentId
           return state
         })
-        await Promise.all(promises)
+      },
+      moveUp: async component => {
+        await store.actions.screens.patch(screen => {
+          const componentId = component?._id
+          const parent = findComponentParent(screen.props, componentId)
+          if (!parent?._children?.length) {
+            return false
+          }
+          const currentIndex = parent._children.findIndex(
+            child => child._id === componentId
+          )
+          if (currentIndex === 0) {
+            return false
+          }
+          const originalComponent = cloneDeep(parent._children[currentIndex])
+          const newChildren = parent._children.filter(
+            component => component._id !== componentId
+          )
+          newChildren.splice(currentIndex - 1, 0, originalComponent)
+          parent._children = newChildren
+        })
+      },
+      moveDown: async component => {
+        await store.actions.screens.patch(screen => {
+          const componentId = component?._id
+          const parent = findComponentParent(screen.props, componentId)
+          if (!parent?._children?.length) {
+            return false
+          }
+          const currentIndex = parent._children.findIndex(
+            child => child._id === componentId
+          )
+          if (currentIndex === parent._children.length - 1) {
+            return false
+          }
+          const originalComponent = cloneDeep(parent._children[currentIndex])
+          const newChildren = parent._children.filter(
+            component => component._id !== componentId
+          )
+          newChildren.splice(currentIndex + 1, 0, originalComponent)
+          parent._children = newChildren
+        })
       },
       updateStyle: async (name, value) => {
-        const selected = get(selectedComponent)
+        await store.actions.components.patch(component => {
-        if (value == null || value === "") {
+          if (value == null || value === "") {
-          delete selected._styles.normal[name]
+            delete component._styles.normal[name]
-        } else {
+          } else {
-          selected._styles.normal[name] = value
+            component._styles.normal[name] = value
-        }
+          }
-        await store.actions.preview.saveSelected()
+        })
       },
       updateCustomStyle: async style => {
-        const selected = get(selectedComponent)
+        await store.actions.components.patch(component => {
-        selected._styles.custom = style
+          component._styles.custom = style
-        await store.actions.preview.saveSelected()
+        })
       },
       updateConditions: async conditions => {
-        const selected = get(selectedComponent)
+        await store.actions.components.patch(component => {
-        selected._conditions = conditions
+          component._conditions = conditions
-        await store.actions.preview.saveSelected()
+        })
-      },
+      },
-      updateProp: async (name, value) => {
+      updateSetting: async (name, value) => {
-        let component = get(selectedComponent)
+        await store.actions.components.patch(component => {
-        if (!name || !component) {
+          if (!name || !component) {
-          return
+            return false
-        }
+          }
-        if (component[name] === value) {
+          // Skip update if the value is the same
-          return
+          if (component[name] === value) {
-        }
+            return false
-        component[name] = value
+          }
-        store.update(state => {
+          component[name] = value
-          state.selectedComponentId = component._id
-          return state
         })
-        await store.actions.preview.saveSelected()
       },
     },
     links: {

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/AppPanel.svelte

@@ -17,7 +17,8 @@
         getOptionValue={x => x._id}
         getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
         getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
-        bind:value={$store.selectedScreenId}
+        value={$store.selectedScreenId}
+        on:change={e => store.actions.screens.select(e.detail)}
       />
     </div>
     <div class="header-right">

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

@@ -85,6 +85,10 @@
     previewDevice: $store.previewDevice,
     messagePassing: $store.clientFeatures.messagePassing,
     navigation: $store.navigation,
+    hiddenComponentIds:
+      $store.componentToPaste?._id && $store.componentToPaste?.isCut
+        ? [$store.componentToPaste?._id]
+        : [],
     isBudibaseEvent: true,
   }
 
@@ -138,7 +142,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/iframeTemplate.js

@@ -65,7 +65,8 @@ export default `
           theme,
           customTheme,
           previewDevice,
-          navigation
+          navigation,
+          hiddenComponentIds
         } = parsed
 
         // Set some flags so the app knows we're in the builder
@@ -79,6 +80,7 @@ export default `
         window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
         window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
         window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
+        window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
 
         // Initialise app
         try {

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

@@ -1,8 +1,6 @@
 <script>
-  import { get } from "svelte/store"
+  import { store } from "builderStore"
-  import { store, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { findComponentParent } from "builderStore/componentUtils"
   import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
 
   export let component
@@ -19,43 +17,19 @@
   // not show a context menu.
   $: showMenu = definition?.editable !== false && definition?.static !== true
 
-  const moveUpComponent = () => {
+  const moveUpComponent = async () => {
-    const asset = get(currentAsset)
-    const parent = findComponentParent(asset?.props, component._id)
-    if (!parent) {
-      return
-    }
-    const currentIndex = parent._children.indexOf(component)
-    if (currentIndex === 0) {
-      return
-    }
     try {
-      const newChildren = parent._children.filter(c => c !== component)
+      await store.actions.components.moveUp(component)
-      newChildren.splice(currentIndex - 1, 0, component)
-      parent._children = newChildren
-      store.actions.preview.saveSelected()
     } catch (error) {
-      notifications.error("Error saving screen")
+      notifications.error("Error moving component up")
     }
   }
 
-  const moveDownComponent = () => {
+  const moveDownComponent = async () => {
-    const asset = get(currentAsset)
-    const parent = findComponentParent(asset?.props, component._id)
-    if (!parent) {
-      return
-    }
-    const currentIndex = parent._children.indexOf(component)
-    if (currentIndex === parent._children.length - 1) {
-      return
-    }
     try {
-      const newChildren = parent._children.filter(c => c !== component)
+      await store.actions.components.moveDown(component)
-      newChildren.splice(currentIndex + 1, 0, component)
-      parent._children = newChildren
-      store.actions.preview.saveSelected()
     } catch (error) {
-      notifications.error("Error saving screen")
+      notifications.error("Error moving component down")
     }
   }
 

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

@@ -18,6 +18,13 @@
 
   let closedNodes = {}
 
+  $: filteredComponents = components?.filter(component => {
+    return (
+      !$store.componentToPaste?.isCut ||
+      component._id !== $store.componentToPaste?._id
+    )
+  })
+
   const dragover = (component, index) => e => {
     const mousePosition = e.offsetY / e.currentTarget.offsetHeight
     dndStore.actions.dragover({
@@ -91,7 +98,7 @@
 </script>
 
 <ul>
-  {#each components || [] as component, index (component._id)}
+  {#each filteredComponents || [] as component, index (component._id)}
     {@const opened = isOpen(component, $selectedComponentPath, closedNodes)}
     <li
       on:click|stopPropagation={() => {

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,13 +28,13 @@
     ]
   }
 
-  const updateProp = Utils.sequential(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")
     }
-  })
+  }
 
   const canRenderControl = setting => {
     const control = getComponentForSetting(setting)
@@ -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]/layouts/[layoutId]/_components/LayoutListPanel.svelte

@@ -13,7 +13,7 @@
         indentLevel={0}
         selected={$store.selectedLayoutId === layout._id}
         text={layout.name}
-        on:click={() => ($store.selectedLayoutId = layout._id)}
+        on:click={() => store.actions.layouts.select(layout._id)}
       >
         <LayoutDropdownMenu {layout} />
       </NavItem>

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

@@ -23,7 +23,7 @@
 
   const pasteComponent = mode => {
     try {
-      store.actions.components.paste(screen.props, mode)
+      store.actions.components.paste(screen.props, mode, screen)
     } catch (error) {
       notifications.error("Error saving component")
     }

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

@@ -60,7 +60,7 @@
       indentLevel={0}
       selected={$store.selectedScreenId === screen._id}
       text={screen.routing.route}
-      on:click={() => ($store.selectedScreenId = screen._id)}
+      on:click={() => store.actions.screens.select(screen._id)}
       color={RoleUtils.getRoleColour(screen.routing.roleId)}
     >
       <ScreenDropdownMenu screenId={screen._id} />

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,
@@ -42,7 +42,7 @@
     )
   }
 
-  const setScreenSetting = (setting, value) => {
+  const setScreenSetting = async (setting, value) => {
     const { key, parser, validate } = setting
 
     // Parse value if required
@@ -67,29 +67,11 @@
       }
     }
 
-    // Home screen changes need to be handled manually
+    // Update screen setting
-    if (key === "routing.homeScreen") {
-      store.actions.screens.updateHomeScreen(get(selectedScreen), value)
-      return
-    }
-
-    // Update screen object in store
-    // If there are 2 home screens after this change, remove this screen as a
-    // home screen
-    const screen = get(selectedScreen)
-    setWith(screen, key.split("."), value, Object)
-    const roleId = screen.routing.roleId
-    const homeScreens = get(store).screens.filter(screen => {
-      return screen.routing.roleId === roleId && screen.routing.homeScreen
-    })
-    if (homeScreens.length > 1) {
-      screen.routing.homeScreen = false
-    }
-
-    // Save new definition
     try {
-      store.actions.screens.save(screen)
+      await store.actions.screens.updateSetting(get(selectedScreen), key, value)
     } catch (error) {
+      console.log(error)
       notifications.error("Error saving screen settings")
     }
   }
@@ -184,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}

packages/client/src/components/Component.svelte

@@ -121,6 +121,8 @@
     !isScreen &&
     definition?.draggable !== false
   $: droppable = interactive && !isLayout && !isScreen
+  $: builderHidden =
+    $builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id)
 
   // Empty components are those which accept children but do not have any.
   // Empty states can be shown for these components, but can be disabled
@@ -434,7 +436,7 @@
   })
 </script>
 
-{#if constructor && initialSettings && (visible || inSelectedPath)}
+{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
   <!-- The ID is used as a class because getElementsByClassName is O(1) -->
   <!-- and the performance matters for the selection indicators -->
   <div

packages/client/src/index.js

@@ -20,6 +20,7 @@ const loadBudibase = () => {
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
     previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
     navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
+    hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
   })
 
   // Set app ID - this window flag is set by both the preview and the real

packages/client/src/stores/builder.js

@@ -17,6 +17,7 @@ const createBuilderStore = () => {
     previewDevice: "desktop",
     isDragging: false,
     navigation: null,
+    hiddenComponentIds: [],
 
     // Legacy - allow the builder to specify a layout
     layout: null,

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

@@ -5,13 +5,17 @@
  * @return {Promise} a sequential version of the function
  */
 export const sequential = fn => {
-  let promise
+  let queue = []
   return async (...params) => {
-    if (promise) {
+    queue.push(async () => {
-      await promise
+      await fn(...params)
+      queue.shift()
+      if (queue.length) {
+        await queue[0]()
+      }
+    })
+    if (queue.length === 1) {
+      await queue[0]()
     }
-    promise = fn(...params)
-    await promise
-    promise = null
   }
 }