PB-984: implement an error queue

- Issue : currently, there is only one error message existing at the same time, which means if a new error happens, it'll flush out the previous one, with no possibility of seeing it again.

- Fix : We implement a queue, like for warnings, which means if multiple errors happen at the same time, we can check all of them.

src/App.vue

@@ -22,7 +22,10 @@ const dispatcher = { dispatcher: 'App.vue' }
 
 let debouncedOnResize
 const error = computed(() => {
-    return store.state.ui.error
+    if (store.state.ui.errors.size > 0) {
+        return store.state.ui.errors.values().next().value
+    }
+    return null
 })
 const warning = computed(() => {
     if (store.state.ui.warnings.size > 0) {
@@ -65,7 +68,7 @@ function refreshPageTitle() {
         <ErrorWindow
             v-if="error"
             title="error"
-            @close="store.dispatch('setError', { error: null, ...dispatcher })"
+            @close="store.dispatch('removeError', { error, ...dispatcher })"
         >
             <div>
                 {{ i18n.t(error.msg, error.params) }}

src/modules/map/components/openlayers/utils/useMapInteractions.composable.js

@@ -267,7 +267,7 @@ export default function useMapInteractions(map) {
                 errorKey = 'invalid_kml_gpx_file_error'
                 log.error(`Failed to load file`, error)
             }
-            store.dispatch('setError', { error: new ErrorMessage(errorKey, null), ...dispatcher })
+            store.dispatch('addError', { error: new ErrorMessage(errorKey, null), ...dispatcher })
         }
     }
 

src/router/storeSync/CrossHairParamConfig.class.js

@@ -35,7 +35,7 @@ function dispatchCrossHairFromUrlIntoStore(to, store, urlParamValue) {
         )
 
         promisesForAllDispatch.push(
-            store.dispatch('setError', { error, dispatcher: STORE_DISPATCHER_ROUTER_PLUGIN })
+            store.dispatch('addError', { error, dispatcher: STORE_DISPATCHER_ROUTER_PLUGIN })
         )
     } else {
         const parts = urlParamValue.split(',')
@@ -62,7 +62,7 @@ function dispatchCrossHairFromUrlIntoStore(to, store, urlParamValue) {
                  * We consider that if the parameter is undefined, it's a choice made by the user.
                  */
                 promisesForAllDispatch.push(
-                    store.dispatch('setError', {
+                    store.dispatch('addError', {
                         error,
                         dispatcher: STORE_DISPATCHER_ROUTER_PLUGIN,
                     })

src/store/modules/ui.store.js

@@ -154,13 +154,11 @@ export default {
         showDisclaimer: true,
 
         /**
-         * An ErrorMessage object containing parameters for error texts, so we can have error
-         * messages which are similar, but not dependant on a translation key, reducing the total
-         * number of translation keys needed.
+         * Set of errors to display. Each error must be an ErrorMessage object.
          *
-         * @type ErrorMessage
+         * @type Set(ErrorMessage)
          */
-        error: null,
+        errors: new Set(),
         /**
          * Set of warnings to display. Each warning must be an object WarningMessage
          *
@@ -391,17 +389,25 @@ export default {
         setShowDisclaimer({ commit }, { showDisclaimer, dispatcher }) {
             commit('setShowDisclaimer', { showDisclaimer, dispatcher })
         },
-        setError({ commit }, { error, dispatcher }) {
+        addError({ commit, state }, { error, dispatcher }) {
             if (!(error instanceof ErrorMessage)) {
-                if (error instanceof String) {
-                    commit('setError', { error: new ErrorMessage(error, null) })
-                } else {
-                    throw new Error(
-                        `Error ${error} dispatched by ${dispatcher} is neither of type ErrorMessage, nor a string`
-                    )
-                }
-            } else {
-                commit('setError', { error, dispatcher })
+                throw new Error(
+                    `Error ${error} dispatched by ${dispatcher} is not of type ErrorMessage`
+                )
+            }
+            if (!state.errors.has(error)) {
+                commit('addError', { error, dispatcher })
+            }
+        },
+
+        removeError({ commit, state }, { error, dispatcher }) {
+            if (!(error instanceof ErrorMessage)) {
+                throw new Error(
+                    `Error ${error} dispatched by ${dispatcher} is not of type ErrorMessage`
+                )
+            }
+            if (state.errors.has(error)) {
+                commit('removeError', { error, dispatcher })
             }
         },
         addWarning({ commit, state }, { warning, dispatcher }) {
@@ -486,7 +492,8 @@ export default {
             state.featureInfoPosition = position
         },
         setShowDisclaimer: (state, { showDisclaimer }) => (state.showDisclaimer = showDisclaimer),
-        setError: (state, { error }) => (state.error = error),
+        addError: (state, { error }) => state.errors.add(error),
+        removeError: (state, { error }) => state.errors.delete(error),
         addWarning: (state, { warning }) => state.warnings.add(warning),
         removeWarning: (state, { warning }) => state.warnings.delete(warning),
         setShowDragAndDropOverlay: (state, { showDragAndDropOverlay }) =>

src/store/plugins/geolocation-management.plugin.js

@@ -25,7 +25,7 @@ function setCenterIfInBounds(store, center) {
         }
     } else {
         log.warn(`current geolocation is out of bounds: ${JSON.stringify(center)}`)
-        store.dispatch('setError', {
+        store.dispatch('addError', {
             error: new ErrorMessage('geoloc_out_of_bounds', null),
             ...dispatcher,
         })
@@ -88,14 +88,14 @@ const handlePositionError = (error, store, state, options = {}) => {
                 denied: true,
                 ...dispatcher,
             })
-            store.dispatch('setError', {
+            store.dispatch('addError', {
                 error: new ErrorMessage('geoloc_permission_denied', null),
                 ...dispatcher,
             })
             break
         case error.TIMEOUT:
             store.dispatch('setGeolocation', { active: false, ...dispatcher })
-            store.dispatch('setError', {
+            store.dispatch('addError', {
                 error: new ErrorMessage('geoloc_time_out', null),
                 ...dispatcher,
             })
@@ -116,7 +116,7 @@ const handlePositionError = (error, store, state, options = {}) => {
                         activeGeolocation(store, state, { useInitial: false })
                     }
                 } else {
-                    store.dispatch('setError', {
+                    store.dispatch('addError', {
                         error: new ErrorMessage('geoloc_unknown', null),
                         ...dispatcher,
                     })