Data section resource deletion warning

packages/backend-core/src/docIds/params.ts

@@ -83,11 +83,15 @@ export function isViewId(id: string): boolean {
 /**
  * Check if a given ID is that of a datasource or datasource plus.
  */
-export const isDatasourceId = (id: string): boolean => {
+export function isDatasourceId(id: string): boolean {
   // this covers both datasources and datasource plus
   return !!id && id.startsWith(`${DocumentType.DATASOURCE}${SEPARATOR}`)
 }
 
+export function isQueryId(id: string): boolean {
+  return !!id && id.startsWith(`${DocumentType.QUERY}${SEPARATOR}`)
+}
+
 /**
  * Gets parameters for retrieving workspaces.
  */

packages/bbui/src/Form/Core/TextField.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount, tick } from "svelte"
+  import type { UIEvent } from "@budibase/types"
 
-  export let value = null
+  export let value: string | null = null
   export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
@@ -11,7 +12,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let align: "left" | "right" | "center" | undefined = undefined
-  export let autofocus = false
+  export let autofocus: boolean | null = false
   export let autocomplete: boolean | undefined
 
   const dispatch = createEventDispatcher()
@@ -24,7 +25,7 @@
       return
     }
     if (type === "number") {
-      const float = parseFloat(newValue)
+      const float = parseFloat(newValue as string)
       newValue = isNaN(float) ? null : float
     }
     dispatch("change", newValue)
@@ -37,31 +38,31 @@
     focus = true
   }
 
-  const onBlur = (event: any) => {
+  const onBlur = (event: UIEvent) => {
     if (readonly || disabled) {
       return
     }
     focus = false
-    updateValue(event.target.value)
+    updateValue(event?.target?.value)
   }
 
-  const onInput = (event: any) => {
+  const onInput = (event: UIEvent) => {
     if (readonly || !updateOnChange || disabled) {
       return
     }
-    updateValue(event.target.value)
+    updateValue(event.target?.value)
   }
 
-  const updateValueOnEnter = (event: any) => {
+  const updateValueOnEnter = (event: UIEvent) => {
     if (readonly || disabled) {
       return
     }
     if (event.key === "Enter") {
-      updateValue(event.target.value)
+      updateValue(event.target?.value)
     }
   }
 
-  const getInputMode = (type: any) => {
+  const getInputMode = (type: string) => {
     if (type === "bigint") {
       return "numeric"
     }
@@ -77,7 +78,7 @@
 
   onMount(async () => {
     if (disabled) return
-    focus = autofocus
+    focus = autofocus || false
     if (focus) {
       await tick()
       field.focus()

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

@@ -7,7 +7,7 @@
   import IntegrationIcon from "@/components/backend/DatasourceNavigator/IntegrationIcon.svelte"
   import { Icon } from "@budibase/bbui"
   import UpdateDatasourceModal from "@/components/backend/DatasourceNavigator/modals/UpdateDatasourceModal.svelte"
-  import DeleteConfirmationModal from "./DeleteConfirmationModal.svelte"
+  import DeleteDataConfirmModal from "@/components/backend/modals/DeleteDataConfirmationModal.svelte"
 
   export let datasource
 
@@ -71,7 +71,10 @@
   {/if}
 </NavItem>
 <UpdateDatasourceModal {datasource} bind:this={editModal} />
-<DeleteConfirmationModal {datasource} bind:this={deleteConfirmationModal} />
+<DeleteDataConfirmModal
+  source={datasource}
+  bind:this={deleteConfirmationModal}
+/>
 
 <style>
   .datasource-icon {

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>