Merge branch 'main' into develop

Author: jfcalvo

.github/workflows/argilla-frontend.deploy-environment.yml

@@ -1,7 +1,6 @@
 name: Deploy Argilla environment
 
 on:
-
   workflow_dispatch:
     inputs:
       image-name:

.github/workflows/argilla.yml

@@ -24,7 +24,7 @@ jobs:
   build:
     services:
       argilla-server:
-        image: argilladev/argilla-hf-spaces:pr-5572
+        image: argilladev/argilla-hf-spaces:develop
         ports:
           - 6900:6900
         env:

.pre-commit-config.yaml

@@ -75,12 +75,12 @@ repos:
   # Helm lint hook
   ##############################################################################
   - repo: https://github.com/gruntwork-io/pre-commit
-    rev: v0.1.23
+    rev: v0.1.24
     hooks:
       - id: helmlint
         name: Helm lint
         files: '^examples/deployments/k8s/.*\.yaml$'
-        args: ['helm', 'lint','examples/deployments/k8s/']
+        args: ["helm", "lint", "examples/deployments/k8s/"]
 
 ci:
   autofix_commit_msg: |
@@ -90,5 +90,6 @@ ci:
   autoupdate_branch: ""
   autoupdate_commit_msg: "[pre-commit.ci] pre-commit autoupdate"
   autoupdate_schedule: weekly
-  skip: []
+  skip:
+    - helmlint # Disabling helmlint on CI by now because helm dependency is not available
   submodules: false

argilla-frontend/CHANGELOG.md

@@ -16,19 +16,26 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+## [2.4.0](https://github.com/argilla-io/argilla/compare/v2.3.0...v2.4.0)
+
+### Added
+
+- Added new dataset configurator to import datasets from Hugging Face using Argilla UI. ([#5532](https://github.com/argilla-io/argilla/pull/5532))
+
 ### Fixed
-- Refine German translations and update non-localized UI elements [#5632](https://github.com/argilla-io/argilla/pull/5632)
+
+- Refine German translations and update non-localized UI elements. ([#5632](https://github.com/argilla-io/argilla/pull/5632))
 
 ## [2.3.0](https://github.com/argilla-io/argilla/compare/v2.2.0...v2.3.0)
 
 ### Added
 
-- Added new field `CustomField` [#5462](https://github.com/argilla-io/argilla/pull/5462)
+- Added new field `CustomField`. ([#5462](https://github.com/argilla-io/argilla/pull/5462))
 
 ### Fixed
 
-- Fix autofill form on sign-in page [#5522](https://github.com/argilla-io/argilla/pull/5522)
-- Support copy on clipboard for no secure context [#5535](https://github.com/argilla-io/argilla/pull/5535)
+- Fix autofill form on sign-in page. ([#5522](https://github.com/argilla-io/argilla/pull/5522))
+- Support copy on clipboard for no secure context. ([#5535](https://github.com/argilla-io/argilla/pull/5535))
 
 ## [2.2.0](https://github.com/argilla-io/argilla/compare/v2.1.0...v2.2.0)
 

argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue

@@ -2,9 +2,9 @@
   <div
     class="panel"
     :class="[
-    !isExpanded ? '--collapsed' : undefined,
-    hideOnDesktop ? '--mobile' : undefined,
-  ]"
+      !isExpanded ? '--collapsed' : undefined,
+      hideOnDesktop ? '--mobile' : undefined,
+    ]"
   >
     <BaseButton
       class="panel__header"

argilla-frontend/components/base/base-input/BaseInput.vue

@@ -46,6 +46,10 @@ export default {
       type: String,
       default: "text",
     },
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -66,7 +70,9 @@ export default {
       this.setParentPlaceholder();
       this.handleMaxLength();
       this.updateValues();
-      this.$refs.input.focus();
+      if (this.autofocus) {
+        this.$refs.input.focus();
+      }
     });
   },
 };

argilla-frontend/components/base/base-progress/BaseLinearProgress.vue

@@ -19,7 +19,7 @@
           @mouseenter="hoveredRange = range"
           @mouseleave="hoveredRange = null"
         >
-        <div class="progress__bar" :style="{ background: range.color }"></div>
+          <div class="progress__bar" :style="{ background: range.color }"></div>
         </div>
       </div>
       <template v-if="showTooltip && !!hoveredRange">

argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue

@@ -17,7 +17,13 @@
 
 <template>
   <base-input-container class="search-area" :class="filter ? 'active' : null">
-    <svgicon name="search" width="20" height="20" color="#acacac" aria-hidden="true" />
+    <svgicon
+      name="search"
+      width="20"
+      height="20"
+      color="#acacac"
+      aria-hidden="true"
+    />
     <base-input
       class="search-area__input"
       role="search"

argilla-frontend/components/base/base-separator/BaseSeparator.vue

@@ -8,7 +8,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .separator {
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--bg-opacity-6);
   width: 100%;
 }
 </style>

argilla-frontend/components/base/base-table/BaseTableInfo.vue

@@ -19,7 +19,11 @@
     <div class="table-info" role="table">
       <div class="table-info__header">
         <slot name="columns">
-          <div class="table-info__item" role="columnheader" aria-label="Table Header">
+          <div
+            class="table-info__item"
+            role="columnheader"
+            aria-label="Table Header"
+          >
             <div
               v-for="(column, key) in columns"
               :key="key"
@@ -43,7 +47,12 @@
                 :aria-label="'Sort by ' + column.name"
                 :aria-sort="sortOrder === 'asc' ? 'descending' : 'ascending'"
               >
-                <svgicon width="18" height="18" name="sort" aria-hidden="true"/>
+                <svgicon
+                  width="18"
+                  height="18"
+                  name="sort"
+                  aria-hidden="true"
+                />
                 <span>{{ column.name }}</span>
               </button>
               <button v-else :data-title="column.tooltip">
@@ -57,7 +66,13 @@
       <template v-else>
         <div class="table-info__body" ref="table" aria-label="Table Body">
           <ul role="rowgroup">
-            <li v-for="item in filteredResults" :key="item.id" :id="item.id" role="row" :aria-label="'Row for ' + item.id">
+            <li
+              v-for="item in filteredResults"
+              :key="item.id"
+              :id="item.id"
+              role="row"
+              :aria-label="'Row for ' + item.id"
+            >
               <nuxt-link :to="rowLink(item)" class="table-info__item">
                 <span
                   v-for="(column, idx) in columns"
@@ -66,7 +81,11 @@
                   role="cell"
                 >
                   <span :class="column.class">
-                    <span v-if="column.actions" role="group" aria-label="Row actions">
+                    <span
+                      v-if="column.actions"
+                      role="group"
+                      aria-label="Row actions"
+                    >
                       <div class="table-info__actions">
                         <p
                           class="table-info__main"
@@ -111,7 +130,7 @@
                     <nuxt-link v-else-if="column.link" :to="column.link(item)">
                       {{ itemValue(item, column) }}
                     </nuxt-link>
-                    <span v-else >{{ itemValue(item, column) }}</span>
+                    <span v-else>{{ itemValue(item, column) }}</span>
                     <span v-if="column.component">
                       <component
                         :aria-label="column.component.name"