Use patch when deleting components

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

@@ -431,7 +431,7 @@ export const getFrontendStore = () => {
           return
         }
 
-        // Create screen patch function
+        // Patch screen
         const patch = screen => {
           // Find the selected component
           const currentComponent = findComponent(
@@ -492,39 +492,34 @@ export const getFrontendStore = () => {
         if (!component) {
           return
         }
-        const asset = get(currentAsset)
+        const state = get(store)
-        if (!asset) {
+        let parentId
-          return
+
+        // Patch screen
+        const patch = screen => {
+          // Check component exists
+          component = findComponent(screen.props, component._id)
+          if (!component) {
+            return false
           }
 
-        // Fetch full definition
+          // Check component has a valid parent
-        component = findComponent(asset.props, component._id)
+          const parent = findComponentParent(screen.props, component._id)
-
+          if (!parent) {
-        // Ensure we aren't deleting the screen slot
+            return false
-        if (component._component?.endsWith("/screenslot")) {
-          throw "You can't delete the screen slot"
           }
-
+          parentId = parent._id
-        // Ensure we aren't deleting something that contains the screen slot
-        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
           )
+        }
+        await store.actions.screens.patch(state.selectedScreenId, patch)
+
+        // Select the deleted component's parent
         store.update(state => {
-            state.selectedComponentId = parent._id
+          state.selectedComponentId = parentId
           return state
         })
-        }
-        await store.actions.preview.saveSelected()
       },
       copy: (component, cut = false, selectParent = true) => {
         const selectedAsset = get(currentAsset)