Updating queries to use the same mechanism.

packages/builder/src/components/backend/DatasourceNavigator/QueryNavItem.svelte

@@ -6,19 +6,18 @@
   } from "@/helpers/data/utils"
   import { goto as gotoStore, isActive } from "@roxi/routify"
   import {
-    datasources,
     queries,
     userSelectedResourceMap,
     contextMenuStore,
   } from "@/stores/builder"
   import NavItem from "@/components/common/NavItem.svelte"
-  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+  import DeleteDataConfirmModal from "@/components/backend/modals/DeleteDataConfirmationModal.svelte"
   import { notifications, Icon } from "@budibase/bbui"
 
   export let datasource
   export let query
 
-  let confirmDeleteDialog
+  let confirmDeleteModal
 
   // goto won't work in the context menu callback if the store is called directly
   $: goto = $gotoStore
@@ -31,7 +30,7 @@
         keyBind: null,
         visible: true,
         disabled: false,
-        callback: confirmDeleteDialog.show,
+        callback: confirmDeleteModal.show,
       },
       {
         icon: "Duplicate",
@@ -51,20 +50,6 @@
     ]
   }
 
-  async function deleteQuery() {
-    try {
-      // Go back to the datasource if we are deleting the active query
-      if ($queries.selectedQueryId === query._id) {
-        goto(`./datasource/${query.datasourceId}`)
-      }
-      await queries.delete(query)
-      await datasources.fetch()
-      notifications.success("Query deleted")
-    } catch (error) {
-      notifications.error("Error deleting query")
-    }
-  }
-
   const openContextMenu = e => {
     e.preventDefault()
     e.stopPropagation()
@@ -90,14 +75,7 @@
   <Icon size="S" hoverable name="MoreSmallList" on:click={openContextMenu} />
 </NavItem>
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  okText="Delete Query"
-  onOk={deleteQuery}
-  title="Confirm Deletion"
->
-  Are you sure you wish to delete this query? This action cannot be undone.
-</ConfirmDialog>
+<DeleteDataConfirmModal source={query} bind:this={confirmDeleteModal} />
 
 <style>
 </style>

packages/builder/src/components/backend/modals/DeleteDataConfirmationModal.svelte

@@ -3,6 +3,7 @@
   import {
     appStore,
     datasources,
+    queries,
     screenStore,
     tables,
     views,
@@ -106,6 +107,20 @@
     }
   }
 
+  async function deleteQuery(query: Query) {
+    try {
+      // Go back to the datasource if we are deleting the active query
+      if ($queries.selectedQueryId === query._id) {
+        $goto(`./datasource/${query.datasourceId}`)
+      }
+      await queries.delete(query)
+      await datasources.fetch()
+      notifications.success("Query deleted")
+    } catch (error) {
+      notifications.error("Error deleting query")
+    }
+  }
+
   async function deleteSource() {
     if (!source || !sourceType) {
       throw new Error("Unable to delete - no data source found.")
@@ -116,8 +131,9 @@
         return await deleteTable(source as Table)
       case SourceType.VIEW:
         return await deleteView(source as ViewV2)
-      case SourceType.DATASOURCE:
       case SourceType.QUERY:
+        return await deleteQuery(source as Query)
+      case SourceType.DATASOURCE:
     }
   }
 </script>
@@ -164,7 +180,9 @@
       </div>
     {/if}
     <p class="fourthWarning">
-      Please enter the "<b><i>{source?.name}</i></b>" below to confirm.
+      Please enter the "<b on:click={autofillSourceName} class="sourceName"
+        >{source?.name}</b
+      >" below to confirm.
     </p>
     <Input bind:value={deleteSourceName} placeholder={source?.name} />
   </div>