Feat/improve export hover

argilla-frontend/CHANGELOG.md

@@ -18,6 +18,10 @@ These are the section headers that we use:
 
 ## [2.6.0](https://github.com/argilla-io/argilla/compare/v2.5.0...v2.6.0)
 
+### Added
+
+- 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/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/translation/de.js

@@ -338,8 +338,8 @@ export default {
       datasetNameIsRequired: "Datensatzname ist erforderlich ",
     },
     exporting: "Exportieren in den Umarmungsgesichtszentrum ",
-    private: "privater Datensatz",
-    public: "öffentlicher Datensatz",
+    private: "Privater Datensatz",
+    public: "Öffentlicher Datensatz",
     exportingWarning: "Das kann ein paar Sekunden dauern",
   },
   config: {

argilla-frontend/translation/en.js

@@ -337,8 +337,8 @@ export default {
       datasetNameIsRequired: "Dataset name is required",
     },
     exporting: "Exporting to Hugging Face hub",
-    private: "private dataset",
-    public: "public dataset",
+    private: "Private dataset",
+    public: "Public dataset",
     exportingWarning: "This might take a few seconds",
   },
   config: {

argilla-frontend/translation/es.js

@@ -342,8 +342,8 @@ export default {
       datasetNameIsRequired: "El nombre del dataset es requerido",
     },
     exporting: "Exportando al hub de Hugging Face",
-    private: "dataset privado",
-    public: "dataset público",
+    private: "Dataset privado",
+    public: "Dataset público",
     exportingWarning: "Esto puede tardar unos segundos",
   },
   config: {