[FEATURE] UI - Add language selection in user settings

argilla-frontend/CHANGELOG.md

@@ -19,6 +19,7 @@ These are the section headers that we use:
 ### Added
 
 - Add a high-contrast theme & improvements for the forced-colors mode. ([#5661](https://github.com/argilla-io/argilla/pull/5661))
+- Add English as the default language and add language selector in the user settings page. ([#5690](https://github.com/argilla-io/argilla/pull/5690))
 
 ## [2.4.1](https://github.com/argilla-io/argilla/compare/v2.4.0...v2.4.1)
 

argilla-frontend/components/features/user-settings/UserSettingsContent.vue

@@ -47,16 +47,23 @@
       </div>
       <p v-else class="--body1 description__text">-</p>
     </div>
-    <div class="form-group">
-      <UserTokenComponent :userToken="user.apiKey" />
-    </div>
     <div class="form-group">
       <h2
         class="--heading5 --medium description__title"
         v-text="$t('userSettings.theme')"
       />
       <UserSettingsTheme />
     </div>
+    <div class="form-group">
+      <h2
+        class="--heading5 --medium description__title"
+        v-text="$t('userSettings.language')"
+      />
+      <UserSettingsLanguage />
+    </div>
+    <div class="form-group">
+      <UserTokenComponent :userToken="user.apiKey" />
+    </div>
   </div>
 </template>
 

argilla-frontend/components/features/user-settings/UserSettingsLanguage.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="language-switch">
+    <BaseTooltip
+      class="language-switch__item"
+      v-for="{ code, name } in languages"
+      :key="code"
+      :text="name"
+      :minimalist="false"
+    >
+      <input
+        type="radio"
+        :id="code"
+        :value="code"
+        v-model="$i18n.locale"
+        @input="change(code)"
+      />
+      <label :for="code"> {{ code }}</label>
+    </BaseTooltip>
+  </div>
+</template>
+
+<script>
+import { useUserSettingsLanguageViewModel } from "./useUserSettingsLanguageViewModel";
+
+export default {
+  setup() {
+    return useUserSettingsLanguageViewModel();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.language-switch {
+  display: flex;
+  gap: $base-space * 2;
+  padding: $base-space * 2 0;
+}
+input {
+  display: none;
+}
+label {
+  display: flex;
+  flex-direction: column;
+  gap: $base-space;
+  align-items: center;
+  min-width: 40px;
+  padding: $base-space * 2;
+  background: var(--bg-opacity-4);
+  border-radius: 6px;
+  border: 1px solid var(--bg-opacity-4);
+  color: var(--fg-secondary);
+  text-transform: uppercase;
+  &:hover {
+    transition: color 0.3s ease;
+    color: var(--fg-primary);
+  }
+}
+input:checked + label {
+  border-color: var(--fg-cuaternary);
+  color: var(--fg-primary);
+}
+</style>

argilla-frontend/components/features/user-settings/UserSettingsTheme.vue

@@ -14,7 +14,7 @@
       />
       <label :for="theme">
         <svgicon width="20" height="20" :name="`${theme}-theme`" />
-        {{ theme }}</label
+        {{ $t(`colorSchema.${theme}`) }}</label
       >
     </div>
   </div>
@@ -25,8 +25,8 @@ import "assets/icons/light-theme";
 import "assets/icons/dark-theme";
 import "assets/icons/system-theme";
 import "assets/icons/high-contrast-theme";
+
 export default {
-  name: "ThemeSwitch",
   data() {
     return {
       themes: ["system", "dark", "light", "high-contrast"],

argilla-frontend/components/features/user-settings/useUserSettingsLanguageViewModel.ts

@@ -0,0 +1,12 @@
+import { useContext } from "@nuxtjs/composition-api";
+import { useLanguageChanger } from "~/v1/infrastructure/services";
+
+export const useUserSettingsLanguageViewModel = () => {
+  const context = useContext();
+  const { change, languages } = useLanguageChanger(context);
+
+  return {
+    change,
+    languages,
+  };
+};

argilla-frontend/nuxt.config.ts

@@ -115,14 +115,17 @@ const config: NuxtConfig = {
     locales: [
       {
         code: "en",
+        name: "English",
         file: "en.js",
       },
       {
         code: "de",
+        name: "Deutsch",
         file: "de.js",
       },
       {
         code: "es",
+        name: "Español",
         file: "es.js",
       },
     ],

argilla-frontend/translation/de.js

@@ -88,6 +88,7 @@ export default {
     apiKeyDescription:
       "API-Keys erlauben es die Datensätze über das Python SDK zu verwalten.",
     theme: "Theme",
+    language: "Sprache",
     copyKey: "API-Key kopieren",
   },
   userAvatarTooltip: {
@@ -341,6 +342,12 @@ export default {
     annotator:
       "Der persistente Speicher ist nicht aktiviert. Alle Daten gehen verloren, wenn dieser Space neu gestartet wird.",
   },
+  colorSchema: {
+    system: "System",
+    light: "Licht",
+    dark: "Dunkel",
+    "high-contrast": "Hoher Kontrast",
+  },
   validations: {
     businessLogic: {
       missing_vector: {

argilla-frontend/translation/en.js

@@ -58,7 +58,7 @@ export default {
   breadcrumbs: {
     home: "Home",
     datasetSettings: "settings",
-    userSettings: "my settings",
+    userSettings: "My settings",
   },
   datasets: {
     left: "left",
@@ -86,6 +86,7 @@ export default {
     apiKeyDescription:
       "API key tokens allow you to manage datasets using the Python SDK.",
     theme: "Theme",
+    language: "Language",
     copyKey: "Copy key",
   },
   userAvatarTooltip: {
@@ -345,6 +346,12 @@ export default {
     annotator:
       "Persistent storage is not enabled. All data will be lost if this space restarts.",
   },
+  colorSchema: {
+    system: "System",
+    light: "Light",
+    dark: "Dark",
+    "high-contrast": "High contrast",
+  },
   validations: {
     businessLogic: {
       missing_vector: {

argilla-frontend/translation/es.js

@@ -84,6 +84,8 @@ export default {
     apiKey: "Clave de API",
     apiKeyDescription:
       "Los tokens de clave API permiten administrar datasets utilizando el SDK de Python",
+    theme: "Tema",
+    language: "Idioma",
     copyKey: "Copiar clave",
   },
   userAvatarTooltip: {
@@ -335,6 +337,12 @@ export default {
     annotator:
       "El almacenamiento persistente no está habilitado. Todos los datos se perderán si este espacio se reinicia",
   },
+  colorSchema: {
+    system: "Sistema",
+    light: "Claro",
+    dark: "Oscuro",
+    "high-contrast": "Alto contraste",
+  },
   validations: {
     businessLogic: {
       missing_vector: {

argilla-frontend/v1/infrastructure/services/useColorSchema.ts

@@ -1,14 +1,17 @@
 import { ref } from "vue";
+import { useLocalStorage } from "./useLocalStorage";
 export const useColorSchema = () => {
+  const { get, set } = useLocalStorage();
   const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
     ? "dark"
     : "light";
 
-  const currentTheme = ref(localStorage.getItem("theme") || "system");
+  const currentTheme = ref(get("theme") || "system");
 
   const setTheme = (theme: string) => {
     currentTheme.value = theme;
-    localStorage.setItem("theme", theme);
+    set("theme", theme);
+
     if (theme !== "system") {
       document.documentElement.setAttribute("data-theme", theme);
     } else {

argilla-frontend/v1/infrastructure/services/useLanguageDetector.test.ts

@@ -1,10 +1,14 @@
 import { useLanguageDetector } from "./useLanguageDetector";
+import { useLocalStorage } from "./useLocalStorage";
+
+jest.mock("./useLocalStorage");
+const useLocalStorageMock = jest.mocked(useLocalStorage);
 
 describe("useLanguageDetector", () => {
   const context = {
     app: {
       i18n: {
-        locales: [{ code: "en" }, { code: "es" }, { code: "fr-CA" }],
+        locales: [{ code: "en" }, { code: "es" }, { code: "fr" }],
         setLocale: jest.fn(),
       },
     },
@@ -15,24 +19,34 @@ describe("useLanguageDetector", () => {
   });
 
   describe("initialize should", () => {
-    test("change to the detected language when it exists", () => {
+    test("set the browser language if the user does not have the language saved and the browser language is supported", () => {
       Object.defineProperty(window.navigator, "language", {
-        value: "fr-CA",
+        value: "es",
         configurable: true,
       });
+      useLocalStorageMock.mockReturnValue({
+        get: jest.fn().mockReturnValue(null),
+        pop: jest.fn(),
+        set: jest.fn(),
+      });
 
       const { initialize } = useLanguageDetector(context);
 
       initialize();
 
-      expect(context.app.i18n.setLocale).toHaveBeenCalledWith("fr-CA");
+      expect(context.app.i18n.setLocale).toHaveBeenCalledWith("es");
     });
 
-    test("change to base language code if not exist the complete code into locales", () => {
+    test("set the browser language if the user does not have the language saved and the browser language is supported", () => {
       Object.defineProperty(window.navigator, "language", {
         value: "es-AR",
         configurable: true,
       });
+      useLocalStorageMock.mockReturnValue({
+        get: jest.fn().mockReturnValue(null),
+        pop: jest.fn(),
+        set: jest.fn(),
+      });
 
       const { initialize } = useLanguageDetector(context);
 
@@ -41,17 +55,36 @@ describe("useLanguageDetector", () => {
       expect(context.app.i18n.setLocale).toHaveBeenCalledWith("es");
     });
 
-    test("not change to the language code when the detected language does not exist", () => {
+    test("set English if the user does not have the language saved and the browser language is not supported", () => {
       Object.defineProperty(window.navigator, "language", {
         value: "de",
         configurable: true,
       });
+      useLocalStorageMock.mockReturnValue({
+        get: jest.fn().mockReturnValue(null),
+        pop: jest.fn(),
+        set: jest.fn(),
+      });
+
+      const { initialize } = useLanguageDetector(context);
+
+      initialize();
+
+      expect(context.app.i18n.setLocale).toHaveBeenCalledWith("en");
+    });
+
+    test("set the language saved by the user", () => {
+      useLocalStorageMock.mockReturnValue({
+        get: () => "fr",
+        pop: jest.fn(),
+        set: jest.fn(),
+      });
 
       const { initialize } = useLanguageDetector(context);
 
       initialize();
 
-      expect(context.app.i18n.setLocale).toHaveBeenCalledTimes(0);
+      expect(context.app.i18n.setLocale).toHaveBeenCalledWith("fr");
     });
   });
 });

argilla-frontend/v1/infrastructure/services/useLanguageDetector.ts

@@ -1,4 +1,5 @@
 import { NuxtI18nInstance } from "@nuxtjs/i18n";
+import { useLocalStorage } from "./useLocalStorage";
 
 type Context = {
   app: {
@@ -10,14 +11,13 @@ type Context = {
 };
 
 export const useLanguageDetector = (context: Context) => {
-  const { i18n } = context.app;
+  const { change } = useLanguageChanger(context);
+  const { get } = useLocalStorage();
 
-  const change = (language: string) => {
-    i18n.setLocale(language);
-  };
+  const { i18n } = context.app;
 
   const detect = () => {
-    return navigator.language;
+    return get("language") || navigator.language;
   };
 
   const exists = (language: string) => {
@@ -36,9 +36,28 @@ export const useLanguageDetector = (context: Context) => {
     if (exists(languageCode)) {
       return change(languageCode);
     }
+
+    change("en");
   };
 
   return {
     initialize,
   };
 };
+
+export const useLanguageChanger = (context: Context) => {
+  const { i18n } = context.app;
+
+  const { set } = useLocalStorage();
+
+  const change = (language: string) => {
+    i18n.setLocale(language);
+
+    set("language", language);
+  };
+
+  return {
+    change,
+    languages: i18n.locales.sort((a, b) => a.code.localeCompare(b.code)),
+  };
+};

argilla-frontend/v1/infrastructure/services/useLocalStorage.ts

@@ -1,4 +1,9 @@
-type Options = "showShortcutsHelper" | "layout" | "redirectTo";
+type Options =
+  | "showShortcutsHelper"
+  | "layout"
+  | "redirectTo"
+  | "language"
+  | "theme";
 
 const STORAGE_KEY = "argilla";