Merge branch 'main' into develop

Author: jfcalvo

argilla-frontend/CHANGELOG.md

@@ -16,6 +16,13 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+## [2.6.0](https://github.com/argilla-io/argilla/compare/v2.5.0...v2.6.0)
+
+### Added
+
+- Add share progress feature ([#5727](https://github.com/argilla-io/argilla/pull/5727))
+- Added feature to export datasets from Argilla to Hugging Face hub from the UI ([#5730](https://github.com/argilla-io/argilla/pull/5730))
+
 ### Fixed
 
 - Improved performance and accessibility ([#5724](https://github.com/argilla-io/argilla/pull/5724))

argilla-frontend/components/base/base-button/BaseButton.vue

@@ -25,6 +25,8 @@
     :target="target"
     :rel="newRel"
     @click="onClick"
+    @mouseover="$emit('mouseover')"
+    @mouseleave="$emit('mouseleave')"
   >
     <slot />
   </a>
@@ -36,6 +38,8 @@
     :loading="loading"
     :disabled="disabled"
     @click="onClick"
+    @mouseover="$emit('mouseover')"
+    @mouseleave="$emit('mouseleave')"
   >
     <slot />
   </nuxt-link>
@@ -48,6 +52,8 @@
     :type="type"
     :disabled="disabled"
     @click="onClick"
+    @mouseover="$emit('mouseover')"
+    @mouseleave="$emit('mouseleave')"
   >
     <BaseSpinner
       class="spinner"

argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue

@@ -3,6 +3,8 @@
     <BaseButton
       class="primary export-to-hub__button"
       @mousedown.native.prevent="openDialog"
+      @mouseenter.native="openDialogOnHover"
+      @mouseleave.native="closeDialogOnLeave"
       :loading="isExporting"
       :disabled="isExporting"
     >
@@ -13,7 +15,7 @@
     </BaseButton>
     <transition name="fade" appear>
       <dialog
-        v-if="isDialogOpen"
+        v-if="isDialogVisible"
         v-click-outside="{
           events: ['mousedown'],
           handler: closeDialog,
@@ -26,23 +28,24 @@
             class="export-to-hub__title"
             v-text="$t('exportToHub.exporting')"
           />
-          <p>
-            <span
-              class="export-to-hub__exporting-message__warning"
-              v-text="$t('exportToHub.exportingWarning')"
-            />
-            {{ exportToHubForm.orgOrUsername }}/{{
-              exportToHubForm.datasetName
-            }}
-            <span
-              class="export-to-hub__exporting-message__private"
-              v-text="
-                exportToHubForm.isPrivate
-                  ? $t('exportToHub.private')
-                  : $t('exportToHub.public')
-              "
-            />
-          </p>
+          <p
+            class="export-to-hub__exporting-message__warning"
+            v-text="$t('exportToHub.exportingWarning')"
+          />
+          <p
+            class="export-to-hub__exporting-message__name"
+            v-text="
+              `${exportToHubForm.orgOrUsername}/${exportToHubForm.datasetName}`
+            "
+          />
+          <p
+            class="export-to-hub__exporting-message__private"
+            v-text="
+              exportToHubForm.isPrivate
+                ? $t('exportToHub.private')
+                : $t('exportToHub.public')
+            "
+          />
         </div>
         <form v-else @submit.prevent="exportToHub" class="export-to-hub__form">
           <h2
@@ -205,14 +208,16 @@ export default {
     @include font-size(14px);
     margin: 0;
     &__private {
-      display: block;
-      text-transform: uppercase;
-      @include font-size(12px);
+      margin: 0;
+      @include font-size(13px);
+    }
+    &__name {
+      margin: 0;
+      font-weight: 500;
     }
     &__warning {
-      display: block;
+      margin-top: 0;
       color: var(--fg-tertiary);
-      @include font-size(14px);
     }
   }
 
@@ -258,6 +263,9 @@ export default {
       &:hover {
         background: hsl(0, 1%, 22%);
       }
+      &[disabled] {
+        pointer-events: auto !important;
+      }
     }
     &__icon {
       @include media(">tablet") {

argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts

@@ -1,5 +1,5 @@
 import { useResolve } from "ts-injecty";
-import { onBeforeMount, ref, computed } from "vue";
+import { onBeforeMount, ref, computed, watch } from "vue";
 import { Dataset } from "~/v1/domain/entities/dataset/Dataset";
 import { ExportDatasetToHubUseCase } from "~/v1/domain/usecases/export-dataset-to-hub-use-case";
 import { JobRepository } from "~/v1/infrastructure/repositories";
@@ -20,6 +20,7 @@ export const useExportToHubViewModel = (props: ExportToHubProps) => {
   const { get, set } = useLocalStorage();
 
   const isDialogOpen = ref(false);
+  const isDialogHovered = ref(false);
   const errors = ref({
     orgOrUsername: [],
     datasetName: [],
@@ -162,16 +163,41 @@ export const useExportToHubViewModel = (props: ExportToHubProps) => {
 
   const closeDialog = () => {
     isDialogOpen.value = false;
+    isDialogHovered.value = false;
   };
 
+  const openDialogOnHover = () => {
+    if (isExporting.value) {
+      isDialogHovered.value = true;
+    }
+  };
+
+  const closeDialogOnLeave = () => {
+    if (isExporting.value && !isDialogOpen.value) {
+      isDialogHovered.value = false;
+    }
+  };
+
+  const isDialogVisible = computed(
+    () => isDialogOpen.value || isDialogHovered.value
+  );
+
+  watch(isExporting, (newValue) => {
+    if (!newValue) {
+      closeDialog();
+    }
+  });
+
   onBeforeMount(() => {
     watchExportStatus();
   });
 
   return {
-    isDialogOpen,
+    isDialogVisible,
     closeDialog,
     openDialog,
+    openDialogOnHover,
+    closeDialogOnLeave,
     isExporting,
     exportToHub,
     exportToHubForm,

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

@@ -22,16 +22,19 @@
       v-if="!metrics.hasMetrics"
       class="my-progress__status--skeleton"
     />
-    <StatusCounter
-      v-else
-      class="my-progress__status"
-      :color="RecordStatus.submitted.color"
-      :name="RecordStatus.submitted.name"
-      :value="metrics.submitted"
-    />
+    <div v-else class="my-progress__share">
+      <Share v-if="canSeeShare" />
+      <StatusCounter
+        :ghost="true"
+        :rainbow="shouldShowSubmittedAnimation"
+        class="my-progress__status"
+        :color="RecordStatus.submitted.color"
+        :name="RecordStatus.submitted.name"
+        :value="metrics.submitted"
+      />
+    </div>
   </div>
 </template>
-
 <script>
 import { RecordStatus } from "~/v1/domain/entities/record/RecordStatus";
 import { useAnnotationProgressViewModel } from "./useAnnotationProgressViewModel";
@@ -71,5 +74,12 @@ $statusCounterMinHeight: 30px;
       min-height: $statusCounterMinHeight;
     }
   }
+  &__share {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: $base-space;
+  }
 }
 </style>

argilla-frontend/components/features/annotation/progress/share/Share.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="share" @click.stop="copyOnClipboard">
+    <BaseActionTooltip :tooltip="$t('copiedToClipboard')">
+      <BaseButton
+        class="share__button"
+        :title="$t('button.tooltip.copyToClipboard')"
+        @mouseover="openDialog"
+        @mouseleave="closeDialog"
+      >
+        <svgicon class="share__icon" name="link" width="14" height="14" />
+        {{ $t("share") }}
+      </BaseButton>
+    </BaseActionTooltip>
+    <transition name="fade" appear>
+      <dialog
+        v-if="isDialogOpen"
+        class="share__dialog"
+        v-click-outside="closeDialog"
+      >
+        <div class="share__dialog--container">
+          <BaseSpinner v-if="!sharingImage.loaded" :size="20" />
+          <img v-else :src="sharingImage.src" />
+        </div>
+      </dialog>
+    </transition>
+  </div>
+</template>
+<script>
+import { useShareViewModel } from "./useShareViewModel";
+
+export default {
+  setup() {
+    return useShareViewModel();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$bullet-size: 8px;
+.share {
+  z-index: 2;
+  margin-left: auto;
+  margin-right: 0;
+
+  &__dialog {
+    position: absolute;
+    right: 1em;
+    left: auto;
+    width: auto;
+    height: 204px;
+    min-width: 360px;
+    max-width: 360px;
+    bottom: calc(100% + $base-space + 2px);
+    display: block;
+    padding: $base-space * 2;
+    border: 1px solid var(--bg-opacity-10);
+    border-radius: $border-radius-m;
+    box-shadow: $shadow;
+    z-index: 2;
+
+    &--container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+  }
+
+  &__button {
+    @include font-size(12px);
+    height: 24px;
+    padding: $base-space;
+    background: var(--bg-opacity-3);
+    border-radius: $border-radius;
+  }
+
+  &__icon {
+    padding: 0;
+    flex-shrink: 0;
+  }
+}
+</style>