PB-1327 : i18n returns non-translated input if not found in i18n files

instead of failing and raising an error while using t(...), vue-i18n now gives back the "key" or text it received unchanged. This way we can call translation tool on input from other component without worrying on raising errors.

The DropdownButton now translates anything it receives, making it possible to give it either keys, or translated text directly.

Removing the class DropdownItem and replacing it with a typedef instead. We now know that passing classes with get/set to Vuex is a bad practice, and we should avoid it.

src/modules/drawing/components/DrawingExporter.vue

@@ -1,20 +1,22 @@
 <script setup>
 import { saveAs } from 'file-saver'
 import { computed, inject, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import { generateGpxString, generateKmlString } from '@/modules/drawing/lib/export-utils'
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import { generateFilename } from '@/utils/utils'
 
-const exportOptions = [new DropdownItem('kml', 'KML'), new DropdownItem('gpx', 'GPX')]
+/** @type {DropdownItem[]} */
+const exportOptions = [
+    { id: 'kml', title: 'KML' },
+    { id: 'gpx', title: 'GPX' },
+]
 
 const drawingLayer = inject('drawingLayer')
 
 const exportSelection = ref('KML')
 
-const i18n = useI18n()
 const store = useStore()
 
 const projection = computed(() => store.state.position.projection)
@@ -47,7 +49,7 @@ function exportDrawing() {
 
 <template>
     <DropdownButton
-        :title="i18n.t('export_kml')"
+        title="export_kml"
         :current-value="exportSelection"
         :items="exportOptions"
         :disabled="isDrawingEmpty"

src/modules/i18n/index.js

@@ -55,6 +55,9 @@ const i18n = createI18n({
     messages: languages,
     legacy: false,
     datetimeFormats,
+    // no error if missing translation, just display the input untranslated.
+    missingWarn: false,
+    fallbackWarn: false,
 })
 
 export default i18n

src/modules/infobox/components/styling/DrawingStyleIconSelector.vue

@@ -85,7 +85,7 @@ import EditableFeature from '@/api/features/EditableFeature.class'
 import { SUPPORTED_LANG } from '@/modules/i18n/index'
 import DrawingStyleColorSelector from '@/modules/infobox/components/styling/DrawingStyleColorSelector.vue'
 import DrawingStyleSizeSelector from '@/modules/infobox/components/styling/DrawingStyleSizeSelector.vue'
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import { MEDIUM } from '@/utils/featureStyleUtils'
 import log from '@/utils/logging'
@@ -143,16 +143,17 @@ export default {
                   })
                 : ''
         },
