Give up on attempting to get jest to work with BBUI, change strategy for showing notifications when deleting invalid components

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

@@ -8,7 +8,6 @@ import {
   selectedComponent,
   selectedAccessRole,
 } from "builderStore"
-import { notifications } from "@budibase/bbui"
 import {
   datasources,
   integrations,
@@ -16,7 +15,6 @@ import {
   database,
   tables,
 } from "stores/backend"
-
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
 import { FrontendTypes } from "constants"
@@ -472,8 +470,7 @@ export const getFrontendStore = () => {
 
         // Ensure we aren't deleting the screen slot
         if (component._component?.endsWith("/screenslot")) {
-          notifications.error("You can't delete the screen slot")
-          return
+          throw "You can't delete the screen slot"
         }
 
         // Ensure we aren't deleting something that contains the screen slot
@@ -482,10 +479,7 @@ export const getFrontendStore = () => {
           "@budibase/standard-components/screenslot"
         )
         if (screenslot != null) {
-          notifications.error(
-            "You can't delete a component that contains the screen slot"
-          )
-          return
+          throw "You can't delete a component that contains the screen slot"
         }
 
         const parent = findComponentParent(asset.props, component._id)

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 () => {
+    try {
       await store.actions.components.delete(component)
+    } catch (error) {
+      notifications.error(error)
+    }
   }
 
   const storeComponentForCopy = (cut = false) => {