PB-585: make tooltip reactive to language change

Issue : When changing languages, the tooltip did not update to the chosen language and we had to close it and select the features again to see the change
Cause : The features selection process uses calls to the backend that are language dependant. Upon changing the language, we did not change the selected features, meaning they were still in the store with the old language tooltip within.
Fix : A watcher checks language changes when there is a tooltip and update the selected Features

Still to do : currently, changing the language removes the drawings from the selection. Editable Features Selection seems to behave strangely (I can't seem to retrieve them from the store). I'll investigate this further.

src/modules/infobox/components/FeatureList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, toRefs } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
@@ -29,6 +29,7 @@ const layerFeatureCategories = ref([])
 const i18n = useI18n()
 const store = useStore()
 const activeLayers = computed(() => store.state.layers.activeLayers)
+const lang = computed(() => store.state.i18n.lang)
 const isCurrentlyDrawing = computed(() => store.state.drawing.drawingOverlay.show)
 const selectedEditableFeatures = computed(() => store.state.features.selectedEditableFeatures)
 const selectedFeaturesByLayerId = computed(() => store.state.features.selectedFeaturesByLayerId)
@@ -46,6 +47,10 @@ const canLoadMore = computed(() => (layerId) => {
     )
 })
 
+watch(lang, () => {
+    store.dispatch('updateFeatures', dispatcher)
+})
+
 function getLayerName(layerId) {
     return activeLayers.value
         .filter(

src/store/modules/features.store.js

@@ -1,7 +1,8 @@
 import { containsCoordinate } from 'ol/extent'
+import { toRaw } from 'vue'
 
 import EditableFeature, { EditableFeatureTypes } from '@/api/features/EditableFeature.class'
-import { identify, identifyOnGeomAdminLayer } from '@/api/features/features.api'
+import getFeature, { identify, identifyOnGeomAdminLayer } from '@/api/features/features.api'
 import LayerFeature from '@/api/features/LayerFeature.class'
 import { sendFeatureInformationToIFrameParent } from '@/api/iframeFeatureEvent.api'
 import getProfile from '@/api/profile/profile.api'
@@ -628,6 +629,62 @@ export default {
                 log.warn('Geometry type not supported to show a profile, ignoring', feature)
             }
         },
+        /**
+         * The goal of this function is to refresh the selected features according to changes that
+         * happened in the store, but outside feature selection. For example, when we change the
+         * language, we need to update the selected features otherwise we keep them in the old
+         * language until new features are selected.
+         *
+         * @param {Store} store The vue store
+         * @param {Object} dispatcher The dispatcher
+         */
+        async updateFeatures(store, { dispatcher }) {
+            const { state, commit, getters, rootState } = store
+            const featuresPromises = []
+            getters.selectedLayerFeatures.forEach((feature) => {
+                featuresPromises.push(
+                    getFeature(
+                        feature.layer,
+                        feature.id,
+                        rootState.position.projection,
+                        rootState.i18n.lang
+                    )
+                )
+            })
+            if (featuresPromises.length > 0) {
+                try {
+                    const responses = await Promise.allSettled(featuresPromises)
+                    const features = responses
+                        .filter((response) => response.status === 'fulfilled')
+                        .map((response) => response.value)
+                    if (features.length > 0) {
+                        const updatedFeaturesByLayerId = state.selectedFeaturesByLayerId.reduce(
+                            (updated_array, layer) => {
+                                const rawLayer = toRaw(layer)
+                                rawLayer.features = features.reduce((features_array, feature) => {
+                                    if (feature.layer.id === layer.layerId) {
+                                        features_array.push(feature)
+                                    }
+                                    return features_array
+                                }, [])
+                                updated_array.push(rawLayer)
+                                return updated_array
+                            },
+                            []
+                        )
+                        await commit('setSelectedFeatures', {
+                            layerFeaturesByLayerId: updatedFeaturesByLayerId,
+                            drawingFeatures: state.selectedEditableFeatures,
+                            ...dispatcher,
+                        })
+                    }
+                } catch (error) {
+                    log.error(
+                        `Error while attempting to update already selected features. error is ${error}`
+                    )
+                }
+            }
+        },
     },
     mutations: {
         setSelectedFeatures(state, { layerFeaturesByLayerId, drawingFeatures }) {