From f9d44eca04e1028dc94779d659afebc3b9d71d23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Pumar?= <damianpumar@gmail.com>
Date: Thu, 5 Dec 2024 11:08:32 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Show=20share=20button=20at=20least?=
 =?UTF-8?q?=201=20submitted=20and=20show=20rainbow=20every=2020=20submitte?=
 =?UTF-8?q?d?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/annotation/progress/AnnotationProgress.vue   | 5 +++--
 .../annotation/progress/share/useShareViewModel.ts        | 4 +++-
 .../annotation/progress/useAnnotationProgressViewModel.ts | 8 +++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
index c98944e181..31bde8e9f0 100644
--- a/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
+++ b/argilla-frontend/components/features/annotation/progress/AnnotationProgress.vue
@@ -23,9 +23,9 @@
       class="my-progress__status--skeleton"
     />
     <div v-else class="my-progress__share">
-      <Share />
+      <Share v-if="canSeeShare" />
       <StatusCounter
-        :rainbow="true"
+        :rainbow="shouldShowSubmittedAnimation"
         class="my-progress__status"
         :color="RecordStatus.submitted.color"
         :name="RecordStatus.submitted.name"
@@ -77,6 +77,7 @@ $statusCounterMinHeight: 30px;
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: end;
     gap: $base-space;
   }
 }
diff --git a/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts b/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts
index b2af8f13fa..ddfc20e93c 100644
--- a/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts
+++ b/argilla-frontend/components/features/annotation/progress/share/useShareViewModel.ts
@@ -26,7 +26,9 @@ export const useShareViewModel = () => {
 
     const url = new URL(`${window.location.origin}/share`);
     const params = new URLSearchParams("");
-    params.set("share_image_base64", btoa(createImageLink()));
+    params.set("user_name", user.value.userName);
+    params.set("records_submitted", metrics.submitted.toString());
+    params.set("team_progress", progress.percentage.completed.toString());
     params.set("dataset_name", dataset.name);
     params.set("dataset_id", dataset.id);
 
diff --git a/argilla-frontend/components/features/annotation/progress/useAnnotationProgressViewModel.ts b/argilla-frontend/components/features/annotation/progress/useAnnotationProgressViewModel.ts
index 3b5bb3d6a4..2925b4e82f 100644
--- a/argilla-frontend/components/features/annotation/progress/useAnnotationProgressViewModel.ts
+++ b/argilla-frontend/components/features/annotation/progress/useAnnotationProgressViewModel.ts
@@ -1,4 +1,4 @@
-import { onBeforeMount } from "vue-demi";
+import { computed, onBeforeMount } from "vue-demi";
 import {
   useEvents,
   UpdateMetricsEventHandler,
@@ -7,6 +7,10 @@ import { useMetrics } from "~/v1/infrastructure/storage/MetricsStorage";
 
 export const useAnnotationProgressViewModel = () => {
   const { state: metrics } = useMetrics();
+  const canSeeShare = computed(() => metrics.submitted > 0);
+  const shouldShowSubmittedAnimation = computed(
+    () => metrics.submitted % 20 === 0
+  );
 
   onBeforeMount(() => {
     useEvents(UpdateMetricsEventHandler);
@@ -14,5 +18,7 @@ export const useAnnotationProgressViewModel = () => {
 
   return {
     metrics,
+    canSeeShare,
+    shouldShowSubmittedAnimation,
   };
 };