+        /** @returns {DropdownItem[]} */
         iconSetDropdownItems() {
             return this.iconSets.map((iconSet) => {
-                return new DropdownItem(
-                    iconSet.name,
-                    this.i18n.t(`modify_icon_category_${iconSet.name}_label`, 1, {
+                return {
+                    id: iconSet.name,
+                    title: this.i18n.t(`modify_icon_category_${iconSet.name}_label`, 1, {
                         locale: iconSet.language,
                     }),
-                    iconSet,
-                    `modify_icon_category_${iconSet.name}_label`
-                )
+                    value: iconSet,
+                    description: `modify_icon_category_${iconSet.name}_label`,
+                }
             })
         },
     },

src/modules/infobox/components/styling/DrawingStyleSizeSelector.vue

@@ -1,23 +1,27 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
     <div>
         <label class="form-label" for="drawing-style-text-size-selector">
-            {{ $t('modify_text_size_label') }}
+            {{ t('modify_text_size_label') }}
         </label>
         <DropdownButton
             id="drawing-style-text-size-selector"
             data-cy="drawing-style-size-selector"
             :current-value="currentSize"
-            :title="$t(sizeLabel)"
+            :title="sizeLabel"
             :items="dropdownItems"
             @select:item="onSizeSelect"
         />
     </div>
 </template>
 
 <script>
-import { useI18n } from 'vue-i18n'
-
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import { allStylingSizes, FeatureStyleSize } from '@/utils/featureStyleUtils'
 
 export default {
@@ -29,12 +33,6 @@ export default {
         },
     },
     emits: ['change'],
-    setup() {
-        const i18n = useI18n()
-        return {
-            i18n,
-        }
-    },
     data() {
         return {
             sizes: allStylingSizes,
@@ -47,9 +45,10 @@ export default {
             }
             return this.currentSize.label
         },
+        /** @returns {DropdownItem[]} */
         dropdownItems() {
             return this.sizes.map((size) => {
-                return new DropdownItem(size.label, this.i18n.t(size.label), size)
+                return { id: size.label, title: size.label, value: size }
             })
         },
     },

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

@@ -13,7 +13,7 @@ import AbstractLayer from '@/api/layers/AbstractLayer.class'
 import KMLLayer from '@/api/layers/KMLLayer.class'
 import { allKmlStyles } from '@/api/layers/KmlStyles.enum'
 import MenuActiveLayersListItemTimeSelector from '@/modules/menu/components/activeLayers/MenuActiveLayersListItemTimeSelector.vue'
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import ErrorButton from '@/utils/components/ErrorButton.vue'
 import TextTruncate from '@/utils/components/TextTruncate.vue'
 import ThirdPartyDisclaimer from '@/utils/components/ThirdPartyDisclaimer.vue'
@@ -70,8 +70,9 @@ const transparencySlider = ref(null)
 const currentKmlStyle = ref(layer.value?.style ?? null)
 const id = computed(() => layer.value.id)
 
+/** @type {ComputedRef<DropdownItem[]>} */
 const kmlStylesAsDropdownItems = computed(() =>
-    allKmlStyles.map((style) => new DropdownItem(style, style.toLowerCase(), style))
+    allKmlStyles.map((style) => ({ id: style, title: style.toLowerCase(), value: style }))
 )
 
 const isLocalFile = computed(() => store.getters.isLocalFile(layer.value))

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

@@ -8,7 +8,7 @@ import { createShortLink } from '@/api/shortlink.api'
 import { FEEDBACK_EMAIL_SUBJECT } from '@/config/feedback.config'
 import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
 import SendActionButtons from '@/modules/menu/components/help/common/SendActionButtons.vue'
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import EmailInput from '@/utils/components/EmailInput.vue'
 import FileInput from '@/utils/components/FileInput.vue'
 import SimpleWindow from '@/utils/components/SimpleWindow.vue'
@@ -22,27 +22,24 @@ const acceptedFileTypes = ['.kml', '.gpx', '.pdf', '.zip', '.jpg', '.jpeg', '.km
 
 const i18n = useI18n()
 const store = useStore()
+/** @type {DropdownItem[]} */
 const feedbackCategories = [
-    new DropdownItem(
-        'feedback_category_background_map',
-        'feedback_category_background_map',
-        'feedback_category_background_map'
-    ),
-    new DropdownItem(
-        'feedback_category_thematic_map',
-        'feedback_category_thematic_map',
-        'feedback_category_thematic_map'
-    ),
-    new DropdownItem(
-        'feedback_category_application_service',
-        'feedback_category_application_service',
-        'feedback_category_application_service'
-    ),
-    new DropdownItem(
-        'feedback_category_other',
-        'feedback_category_other',
-        'feedback_category_other'
-    ),
+    {
+        id: 'background_map',
+        title: 'feedback_category_background_map',
+    },
+    {
+        id: 'thematic_map',
+        title: 'feedback_category_thematic_map',
+    },
+    {
+        id: 'application_service',
+        title: 'feedback_category_application_service',
+    },
+    {
+        id: 'other',
+        title: 'feedback_category_other',
+    },
 ]
 
 const props = defineProps({
@@ -236,7 +233,7 @@ function selectItem(dropdownItem) {
             >
                 <DropdownButton
                     label="feedback_description"
-                    :title="i18n.t(feedback.category ?? 'select_category')"
+                    :title="feedback.category ?? 'select_category'"
                     :current-value="feedback.category"
                     :items="feedbackCategories"
                     @select:item="selectItem"