Merge pull request #2848 from Budibase/prevent-screenslot-deletion

Prevent screen slot from being deleted

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

@@ -15,7 +15,6 @@ import {
   database,
   tables,
 } from "stores/backend"
-
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
 import { FrontendTypes } from "constants"
@@ -25,6 +24,7 @@ import {
   findComponentParent,
   findClosestMatchingComponent,
   findAllMatchingComponents,
+  findComponent,
 } from "../storeUtils"
 import { uuid } from "../uuid"
 import { removeBindings } from "../dataBinding"
@@ -464,6 +464,24 @@ export const getFrontendStore = () => {
         if (!asset) {
           return
         }
+
+        // Fetch full definition
+        component = findComponent(asset.props, component._id)
+
+        // Ensure we aren't deleting the screen slot
+        if (component._component?.endsWith("/screenslot")) {
+          throw "You can't delete the screen slot"
+        }
+
+        // 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(

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -6,7 +6,13 @@
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
   import { FrontendTypes } from "constants"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ProgressCircle, Layout, Heading, Body } from "@budibase/bbui"
+  import {
+    ProgressCircle,
+    Layout,
+    Heading,
+    Body,
+    notifications,
+  } from "@budibase/bbui"
   import ErrorSVG from "assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/storeUtils"
 
@@ -166,10 +172,15 @@
     confirmDeleteDialog.show()
   }
 
-  const deleteComponent = () => {
-    store.actions.components.delete({ _id: idToDelete })
+  const deleteComponent = async () => {
+    try {
+      await store.actions.components.delete({ _id: idToDelete })
+    } catch (error) {
+      notifications.error(error)
+    }
     idToDelete = null
   }
+
   const cancelDeleteComponent = () => {
     idToDelete = null
   }

packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte

@@ -3,7 +3,7 @@
   import { store, currentAsset } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { findComponentParent } from "builderStore/storeUtils"
-  import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
 
   export let component
 
@@ -51,7 +51,11 @@
   }
 
   const deleteComponent = async () => {
-    await store.actions.components.delete(component)
+    try {
+      await store.actions.components.delete(component)
+    } catch (error) {
+      notifications.error(error)
+    }
   }
 
   const storeComponentForCopy = (cut = false) => {