Merge pull request #2406 from Roksnet/feature/XRDDEV-2728

feat: XRDDEV-2728 Add language switching to the UI of Central and Security Server

src/central-server/admin-service/ui/src/components/layout/LanguageDropdown.vue

@@ -0,0 +1,95 @@
+<!--
+   The MIT License
+
+   Copyright (c) 2019- Nordic Institute for Interoperability Solutions (NIIS)
+   Copyright (c) 2018 Estonian Information System Authority (RIA),
+   Nordic Institute for Interoperability Solutions (NIIS), Population Register Centre (VRK)
+   Copyright (c) 2015-2017 Estonian Information System Authority (RIA), Population Register Centre (VRK)
+
+   Permission is hereby granted, free of charge, to any person obtaining a copy
+   of this software and associated documentation files (the "Software"), to deal
+   in the Software without restriction, including without limitation the rights
+   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+   copies of the Software, and to permit persons to whom the Software is
+   furnished to do so, subject to the following conditions:
+
+   The above copyright notice and this permission notice shall be included in
+   all copies or substantial portions of the Software.
+
+   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+   THE SOFTWARE.
+ -->
+<template>
+  <div class="language-changer">
+    <v-menu location="bottom">
+      <template #activator="{ props }">
+        <v-btn
+          class="no-uppercase"
+          data-test="language-button"
+          v-bind="props"
+          variant="text"
+        >
+          <strong>{{ currentLanguage }}</strong>
+          <v-icon icon="mdi-chevron-down" />
+        </v-btn>
+      </template>
+
+      <v-list>
+        <v-list-item
+          v-for="language in languages"
+          :key="language"
+          :active="language === currentLanguage"
+          data-test="language-list-tile"
+          @click="switchLanguage(language)"
+        >
+          {{ language }}
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapActions } from 'pinia';
+import { useLanguage } from '@/store/modules/language';
+import { availableLanguages } from '@/plugins/i18n';
+
+export default defineComponent({
+  computed: {
+    // Using a computed property for the current language for reactivity
+    currentLanguage() {
+      return this.$i18n.locale;
+    },
+    languages() {
+      return availableLanguages;
+    },
+  },
+  methods: {
+    ...mapActions(useLanguage, ['changeLanguage']),
+    switchLanguage(language: string): void {
+      if (language !== this.currentLanguage) {
+        this.changeLanguage(language);
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.language-changer {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+
+  .no-uppercase {
+    text-transform: none;
+    font-weight: 600;
+  }
+}
+</style>

src/central-server/admin-service/ui/src/components/layout/TabsBase.vue

@@ -39,6 +39,7 @@
         $t(tab.name)
       }}</v-tab>
     </v-tabs>
+    <language-dropdown />
     <app-drop-menu />
   </v-layout>
 </template>
@@ -51,11 +52,13 @@ import AppIcon from './AppIcon.vue';
 import AppDropMenu from './UserDropMenu.vue';
 import { mapState } from 'pinia';
 import { useUser } from '@/store/modules/user';
+import LanguageDropdown from './LanguageDropdown.vue';
 
 export default defineComponent({
   components: {
     AppIcon,
     AppDropMenu,
+    LanguageDropdown,
   },
   data() {
     return {

src/central-server/admin-service/ui/src/components/layout/UserDropMenu.vue

@@ -77,7 +77,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .drop-menu {
-  margin-left: auto;
   margin-right: 70px;
   display: flex;
   align-items: center;

src/central-server/admin-service/ui/src/main.ts

@@ -31,7 +31,7 @@ Sets up plugins and 3rd party components that the app uses.
 Creates a new Vue instance with the Vue function.
 Initialises the app root component.
 */
-import { createApp } from 'vue';
+import { createApp, nextTick } from 'vue';
 import axios from 'axios';
 import { createFilters } from '@/filters';
 import App from './App.vue';
@@ -43,7 +43,7 @@ import { createPinia } from 'pinia';
 import { createPersistedState } from 'pinia-plugin-persistedstate';
 import validation from '@/plugins/vee-validate';
 import vuetify from '@/plugins/vuetify';
-import { i18n } from '@/plugins/i18n';
+import { i18n, setLanguage } from '@/plugins/i18n';
 import {
   XrdButton,
   XrdCloseButton,
@@ -61,6 +61,7 @@ import {
   XrdSubViewContainer,
   XrdSubViewTitle,
 } from '@niis/shared-ui';
+import { useLanguage } from '@/store/modules/language';
 
 const pinia = createPinia();
 pinia.use(
@@ -96,5 +97,7 @@ app.component('XrdSimpleDialog', XrdSimpleDialog);
 app.component('XrdConfirmDialog', XrdConfirmDialog);
 app.component('XrdEmptyPlaceholder', XrdEmptyPlaceholder);
 app.component('XrdSubViewTitle', XrdSubViewTitle);
-
 app.mount('#app');
+// translations
+const languageStorage = useLanguage();
+nextTick(() => setLanguage(languageStorage.getLanguage)).then();

src/central-server/admin-service/ui/src/plugins/i18n.ts

@@ -25,26 +25,93 @@
  * THE SOFTWARE.
  */
 import { createI18n } from 'vue-i18n';
-import veeEn from '@vee-validate/i18n/dist/locale/en.json';
-import en from '@/locales/en.json';
+import enValidationMessages from '@vee-validate/i18n/dist/locale/en.json';
 import merge from 'deepmerge';
-
 import { messages } from '@niis/shared-ui';
+import enAppMessages from '@/locales/en.json';
+
+const loadedLanguages = new Set('en');
+export const availableLanguages = ['en'];
 
-const validation = { validation: veeEn };
+const defaultLanguage = import.meta.env.VITE_I18N_LOCALE || 'en';
+const defaultFallbackLanguage = import.meta.env.VITE_FALLBACK_LOCALE || 'en';
 
-type Shared = typeof messages.en;
-type Vee = typeof validation;
-type En = typeof en;
-export type MessageSchema = Vee & Shared & En;
+const sharedLanguageMessages = {
+  en: messages.en,
+};
+const defaultLanguagePack = merge.all([
+  { validation: enValidationMessages },
+  sharedLanguageMessages.en,
+  enAppMessages,
+]);
 
-let common = merge(validation, messages.en);
-common = merge(common, en);
-export const i18n = createI18n<[MessageSchema], 'en'>({
+// Initialize i18n instance with default configuration
+export const i18n = createI18n({
   legacy: false,
-  locale: import.meta.env.VITE_VUE_APP_I18N_LOCALE || 'en',
-  fallbackLocale: import.meta.env.VITE_VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  locale: defaultLanguage,
+  fallbackLocale: defaultFallbackLanguage,
   silentFallbackWarn: true,
   allowComposition: true,
-  messages: { en: common as MessageSchema },
+  messages: { en: defaultLanguagePack },
 });
+
+// Sets the active language, loading language pack if necessary
+export async function setLanguage(language) {
+  await loadLanguagePackIfNeeded(language);
+  i18n.global.locale.value = language;
+}
+
+// Loads language pack if it's not already loaded
+async function loadLanguagePackIfNeeded(language) {
+  if (!loadedLanguages.has(language)) {
+    const messages = await fetchLanguageMessages(language);
+    const languagePack = mergeLanguageMessages(messages);
+    i18n.global.setLocaleMessage(language, languagePack);
+    loadedLanguages.add(language);
+  }
+}
+
+// Fetches all language-specific messages for the given language
+async function fetchLanguageMessages(language) {
+  const appMessagesPromise = import(`@/locales/${language}.json`).then(
+    (module) => module.default,
+  );
+
+  const [appMessages, validationMessages, sharedMessages] = await Promise.all([
+    appMessagesPromise,
+    loadValidationMessages(language),
+    loadSharedMessages(language),
+  ]);
+
+  return { appMessages, validationMessages, sharedMessages };
+}
+
+// Loads validation messages, with fallback to English if not available
+async function loadValidationMessages(language) {
+  try {
+    const messages = await import(
+      `@vee-validate/i18n/dist/locale/${language}.json`
+    );
+    return messages.default;
+  } catch {
+    return enValidationMessages;
+  }
+}
+
+// Loads shared messages based on language
+function loadSharedMessages(language) {
+  return sharedLanguageMessages[language] || sharedLanguageMessages.en;
+}
+
+// Merges application, validation, and shared messages into a single pack
+function mergeLanguageMessages({
+  appMessages,
+  validationMessages,
+  sharedMessages,
+}) {
+  return merge.all([
+    { validation: validationMessages },
+    sharedMessages,
+    appMessages,
+  ]);
+}

src/central-server/admin-service/ui/src/store/modules/language.ts

@@ -0,0 +1,52 @@
+/*
+ * The MIT License
+ *
+ * Copyright (c) 2019- Nordic Institute for Interoperability Solutions (NIIS)
+ * Copyright (c) 2018 Estonian Information System Authority (RIA),
+ * Nordic Institute for Interoperability Solutions (NIIS), Population Register Centre (VRK)
+ * Copyright (c) 2015-2017 Estonian Information System Authority (RIA), Population Register Centre (VRK)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import { defineStore } from 'pinia';
+import { setLanguage } from '@/plugins/i18n';
+
+export const useLanguage = defineStore('language', {
+  state: () => ({
+    language: import.meta.env.VITE_I18N_LOCALE || ('en' as string),
+  }),
+
+  persist: {
+    storage: localStorage,
+  },
+
+  getters: {
+    getLanguage(state): string {
+      return state.language;
+    },
+  },
+
+  actions: {
+    async changeLanguage(language: string) {
+      this.language = language;
+      await setLanguage(language);
+    },
+  },
+});

src/security-server/admin-service/ui/src/components/layout/AppDropMenu.vue

@@ -75,7 +75,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .drop-menu {
-  margin-left: auto;
   margin-right: 70px;
   display: flex;
   align-items: center;