PB-580: add warning when leaving drawing mode without export or share

src/modules/drawing/components/DrawingToolbox.vue

@@ -92,6 +92,7 @@ function onCloseClearConfirmation(confirmed) {
     if (confirmed) {
         store.dispatch('clearDrawingFeatures', dispatcher)
         store.dispatch('clearAllSelectedFeatures', dispatcher)
+        store.dispatch('setIsDrawingModified', { value: false, ...dispatcher })
         drawingLayer.getSource().clear()
         debounceSaveDrawing()
         store.dispatch('setDrawingMode', { mode: null, ...dispatcher })

src/modules/drawing/components/SharePopup.vue

@@ -1,12 +1,17 @@
 <script setup>
 import { computed, onUnmounted, ref, toRefs, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import KMLLayer from '@/api/layers/KMLLayer.class'
 import { createShortLink } from '@/api/shortlink.api'
 import router from '@/router'
 import { encodeLayerId } from '@/router/storeSync/layersParamParser'
 import log from '@/utils/logging'
 
+const dispatcher = { dispatcher: 'SharePopup.vue' }
+
+const store = useStore()
+
 const props = defineProps({
     kmlLayer: {
         type: KMLLayer,
@@ -60,6 +65,10 @@ async function copyShareUrl() {
     try {
         await navigator.clipboard.writeText(shareUrl.value)
         fileUrlCopied.value = true
+        store.dispatch('setIsDrawingShared', {
+            value: true,
+            ...dispatcher,
+        })
         fileTimeout = setTimeout(() => {
             fileUrlCopied.value = false
         }, 5000)
@@ -71,6 +80,10 @@ async function copyAdminShareUrl() {
     try {
         await navigator.clipboard.writeText(adminShareUrl.value)
         adminUrlCopied.value = true
+        store.dispatch('setIsDrawingShared', {
+            value: true,
+            ...dispatcher,
+        })
         adminTimeout = setTimeout(() => {
             adminUrlCopied.value = false
         }, 5000)
@@ -81,7 +94,7 @@ async function copyAdminShareUrl() {
 async function updateShareUrl() {
     if (fileUrl.value) {
         try {
-            shareUrl.value = await createShortLink(fileUrl.value)
+            shareUrl.value = await createShortLink(fileUrl.value, shareUrl.value)
         } catch (error) {
             // Fallback to normal url
             shareUrl.value = fileUrl.value

src/modules/drawing/components/useDrawingModeInteraction.composable.js

@@ -181,6 +181,7 @@ export default function useDrawingModeInteraction({
         feature.setStyle(geoadminStyleFunction)
         // see https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html#finishDrawing
         interaction.finishDrawing()
+        store.dispatch('setIsDrawingModified', { value: true, ...dispatcher })
         store.dispatch('addDrawingFeature', { featureId: feature.getId(), ...dispatcher })
         store.dispatch('setDrawingMode', { mode: null, ...dispatcher })
         if (drawEndCallback) {

src/modules/i18n/locales/de.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Linie / Fläche",
     "drawing_attached": "Zeichnung als Anhang hinzugefügt",
     "drawing_empty_cannot_edit_name": "Bitte fügen Sie der Zeichnung etwas hinzu, bevor Sie ihren Namen bearbeiten.",
+    "drawing_not_shared": "Achtung, Ihre Zeichnung wurde nicht geteilt.",
     "drawing_too_large": "Ihre Zeichnung ist zu gross, entfernen Sie einige Details.",
     "drop_invalid_url": "URL ist ungültig.",
     "drop_me_here": "Datei hier ablegen (KML, KMZ, GPX, COG)",

src/modules/i18n/locales/en.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Line / surface",
     "drawing_attached": "Drawing added as attachment",
     "drawing_empty_cannot_edit_name": "Please add something to the drawing before editing its name.",
+    "drawing_not_shared": "Attention, your drawing has not been shared.",
     "drawing_too_large": "Your drawing is too large, remove some features",
     "drop_invalid_url": "URL is not valid.",
     "drop_me_here": "Drop file here (KML, KMZ, GPX, COG)",

src/modules/i18n/locales/fr.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Trait / surface",
     "drawing_attached": "Dessin ajouté en pièce jointe",
     "drawing_empty_cannot_edit_name": "Veuillez ajouter quelque chose au dessin avant de modifier son nom.",
+    "drawing_not_shared": "Attention, votre dessin n'a pas été partagé.",
     "drawing_too_large": "Ton dessin est trop grand, enlève quelques éléments",
     "drop_invalid_url": "URL non valide.",
     "drop_me_here": "Déposer le fichier ici (KML, KMZ, GPX, COG)",

src/modules/i18n/locales/it.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Linea / superficie",
     "drawing_attached": "Disegno aggiunto come allegato",
     "drawing_empty_cannot_edit_name": "Aggiungere qualcosa al disegno prima di modificarne il nome.",
+    "drawing_not_shared": "Attenzione, il disegno non è stato condiviso.",
     "drawing_too_large": "Il suo disegno è troppo grande, rimuova alcuni elementi",
     "drop_invalid_url": "URL non valido",
     "drop_me_here": "Lasciare qui il file (KML, KMZ, GPX, COG)",

src/modules/i18n/locales/rm.json

@@ -171,6 +171,7 @@
     "draw_type_marker": "Lingia / surfatscha",
     "drawing_attached": "Dissegn è agiuntà sco agiunta.",
     "drawing_empty_cannot_edit_name": "Bitte fügen Sie der Zeichnung etwas hinzu, bevor Sie ihren Namen bearbeiten.",
+    "drawing_not_shared": "Attenziun, Voss dissegn nè ni vegnì dividì.",
     "drawing_too_large": "Tes dissegn è memia grond, stizza intgins detagls",
     "drop_invalid_url": "URL è nunvalid",
     "drop_me_here": "Dar giu la datoteca (KML, KMZ, GPX, COG)",

src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue

@@ -22,6 +22,7 @@ import ZoomToExtentButton from '@/utils/components/ZoomToExtentButton.vue'
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import debounce from '@/utils/debounce'
 import log from '@/utils/logging'
+import WarningMessage from '@/utils/WarningMessage.class'
 
 const dispatcher = { dispatcher: 'MenuActiveLayersListItem.vue' }
 
@@ -88,7 +89,9 @@ const isPhoneMode = computed(() => store.getters.isPhoneMode)
 const is3dActive = computed(() => store.state.cesium.active)
 
 const isLayerKml = computed(() => layer.value instanceof KMLLayer)
+const activeKmlLayerId = computed(() => store.getters.activeKmlLayer?.id)
 const isLayerKmlOrGpx = computed(() => isLayerKml.value || layer.value instanceof GPXLayer)
+const showWarningUnsharedDrawing = computed(() => store.getters.showWarningUnsharedDrawing)
 
 // only show the spinner for external layer, for our layers the
 // backend should be quick enough and don't require any spinner
@@ -107,6 +110,14 @@ onMounted(() => {
 })
 
 function onRemoveLayer() {
+    if (activeKmlLayerId.value === layer.value.id && showWarningUnsharedDrawing.value) {
+        store.dispatch('addWarnings', {
+            warnings: [new WarningMessage('drawing_not_shared')],
+            ...dispatcher,
+        })
+        return
+    }
+
     store.dispatch('removeLayer', { index: index.value, ...dispatcher })
 }
 

src/router/storeSync/LayerParamConfig.class.js

@@ -191,6 +191,13 @@ function dispatchLayersFromUrlIntoStore(to, store, urlParamValue) {
                             dispatcher: STORE_DISPATCHER_ROUTER_PLUGIN,
                         })
                     )
+
+                    promisesForAllDispatch.push(
+                        store.dispatch('setIsVisitWithAdminId', {
+                            value: true,
+                            dispatcher: STORE_DISPATCHER_ROUTER_PLUGIN,
+                        })
+                    )
                 }
                 log.debug(`  Add layer ${parsedLayer.id} to active layers`, layerObject)
             }

src/store/modules/drawing.store.js

@@ -90,18 +90,61 @@ export default {
          * @type {String | null}
          */
         editingMode: EditMode.OFF,
+
+        /**
+         * Flag to indicate if the drawing is exported or shared
+         *
+         * @type {{ exported: boolean; shared: boolean }}
+         */
+        isDrawingShared: false,
+
+        /**
+         * Flag to indicate if the drawing has been modified
+         *
+         * @type {Boolean}
+         */
+        isDrawingModified: false,
+
+        /**
+         * Flag to indicate if the website is visited with an admin id
+         *
+         * @type {Boolean}
+         */
+        isVisitWithAdminId: false,
     },
     getters: {
         isDrawingEmpty(state) {
             return state.featureIds.length === 0
         },
+
+        showWarningUnsharedDrawing(state) {
+            return !state.isVisitWithAdminId && !state.isDrawingShared && state.isDrawingModified
+        },
     },
     actions: {
         setDrawingMode({ commit }, { mode, dispatcher }) {
             if (mode in EditableFeatureTypes || mode === null) {
                 commit('setDrawingMode', { mode, dispatcher })
             }
         },
+        setIsDrawingShared({ commit, state }, { value = null, dispatcher }) {
+            commit('setIsDrawingShared', {
+                value: value === null ? state.isDrawingShared : value,
+                dispatcher,
+            })
+        },
+        setIsDrawingModified({ commit, state }, { value = null, dispatcher }) {
+            commit('setIsDrawingModified', {
+                value: value === null ? state.isDrawingModified : value,
+                dispatcher,
+            })
+        },
+        setIsVisitWithAdminId({ commit, state }, { value = null, dispatcher }) {
+            commit('setIsVisitWithAdminId', {
+                value: value === null ? state.isVisitWithAdminId : value,
+                dispatcher,
+            })
+        },
         async loadAvailableIconSets({ commit }, { dispatcher }) {
             const iconSets = await loadAllIconSetsFromBackend()
             if (iconSets?.length > 0) {
@@ -165,6 +208,9 @@ export default {
     },
     mutations: {
         setDrawingMode: (state, { mode }) => (state.mode = mode),
+        setIsDrawingShared: (state, { value }) => (state.isDrawingShared = value),
+        setIsDrawingModified: (state, { value }) => (state.isDrawingModified = value),
+        setIsVisitWithAdminId: (state, { value }) => (state.isVisitWithAdminId = value),
         setIconSets: (state, { iconSets }) => (state.iconSets = iconSets),
         addDrawingFeature: (state, { featureId }) => state.featureIds.push(featureId),
         deleteDrawingFeature: (state, { featureId }) =>

src/views/MapView.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { computed, defineAsyncComponent, onMounted } from 'vue'
+import { computed, defineAsyncComponent, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 
+import { IS_TESTING_WITH_CYPRESS } from '@/config/staging.config'
 import I18nModule from '@/modules/i18n/I18nModule.vue'
 import InfoboxModule from '@/modules/infobox/InfoboxModule.vue'
 import CesiumMouseTracker from '@/modules/map/components/cesium/CesiumMouseTracker.vue'
@@ -20,6 +21,9 @@ import AppVersion from '@/utils/components/AppVersion.vue'
 import DragDropOverlay from '@/utils/components/DragDropOverlay.vue'
 import LoadingBar from '@/utils/components/LoadingBar.vue'
 import log from '@/utils/logging'
+import WarningMessage from '@/utils/WarningMessage.class'
+
+const dispatcher = { dispatcher: 'MavView.vue' }
 
 const DrawingModule = defineAsyncComponent(() => import('@/modules/drawing/DrawingModule.vue'))
 
@@ -31,7 +35,7 @@ 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 showWarningUnsharedDrawing = computed(() => store.getters.showWarningUnsharedDrawing)
 const loadDrawingModule = computed(() => {
     return (
         (!activeKmlLayer.value || activeKmlLayer.value?.kmlData) &&
@@ -42,6 +46,27 @@ const loadDrawingModule = computed(() => {
 
 onMounted(() => {
     log.info(`Map view mounted`)
+    window.addEventListener('beforeunload', beforeUnloadHandler)
+})
+
+const beforeUnloadHandler = (event) => {
+    if (showWarningUnsharedDrawing.value) {
+        store.dispatch('addWarnings', {
+            warnings: [new WarningMessage('drawing_not_shared')],
+            ...dispatcher,
+        })
+        // 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.
+        if (!IS_TESTING_WITH_CYPRESS) {
+            event.returnValue = true
+            event.preventDefault()
+            return
+        }
+    }
+}
+
+onUnmounted(() => {
+    window.removeEventListener('beforeunload', beforeUnloadHandler)
 })
 </script>
 

tests/cypress/tests-e2e/drawing.cy.js

@@ -747,7 +747,7 @@ describe('Drawing module tests', () => {
             cy.goToDrawing()
             cy.clickDrawingTool(EditableFeatureTypes.MARKER)
             cy.get('[data-cy="ol-map"]').click()
-            cy.wait('@post-kml')
+            cy.wait(['@post-kml', '@layers', '@topics', '@topic-ech', '@routeChange'])
 
             // checks that it adds the kml file ID in the URL while in drawing mode
             cy.url().should('match', /layers=[^;&]*KML|[^|,f1]+/)
@@ -761,8 +761,31 @@ describe('Drawing module tests', () => {
                 expect(drawingLayer.type).to.eq(LayerTypes.KML)
                 expect(drawingLayer.visible).to.be.true
             })
+            // checks that it can not remove the drawing layer when it is not shared
+            cy.get(`[data-cy^="active-layer-name-"]`).should('be.visible').contains('Drawing')
+            cy.get(`[data-cy^="button-remove-layer-"]`).should('be.visible').click()
+            cy.readStoreValue('state.layers.activeLayers').should((layers) => {
+                expect(layers).to.be.an('Array').lengthOf(1)
+            })
+
+            cy.closeMenuIfMobile()
+            cy.get('[data-cy="warning-window-body"]').contains(
+                'Attention, your drawing has not been shared.'
+            )
+            cy.openMenuIfMobile()
+            cy.get(
+                '[data-cy="menu-tray-drawing-section"] > [data-cy="menu-section-header"]'
+            ).click()
+            // copy the drawing link to indicate that the drawing has been shared
+            cy.get('[data-cy="drawing-toolbox-share-button"]').click()
+            cy.get('[data-cy="drawing-share-normal-link"]').click()
+            cy.get('[data-cy="modal-close-button"]').click()
+            cy.closeDrawingMode()
+            cy.openMenuIfMobile()
+
             // checks that it clears the drawing when the drawing layer is removed
-            cy.get(`[data-cy^="button-remove-layer-"]`).click()
+            cy.get(`[data-cy^="active-layer-name-"]`).should('be.visible').contains('Drawing')
+            cy.get(`[data-cy^="button-remove-layer-"]`).should('be.visible').click()
             cy.readStoreValue('state.layers.activeLayers').should((layers) => {
                 expect(layers).to.be.an('Array').lengthOf(0)
             })
@@ -1058,6 +1081,46 @@ describe('Drawing module tests', () => {
             })
             // close the drawing mode to close the popover else it is not possible to close it since the drawing header is overlapping the popover
             cy.closeDrawingMode()
+            cy.closeMenuIfMobile()
+
+            // Verify that the window can not be closed without sharing and that the warning window is displayed
+            cy.window()
+                .then((win) => {
+                    const event = new Event('beforeunload')
+                    win.dispatchEvent(event)
+                })
+                .then(() => {
+                    cy.log(
+                        'Check that the warning window is displayed when closing the window without sharing'
+                    )
+                    cy.get('[data-cy="warning-window-body"]').contains(
+                        'Attention, your drawing has not been shared.'
+                    )
+                    cy.get('[data-cy="warning-window-close"]').click({ force: true }) // force is needed because the warning window is covered by the Testsite banner
+                })
+
+            cy.openMenuIfMobile()
+            cy.get(
+                '[data-cy="menu-tray-drawing-section"] > [data-cy="menu-section-header"]'
+            ).click()
+            cy.get('[data-cy="drawing-toolbox-share-button"]').click()
+            cy.get('[data-cy="drawing-share-normal-link"]').click()
+            cy.get('[data-cy="modal-close-button"]').click()
+            cy.closeDrawingMode()
+
+            // After sharing the drawing, the warning window should not be displayed
+            cy.window()
+                .then((win) => {
+                    const event = new Event('beforeunload')
+                    win.dispatchEvent(event)
+                })
+                .then(() => {
+                    cy.log(
+                        'Check that the warning window is not displayed when closing the window after sharing'
+                    )
+                    cy.get('[data-cy="warning-window-body"]').should('not.exist')
+                })
+
             cy.get('[data-cy="menu-tray-drawing-section"]').should('be.visible').click()
             // it changes the name of the KML file
             cy.log('Check that the KML file can be renamed')
@@ -1127,6 +1190,13 @@ describe('Drawing module tests', () => {
             })
 
             cy.task('clearFolder', downloadsFolder)
+            cy.closeDrawingMode()
+            cy.closeMenuIfMobile()
+
+            cy.log(
+                'Check that the warning window is not displayed when closing the drawing module when the drawing got exported or shared'
+            )
+            cy.get('[data-cy="warning-window-body"]').should('not.exist')
         })
         it('generates short links when sharing a drawing', () => {
             const publicShortlink = 'https://s.geo.admin.ch/public-shortlink'