Some design changes and moving around screen deletion to centralise it.

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

@@ -53,6 +53,7 @@ export const getStore = () => {
 
   store.saveScreen = saveScreen(store)
   store.setCurrentScreen = setCurrentScreen(store)
+  store.deleteScreens = deleteScreens(store)
   store.setCurrentPage = setCurrentPage(store)
   store.createScreen = createScreen(store)
   store.addStylesheet = addStylesheet(store)
@@ -185,6 +186,26 @@ const setCurrentScreen = store => screenName => {
   })
 }
 
+const deleteScreens = store => (screens, pageName = null) => {
+  if (!(screens instanceof Array)) {
+    screens = [screens]
+  }
+  store.update(state => {
+    if (pageName == null) {
+      pageName = state.pages.main.name
+    }
+    for (let screen of screens) {
+      state.screens = state.screens.filter(c => c.name !== screen.name)
+      // Remove screen from current page as well
+      state.pages[pageName]._screens = state.pages[pageName]._screens.filter(
+        scr => scr.name !== screen.name
+      )
+      api.delete(`/_builder/api/pages/${pageName}/screens/${screen.name}`)
+    }
+    return state
+  })
+}
+
 const savePage = store => async page => {
   store.update(state => {
     if (state.currentFrontEndType !== "page" || !state.currentPageName) {

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -35,24 +35,10 @@
     confirmDeleteDialog.show()
   }
 
-  function deleteTemplateScreens() {
-    store.update(state => {
-      for (let screen of templateScreens) {
-        const mainPageName = state.pages.main.name
-        state.screens = state.screens.filter(c => c.name !== screen.name)
-        // Remove screen from current page as well
-        state.pages[state.currentPageName]._screens = state.pages[mainPageName]._screens.filter(
-          scr => scr.name !== screen.name
-        )
-        api.delete(`/_builder/api/pages/${mainPageName}/screens/${screen.name}`)
-      }
-      return state
-    })
-  }
 
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
-    deleteTemplateScreens()
+    store.deleteScreens(templateScreens)
     notifier.success("Table deleted")
     hideEditor()
   }
@@ -102,11 +88,10 @@
 </DropdownMenu>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
-  body={`Are you sure you wish to delete the table '${table.name}'?`}
   okText="Delete Table"
   onOk={deleteTable}
   title="Confirm Delete">
-  The following will also be deleted:
+  Are you sure you wish to delete the table <i>{table.name}?</i> The following will also be deleted:
   <b>
   <div class="delete-items">
     {#each willBeDeleted as item}
@@ -137,6 +122,7 @@
 
   div.delete-items div {
     margin-top: 4px;
+    font-weight: 500
   }
 
   .actions {

packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte

@@ -17,26 +17,13 @@
   }
 
   const deleteScreen = () => {
+    store.deleteScreens(screen, $store.currentPageName)
+    // update the page if required
     store.update(state => {
-      // Remove screen from screens
-      const screens = state.screens.filter(c => c.name !== screen.name)
-      state.screens = screens
-
-      // Remove screen from current page as well
-      const pageScreens = state.pages[state.currentPageName]._screens.filter(
-        scr => scr.name !== screen.name
-      )
-      state.pages[state.currentPageName]._screens = pageScreens
-
       if (state.currentPreviewItem.name === screen.name) {
         store.setCurrentPage($store.currentPageName)
         $goto(`./:page/page-layout`)
       }
-
-      api.delete(
-        `/_builder/api/pages/${state.currentPageName}/screens/${screen.name}`
-      )
-
       return state
     })
   }