Create confirm utils

packages/builder/src/components/integration/RestQueryViewer.svelte

@@ -25,7 +25,7 @@
     EditorModes,
   } from "@/components/common/CodeMirrorEditor.svelte"
   import RestBodyInput from "./RestBodyInput.svelte"
-  import { capitalise } from "@/helpers"
+  import { capitalise, confirm } from "@/helpers"
   import { onMount } from "svelte"
   import restUtils from "@/helpers/data/utils"
   import {
@@ -37,7 +37,6 @@
   } from "@/constants/backend"
   import JSONPreview from "@/components/integration/JSONPreview.svelte"
   import AccessLevelSelect from "@/components/integration/AccessLevelSelect.svelte"
-  import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import DynamicVariableModal from "./DynamicVariableModal.svelte"
   import Placeholder from "assets/bb-spaceship.svg"
   import { cloneDeep } from "lodash/fp"
@@ -485,26 +484,12 @@
       return true
     }
 
-    const shouldSave = await new Promise(resolve => {
+    const shouldSave = await confirm({
-      const dialog = new ConfirmDialog({
+      title: "Some updates are not saved",
-        target: document.body,
+      body: "Some of your changes are not yet saved. Do you want to save them before leaving?",
-        props: {
+      okText: "Save and continue",
-          title: "Some updates are not saved",
+      cancelText: "Discard and continue",
-          body: "Some of your changes are not yet saved. Do you want to save them before leaving?",
+      size: "M",
-          okText: "Save and continue",
-          cancelText: "Discard and continue",
-          size: "M",
-          onOk: () => {
-            dialog.$destroy()
-            resolve(true)
-          },
-          onCancel: () => {
-            dialog.$destroy()
-            resolve(false)
-          },
-        },
-      })
-      dialog.show()
     })
 
     if (!shouldSave) {

packages/builder/src/helpers/confirm.ts

@@ -0,0 +1,31 @@
+import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
+
+export async function confirm(props: {
+  title: string
+  body?: string
+  okText?: string
+  cancelText?: string
+  size?: "S" | "M" | "L" | "XL"
+}) {
+  return await new Promise(resolve => {
+    const dialog = new ConfirmDialog({
+      target: document.body,
+      props: {
+        title: props.title,
+        body: props.body,
+        okText: props.okText,
+        cancelText: props.cancelText,
+        size: props.size,
+        onOk: () => {
+          dialog.$destroy()
+          resolve(true)
+        },
+        onCancel: () => {
+          dialog.$destroy()
+          resolve(false)
+        },
+      },
+    })
+    dialog.show()
+  })
+}

packages/builder/src/helpers/index.ts

@@ -11,3 +11,4 @@ export {
 } from "./helpers"
 export * as featureFlag from "./featureFlags"
 export * as bindings from "./bindings"
+export * from "./confirm"