Merge branch 'develop' into feat/add-webhooks-feature-branch

argilla-io · Nov 19, 2024 · cb73cf6 · cb73cf6
2 parents 9bbdd62 + 53c734c
commit cb73cf6
Show file tree

Hide file tree

Showing 19 changed files with 224 additions and 67 deletions.
diff --git a/argilla-frontend/CHANGELOG.md b/argilla-frontend/CHANGELOG.md
@@ -19,6 +19,11 @@ 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))
+
+### Fixed
+
+- Fixed highlighting on same record ([#5693](https://github.com/argilla-io/argilla/pull/5693))
 
 ## [2.4.1](https://github.com/argilla-io/argilla/compare/v2.4.0...v2.4.1)
 

diff --git a/...atures/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts b/...atures/annotation/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts
@@ -8,17 +8,13 @@ import { Question } from "~/v1/domain/entities/question/Question";
 import { SpanQuestionAnswer } from "~/v1/domain/entities/question/QuestionAnswer";
 import { SpanAnswer } from "~/v1/domain/entities/IAnswer";
 
-export const useSpanAnnotationTextFieldViewModel = ({
-  name,
-  spanQuestion,
-  id,
-  searchText,
-}: {
+export const useSpanAnnotationTextFieldViewModel = (props: {
   name: string;
   spanQuestion: Question;
   id: string;
   searchText: string;
 }) => {
+  const { name, spanQuestion, id } = props;
   const searchTextHighlight = useSearchTextHighlight(name);
   const spanAnnotationSupported = ref(true);
   const answer = spanQuestion.answer as SpanQuestionAnswer;
@@ -146,7 +142,7 @@ export const useSpanAnnotationTextFieldViewModel = ({
   );
 
   watch(
-    () => searchText,
+    () => props.searchText,
     (newValue) => {
       searchTextHighlight.highlightText(newValue);
     }
@@ -161,7 +157,7 @@ export const useSpanAnnotationTextFieldViewModel = ({
       spanAnnotationSupported.value = false;
     }
 
-    searchTextHighlight.highlightText(searchText);
+    searchTextHighlight.highlightText(props.searchText);
   });
 
   onUnmounted(() => {

diff --git a/argilla-frontend/components/features/user-settings/UserSettingsContent.vue b/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>
 

diff --git a/argilla-frontend/components/features/user-settings/UserSettingsLanguage.vue b/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>
diff --git a/argilla-frontend/components/features/user-settings/UserSettingsTheme.vue b/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"],

diff --git a/argilla-frontend/components/features/user-settings/useUserSettingsLanguageViewModel.ts b/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,
+  };
+};
diff --git a/argilla-frontend/nuxt.config.ts b/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",
       },
     ],

diff --git a/argilla-frontend/pages/dataset/_id/annotation-mode/index.vue b/argilla-frontend/pages/dataset/_id/annotation-mode/index.vue
@@ -12,6 +12,7 @@
         >
           <template slot="dialog-cta" v-if="dataset && dataset.createdFromUI">
             <ImportData
+              v-if="isAdminOrOwner"
               :snippet="dataset.createCodeSnippetFromHub(getUser())"
             />
           </template>

diff --git a/argilla-frontend/pages/dataset/_id/annotation-mode/useAnnotationModeViewModel.ts b/argilla-frontend/pages/dataset/_id/annotation-mode/useAnnotationModeViewModel.ts
@@ -9,10 +9,11 @@ import { useDatasetViewModel } from "../useDatasetViewModel";
 import { GetDatasetByIdUseCase } from "@/v1/domain/usecases/get-dataset-by-id-use-case";
 import { useDataset } from "@/v1/infrastructure/storage/DatasetStorage";
 import { RecordCriteria } from "~/v1/domain/entities/record/RecordCriteria";
-import { useRoutes, useUser } from "~/v1/infrastructure/services";
+import { useRoutes, useUser, useRole } from "~/v1/infrastructure/services";
 import { RecordStatus } from "~/v1/domain/entities/record/RecordAnswer";
 
 export const useAnnotationModeViewModel = () => {
+  const { isAdminOrOwner } = useRole();
   const router = useRouter();
   const routes = useRoutes();
   const { getUser } = useUser();
@@ -113,5 +114,6 @@ export const useAnnotationModeViewModel = () => {
     breadcrumbs,
     updateQueryParams,
     getUser,
+    isAdminOrOwner,
   };
 };
diff --git a/argilla-frontend/translation/de.js b/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: {

diff --git a/argilla-frontend/translation/en.js b/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: {

diff --git a/argilla-frontend/translation/es.js b/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: {

diff --git a/argilla-frontend/v1/infrastructure/services/useColorSchema.ts b/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 {