From 0924864bf4390c5f19fa5fd8003c8fcf1bfff043 Mon Sep 17 00:00:00 2001
From: Leire <leire@argilla.io>
Date: Fri, 13 Dec 2024 09:55:47 +0100
Subject: [PATCH] feat: export to hub UI QA (#5747)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This includes some fixes and improvements in the export to hub feature
UI

- [x] Fix private / public info on exporting
- [x] Prevent the dialog from closing when dragging on text inputs
- [x] Update exporting dialog styles
- [x] New Tooltip plugin
- [x] Update translations

---------

Co-authored-by: Damián Pumar <damianpumar@gmail.com>
---
 argilla-frontend/assets/icons/export.js       |  27 ++
 argilla-frontend/assets/icons/index.js        |   1 +
 .../scss/abstract/placeholders/_tooltip.scss  |   4 +
 argilla-frontend/assets/scss/base/base.scss   |   2 +-
 .../base/base-tooltip/BaseFixedTooltip.vue    | 189 ++++++++++
 .../header/header-bar/ExportToHub.vue         | 104 ++++--
 .../header-bar/useExportToHubViewModel.ts     |   4 +-
 .../plugins/directives/tooltip.directive.ts   | 339 +-----------------
 argilla-frontend/static/icons/export.svg      |   4 +
 argilla-frontend/translation/de.js            |  21 +-
 argilla-frontend/translation/en.js            |  13 +-
 argilla-frontend/translation/es.js            |  12 +-
 12 files changed, 345 insertions(+), 375 deletions(-)
 create mode 100644 argilla-frontend/assets/icons/export.js
 create mode 100644 argilla-frontend/components/base/base-tooltip/BaseFixedTooltip.vue
 create mode 100644 argilla-frontend/static/icons/export.svg

diff --git a/argilla-frontend/assets/icons/export.js b/argilla-frontend/assets/icons/export.js
new file mode 100644
index 0000000000..236f247c5f
--- /dev/null
+++ b/argilla-frontend/assets/icons/export.js
@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'export': {
+    width: 26,
+    height: 31,
+    viewBox: '0 0 26 31',
+    data: '<path pid="0" d="M19.852 7.734L17.92 9.666l-3.463-3.463V22.86h-2.732V6.203L8.262 9.666 6.33 7.734l6.761-6.76 6.76 6.76z" _fill="#000" fill-opacity=".87"/><path pid="1" d="M3.53 28.242V14.583h5.463v-2.732H.798v19.123h24.586V11.85h-8.195v2.732h5.463v13.659H3.53z" _fill="#000" fill-opacity=".87"/>'
+  }
+})
\ No newline at end of file
diff --git a/argilla-frontend/assets/icons/index.js b/argilla-frontend/assets/icons/index.js
index 53de88bc02..36e92d0233 100644
--- a/argilla-frontend/assets/icons/index.js
+++ b/argilla-frontend/assets/icons/index.js
@@ -19,6 +19,7 @@ require('./discard')
 require('./draggable')
 require('./expand-arrows')
 require('./exploration')
+require('./export')
 require('./external-link')
 require('./external')
 require('./filter')
diff --git a/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss b/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss
index c7ffeb54d2..aeff1d1889 100644
--- a/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss
+++ b/argilla-frontend/assets/scss/abstract/placeholders/_tooltip.scss
@@ -177,6 +177,10 @@ $tooltip-border-radius: $border-radius-s;
       top: auto;
       transform: none;
     }
