Merge pull request #1197 from geoadmin/fix-pb-1314-report-problem-dra…

…wing-on-map

PB-1314: Report Problem drawing on map

src/modules/drawing/components/DrawingToolbox.vue

@@ -171,6 +171,7 @@ const debounceSaveDrawingName = debounce(async (newName) => {
                 :class="{ 'rounded-bottom-0': isPhoneMode }"
             >
                 <div
+                    v-if="online"
                     id="drawing-name-container"
                     class="d-flex justify-content-center align-items-center gap-2 mt-3 mx-4"
                     :data-tippy-content="

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

@@ -63,6 +63,7 @@ export default function useDrawingModeInteraction({
     const reverseLineStringExtension = computed(
         () => store.state.drawing.reverseLineStringExtension
     )
+    const online = computed(() => store.state.drawing.online)
 
     const interaction = new DrawInteraction({
         style: editingStyle,
@@ -252,7 +253,10 @@ export default function useDrawingModeInteraction({
             drawnFeature.setStyle(geoadminStyleFunction)
             // see https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html#finishDrawing
             interaction.finishDrawing()
-            store.dispatch('setIsDrawingModified', { value: true, ...dispatcher })
+            // we do not need to share the drawing when the drawing is from the report problem tool
+            if (online.value) {
+                store.dispatch('setIsDrawingModified', { value: true, ...dispatcher })
+            }
             store.dispatch('addDrawingFeature', { featureId: drawnFeature.getId(), ...dispatcher })
             store.dispatch('setDrawingMode', { mode: null, ...dispatcher })
             if (drawEndCallback) {

src/modules/map/components/openlayers/OpenLayersVisibleLayers.vue

@@ -9,12 +9,22 @@ const store = useStore()
 const visibleLayers = computed(() => store.getters.visibleLayers)
 const isCurrentlyDrawing = computed(() => store.state.drawing.drawingOverlay.show)
 const currentDrawingKmlLayer = computed(() => store.getters.activeKmlLayer)
+const temporaryKmlId = computed(() => store.state.drawing.temporaryKmlId)
+const online = computed(() => store.state.drawing.online)
 
 // We do not want the drawing layer be added to the visible layers while it is being edited, so we filter
 // it out in this case
 const filteredVisibleLayers = computed(() => {
-    if (isCurrentlyDrawing.value && currentDrawingKmlLayer.value) {
-        return visibleLayers.value.filter((layer) => layer.id !== currentDrawingKmlLayer.value.id)
+    // In normal drawing mode show only the drawing layer
+    if (isCurrentlyDrawing.value && online.value && currentDrawingKmlLayer.value) {
+        return visibleLayers.value.filter(
+            (layer) =>
+                layer.id !== currentDrawingKmlLayer.value.id && layer.id !== temporaryKmlId.value
+        )
+    }
+    // In report problem drawing mode show the drawing layer and the temporary layer
+    if (isCurrentlyDrawing.value && !online.value && temporaryKmlId.value) {
+        return visibleLayers.value.filter((layer) => layer.id !== temporaryKmlId.value)
     }
     return visibleLayers.value
 })

src/modules/menu/components/help/ReportProblemButton.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import sendFeedback, { ATTACHMENT_MAX_SIZE, KML_MAX_SIZE } from '@/api/feedback.api'
+import { getKmlUrl } from '@/api/files.api'
 import { createShortLink } from '@/api/shortlink.api'
 import { FEEDBACK_EMAIL_SUBJECT } from '@/config/feedback.config'
 import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
@@ -16,7 +17,7 @@ import TextAreaInput from '@/utils/components/TextAreaInput.vue'
 import log from '@/utils/logging'
 
 const dispatcher = { dispatcher: 'ReportProblemButton.vue' }
-const temporaryKmlId = 'temporary-kml-for-reporting-a-problem'
+const temporaryKmlId = getKmlUrl('temporary-kml-for-reporting-a-problem')
 
 const acceptedFileTypes = ['.kml', '.gpx', '.pdf', '.zip', '.jpg', '.jpeg', '.kmz']
 
@@ -159,6 +160,7 @@ function closeAndCleanForm() {
     request.value.completed = false
     if (temporaryKml.value) {
         store.dispatch('removeSystemLayer', { layerId: temporaryKmlId, ...dispatcher })
+        store.dispatch('clearDrawingFeatures', dispatcher)
     }
 }
 

src/store/modules/drawing.store.js

@@ -118,7 +118,10 @@ export default {
         },
 
         showNotSharedDrawingWarning: (state) =>
-            !state.isVisitWithAdminId && !state.isDrawingEditShared && state.isDrawingModified,
+            !state.isVisitWithAdminId &&
+            !state.isDrawingEditShared &&
+            state.isDrawingModified &&
+            state.online,
     },
     actions: {
         setDrawingMode({ commit }, { mode, dispatcher }) {

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

@@ -246,41 +246,48 @@ describe('Testing the report problem form', () => {
             cy.get('[data-cy="menu-help-section"]:visible').click()
         }
 
+        cy.log(
+            'Cancel the report and open the drawing mode to verify that there is no drawing layer after closing it'
+        )
         cy.get('[data-cy="report-problem-button"]').should('be.visible').click()
         cy.get('[data-cy="report-problem-form"]').as('reportForm').should('be.visible')
-
-        cy.log('Select category')
-        cy.get('[data-cy="report-problem-category"] [data-cy="dropdown-main-button"]')
-            .as('categoryDropdown')
+        cy.get('[data-cy="report-problem-drawing-button"]')
+            .as('reportDrawing')
             .should('be.visible')
-        cy.get('@categoryDropdown').click()
-        cy.get('[data-cy="dropdown-item-other"]:visible').click()
+            .click()
+        cy.log('Draw some features')
+        cy.clickDrawingTool(EditableFeatureTypes.MARKER)
+        cy.get('[data-cy="ol-map"]').click('center')
 
-        cy.log('Write description and email')
-        cy.get('[data-cy="report-problem-text-area"] [data-cy="text-area-input"]')
-            .as('textArea')
-            .should('be.visible')
-        cy.get('@textArea').type(text)
+        cy.clickDrawingTool(EditableFeatureTypes.ANNOTATION)
+        cy.get('[data-cy="ol-map"]').then(($el) => {
+            const mapWidth = $el.width()
+            const mapHeight = $el.height()
+            cy.get('[data-cy="ol-map"]').click(mapWidth / 2 + 50, mapHeight / 2)
+        })
 
-        cy.get('[data-cy="report-problem-email"] [data-cy="email-input"]')
-            .as('emailInput')
-            .should('be.visible')
-        cy.get('@emailInput').type(validEmail)
+        cy.get('[data-cy="drawing-toolbox-close-button"]').should('be.visible').click()
+        cy.get('@reportForm').should('be.visible')
+        cy.get('[data-cy="drawing-header-title"]').should('not.exist')
 
-        cy.log('Enter the drawing mode')
-        cy.viewport('macbook-11')
+        cy.get('[data-cy="window-close"]').should('be.visible').click()
+        cy.get('[data-cy="menu-button"]').should('be.visible').click()
+
+        cy.get('[data-cy="menu-tray-drawing-section"] > [data-cy="menu-section-header"]').click()
+        cy.get('[data-cy="drawing-toolbox-close-button"]').should('be.visible').click()
+        cy.readStoreValue('state.layers.activeLayers').should((layers) => {
+            expect(layers).to.have.length(0)
+        })
+        cy.get('[data-cy="menu-help-section"]:visible').click()
+        cy.get('[data-cy="report-problem-button"]').should('be.visible').click()
+        cy.get('@reportForm').should('be.visible')
         cy.get('[data-cy="report-problem-drawing-button"]').as('reportDrawing').should('be.visible')
+
+        cy.log('Redo the drawing in the report problem form')
         cy.get('@reportDrawing').click()
-        cy.get('@reportForm').should('not.be.visible')
-        // we need to increase the timeout here below because, upon opening the drawing mode for the
-        // first time in e2e tests, the loading of the library can take time
-        cy.get('[data-cy="drawing-header-title"]', { timeout: 15000 })
-            .should('be.visible')
-            .contains('3. Indicate the appropriate location on the map :')
-        cy.get('[data-cy="drawing-toolbox-share-button"]').should('not.exist')
-        cy.get('[data-cy="drawing-toolbox-disclaimer"]').should('not.exist')
 
         cy.log('Draw some features')
+        cy.viewport('macbook-11')
         cy.clickDrawingTool(EditableFeatureTypes.MARKER)
         cy.get('[data-cy="ol-map"]').click('center')
 
@@ -290,12 +297,39 @@ describe('Testing the report problem form', () => {
             const mapHeight = $el.height()
             cy.get('[data-cy="ol-map"]').click(mapWidth / 2 + 50, mapHeight / 2)
         })
+        // we need to increase the timeout here below because, upon opening the drawing mode for the
+        // first time in e2e tests, the loading of the library can take time
+        cy.get('[data-cy="drawing-header-title"]', { timeout: 15000 })
+            .should('be.visible')
+            .contains('3. Indicate the appropriate location on the map :')
+        cy.get('[data-cy="drawing-toolbox-share-button"]').should('not.exist')
+        cy.get('[data-cy="drawing-toolbox-disclaimer"]').should('not.exist')
+        cy.get('[data-cy="drawing-toolbox-file-name-input"]').should('not.exist')
 
         cy.log(`Exit drawing mode`)
         cy.get('[data-cy="drawing-header-close-button"]').should('be.visible').click()
-        cy.get('[data-cy="drawing-share-admin-close"]').click()
-        cy.get('@reportForm').should('be.visible')
-        cy.get('[data-cy="drawing-header-title"]').should('not.exist')
+
+        cy.log('Verify report problem form with drawing attachment')
+        cy.get('[data-cy="report-problem-form"]').as('reportForm').should('be.visible')
+
+        cy.log('Select category')
+        cy.get('[data-cy="report-problem-category"] [data-cy="dropdown-main-button"]')
+            .as('categoryDropdown')
+            .should('be.visible')
+        cy.get('@categoryDropdown').click()
+        cy.get('[data-cy="dropdown-item-other"]:visible').click()
+
+        cy.log('Write description and email')
+        cy.get('[data-cy="report-problem-text-area"] [data-cy="text-area-input"]')
+            .as('textArea')
+            .should('be.visible')
+        cy.get('@textArea').type(text)
+
+        cy.get('[data-cy="report-problem-email"] [data-cy="email-input"]')
+            .as('emailInput')
+            .should('be.visible')
+        cy.get('@emailInput').type(validEmail)
+
         cy.get('@textArea').should('be.visible').should('have.value', text)
         cy.get('@emailInput').should('be.visible').should('have.value', validEmail)
         cy.get('[data-cy="report-problem-drawing-added-feedback"]').scrollIntoView()
@@ -341,7 +375,6 @@ describe('Testing the report problem form', () => {
         })
 
         cy.get('[data-cy="drawing-toolbox-close-button"]').should('be.visible').click()
-        cy.get('[data-cy="drawing-share-admin-close"]').should('be.visible').click()
         cy.get('@categoryDropdown').scrollIntoView()
         cy.get('@reportForm').should('be.visible')
         cy.get('[data-cy="drawing-header-title"]').should('not.exist')