feat(entities-plugins): add leave confirmation for flow editor (#2612)

Author: Justineo

packages/entities/entities-plugins/src/components/free-form/Datakit/composables.ts

@@ -1,8 +1,19 @@
-import { createGlobalState, useLocalStorage } from '@vueuse/core'
+import { toValue } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+import {
+  createGlobalState,
+  useEventListener,
+  useLocalStorage,
+} from '@vueuse/core'
+import { createI18n } from '@kong-ui-public/i18n'
+import english from '../../../locales/en.json'
 export { provideEditorStore, useEditorStore } from './flow-editor/store/store'
 
+import type { MaybeRefOrGetter } from 'vue'
 import type { EditorMode } from './types'
 
+const { t } = createI18n<typeof english>('en-us', english)
+
 export const usePreferences = createGlobalState(() => {
   const editorMode = useLocalStorage<EditorMode>('datakit-editor-mode', 'flow')
   const sidePanelExpanded = useLocalStorage<boolean>(
@@ -11,3 +22,30 @@ export const usePreferences = createGlobalState(() => {
   )
   return { editorMode, sidePanelExpanded }
 })
+
+interface LeaveConfirmationOptions {
+  enabled: MaybeRefOrGetter<boolean> // whether the confirmation step is enabled
+  confirm?: () => boolean | Promise<boolean> // custom confirm function
+}
+
+export function useLeaveConfirmation({
+  enabled,
+  confirm,
+}: LeaveConfirmationOptions) {
+  // Soft navigation guard
+  onBeforeRouteLeave(() => {
+    if (!toValue(enabled)) return true
+
+    return confirm
+      ? confirm()
+      : window.confirm(t('plugins.free-form.datakit.flow_editor.leave_confirm'))
+  })
+
+  // Hard navigation guard
+  const onBeforeUnload = (e: BeforeUnloadEvent) => {
+    if (!toValue(enabled)) return
+    e.preventDefault()
+  }
+
+  useEventListener('beforeunload', onBeforeUnload)
+}

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowEditor.vue

@@ -30,7 +30,7 @@ import { watch } from 'vue'
 
 import english from '../../../../locales/en.json'
 import { useFormShared } from '../../shared/composables'
-import { provideEditorStore } from '../composables'
+import { provideEditorStore, useLeaveConfirmation } from '../composables'
 import FlowPanels from './FlowPanels.vue'
 import EditorModal from './modal/EditorModal.vue'
 
@@ -77,6 +77,8 @@ watch(modalOpen, () => {
   // `fitView` when model is toggled.
   setPendingFitView(true)
 }, { flush: 'post' }) // Safely schedule fitView after <FlowPanels /> receives the latest `inactive` prop
+
+useLeaveConfirmation({ enabled: modalOpen })
 </script>
 
 <style lang="scss" scoped>

packages/entities/entities-plugins/src/locales/en.json

@@ -895,6 +895,7 @@
             },
             "proceed": "Yes, update"
           },
+          "leave_confirm": "Leave current page? Changes you made may not be saved.",
           "phase_mask_help": "You can't add call nodes in the response phase."
         },
         "code_editor": {