Refine German translations and update non-localized UI elements (#5632)

# Refine German translations and update non-localized UI elements

- Corrected & added a few German translation in
argilla-frontend/translation/de.js
- Added a language aware placeholder to Label selection
(LabelSelection.component.vue & EntityLabelSelection.component.vue)
- $t('spanAnnotation.searchLabels') for filtering Labels in the span
Annotation
- The relatives dates in the created & updated field in the Dataset
Overview page where hardcoded to English
   -  BaseDate.vue -> timeAgo uses now `this.$i18n.locale`
- The argilla-frontend/docs/snippets/start_page.md sample code names the
default workspace `argilla` even though the server defaults to the
default workspace name `default` so I changed it.
- Set lang in app.vue dynamic to the actual language (important for the
screenreader)

**Type of change**
<!-- Please delete options that are not relevant. Remember to title the
PR according to the type of change -->

- Improvement (change adding some improvement to an existing
functionality)

**How Has This Been Tested**
Local front-end build.

**Checklist**
<!-- Please go over the list and make sure you've taken everything into
account -->

- I added relevant documentation
- I followed the style guidelines of this project
- I did a self-review of my code
- I made corresponding changes to the documentation
- I confirm My changes generate no new warnings
- I have added tests that prove my fix is effective or that my feature
works
- I have added relevant notes to the CHANGELOG.md file (See
https://keepachangelog.com/)

---------

Co-authored-by: Paul Bauriegel <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: paulbauriegel

argilla-frontend/CHANGELOG.md

@@ -16,6 +16,9 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+### Fixed
+- Refine German translations and update non-localized UI elements [#5632](https://github.com/argilla-io/argilla/pull/5632)
+
 ## [2.3.0](https://github.com/argilla-io/argilla/compare/v2.2.0...v2.3.0)
 
 ### Added

argilla-frontend/components/base/base-date/BaseDate.vue

@@ -78,7 +78,7 @@ export default {
       });
     },
     timeAgo(date) {
-      const formatter = new Intl.RelativeTimeFormat("en", {
+      const formatter = new Intl.RelativeTimeFormat(this.$i18n.locale, {
         numeric: "auto",
       });
       const ranges = {

argilla-frontend/components/base/base-table/filters/SelectOptionsSearch.vue

@@ -5,7 +5,7 @@
       class="options-search__input"
       type="text"
       autofocus
-      :placeholder="placeholder"
+      :placeholder="$t('search')"
     />
     <a href="#" class="options-search__clear" @click.prevent="clear">
       <svgicon
@@ -22,10 +22,6 @@
 <script>
 export default {
   props: {
-    placeholder: {
-      type: String,
-      default: "Search...",
-    },
     value: {
       type: String,
       default: "",

argilla-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue

@@ -7,7 +7,7 @@
           ref="searchComponentRef"
           v-model="searchInput"
           :searchRef="searchRef"
-          :placeholder="placeholder"
+          :placeholder="$t('spanAnnotation.searchLabels')"
         />
       </div>
       <div class="right-header">
@@ -109,10 +109,6 @@ export default {
     suggestion: {
       type: Object,
     },
-    placeholder: {
-      type: String,
-      default: () => "Search labels",
-    },
     componentId: {
       type: String,
       required: true,

argilla-frontend/components/features/annotation/container/questions/form/span/EntityLabelSelection.component.vue

@@ -11,7 +11,7 @@
           ref="searchComponentRef"
           v-model="searchInput"
           :searchRef="searchRef"
-          :placeholder="placeholder"
+          :placeholder="$t('spanAnnotation.searchLabels')"
         />
       </div>
       <div class="right-header">
@@ -74,10 +74,6 @@ export default {
       type: Array,
       required: true,
     },
-    placeholder: {
-      type: String,
-      default: () => "Search labels",
-    },
     componentId: {
       type: String,
       required: true,

argilla-frontend/docs/snippets/start_page.md

@@ -60,7 +60,7 @@ settings = rg.Settings(
 )
 dataset = rg.Dataset(
     name=f"my_first_dataset",
-    workspace="argilla", # change this to your workspace
+    workspace="default", # change this to your workspace
     settings=settings,
     client=client,
 )

argilla-frontend/layouts/app.vue

@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <div lang="en">
+  <div :lang="currentLang">
     <Nuxt v-if="!$slots.default" />
     <slot />
   </div>
@@ -29,6 +29,9 @@ export default {
     imOffline() {
       return this.$nuxt.isOffline;
     },
+    currentLang() {
+      return this.$i18n.locale;
+    },
   },
   watch: {
     imOffline(isOffline, wasOffline) {

argilla-frontend/pages/dataset/_id/useDatasetSettingViewModel.ts

@@ -42,7 +42,7 @@ export const useDatasetSettingViewModel = () => {
   const configureTabs = (datasetSettings: DatasetSetting) => {
     tabs.value.push({
       id: "general",
-      name: "General",
+      name: t("general"),
       component: "SettingsInfo",
     });
     tabs.value.push({

argilla-frontend/translation/de.js

@@ -1,56 +1,64 @@
 export default {
-  multi_label_selection: "Multi-label",
+  multi_label_selection: "Multi-Label",
   ranking: "Ranking",
   label_selection: "Label",
-  span: "Span",
+  span: "Bereich",
   text: "Text",
   image: "Bild",
   rating: "Bewertung",
   minimize: "Minimieren",
   select: "Auswählen",
   search: "Suchen",
-  searchPlaceholder: "Eingabe einer Abfrage",
-  searchDatasets: "Durchsuche Datensätze",
+  searchPlaceholder: "Suchbegriff eingeben",
+  searchDatasets: "Datensätze durchsuchen",
   expand: "Erweitern",
   copied: "Kopiert",
   copyLink: "Link kopieren",
   copyRecord: "Eintrag kopieren",
-  refresh: "Refresh",
-  typeYourText: "Type your text",
+  refresh: "Aktualisieren",
+  typeYourText: "Geben Sie Ihren Text ein",
   all: "Alle",
+  value: "Wert",
   title: "Titel",
   description: "Beschreibung",
   labels: "Labels",
+  order: "Reihenfolge",
   useMarkdown: "Verwende Markdown",
   suggestionFirst: "Vorschlag zuerst",
   visibleForAnnotators: "Sichtbar für Annotatoren",
-  allowExtraMetadata: "Erlaube extra Metadata",
-  extraMetadata: "Extra Metadata",
+  recordInfo: "Eintragsinformationen",
+  viewMetadata: "Metadaten ansehen",
+  allowExtraMetadata: "Erlaube zusätzliche Metadaten",
+  extraMetadata: "Zusätzliche Metadaten",
   dimension: "Dimension",
-  visibleLabels: "Sichtbare labels",
+  visibleLabels: "Sichtbare Labels",
   annotationGuidelines: "Annotationsrichtlinien",
   guidelines: "Richtlinien",
+  taskDistribution: "Annotationsverteilung",
+  minimumSubmittedResponses: "Erforderliche Mindestanzahl an eingereichten Antworten",
+  taskDistributionTooltip:
+    "Eine Aufgabe ist abgeschlossen, wenn alle Datensätze die \nMindestanzahl an eingereichten Antworten haben.",
   noAnnotationGuidelines: "Dieser Datensatz hat keine Annotationsrichtlinien",
   required: "Erforderlich",
   optional: "Optional",
   template: "Template",
   noRecordsMessages: {
     datasetEmptyForAnnotator:
-      "Der Datensatz ist leer. Bitten fragen Sie einen Admin, Einträge Hinzufügen und kommst du bald wieder.",
+      "Der Datensatz ist leer. Bitten Sie einen Administrator, Daten hochzuladen, und versuchen Sie es später erneut.",
     datasetEmptyForAdmin:
-      "Der Datensatz ist leer. Du kannst Einträgen mit dem Python SDK hinzufügen, siehe <a href='https://docs.argilla.io/latest/how_to_guides/record/'>dokumentation</a> zum Hinzufügen von Einträgen.",
+      "Der Datensatz ist leer. Sie können Datensätze mit dem Python SDK hinzufügen. Siehe <a href='https://docs.argilla.io/latest/how_to_guides/record/'>Dokumentation</a> zum Hinzufügen von Einträgen.",
     taskDistributionCompleted: "🎉 Die Aufgabe ist erledigt!",
     noSubmittedRecords: "Sie haben noch keinen Datensatz eingereicht",
-    noRecordsFound: "Sie haben keine {status}, die Ihrer Anfrage entsprechen",
+    noRecordsFound: "Sie haben keine {status} Datensätze, welche Ihrer Anfrage entsprechen",
     noRecords: "Sie haben keine {status} Datensätze",
     noPendingRecordsToAnnotate: "🎉 Die Aufgabe ist erledigt!",
     noDraftRecordsToReview:
-      "Sie haben keine Entwürfe von Aufzeichnungen zu prüfen",
+      "Sie haben keine Entwürfe zu prüfen",
   },
   breadcrumbs: {
-    home: "start",
-    datasetSettings: "einstellungen",
-    userSettings: "meine einstellungen",
+    home: "Start",
+    datasetSettings: "Einstellungen",
+    userSettings: "Meine Einstellungen",
   },
   datasets: {
     left: "übrig",
@@ -74,11 +82,11 @@ export default {
       lastName: "Nachname",
       workspaces: "Arbeitsbereiche",
     },
-    apiKey: "API key",
+    apiKey: "API-Key",
     apiKeyDescription:
-      "API key Token erlauben es die Datensätze über das Python SDK zu verwalten.",
+      "API-Keys erlauben es die Datensätze über das Python SDK zu verwalten.",
     theme: "Theme",
-    copyKey: "API key kopieren",
+    copyKey: "API-Key kopieren",
   },
   userAvatarTooltip: {
     settings: "Meine Einstellungen",
@@ -87,7 +95,7 @@ export default {
   },
   settings: {
     title: "Datensatz-Einstellungen",
-    datasetInfo: "Datensatz Information",
+    datasetInfo: "Datensatz-Informationen",
     seeYourDataset: "Gehe zum Datensatz",
     editFields: "Felder bearbeiten",
     editQuestions: "Fragen bearbeiten",
@@ -120,15 +128,15 @@ export default {
     },
   },
   to_submit_complete_required:
-    "Zum Absenden beantworten \nSie benötigte Fragen",
+    "Zum Absenden beantworten \nSie die benötigten Fragen",
   some_records_failed_to_annotate:
     "Einige Einträge konnten nicht annotiert werden",
   changes_no_submit: "Sie haben Ihre Änderungen nicht gespeichert",
   bulkAnnotation: {
     recordsSelected: "1 Eintrag ausgewählt | {count} Einträge ausgewählt",
     recordsViewSettings: "Anzahl der Einträge",
     fixedHeight: "Einträge zusammenklappen",
-    defaultHeight: "Einträge erweitern ",
+    defaultHeight: "Einträge erweitern",
     to_annotate_record_bulk_required: "Kein Eintrag ausgewählt",
     select_to_annotate: "Alles auswählen",
     pageSize: "Seitengröße",
@@ -141,7 +149,7 @@ export default {
     affectedAll: {
       submitted: "abgesendet",
       discarded: "verworfen",
-      draft: "Entwurf gespeichert",
+      draft: "als Entwurf gespeichert",
     },
   },
   shortcuts: {
@@ -153,7 +161,7 @@ export default {
   },
   questions_form: {
     validate: "Validieren",
-    clear: "Clear",
+    clear: "Löschen",
     reset: "Zurücksetzen",
     discard: "Verwerfen",
     submit: "Absenden",
@@ -168,12 +176,12 @@ export default {
     },
     response: "Antwortwert",
     record: "allgemein",
-    metadata: "metadaten",
+    metadata: "Metadaten",
   },
   suggestion: {
-    agent: "\nagent: {agent}",
-    score: "\nbewertung: {score}",
-    tooltip: "Diese Frage enthält einen Vorschlag{agent}{score}",
+    agent: "\nAgent: {agent}",
+    score: "\nBewertung: {score}",
+    tooltip: "Diese Frage enthält einen Vorschlag {agent} {score}",
     filter: {
       value: "Vorschlagswerte",
       score: "Bewertung",
@@ -184,7 +192,7 @@ export default {
   },
   similarity: {
     "record-number": "Eintrag-Nummer",
-    findSimilar: "Ähnliche finden",
+    findSimilar: "Ähnliche Einträge finden",
     similarTo: "Ähnlich zu",
     similarityScore: "Ähnlichkeitsbewertung",
     similarUsing: "ähnlich unter Verwendung von",
@@ -194,15 +202,16 @@ export default {
   spanAnnotation: {
     shortcutHelper: "Halten Sie 'Shift' gedrückt, um Zeichenebene auszuwählen",
     notSupported: "Bereichsannotation wird von Ihrem Browser nicht unterstützt",
+    searchLabels: "Label finden",
   },
   login: {
     title: "Anmelden",
     username: "Benutzername",
-    usernameDescription: "Gebe Sie ihren Benutzernamen ein",
+    usernameDescription: "Geben Sie Ihren Benutzernamen ein",
     password: "Passwort",
     show: "Anzeigen",
     hide: "Ausblenden",
-    passwordDescription: "Gebe Sie ihr Passwort ein",
+    passwordDescription: "Geben Sie ihr Passwort ein",
     claim: "Gemeinsames Arbeiten an Daten.</br>Verbessern Sie Ihre Modelle.",
     error: "Falscher Benutzername oder Passwort. Versuchen Sie es erneut",
     hf: {
@@ -217,6 +226,7 @@ export default {
   filterBy: "Filter nach...",
   fields: "Felder",
   questions: "Fragen",
+  general: "Übersicht",
   metadata: "Metadaten",
   vectors: "Vektoren",
   dangerZone: "Gefahrenzone",
@@ -235,7 +245,7 @@ export default {
   write: "Schreiben",
   preview: "Vorschau",
   datasetTable: {
-    name: "Dataset",
+    name: "Datensatz",
     workspace: "Arbeitsbereich",
     createdAt: "Erstellt am",
     lastActivityAt: "Aktualisiert am",
@@ -256,7 +266,7 @@ export default {
       },
       update_distribution_with_existing_responses: {
         message:
-          "Die Verteilungseinstellungen können für einen Datensatz mit Benutzerantworten nicht geändert werden",
+          "Die Verteilungseinstellungen können für einen Datensatz mit Benutzerantworten nicht geändert werden", //TODO
       },
     },
     http: {

argilla-frontend/translation/en.js

@@ -201,6 +201,7 @@ export default {
   spanAnnotation: {
     shortcutHelper: "Hold 'Shift' to select character level",
     notSupported: "Span annotation is not supported for your browser",
+    searchLabels: "Search labels",
   },
   login: {
     title: "Sign in",
@@ -223,6 +224,7 @@ export default {
   filterBy: "Filter by...",
   fields: "Fields",
   questions: "Questions",
+  general: "General",
   metadata: "Metadata",
   vectors: "Vectors",
   dangerZone: "Danger zone",