PB-1355 : don't show drawing lost warning when we open download PDFs

using window.open to trigger a download (of the print results) was triggering the beforeUnload event in MapView.vue's code, and showing the "you'll lose your drawing" warning, while we stay on the page in the end.

Also fixing some usage of the old $t to the new Composition API equivalent

src/modules/drawing/components/DrawingToolbox.vue

@@ -241,7 +241,7 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                                 data-cy="drawing-toolbox-delete-button"
                                 @click="showClearConfirmationModal = true"
                             >
-                                {{ $t('delete') }}
+                                {{ i18n.t('delete') }}
                             </button>
                         </div>
                         <div class="col d-grid">
@@ -255,7 +255,7 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                                 data-cy="drawing-toolbox-share-button"
                                 @click="showShareModal = true"
                             >
-                                {{ $t('share') }}
+                                {{ i18n.t('share') }}
                             </button>
                         </div>
                     </div>
@@ -292,7 +292,9 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                     @click="drawMenuOpen = !drawMenuOpen"
                 >
                     <FontAwesomeIcon :icon="drawMenuOpen ? 'caret-up' : 'caret-down'" />
-                    <span class="ms-2">{{ $t(drawMenuOpen ? 'close_menu' : 'open_menu') }}</span>
+                    <span class="ms-2">{{
+                        i18n.t(drawMenuOpen ? 'close_menu' : 'open_menu')
+                    }}</span>
                 </button>
             </div>
         </div>
@@ -302,20 +304,20 @@ const debounceSaveDrawingName = debounce(async (newName) => {
             fluid
             @close="onCloseClearConfirmation"
         >
-            {{ $t('confirm_remove_all_features') }}
+            {{ i18n.t('confirm_remove_all_features') }}
         </ModalWithBackdrop>
         <ModalWithBackdrop
             v-if="showShareModal"
             fluid
-            :title="$t('share')"
+            :title="i18n.t('share')"
             @close="showShareModal = false"
         >
             <SharePopup :kml-layer="activeKmlLayer" />
         </ModalWithBackdrop>
         <ModalWithBackdrop
             v-if="showNotSharedDrawingWarningModal"
             fluid
-            :title="$t('warning')"
+            :title="i18n.t('warning')"
             @close="onCloseWarningModal()"
         >
             <ShareWarningPopup :kml-layer="activeKmlLayer" @accept="onAcceptWarningModal()" />

src/modules/menu/components/print/MenuPrintSection.vue

@@ -100,6 +100,8 @@ function close() {
 async function printMap() {
     try {
         const documentUrl = await print(printGrid.value, printLegend.value)
+        // force hides the "drawing lost" warning when we open the print result
+        await store.dispatch('setIsOpeningNewTab', { isOpeningNewTab: true, ...dispatcher })
         if (documentUrl) {
             if (window.navigator.userAgent.indexOf('MSIE ') > -1) {
                 window.open(documentUrl)
@@ -115,6 +117,8 @@ async function printMap() {
         }
     } catch (error) {
         log.error('Print failed', error)
+    } finally {
+        await store.dispatch('setIsOpeningNewTab', { isOpeningNewTab: false, ...dispatcher })
     }
 }
 

src/store/modules/ui.store.js

@@ -175,6 +175,17 @@ export default {
          * @type Boolean
          */
         showDragAndDropOverlay: false,
+
+        /**
+         * Flag set to true when the app is opening a new tab.
+         *
+         * This helps us decide to show or not show a warning popup for lost changes if the user
+         * closes the tab. In some cases, we are opening a new tab ourselves (print result) and
+         * don't want this popup to show up.
+         *
+         * @type Boolean
+         */
+        isOpeningNewTab: false,
     },
     getters: {
         showLoadingBar(state) {
@@ -451,6 +462,9 @@ export default {
         setShowDragAndDropOverlay({ commit }, { showDragAndDropOverlay, dispatcher }) {
             commit('setShowDragAndDropOverlay', { showDragAndDropOverlay, dispatcher })
         },
+        setIsOpeningNewTab({ commit }, { isOpeningNewTab, dispatcher }) {
+            commit('setIsOpeningNewTab', { isOpeningNewTab, dispatcher })
+        },
     },
     mutations: {
         setSize(state, { height, width }) {
@@ -520,5 +534,7 @@ export default {
         removeWarning: (state, { warning }) => state.warnings.delete(warning),
         setShowDragAndDropOverlay: (state, { showDragAndDropOverlay }) =>
             (state.showDragAndDropOverlay = showDragAndDropOverlay),
+        setIsOpeningNewTab: (state, { isOpeningNewTab }) =>
+            (state.isOpeningNewTab = isOpeningNewTab),
     },
 }

src/views/MapView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import { IS_TESTING_WITH_CYPRESS } from '@/config/staging.config'
@@ -27,13 +28,16 @@ import log from '@/utils/logging'
 const DrawingModule = defineAsyncComponent(() => import('@/modules/drawing/DrawingModule.vue'))
 
 const store = useStore()
+const i18n = useI18n()
+
 const showNotSharedDrawingWarningModal = ref(false)
 const is3DActive = computed(() => store.state.cesium.active)
 const isDrawingMode = computed(() => store.state.drawing.drawingOverlay.show)
 const activeKmlLayer = computed(() => store.getters.activeKmlLayer)
 const isPhoneMode = computed(() => store.state.ui.mode === UIModes.PHONE)
 const showLoadingBar = computed(() => store.getters.showLoadingBar)
 const showDragAndDropOverlay = computed(() => store.state.ui.showDragAndDropOverlay)
+const isOpeningNewTab = computed(() => store.state.ui.isOpeningNewTab)
 const showNotSharedDrawingWarning = computed(() => store.getters.showNotSharedDrawingWarning)
 const loadDrawingModule = computed(() => {
     return (
@@ -49,7 +53,7 @@ onMounted(() => {
 })
 
 const beforeUnloadHandler = (event) => {
-    if (showNotSharedDrawingWarning.value) {
+    if (showNotSharedDrawingWarning.value && !isOpeningNewTab.value) {
         showNotSharedDrawingWarningModal.value = true
         // This provokes the alert message to appear when trying to close the tab.
         // During Cypress tests this causes the test to run indefinitely, so to prevent this we skip the alert.
@@ -71,7 +75,7 @@ onUnmounted(() => {
         <ModalWithBackdrop
             v-if="showNotSharedDrawingWarningModal"
             fluid
-            :title="$t('warning')"
+            :title="i18n.t('warning')"
             @close="showNotSharedDrawingWarningModal = false"
         >
             <ShareWarningPopup