From dd2b2fef6903b7c7bfb05d0dcf11b5e6733e14b6 Mon Sep 17 00:00:00 2001
From: paulosf0 <paulo.ferreira@azion.com>
Date: Mon, 17 Feb 2025 14:58:30 -0300
Subject: [PATCH] fix: disable browser back in the edge app config page

---
 src/helpers/browser-back-button.js            |  9 ++++++
 src/helpers/index.js                          |  4 ++-
 src/templates/dialog-unsaved-block/index.vue  |  7 ++++-
 src/tests/helpers/browser-back-button.test.js | 28 +++++++++++++++++++
 4 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/helpers/browser-back-button.js
 create mode 100644 src/tests/helpers/browser-back-button.test.js

diff --git a/src/helpers/browser-back-button.js b/src/helpers/browser-back-button.js
new file mode 100644
index 000000000..aea9605d5
--- /dev/null
+++ b/src/helpers/browser-back-button.js
@@ -0,0 +1,9 @@
+export const disabledBackButton = () => {
+  window.location.hash = 'no-back-button'
+
+  window.location.hash = 'Again-No-back-button'
+
+  window.onhashchange = function () {
+    window.location.hash = 'no-back-button'
+  }
+}
diff --git a/src/helpers/index.js b/src/helpers/index.js
index c08c1bcf3..c34acb2d9 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -37,6 +37,7 @@ import FILTERS_RULES from './real-time-filters-rules'
 import { openGraphQlPlayground } from './open-graphql-playground.js'
 import { eventsPlaygroundOpener } from './events-playground-opener'
 import { setRedirectRoute, getRedirectRoute } from './login-redirect-manager'
+import { disabledBackButton } from './browser-back-button'
 
 export {
   InviteSession,
@@ -81,5 +82,6 @@ export {
   openGraphQlPlayground,
   eventsPlaygroundOpener,
   setRedirectRoute,
-  getRedirectRoute
+  getRedirectRoute,
+  disabledBackButton
 }
diff --git a/src/templates/dialog-unsaved-block/index.vue b/src/templates/dialog-unsaved-block/index.vue
index c13ddd9bd..81fc3e9af 100644
--- a/src/templates/dialog-unsaved-block/index.vue
+++ b/src/templates/dialog-unsaved-block/index.vue
@@ -1,8 +1,9 @@
 <script setup>
-  import { computed, ref, watch, inject } from 'vue'
+  import { computed, ref, watch, inject, onMounted } from 'vue'
   import PrimeDialog from 'primevue/dialog'
   import PrimeButton from 'primevue/button'
   import { onBeforeRouteLeave, useRouter } from 'vue-router'
+  import { disabledBackButton } from '@/helpers'
 
   defineOptions({ name: 'dialog-unsaved-block' })
   const emit = defineEmits(['update:visible'])
@@ -114,6 +115,10 @@
   watch(formDrawerHasUpdated, () => {
     openDialogUnsaved(true)
   })
+
+  onMounted(() => {
+    disabledBackButton()
+  })
 </script>
 
 <template>
diff --git a/src/tests/helpers/browser-back-button.test.js b/src/tests/helpers/browser-back-button.test.js
new file mode 100644
index 000000000..e52757241
--- /dev/null
+++ b/src/tests/helpers/browser-back-button.test.js
@@ -0,0 +1,28 @@
+import { afterAll, describe, expect, it, vi } from 'vitest'
+import { disabledBackButton } from '@/helpers/browser-back-button'
+
+vi.stubGlobal('window', {
+  location: {
+    hash: ''
+  },
+  onhashchange: null
+})
+
+describe('disabledBackButton', () => {
+  afterAll(() => {
+    vi.unstubAllGlobals()
+  })
+  it('should update window.location.hash to "Again-No-back-button"', () => {
+    disabledBackButton()
+    expect(window.location.hash).toBe('Again-No-back-button')
+  })
+
+  it('should reset window.location.hash to "no-back-button" on hash change', () => {
+    disabledBackButton()
+
+    window.location.hash = 'some-other-hash'
+    window.onhashchange()
+
+    expect(window.location.hash).toBe('no-back-button')
+  })
+})