+  } @else if $position == "none" {
+    &:after {
+      display: none;
+    }
   }
   &:before {
     content: none !important;
diff --git a/argilla-frontend/assets/scss/base/base.scss b/argilla-frontend/assets/scss/base/base.scss
index 6a5f1f1f96..383ad3cee4 100644
--- a/argilla-frontend/assets/scss/base/base.scss
+++ b/argilla-frontend/assets/scss/base/base.scss
@@ -54,7 +54,7 @@ body {
 
 a,
 button {
-  color: var(--fg-secondary);
+  color: var(--fg-primary);
 }
 
 audio,
diff --git a/argilla-frontend/components/base/base-tooltip/BaseFixedTooltip.vue b/argilla-frontend/components/base/base-tooltip/BaseFixedTooltip.vue
new file mode 100644
index 0000000000..f7cfe6c82b
--- /dev/null
+++ b/argilla-frontend/components/base/base-tooltip/BaseFixedTooltip.vue
@@ -0,0 +1,189 @@
+<template>
+  <div
+    v-if="isVisible"
+    class="fixed-tooltip"
+    ref="tooltip"
+    v-click-outside="closeTooltip"
+    :style="{ top: `${top}px`, left: `${left}px` }"
+  >
+    <div class="fixed-tooltip__content" :class="isSmallTooltip">
+      <span v-html="content" />
+      <BaseButton
+        @click.native.stop="closeTooltip"
+        class="fixed-tooltip__button"
+      >
+        <svgicon name="close" width="12" />
+      </BaseButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import "assets/icons/close";
+export default {
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    triggerElement: {
+      type: HTMLButtonElement,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      top: 0,
+      left: 0,
+      isVisible: false,
+    };
+  },
+  computed: {
+    isSmallTooltip() {
+      return this.content.length < 40 ? "--small" : null;
+    },
+  },
+  methods: {
+    getScrollableParent(element) {
+      if (!element) {
+        return undefined;
+      }
+
+      let parent = element.parentElement;
+      while (parent) {
+        const { overflow } = window.getComputedStyle(parent);
+        if (overflow.split(" ").every((o) => o === "auto" || o === "scroll")) {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+
+      return document.documentElement;
+    },
+    scrollInParent() {
+      const { top: parentOffsetTop = 0, bottom: parentOffsetBottom = 0 } =
+        this.getScrollableParent(this.triggerElement).getBoundingClientRect() ||
+        {};
+      const { top: elementOffsetTop = 0, bottom: elementOffsetBottom = 0 } =
+        this.triggerElement.getBoundingClientRect() || {};
+      if (this.$refs.tooltip) {
+        if (
+          elementOffsetTop < parentOffsetTop ||
+          elementOffsetBottom > parentOffsetBottom
+        ) {
+          this.$refs.tooltip.style.visibility = "hidden";
+        } else {
+          this.$refs.tooltip.style.visibility = "visible";
+        }
+        this.updatePosition();
+      }
+    },
+    updatePosition() {
+      this.$nextTick(() => {
+        const tooltipWidth = this.$refs.tooltip?.offsetWidth;
+        if (!tooltipWidth) {
+          return;
+        }
+        const rect = this.triggerElement.getBoundingClientRect();
+        this.top =
+          rect.top + window.scrollY + this.triggerElement.offsetHeight + 10;
+        this.left =
+          rect.left + window.scrollX - tooltipWidth / 2 + rect.width / 2;
+      });
+    },
+    toggleTooltip() {
+      this.isVisible = !this.isVisible;
+      this.updatePosition();
+    },
+    closeTooltip() {
+      if (this.isVisible) {
+        this.isVisible = false;
+      }
+    },
+  },
+  mounted() {
+    this.isVisible = this.open;
+    this.$nextTick(() => {
+      this.getScrollableParent(this.triggerElement).addEventListener(
+        "scroll",
+        this.scrollInParent
+      );
+      window.addEventListener("resize", this.updatePosition);
+      this.triggerElement.addEventListener("click", this.toggleTooltip);
+      this.updatePosition();
+    });
+  },
+  beforeDestroy() {
+    this.getScrollableParent(this.triggerElement).removeEventListener(
+      "scroll",
+      this.scrollInParent
+    );
+    window.removeEventListener("resize", this.updatePosition);
+    this.triggerElement.removeEventListener("click", this.toggleTooltip);
+  },
+};
+</script>
+
+<style scoped lang="scss">
+$tooltip-triangle-size: 10px;
+$tooltip-bg: var(--bg-tooltip);
+$tooltip-color: var(--color-white);
+$tooltip-border-radius: $border-radius-s;
+$tooltip-max-width: 400px;
+$tooltip-small-max-width: 100px;
+
+.fixed-tooltip {
+  position: fixed;
+  z-index: 3;
+  &__content {
+    position: relative;
+    width: 100%;
+    max-width: $tooltip-max-width;
+    background-color: $tooltip-bg;
+    color: $tooltip-color;
+    padding: $base-space $base-space * 3 $base-space $base-space;
+    border-radius: $tooltip-border-radius;
+    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
+    text-align: left;
+    font-weight: 300;
+    white-space: pre-wrap;
+    overflow: auto;
+    max-height: 360px;
+    @include line-height(18px);
+    @include font-size(13px);
+    cursor: default;
+    &.--small {
+      max-width: $tooltip-small-max-width;
+    }
+    :deep(a) {
+      outline: none;
+      color: $tooltip-color;
+    }
+  }
+  &__button {
+    position: absolute;
+    top: calc($base-space / 2);
+    right: calc($base-space / 2);
+    background: transparent;
+    padding: 0;
+    color: $tooltip-color;
+    cursor: pointer;
+  }
+  &:before {
+    position: absolute;
+    left: calc(50% - $tooltip-triangle-size);
+    transform: translateY(-50%);
+    bottom: calc(100% - $tooltip-triangle-size / 2);
+    @include triangle(
+      top,
+      $tooltip-triangle-size,
+      $tooltip-triangle-size,
+      $tooltip-bg
+    );
+  }
+}
+</style>
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue b/argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue
index 61683a57c1..1308838b06 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue
+++ b/argilla-frontend/components/features/annotation/header/header-bar/ExportToHub.vue
@@ -2,27 +2,52 @@
   <div class="export-to-hub" @keydown.stop="">
     <BaseButton
       class="primary export-to-hub__button"
-      @click.prevent="openDialog"
+      @mousedown.native.prevent="openDialog"
       :loading="isExporting"
       :disabled="isExporting"
-      >{{ $t("button.exportToHub") }}</BaseButton
     >
+      <svgicon class="export-to-hub__button__icon" name="export" />
+      <span class="export-to-hub__button__text">{{
+        $t("button.exportToHub")
+      }}</span>
+    </BaseButton>
     <transition name="fade" appear>
       <dialog
         v-if="isDialogOpen"
-        v-click-outside="closeDialog"
+        v-click-outside="{
+          events: ['mousedown'],
+          handler: closeDialog,
+          middleware: closeMiddleware,
+        }"
         class="export-to-hub__dialog"
-        :class="{ '--small': isExporting }"
       >
-        <p v-if="isExporting" class="export-to-hub__exporting-message">
-          <em v-text="$t('exportToHub.exporting')" />
-          {{ exportToHubForm.orgOrUsername }}/{{ exportToHubForm.datasetName }}
-          <span>{{ !exportToHub.isPrivate ? "(private)" : "" }}</span>
-        </p>
+        <div v-if="isExporting" class="export-to-hub__exporting-message">
+          <h2
+            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>
+        </div>
         <form v-else @submit.prevent="exportToHub" class="export-to-hub__form">
           <h2
             class="export-to-hub__title"
-            v-text="$t('exportToHub.dislogTitle')"
+            v-text="$t('exportToHub.dialogTitle')"
           />
 
           <div class="export-to-hub__form__dataset">
@@ -34,9 +59,7 @@
                   icon="info"
                   icon-color="var(--fg-tertiary)"
                   v-tooltip="{
-                    backgroundColor: 'var(--bg-accent-grey-5)',
                     content: $t('exportToHub.ownerTooltip'),
-                    width: 300,
                   }"
                   role="tooltip"
                   :aria-label="$t('exportToHub.ownerTooltip')"
@@ -53,9 +76,11 @@
                 aria-required="true"
               />
             </div>
-            <span aria-hidden="true" class="export-to-hub__form__separator"
-              >/</span
-            >
+            <span
+              aria-hidden="true"
+              class="export-to-hub__form__separator"
+              v-text="'/'"
+            />
             <div class="export-to-hub__form__group">
               <label for="datasetName">Dataset name</label>
               <input
@@ -79,9 +104,7 @@
                 icon="info"
                 icon-color="var(--fg-tertiary)"
                 v-tooltip="{
-                  backgroundColor: 'var(--bg-accent-grey-5)',
                   content: $t('exportToHub.tokenTooltip'),
-                  width: 200,
                 }"
                 role="tooltip"
                 :aria-label="$t('exportToHub.tokenTooltip')"
