Fix navigation on deleting views and use ConfirmDialog for view deletion to improve consistency

packages/builder/src/components/nav/ModelNavigator/EditView.svelte

@@ -1,20 +1,19 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { getContext } from "svelte"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
-  import DeleteViewModal from "components/database/DataTable/modals/DeleteView.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-
-  const { open, close } = getContext("simple-modal")
 
   export let view
 
   let anchor
   let dropdown
-
   let editing
   let originalName = view.name
+  let confirmDeleteDialog
 
   function showEditor() {
     editing = true
@@ -26,31 +25,28 @@
     close()
   }
 
-  const deleteView = () => {
+  async function save() {
-    open(
+    await backendUiStore.actions.views.save({
-      DeleteViewModal,
-      {
-        onClosed: close,
-        viewName: view.name,
-      },
-      { styleContent: { padding: "0" } }
-    )
-  }
-
-  function save() {
-    backendUiStore.actions.views.save({
       originalName,
       ...view,
     })
-    notifier.success("Renamed View Successfully.")
+    notifier.success("View renamed successfully")
     hideEditor()
   }
+
+  async function deleteView() {
+    const name = view.name
+    const id = view.modelId
+    await backendUiStore.actions.views.delete(name)
+    notifier.success("View deleted")
+    $goto(`./model/${id}`)
+  }
 </script>
 
-<div class="icon" bind:this={anchor} on:click={dropdown.show}>
+<div bind:this={anchor} class="icon" on:click={dropdown.show}>
   <i class="ri-more-line" />
 </div>
-<DropdownMenu bind:this={dropdown} {anchor} align="left">
+<DropdownMenu align="left" {anchor} bind:this={dropdown}>
   {#if editing}
     <div class="container">
       <h5>Edit View</h5>
@@ -70,13 +66,19 @@
         <Icon name="edit" />
         Edit
       </li>
-      <li data-cy="delete-view" on:click={deleteView}>
+      <li data-cy="delete-view" on:click={() => confirmDeleteDialog.show()}>
         <Icon name="delete" />
         Delete
       </li>
     </ul>
   {/if}
 </DropdownMenu>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  body={`Are you sure you wish to delete the view '${view.name}'? Your data will be deleted and this action cannot be undone.`}
+  okText="Delete View"
+  onOk={deleteView}
+  title="Confirm Delete" />
 
 <style>
   div.icon {
@@ -85,6 +87,7 @@
     justify-content: flex-end;
     align-items: center;
   }
+
   div.icon i {
     font-size: 16px;
   }