[FEATURE-BRANCH] feat: dataset export to the Hub (#5730)

# Description

This is the feature branch with the joining efforts (UI + Backend) for
the new feature allowing users to export datasets from Argilla to the HF
Hub.

---------

Co-authored-by: Damián Pumar <[email protected]>
Co-authored-by: Leire Aguirre <[email protected]>

Author: 3 people

.github/workflows/argilla-frontend.yml

@@ -48,7 +48,6 @@ jobs:
       - name: Build package 📦
         env:
           # BASE_URL is used in the server to support parameterizable base root path
-          # See scripts/build_frontend.sh
           BASE_URL: "@@baseUrl@@"
           DIST_FOLDER: ./dist
         run: |

.github/workflows/argilla-server.yml

@@ -82,6 +82,8 @@ jobs:
         run: pdm install
 
       - name: Run tests 📈
+        env:
+          HF_TOKEN_ARGILLA_INTERNAL_TESTING: ${{ secrets.HF_TOKEN_ARGILLA_INTERNAL_TESTING }}
         run: |
           ARGILLA_DATABASE_URL=postgresql://postgres:postgres@localhost:5432/argilla
           ARGILLA_ELASTICSEARCH=http://localhost:9200

argilla-frontend/assets/css/fonts.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: "raptor_v2_premiumbold";
-  src: url("@/assets/fonts/raptorv2premium-bold-webfont.woff2") format("woff2"),
-    url("@/assets/fonts/raptorv2premium-bold-webfont.woff") format("woff");
+  src: url("/fonts/raptorv2premium-bold-webfont.woff2") format("woff2"),
+    url("/fonts/raptorv2premium-bold-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }

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

@@ -115,7 +115,7 @@ $tooltip-border-radius: $border-radius-s;
       height: auto;
       opacity: 1;
       transition: opacity 0.3s ease 0.2s;
-      z-index: 2;
+      z-index: 3;
     }
     &:before {
       opacity: 1;
@@ -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/assets/styles.scss

@@ -0,0 +1,3 @@
+@import "./css/fonts.css";
+@import "./css/themes.css";
+@import "./scss/base/base.scss";

argilla-frontend/components/base/base-resizable/useResizable.ts

@@ -17,7 +17,7 @@ export const useResizable = ({ id }: { id: string }) => {
 
     await debounce.wait();
 
-    const layout = get("layout");
+    const layout = get<Record<string, unknown>>("layout");
 
     set("layout", {
       ...layout,

argilla-frontend/components/base/base-switch/BaseSwitch.vue

@@ -18,13 +18,13 @@
 <template>
   <div
     :class="{ disabled: !checked, 'disable-action': disableAction }"
-    class="re-switch"
+    class="switch"
   >
-    <label v-if="$slots.default" :for="id || name" class="re-switch-label">
+    <label v-if="$slots.default" :for="id || name" class="switch-label">
       <slot />
     </label>
-    <div class="re-switch-container" @click="toggle($event)">
-      <div class="re-switch-thumb" :style="styles">
+    <div class="switch-container" @click="toggle($event)">
+      <div class="switch-thumb" :style="styles">
         <input
           :id="id"
           type="checkbox"
@@ -33,7 +33,7 @@
           :value="value"
           tabindex="-1"
         />
-        <button :type="type" class="re-switch-holder">
+        <button :type="type" class="switch-holder">
           <svgicon width="10" height="10" name="check" color="white"></svgicon>
         </button>
       </div>
@@ -120,41 +120,41 @@ export default {
 $switch-width: 28px;
 $switch-height: 11px;
 $switch-thumb-size: 18px;
-.re-switch {
+.switch {
   display: flex;
   align-items: center;
   position: relative;
   &.disabled {
     svg {
       display: none;
     }
-    .re-switch-thumb {
+    .switch-thumb {
       background-color: #f0f0f0 !important;
     }
   }
   &.disable-action {
     opacity: 0.5;
     pointer-events: none;
     cursor: default;
-    .re-switch-thumb {
+    .switch-thumb {
       background-color: var(--color-white) !important;
       transform: translate3d(-1px, -50%, 0px) !important;
     }
     &:active {
-      .re-switch-thumb {
+      .switch-thumb {
         transform: translate3d(50%, -50%, 0px) !important;
       }
     }
   }
-  .re-switch-container {
+  .switch-container {
     width: $switch-width;
     height: $switch-height;
     position: relative;
     border-radius: $switch-height;
     transition: $swift-ease-out;
     background-color: var(--bg-opacity-20);
     cursor: pointer;
-    .re-switch-thumb {
+    .switch-thumb {
       width: $switch-thumb-size;
       height: $switch-thumb-size;
       position: absolute;
@@ -168,7 +168,7 @@ $switch-thumb-size: 18px;
       position: absolute;
       left: -999em;
     }
-    .re-switch-holder {
+    .switch-holder {
       @include absoluteCenter;
       width: $switch-thumb-size;
       height: $switch-thumb-size;
@@ -183,9 +183,9 @@ $switch-thumb-size: 18px;
       }
     }
   }
-  .re-switch-label {
+  .switch-label {
     margin-right: 1em;
-    color: var(--fg-secondary);
+    color: var(--fg-primary);
   }
 }
 </style>