@@ -129,6 +152,7 @@
 
 <script>
 import { useExportToHubViewModel } from "./useExportToHubViewModel";
+import "assets/icons/export";
 
 export default {
   props: {
@@ -137,6 +161,14 @@ export default {
       required: true,
     },
   },
+  methods: {
+    closeMiddleware(e) {
+      if (e.target.closest(".fixed-tooltip")) {
+        return false;
+      }
+      return true;
+    },
+  },
   setup(props) {
     return useExportToHubViewModel(props);
   },
@@ -168,21 +200,19 @@ export default {
     border-radius: $border-radius-m;
     box-shadow: $shadow;
     z-index: 2;
-    &.--small {
-      min-width: 200px;
-    }
   }
   &__exporting-message {
     @include font-size(14px);
     margin: 0;
-    em {
+    &__private {
       display: block;
-      font-weight: 200;
-      color: var(--fg-secondary);
+      text-transform: uppercase;
+      @include font-size(12px);
     }
-    span {
+    &__warning {
       display: block;
-      color: var(--fg-secondary);
+      color: var(--fg-tertiary);
+      @include font-size(14px);
     }
   }
 
@@ -219,10 +249,25 @@ export default {
     }
   }
 
-  &__button.button {
-    background: hsl(0, 1%, 18%);
-    &:hover {
-      background: hsl(0, 1%, 22%);
+  &__button {
+    &.button {
+      background: hsl(0, 1%, 18%);
+      @include media("<=tablet") {
+        padding: $base-space * 1.45;
+      }
+      &:hover {
+        background: hsl(0, 1%, 22%);
+      }
+    }
+    &__icon {
+      @include media(">tablet") {
+        display: none;
+      }
+    }
+    &__text {
+      @include media("<=tablet") {
+        display: none;
+      }
     }
   }
 
@@ -244,6 +289,7 @@ export default {
     height: 24px;
     padding: 16px;
     background: var(--bg-accent-grey-2);
+    box-shadow: 0 0 0px 1000px var(--bg-accent-grey-2) inset;
     color: var(--fg-primary);
     border: 1px solid var(--bg-opacity-20);
     border-radius: $border-radius;
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts b/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts
index 835cddd44d..98917787bd 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts
+++ b/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts
@@ -7,7 +7,6 @@ import {
   useDebounce,
   useLocalStorage,
   useNotifications,
-  useUser,
 } from "~/v1/infrastructure/services";
 
 interface ExportToHubProps {
@@ -16,7 +15,6 @@ interface ExportToHubProps {
 
 export const useExportToHubViewModel = (props: ExportToHubProps) => {
   const { dataset } = props;
-  const { user } = useUser();
   const notify = useNotifications();
   const debounce = useDebounce(3000);
   const { get, set } = useLocalStorage();
@@ -153,7 +151,7 @@ export const useExportToHubViewModel = (props: ExportToHubProps) => {
 
   const openDialog = () => {
     exportToHubForm.value = {
-      orgOrUsername: user.value.userName,
+      orgOrUsername: "",
       datasetName: dataset.name,
       hfToken: "",
       isPrivate: false,
diff --git a/argilla-frontend/plugins/directives/tooltip.directive.ts b/argilla-frontend/plugins/directives/tooltip.directive.ts
index d2a269e480..cbcd0c5f7a 100644
--- a/argilla-frontend/plugins/directives/tooltip.directive.ts
+++ b/argilla-frontend/plugins/directives/tooltip.directive.ts
@@ -1,327 +1,22 @@
-/* eslint-disable */
 import Vue from "vue";
-
-type Element = HTMLElement & {
-  textWrapper: HTMLElement;
-  openTooltip: () => void;
-  closeTooltip: () => void;
-  clickOnTooltipElementEvent: () => void;
-  clickOnClose: (event: Event) => void;
-  clickOutsideEvent: (event: Event) => void;
-  scrollInParent: () => void;
-  resize: () => void;
-};
-
-// NOTE - to use tooltip directive, add to your html element where to put a tooltip :
-//  v-tooltip="{ content: tooltipMessage, tooltipPosition: 'bottom' }"
-//    => content (String) the message to show in the tooltip
-// TODO - implement the other tooltip direction top/right/left
+import BaseFixedTooltip from "@/components/base/base-tooltip/BaseFixedTooltip.vue";
 
 Vue.directive("tooltip", {
-  inserted: (
-    element: Element,
-    binding: {
-      value: {
-        open: any;
-        content: string;
-        backgroundColor: string;
-        color: string;
-        width: number;
-        tooltipPosition: string;
-      };
-    }
-  ) => {
-    const tooltipId = `${element.id}tooltip`;
-    const tooltipCloseIconId = `${tooltipId}__close-icon`;
-    let tooltip = null;
-    let closeIcon = null;
-    element.style.position = "relative";
-    element.style.cursor = "pointer";
-    let elementOffset = initElementOffset(element);
-    const {
-      content,
-      backgroundColor,
-      color,
-      width = content.length < 40 ? 100 : 400,
-      tooltipPosition = TOOLTIP_DIRECTION.BOTTOM,
-    } = binding.value;
-
-    if (content?.length) {
-      // NOTE - init tooltip node
-      tooltip = document.createElement("div");
-      tooltip.setAttribute("id", tooltipId);
-
-      // NOTE - init text node
-      let textWrapper = document.createElement("span");
-      textWrapper.innerHTML = content;
-
-      // NOTE - init close icon
-      let tooltipHeader = document.createElement("div");
-      tooltipHeader = initTooltipHeaderStyle(tooltipHeader);
-      (tooltipHeader.firstChild as HTMLElement).setAttribute(
-        "id",
-        tooltipCloseIconId
-      );
-
-      // NOTE - triangle
-      let tooltipTriangle = document.createElement("div");
-      tooltipTriangle = initTooltipTriangleStyle(tooltipTriangle);
-      let tooltipTriangleInner = document.createElement("div");
-      tooltipTriangleInner = initTooltipTriangleInnerStyle(
-        tooltipTriangleInner,
-        backgroundColor
-      );
-
-      // NOTE - include close icon and text node inside tooltip
-      tooltip.appendChild(tooltipHeader);
-      tooltip.appendChild(tooltipTriangle);
-      tooltip.appendChild(textWrapper);
-      tooltipTriangle.appendChild(tooltipTriangleInner);
-
-      // NOTE - text styles
-      textWrapper = initTextStyle(textWrapper);
-
-      // NOTE - tooltip styles
-      tooltip = initTooltipStyle(tooltip, width, backgroundColor);
-
-      // NOTE - init tooltip position
-      tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset);
-
-      // NOTE - add the tooltip to the element and add event listener to the close icon
-      element.appendChild(tooltip);
-      element.textWrapper = textWrapper;
-      closeIcon = document.getElementById(tooltipCloseIconId);
-    }
-
-    element.openTooltip = () => {
-      tooltip.style.display = "flex";
-      tooltip.setAttribute("tooltip-visible", "true");
-      elementOffset = initElementOffset(element);
-      tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset);
-    };
-
-    element.closeTooltip = () => {
-      tooltip.style.display = "none";
-      tooltip.setAttribute("tooltip-visible", "false");
-    };
-
-    element.clickOnTooltipElementEvent = () => {
-      if (tooltip.getAttribute("tooltip-visible") === "true") {
-        return element.closeTooltip();
-      }
-
-      element.openTooltip();
-    };
-
-    element.clickOnClose = (event) => {
-      event.stopPropagation();
-      element.closeTooltip();
-    };
-
-    element.clickOutsideEvent = function (event) {
-      if (
-        !(element == event.target || element.contains(event.target as Node))
-      ) {
-        element.closeTooltip();
-      }
-    };
-    element.scrollInParent = function () {
-      const { top: parentOffsetTop = 0, bottom: parentOffsetBottom = 0 } =
-        initElementOffset(getScrollableParent(element)) || {};
-      if (
-        elementOffset.top < parentOffsetTop ||
-        elementOffset.bottom > parentOffsetBottom
-      ) {
-        tooltip.style.visibility = "hidden";
-      } else {
-        tooltip.style.visibility = "visible";
-      }
-      elementOffset = initElementOffset(element);
-      tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset);
-    };
-
-    element.resize = function () {
-      elementOffset = initElementOffset(element);
-      tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset);
-    };
-
-    // NOTE - init all eventListeners
-    initEventsListener(element, closeIcon);
-
-    if (binding?.value.open) element.clickOnTooltipElementEvent();
-  },
-  unbind: (element) => {
-    destroyEventsListener(element);
-  },
-  update(element, binding) {
-    element.textWrapper.innerText = binding?.value.content;
-
-    if (binding?.value.open) {
-      element.openTooltip();
-    } else {
-      element.closeTooltip();
-    }
+  bind: (element, binding) => {
+    const tooltipDiv = new Vue({
+      render(h) {
+        return h(BaseFixedTooltip, {
+          props: {
+            content: binding.value.content,
+            top: this.top,
+            left: this.left,
+            open: binding.value.open,
+            triggerElement: element,
+          },
+        });
+      },
+    }).$mount();
+
+    document.body.appendChild(tooltipDiv.$el);
   },
 });
-const isScrollable = function (element) {
-  const hasScrollableContent = element.scrollHeight > element.clientHeight;
-
-  const overflowYStyle = window.getComputedStyle(element).overflowY;
-  const isOverflowHidden = overflowYStyle.includes("hidden");
-
-  return hasScrollableContent && !isOverflowHidden;
-};
-
-const initElementOffset = function (element) {
-  return element.getBoundingClientRect() || null;
-};
-const getScrollableParent = function (element) {
-  return !element || element === document.body
-    ? document.body
-    : getElementOrParent(element);
-};
-const getElementOrParent = function (element) {
-  return isScrollable(element)
-    ? element
-    : getScrollableParent(element.parentNode);
-};
-const initEventsListener = (element, closeIcon) => {
-  if (element && closeIcon) {
-    closeIcon.addEventListener("click", element.clickOnClose);
-    element.addEventListener("click", element.clickOnTooltipElementEvent);
-    document.body.addEventListener("click", element.clickOutsideEvent);
-    getScrollableParent(element).addEventListener(
-      "scroll",
-      element.scrollInParent
-    );
-    window.addEventListener("resize", element.resize);
-  }
-};
-
-const destroyEventsListener = (element) => {
-  document.body.removeEventListener(
-    "click",
-    element.clickOnTooltipElementEvent
-  );
-  document.body.removeEventListener(
-    "touchstart",
-    element.clickOnTooltipElementEvent
-  );
-  document.body.removeEventListener("click", element.clickOutsideEvent);
-  document.body.removeEventListener("touchstart", element.clickOutsideEvent);
-  document.body.removeEventListener("click", element.clickOnClose);
-  document.body.removeEventListener("touchstart", element.clickOnClose);
-  getScrollableParent(element).removeEventListener(
-    "scroll",
-    element.scrollInParent
-  );
-  window.removeEventListener("resize", element.resize);
-};
-
-const initTooltipStyle = (tooltip, width, backgroundColor) => {
-  tooltip.style.position = "fixed";
-  tooltip.style.width = `${width}px`;
-  tooltip.style.display = "none";
-  tooltip.style.flexDirection = "column";
-  tooltip.style.zIndex = "99999";
-  tooltip.style.backgroundColor = `${
-    backgroundColor || "var(--bg-accent-grey-2)"
-  }`;
-  tooltip.style.borderRadius = "5px";
-  tooltip.style.padding = "8px 20px 8px 8px";
-  tooltip.style.boxShadow = "0 8px 20px 0 rgba(0,0,0,.2)";
-  tooltip.style.transition = "opacity 0.3s ease 0.2s";
-  tooltip.style.border = "2px transparent solid";
-  tooltip.style.cursor = "default";
-  return tooltip;
-};
-const initTooltipHeaderStyle = (tooltipHeader) => {
-  tooltipHeader.style.position = "absolute";
-  tooltipHeader.style.top = "4px";
-  tooltipHeader.style.right = "4px";
-  tooltipHeader.innerHTML =
-    '<svg width="12" height="12" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer"><path d="M8.9225 5.58721C8.13956 4.80426 6.87015 4.80426 6.08721 5.58721C5.30426 6.37015 5.30426 7.63956 6.08721 8.4225L17.6647 20L6.08733 31.5774C5.30438 32.3603 5.30438 33.6297 6.08733 34.4127C6.87027 35.1956 8.13968 35.1956 8.92262 34.4127L20.5 22.8353L32.0774 34.4127C32.8603 35.1956 34.1297 35.1956 34.9127 34.4127C35.6956 33.6297 35.6956 32.3603 34.9127 31.5774L23.3353 20L34.9128 8.4225C35.6957 7.63956 35.6957 6.37015 34.9128 5.58721C34.1298 4.80426 32.8604 4.80426 32.0775 5.58721L20.5 17.1647L8.9225 5.58721Z" fill="#9a9a9a"/></svg>';
-  return tooltipHeader;
-};
-
-const initTooltipTriangleStyle = (tooltipTriangle) => {
-  tooltipTriangle.setAttribute("class", "triangle");
-  tooltipTriangle.style.position = "absolute";
-  return tooltipTriangle;
-};
-const initTooltipTriangleInnerStyle = (
-  tooltipTriangleInner,
-  backgroundColor
-) => {
-  tooltipTriangleInner.style.position = "relative";
-  tooltipTriangleInner.style.width = "0";
-  tooltipTriangleInner.style.height = "0";
-  tooltipTriangleInner.style.borderBottom =
-    "10px solid " + (backgroundColor || "var(--bg-accent-grey-2)");
-  tooltipTriangleInner.style.borderRight = "10px solid transparent";
-  tooltipTriangleInner.style.borderLeft = "10px solid transparent";
-  return tooltipTriangleInner;
-};
-
-const initTooltipPosition = (tooltip, tooltipPosition, elementOffset) => {
-  const tooltipOffset = initElementOffset(tooltip);
-  const tooltipTriangle = tooltip.querySelector(".triangle");
-  const tooltipTriangleOffset = initElementOffset(tooltipTriangle);
-  const margin = 8;
-  const rightSideOutOfViewport =
-    window.innerWidth <= elementOffset.right + tooltipOffset.width / 2;
-  const bottomSideoutOfViewport =
-    window.innerHeight <= elementOffset.bottom + tooltipOffset.height;
-  switch (tooltipPosition.toUpperCase()) {
-    case TOOLTIP_DIRECTION.BOTTOM:
-      tooltip.style.left = rightSideOutOfViewport
-        ? `${
-            elementOffset.left -
-            tooltipOffset.width +
-            elementOffset.width +
-            tooltipTriangleOffset.width
-          }px`
-        : `${
-            elementOffset.left -
-            tooltipOffset.width / 2 +
-            elementOffset.width / 2
-          }px`;
-      tooltipTriangle.style.left = rightSideOutOfViewport ? "100%" : "50%";
-      tooltipTriangle.style.marginLeft = rightSideOutOfViewport
-        ? `-${tooltipTriangleOffset.width * 2}px`
-        : `-${tooltipTriangleOffset.width / 2}px`;
-
-      tooltip.style.top = bottomSideoutOfViewport
-        ? `${elementOffset.y - tooltipOffset.height - margin}px`
-        : `${elementOffset.y + elementOffset.height + margin}px`;
-
-      tooltipTriangle.style.transform = bottomSideoutOfViewport
-        ? "rotateX(180deg)"
-        : "";
-      tooltipTriangle.style.top = bottomSideoutOfViewport
-        ? "100%"
-        : `-${tooltipTriangleOffset.height}px`;
-      break;
-    default:
-    // tooltip direction is unknown
-  }
-
-  return tooltip;
-};
-
-const initTextStyle = (textWrapper) => {
-  textWrapper.style.textAlign = "left";
-  textWrapper.style.fontSize = "13px";
-  textWrapper.style.fontStyle = "normal";
-  textWrapper.style.fontWeight = "300";
-  textWrapper.style.lineHeight = "18px";
-  textWrapper.style.whiteSpace = "pre-wrap";
-  textWrapper.style.overflow = "auto";
-  textWrapper.style.maxHeight = "360px";
-  textWrapper.style.color = "var(--fg-primary)";
-  return textWrapper;
-};
-
-const TOOLTIP_DIRECTION = Object.freeze({
-  BOTTOM: "BOTTOM",
-});
diff --git a/argilla-frontend/static/icons/export.svg b/argilla-frontend/static/icons/export.svg
new file mode 100644
index 0000000000..a72c56ec49
--- /dev/null
+++ b/argilla-frontend/static/icons/export.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="31" viewBox="0 0 26 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8518 7.73439L17.9201 9.66604L14.4568 6.20276V22.8606H11.7251V6.20285L8.2619 9.66604L6.33025 7.73439L13.091 0.973633L19.8518 7.73439Z" fill="black" fill-opacity="0.87"/>
+<path d="M3.52979 28.2419V14.5831H8.99332V11.8513H0.798035V30.9736H25.3839V11.8513H17.1886V14.5831H22.6521V28.2419H3.52979Z" fill="black" fill-opacity="0.87"/>
+</svg>
diff --git a/argilla-frontend/translation/de.js b/argilla-frontend/translation/de.js
index 5aa7d086db..731eedcf75 100644
--- a/argilla-frontend/translation/de.js
+++ b/argilla-frontend/translation/de.js
@@ -326,18 +326,21 @@ export default {
       "Bitte folgen Sie der <a target='_blank' href='https://docs.argilla.io/latest/how_to_guides/workspace/#create-a-new-workspace'>Anleitung</a>, um einen Workspace zu erstellen",
   },
   exportToHub: {
-    dislogTitle: "Push to Hugging Face Hub",
+    dialogTitle: "Drücken",
     ownerTooltip:
-      "Only a valid Hugging Face organization or username can export the dataset to the Hub",
-    tokenTooltip:
-      "You can manage your access tokens in your <a href='https://huggingface.co/settings/tokens' target='_blank'> Hugging Face settings</a>",
+      "Verwenden Sie einen gültigen Hugging Face-Benutzernamen oder eine Organisation",
+    tokenTooltip: `Verwenden Sie ein vorhandenes Zugriffstoken oder erstellen Sie ein <a href='https://huggingface.co/settings/tokens' target='_blank'>neues Token</a> mit "Schreibberechtigung"`,
     validations: {
-      orgOrUsernameIsRequired: "Organization or username is required",
-      hfTokenIsRequired: "Hugging Face token is required",
-      hfTokenInvalid: "Invalid Hugging Face token",
-      datasetNameIsRequired: "Dataset name is required",
+      orgOrUsernameIsRequired:
+        "Organisation oder Benutzername sind erforderlich",
+      hfTokenIsRequired: "Umarmen des Gesichts -Tokens ist erforderlich ",
+      hfTokenInvalid: "Ungültiges Umarmungs -Gesichts -Token ",
+      datasetNameIsRequired: "Datensatzname ist erforderlich ",
     },
-    exporting: "Exporting...",
+    exporting: "Exportieren in den Umarmungsgesichtszentrum ",
+    private: "privater Datensatz",
+    public: "öffentlicher Datensatz",
+    exportingWarning: "This might take a few seconds",
   },
   config: {
     field: {
diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
index 051d40ecb9..4725016cf4 100644
--- a/argilla-frontend/translation/en.js
+++ b/argilla-frontend/translation/en.js
@@ -327,18 +327,19 @@ export default {
       "Please, follow this <a target='_blank' href='https://docs.argilla.io/latest/how_to_guides/workspace/#create-a-new-workspace'>guide</a> to create a workspace",
   },
   exportToHub: {
-    dislogTitle: "Push to Hugging Face Hub",
-    ownerTooltip:
-      "Only a valid Hugging Face organization or username can export the dataset to the Hub",
-    tokenTooltip:
-      "You can manage your access tokens in your <a href='https://huggingface.co/settings/tokens' target='_blank'> Hugging Face settings</a>",
+    dialogTitle: "Push to Hugging Face Hub",
+    ownerTooltip: "Use a valid Hugging Face username or organisation",
+    tokenTooltip: `Use an existing access token or create a <a href='https://huggingface.co/settings/tokens' target='_blank'>new token</a> with "write permission"`,
     validations: {
       orgOrUsernameIsRequired: "Organization or username is required",
       hfTokenIsRequired: "Hugging Face token is required",
       hfTokenInvalid: "Invalid Hugging Face token",
       datasetNameIsRequired: "Dataset name is required",
     },
-    exporting: "Exporting...",
+    exporting: "Exporting to Hugging Face hub",
+    private: "private dataset",
+    public: "public dataset",
+    exportingWarning: "Das kann ein paar Sekunden dauern",
   },
   config: {
     field: {
diff --git a/argilla-frontend/translation/es.js b/argilla-frontend/translation/es.js
index e1ded55049..7852a614c9 100644
--- a/argilla-frontend/translation/es.js
+++ b/argilla-frontend/translation/es.js
@@ -330,11 +330,10 @@ export default {
       "Por favor, sigue <a target='_blank' href='https://docs.argilla.io/latest/how_to_guides/workspace/#create-a-new-workspace'>esta guía</a> para crear un espacio de trabajo",
   },
   exportToHub: {
-    dislogTitle: "Exportar dataset a Hugging Face",
+    dialogTitle: "Exportar dataset a Hugging Face",
     ownerTooltip:
-      "Solo un usuario o una organización válida puede exportar un dataset a Hugging Face",
-    tokenTooltip:
-      "Puedes gestionar tus tokens en <a href='https://huggingface.co/settings/tokens' target='_blank'> Hugging Face settings</a>",
+      "Utiliza un nombre de usuario u organización de Hugging Face válidos",
+    tokenTooltip: `Utiliza un token de acceso existente o crear un <a href='https://huggingface.co/settings/tokens' target='_blank'>nuevo token</a> con "permiso de escritura"`,
     validations: {
       orgOrUsernameIsRequired:
         "El nombre de usuario u organización es requerido",
@@ -342,7 +341,10 @@ export default {
       hfTokenInvalid: "El token de Hugging Face es inválido",
       datasetNameIsRequired: "El nombre del dataset es requerido",
     },
-    exporting: "Exportando...",
+    exporting: "Exportando al hub de Hugging Face",
+    private: "dataset privado",
+    public: "dataset público",
+    exportingWarning: "Esto puede tardar unos segundos",
   },
   config: {
     field: {