🔀 Task distribution UI/QA issues fixed (#5283)

- [x] When device is small, show “No record message” area reduced
(around 20px height?)
- [x] The % of completed is different from dataset list to dataset page
- [x] Maintain “GUIDELINES” title when the quadrant is open
- [x] Pending, Draft, Discard, Submit

Author: damianpumar

argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue

@@ -2,7 +2,7 @@
   <div
     class="panel"
     :class="[
-      isExpanded ? '--expanded' : '--collapsed',
+      !isExpanded ? '--collapsed' : undefined,
       hideOnDesktop ? '--mobile' : undefined,
     ]"
   >
@@ -63,6 +63,10 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
+      @include media("<desktop") {
+        height: $base-space * 3;
+      }
     }
 
     width: 100%;
@@ -95,6 +99,12 @@ export default {
   }
 }
 
+.--collapsed {
+  @include media("<desktop") {
+    max-height: 6vh;
+  }
+}
+
 .--mobile {
   @include media(">=desktop") {
     display: none !important;

argilla-frontend/components/base/base-resizable/VerticalResizable.vue

@@ -139,6 +139,7 @@ $resizable-bar-width: $base-space;
     height: 100%;
     margin-left: calc(-#{$resizable-bar-width} / 2);
     @include media("<desktop") {
+      align-items: flex-end;
       min-width: 100% !important;
       height: auto !important;
       margin-left: 0;

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

@@ -496,12 +496,13 @@ export default {
   }
   &--empty {
     width: 100%;
-    height: 100%;
+    height: 80vh;
     display: flex;
     align-items: center;
     justify-content: center;
-    @include media("<desktop") {
-      height: 80vh;
+    @include media("<=tablet") {
+      height: 100%;
+      text-align: center;
     }
   }
 }

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

@@ -36,10 +36,12 @@
             </div>
           </section>
         </template>
-
         <template #downHeader>
           <p v-text="$t('guidelines')" />
         </template>
+        <template #downHeaderExpanded>
+          <p v-text="$t('guidelines')" />
+        </template>
         <template #downContent>
           <AnnotationGuidelines />
         </template>
@@ -169,7 +171,7 @@ export default {
   &__right {
     @include media("<desktop") {
       overflow: visible;
-      height: auto !important;
+      height: 100% !important;
       max-height: none !important;
     }
   }
@@ -203,12 +205,13 @@ export default {
   }
   &--empty {
     width: 100%;
-    height: 100%;
+    height: 80vh;
     display: flex;
     align-items: center;
     justify-content: center;
-    @include media("<desktop") {
-      height: 80vh;
+    @include media("<=tablet") {
+      height: 100%;
+      text-align: center;
     }
   }
 }

argilla-frontend/components/features/annotation/header/StatusFilter.vue

@@ -51,16 +51,16 @@ export default {
           name: this.$t(`recordStatus.${RecordStatus.draft.name}`),
           color: RecordStatus.draft.color,
         },
-        {
-          id: RecordStatus.submitted.name,
-          name: this.$t(`recordStatus.${RecordStatus.submitted.name}`),
-          color: RecordStatus.submitted.color,
-        },
         {
           id: RecordStatus.discarded.name,
           name: this.$t(`recordStatus.${RecordStatus.discarded.name}`),
           color: RecordStatus.discarded.color,
         },
+        {
+          id: RecordStatus.submitted.name,
+          name: this.$t(`recordStatus.${RecordStatus.submitted.name}`),
+          color: RecordStatus.submitted.color,
+        },
       ],
     };
   },

argilla-frontend/components/features/annotation/progress/AnnotationProgressDetailed.vue

@@ -57,10 +57,10 @@ export default {
     progressItems() {
       return [
         {
-          name: RecordStatus.submitted.name,
-          color: RecordStatus.submitted.color,
-          value: this.metrics.submitted,
-          percent: this.metrics.percentage.submitted,
+          name: RecordStatus.pending.name,
+          color: RecordStatus.pending.color,
+          value: this.metrics.pending,
+          percent: this.metrics.percentage.pending,
         },
         {
           name: RecordStatus.draft.name,
@@ -75,10 +75,10 @@ export default {
           percent: this.metrics.percentage.discarded,
         },
         {
-          name: RecordStatus.pending.name,
-          color: RecordStatus.pending.color,
-          value: this.metrics.pending,
-          percent: this.metrics.percentage.pending,
+          name: RecordStatus.submitted.name,
+          color: RecordStatus.submitted.color,
+          value: this.metrics.submitted,
+          percent: this.metrics.percentage.submitted,
         },
       ];
     },

argilla-frontend/components/features/datasets/dataset-progress/useDatasetProgressViewModel.ts

@@ -2,7 +2,7 @@ import { useResolve } from "ts-injecty";
 import { onBeforeMount, ref } from "@nuxtjs/composition-api";
 import { GetDatasetProgressUseCase } from "@/v1/domain/usecases/get-dataset-progress-use-case";
 import { useTranslate } from "~/v1/infrastructure/services/useTranslate";
-import { useTeamProgress } from "~/v1/infrastructure/storage/TeamProgressStorage";
+import { Progress } from "~/v1/domain/entities/dataset/Progress";
 
 export const useDatasetProgressViewModel = ({
   datasetId,
@@ -11,28 +11,28 @@ export const useDatasetProgressViewModel = ({
 }) => {
   const t = useTranslate();
   const isLoaded = ref(false);
+  const progress = ref<Progress | null>(null);
   const progressRanges = ref([]);
 
-  const { state: progress } = useTeamProgress();
   const getProgressUseCase = useResolve(GetDatasetProgressUseCase);
 
   onBeforeMount(async () => {
-    await getProgressUseCase.execute(datasetId);
+    progress.value = await getProgressUseCase.execute(datasetId);
 
     progressRanges.value = [
       {
         id: "completed",
         name: t("datasets.completed"),
         color: "linear-gradient(90deg, #6A6A6C 0%, #252626 100%)",
-        value: progress.completed,
-        tooltip: `${progress.completed}/${progress.total}`,
+        value: progress.value.completed,
+        tooltip: `${progress.value.completed}/${progress.value.total}`,
       },
       {
         id: "pending",
         name: t("datasets.left"),
         color: "#e6e6e6",
-        value: progress.pending,
-        tooltip: `${progress.pending}/${progress.total}`,
+        value: progress.value.pending,
+        tooltip: `${progress.value.pending}/${progress.value.total}`,
       },
     ];