Merge branch 'releases/2.4.0' into docs/ui-import-from-hub

.github/workflows/argilla-frontend.build-push-dev-frontend-docker.yml

@@ -62,8 +62,8 @@ jobs:
 
       - name: Build Frontend
         run: |
-            npm install
-            npm run build
+          npm install
+          npm run build
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
@@ -91,7 +91,7 @@ jobs:
       # Authenticate in GCP using Workload Identity Federation, so we can push the Docker image to the Google Cloud Artifact Registry
       - name: Authenticate to Google Cloud
         id: google-auth
-        uses: 'google-github-actions/auth@v1'
+        uses: "google-github-actions/auth@v1"
         with:
           token_format: access_token
           workload_identity_provider: ${{ secrets.GOOGLE_CLOUD_WIP }}

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

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

.github/workflows/argilla-frontend.yml

@@ -11,6 +11,11 @@ on:
     paths:
       - "argilla-frontend/**"
 
+permissions:
+  contents: read
+  id-token: write
+  pull-requests: write
+
 jobs:
   build:
     name: Build argilla-frontend

.github/workflows/argilla-server.yml

@@ -17,6 +17,9 @@ on:
     paths:
       - "argilla-server/**"
 
+permissions:
+  id-token: write
+
 jobs:
   build:
     name: Build `argilla-server` package

.github/workflows/argilla.yml

@@ -17,6 +17,9 @@ on:
     paths:
       - "argilla/**"
 
+permissions:
+  id-token: write
+
 jobs:
   build:
     services:
@@ -85,8 +88,6 @@ jobs:
       # contents: read
       # IMPORTANT: this permission is mandatory for trusted publishing on PyPI
       id-token: write
-      # This permission is needed for creating tags
-      contents: write
 
     needs:
       - build

.github/workflows/close-inactive-issues-bot.yml

@@ -3,6 +3,10 @@ on:
   schedule:
     - cron: "30 1 * * *"
 
+permissions:
+  issues: write
+  pull-requests: write
+
 jobs:
   close-issues:
     runs-on: ubuntu-latest

argilla-frontend/CHANGELOG.md

@@ -18,19 +18,24 @@ These are the section headers that we use:
 
 ## [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-10);
   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"

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

@@ -5,7 +5,7 @@
       @click="openFilter(column)"
       :class="[visibleFilter || selectedOptions.length ? 'active' : '']"
     >
-      <svgicon name="filter" width="16" aria-hidden="true"/>
+      <svgicon name="filter" width="16" aria-hidden="true" />
       {{ column.name }}
     </button>
     <div class="table__filter" v-click-outside="close" v-if="visibleFilter">

argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div class="topbar" role="banner" aria-label="Top navigation bar">
-    <brand-icon class="brand-icon" color="white" aria-label="Argilla icon"/>
+    <brand-icon class="brand-icon" color="white" aria-label="Argilla icon" />
     <slot />
   </div>
 </template>

argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue

@@ -8,8 +8,12 @@
       <template slot="dropdown-header">
         <BaseButton
           class="record-menu__header"
-          :aria-label="(dropdownIsVisible? 'Collapse' : 'Expand') + ' Record Dropdown for Extra Information'">
-          <svgicon name="kebab" width="20" height="20" aria-hidden="true"/>
+          :aria-label="
+            (dropdownIsVisible ? 'Collapse' : 'Expand') +
+            ' Record Dropdown for Extra Information'
+          "
+        >
+          <svgicon name="kebab" width="20" height="20" aria-hidden="true" />
         </BaseButton>
       </template>
       <template slot="dropdown-content">

argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue

@@ -7,7 +7,11 @@
     aria-label="Data Record Field"
   >
     <div class="title-area --body2">
-      <span class="text_field_component__title-content" v-text="title" :aria-label="'Field Name: ' + title" />
+      <span
+        class="text_field_component__title-content"
+        v-text="title"
+        :aria-label="'Field Name: ' + title"
+      />
       <BaseActionTooltip
         class="text_field_component__tooltip"
         :tooltip="$t('copied')"
@@ -20,11 +24,21 @@
           @click.prevent="$copyToClipboard(fieldText)"
           role="button"
         >
-          <svgicon color="#acacac" name="copy" width="18" height="18" aria-hidden="true"/>
+          <svgicon
+            color="#acacac"
+            name="copy"
+            width="18"
+            height="18"
+            aria-hidden="true"
+          />
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div id="fields-content" class="text_field_component__area --body1" :aria-label="'Data entry for Field: ' + title" >
+    <div
+      id="fields-content"
+      class="text_field_component__area --body1"
+      :aria-label="'Data entry for Field: ' + title"
+    >
       <p
         :class="[
           allowOverlapping

argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue

@@ -1,7 +1,16 @@
 <template>
   <div>
-    <p v-if="legend" class="questions__title --body3 --light" v-text="legend" :aria-label="legend" />
-    <div class="questions" role="list" aria-label="List of annotation questions">
+    <p
+      v-if="legend"
+      class="questions__title --body3 --light"
+      v-text="legend"
+      :aria-label="legend"
+    />
+    <div
+      class="questions"
+      role="list"
+      aria-label="List of annotation questions"
+    >
       <div
         v-for="(question, index) in questions"
         :key="question.id"

argilla-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue

@@ -24,7 +24,12 @@
           :text="getSuggestedAgent(item)"
           minimalist
         >
-          <svgicon width="6" name="draggable" :id="`${item.value}-icon`" aria-label="Dragging Icon"/>
+          <svgicon
+            width="6"
+            name="draggable"
+            :id="`${item.value}-icon`"
+            aria-label="Dragging Icon"
+          />
           <span
             class="draggable__rank-card__title"
             v-text="item.text"

argilla-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="wrapper">
     <QuestionHeaderComponent :question="question" />
-    <div class="question__warning" v-if="warningMessage" role="status" aria-live="polite">
-      <svgicon name="danger" width="16" height="16" aria-hidden="true"/>
+    <div
+      class="question__warning"
+      v-if="warningMessage"
+      role="status"
+      aria-live="polite"
+    >
+      <svgicon name="danger" width="16" height="16" aria-hidden="true" />
       <span v-text="warningMessage" />
     </div>
     <EntityLabelSelectionComponent

argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue

@@ -15,7 +15,7 @@
           width="20"
           height="20"
           name="change-height"
-          aria-hidden="true"/></BaseButton
+          aria-hidden="true" /></BaseButton
     ></template>
     <template slot="dropdown-content">
       <div class="view-config__content">

argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue

@@ -25,7 +25,12 @@
           :data-title="$t('status')"
         >
           {{ currentOptionName }}
-          <svgicon name="chevron-down" width="8" height="8" aria-hidden="true"/>
+          <svgicon
+            name="chevron-down"
+            width="8"
+            height="8"
+            aria-hidden="true"
+          />
         </BaseButton>
       </span>
       <span slot="dropdown-content">

argilla-frontend/components/features/annotation/header/filters/FilterButton.vue

@@ -1,6 +1,12 @@
 <template>
   <div :class="isButtonActive ? 'filter-button--active' : 'filter-button'">
-    <svgicon v-if="iconName" :name="iconName" width="16" height="16" aria-hidden="true" />
+    <svgicon
+      v-if="iconName"
+      :name="iconName"
+      width="16"
+      height="16"
+      aria-hidden="true"
+    />
     <BaseButton class="filter-button__button">{{ buttonName }}</BaseButton>
     <slot></slot>
     <svgicon