✨ Add custom messages, WIP: Translations (#5403)

Co-authored-by: Leire <[email protected]>
Co-authored-by: Natalia Elvira <[email protected]>

Author: 3 people

.github/workflows/argilla-frontend.yml

@@ -23,18 +23,24 @@ jobs:
       - name: Checkout Code 🛎
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
+      - name: Setup Node.js ⚙️
         uses: actions/setup-node@v4
         with:
           node-version: 20
 
-      - name: Run tests
+      - name: Install dependencies 📦
         run: |
           npm install
+
+      - name: Run lint 🧹
+        run: |
           npm run lint
+
+      - name: Run tests 🧪
+        run: |
           npm run test
 
-      - name: Build package
+      - name: Build package 📦
         env:
           # BASE_URL is used in the server to support parameterizable base root path
           # See scripts/build_frontend.sh

argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue

@@ -10,7 +10,7 @@
     :dataset-vectors="datasetVectors"
     :records="records"
     :record="record"
-    :no-records-message="noRecordsMessage"
+    :records-message="recordsMessage"
     :status-class="statusClass"
     @on-submit-responses="goToNext"
     @on-discard-responses="goToNext"
@@ -21,7 +21,7 @@
     :dataset-vectors="datasetVectors"
     :records="records"
     :record="record"
-    :no-records-message="noRecordsMessage"
+    :records-message="recordsMessage"
     :status-class="statusClass"
     @on-submit-responses="goToNext"
     @on-discard-responses="goToNext"
@@ -48,17 +48,6 @@ export default {
     record() {
       return this.records.getRecordOn(this.recordCriteria.committed.page);
     },
-    noMoreDataMessage() {
-      return `You've reached the end of the data for the ${this.recordCriteria.committed.status} queue.`;
-    },
-    noRecordsMessage() {
-      const { status } = this.recordCriteria.committed;
-
-      if (this.recordCriteria.isFilteredByText)
-        return `You have no ${status} records matching the search input`;
-
-      return `You have no ${status} records`;
-    },
     statusClass() {
       return `--${this.record?.status}`;
     },
@@ -86,17 +75,7 @@ export default {
 
       this.fetching = true;
 
-      const isNextRecordExist = await this.paginateRecords(this.recordCriteria);
-
-      if (!isNextRecordExist) {
-        setTimeout(() => {
-          this.$notification.notify({
-            message: this.noMoreDataMessage,
-            numberOfChars: this.noMoreDataMessage.length,
-            type: "info",
-          });
-        }, 100);
-      }
+      await this.paginateRecords(this.recordCriteria);
 
       this.fetching = false;
     },

argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue

@@ -29,24 +29,24 @@ export default {
       switch (this.record.status) {
         case "pending":
           return {
-            name: this.$t("recordStatus.pending"),
+            name: this.$tc("recordStatus.pending", 1),
             class: "--pending",
           };
         case "draft":
           return {
-            name: this.$t("recordStatus.draft"),
+            name: this.$tc("recordStatus.draft", 1),
             class: "--draft",
           };
 
         case "discarded":
           return {
-            name: this.$t("recordStatus.discarded"),
+            name: this.$tc("recordStatus.discarded", 1),
             class: "--discarded",
           };
 
         case "submitted":
           return {
-            name: this.$t("recordStatus.submitted"),
+            name: this.$tc("recordStatus.submitted", 1),
             class: "--submitted",
           };
       }
@@ -64,6 +64,7 @@ export default {
   border-radius: $border-radius-rounded;
 }
 .status-tag {
+  text-transform: capitalize;
   display: flex;
   align-items: center;
   gap: $base-space;

argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue

@@ -86,11 +86,10 @@
                 />
                 <PaginationFeedbackTask :recordCriteria="recordCriteria" />
               </div>
-              <div
-                ref="bulkScrollableArea"
-                class="bulk__records snap"
-                v-if="records.hasRecordsToAnnotate"
-              >
+              <div v-if="recordsMessage" class="wrapper--empty">
+                <p class="wrapper__text --heading3" v-html="recordsMessage" />
+              </div>
+              <div ref="bulkScrollableArea" class="bulk__records snap" v-else>
                 <Record
                   class="snap-child"
                   :class="{
@@ -106,9 +105,6 @@
                   @on-select-record="onSelectRecord"
                 />
               </div>
-              <div v-else class="wrapper--empty">
-                <p class="wrapper__text --heading3" v-text="noRecordsMessage" />
-              </div>
             </section>
           </template>
           <template #downHeader>
@@ -220,9 +216,8 @@ export default {
     record: {
       type: Object,
     },
-    noRecordsMessage: {
+    recordsMessage: {
       type: String,
-      required: true,
     },
     statusClass: {
       type: String,
@@ -493,9 +488,11 @@ export default {
   }
   &__text {
     color: $black-54;
+    max-width: 80%;
   }
   &--empty {
     width: 100%;
+    text-align: center;
     height: 80vh;
     display: flex;
     align-items: center;

argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue

@@ -25,15 +25,15 @@
             <div class="wrapper__records__header">
               <PaginationFeedbackTask :recordCriteria="recordCriteria" />
             </div>
+            <div v-if="recordsMessage" class="wrapper--empty">
+              <p class="wrapper__text --heading3" v-html="recordsMessage" />
+            </div>
             <Record
-              v-if="records.hasRecordsToAnnotate"
+              v-else
               :datasetVectors="datasetVectors"
               :recordCriteria="recordCriteria"
               :record="record"
             />
-            <div v-else class="wrapper--empty">
-              <p class="wrapper__text --heading3" v-text="noRecordsMessage" />
-            </div>
           </section>
         </template>
         <template #downHeader>
@@ -119,9 +119,8 @@ export default {
     record: {
       type: Object,
     },
-    noRecordsMessage: {
+    recordsMessage: {
       type: String,
-      required: true,
     },
     statusClass: {
       type: String,
@@ -202,9 +201,11 @@ export default {
   }
   &__text {
     color: $black-54;
+    max-width: 80%;
   }
   &--empty {
     width: 100%;
+    text-align: center;
     height: 80vh;
     display: flex;
     align-items: center;

argilla-frontend/components/features/annotation/container/mode/useBulkAnnotationViewModel.ts

@@ -25,7 +25,7 @@ export const useBulkAnnotationViewModel = ({
   const isSubmitting = ref(false);
   const bulkAnnotationUseCase = useResolve(BulkAnnotationUseCase);
 
-  const t = useTranslate();
+  const { t } = useTranslate();
 
   const checkIfSomeFilterIsActive = (criteria: RecordCriteria) => {
     return (

argilla-frontend/components/features/annotation/container/useRecordFeedbackTaskViewModel.ts

@@ -1,5 +1,6 @@
 import { useResolve } from "ts-injecty";
 import { ref, onBeforeMount } from "vue-demi";
+import { useRecordMessages } from "./useRecordsMessages";
 import { LoadRecordsToAnnotateUseCase } from "@/v1/domain/usecases/load-records-to-annotate-use-case";
 import { useRecords } from "@/v1/infrastructure/storage/RecordsStorage";
 import { RecordCriteria } from "@/v1/domain/entities/record/RecordCriteria";
@@ -11,6 +12,11 @@ export const useRecordFeedbackTaskViewModel = ({
 }: {
   recordCriteria: RecordCriteria;
 }) => {
+  const { getMessagesForLoading, getMessageForPagination } =
+    useRecordMessages(recordCriteria);
+
+  const recordsMessage = ref<string | null>(null);
+
   const getDatasetVectorsUseCase = useResolve(GetDatasetVectorsUseCase);
   const loadRecordsUseCase = useResolve(LoadRecordsToAnnotateUseCase);
 
@@ -19,22 +25,22 @@ export const useRecordFeedbackTaskViewModel = ({
 
   const loadRecords = async (criteria: RecordCriteria) => {
     try {
-      await loadRecordsUseCase.load(criteria);
+      const newRecords = await loadRecordsUseCase.load(criteria);
+
+      recordsMessage.value = getMessagesForLoading(newRecords);
     } catch (err) {
       criteria.reset();
     }
   };
 
   const paginateRecords = async (criteria: RecordCriteria) => {
-    let isNextRecordExist = false;
-
     try {
-      isNextRecordExist = await loadRecordsUseCase.paginate(criteria);
+      const isNextRecordExist = await loadRecordsUseCase.paginate(criteria);
+
+      recordsMessage.value = getMessageForPagination(isNextRecordExist);
     } catch (err) {
       criteria.reset();
     }
-
-    return isNextRecordExist;
   };
 
   const loadVectors = async () => {
@@ -52,5 +58,6 @@ export const useRecordFeedbackTaskViewModel = ({
     datasetVectors,
     loadRecords,
     paginateRecords,
+    recordsMessage,
   };
 };