feat: export to hub UI QA (#5747)

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 <[email protected]>

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"/>'
+  }
+})

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')

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;

argilla-frontend/assets/scss/base/base.scss

@@ -54,7 +54,7 @@ body {
 
 a,
 button {
-  color: var(--fg-secondary);
+  color: var(--fg-primary);
 }
 
 audio,

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>