diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 09132f28cb..c567454eff 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/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( diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index 4e51850fe1..d2d67bf99f 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/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 } diff --git a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte b/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte index 24050e1088..c3f51ee5df 100644 --- a/packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte +++ b/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) => {