Merge branch 'main' into develop

argilla-io · Oct 30, 2024 · 9807e3e · 9807e3e
2 parents 7278d1e + 86fb672
commit 9807e3e
Show file tree

Hide file tree

Showing 55 changed files with 390 additions and 219 deletions.
diff --git a/.github/workflows/argilla-frontend.deploy-environment.yml b/.github/workflows/argilla-frontend.deploy-environment.yml
@@ -1,7 +1,6 @@
 name: Deploy Argilla environment
 
 on:
-
   workflow_dispatch:
     inputs:
       image-name:

diff --git a/.github/workflows/argilla.yml b/.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:

diff --git a/.pre-commit-config.yaml b/.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
diff --git a/argilla-frontend/CHANGELOG.md b/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)
 

diff --git a/argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue b/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"

diff --git a/argilla-frontend/components/base/base-input/BaseInput.vue b/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();
+      }
     });
   },
 };

diff --git a/argilla-frontend/components/base/base-progress/BaseLinearProgress.vue b/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">

diff --git a/argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue b/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"

diff --git a/argilla-frontend/components/base/base-separator/BaseSeparator.vue b/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>
diff --git a/argilla-frontend/components/base/base-table/BaseTableInfo.vue b/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"

diff --git a/argilla-frontend/components/base/base-table/TableFiltrableColumn.vue b/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">

diff --git a/argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue b/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>

diff --git a/argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue b/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">

diff --git a/...mponents/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue b/...mponents/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

diff --git a/...-frontend/components/features/annotation/container/questions/form/Questions.component.vue b/...-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"

diff --git a/...ation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue b/...ation/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"

diff --git a/...a-frontend/components/features/annotation/container/questions/form/span/SpanComponent.vue b/...a-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

diff --git a/argilla-frontend/components/features/annotation/container/view-config/RecordsViewConfig.vue b/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">

diff --git a/argilla-frontend/components/features/annotation/header/RadioButtonsSelect.base.vue b/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">

diff --git a/argilla-frontend/components/features/annotation/header/filters/FilterButton.vue b/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

diff --git a/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue b/argilla-frontend/components/features/annotation/header/header-bar/ImportData.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="import-data">
     <BaseButton
-      class="primary"
+      class="primary import-data__button"
       @click.prevent="visibleSnippet = !visibleSnippet"
       >{{ $t("datasetCreation.importData") }}</BaseButton
     >
@@ -79,6 +79,12 @@ export default {
     top: $base-space;
     right: $base-space;
   }
+  &__button.button {
+    background: hsl(0, 1%, 18%);
+    &:hover {
+      background: hsl(0, 1%, 22%);
+    }
+  }
 }
 .fade-enter-active,
 .fade-leave-active {

diff --git a/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue b/argilla-frontend/components/features/annotation/header/metadata-filter/MetadataFilter.vue
@@ -34,7 +34,12 @@
             @click="selectMetadataCategory(null)"
           >
             <span v-text="visibleCategory.title" />
-            <svgicon name="chevron-left" width="12" height="12" aria-hidden="true"/>
+            <svgicon
+              name="chevron-left"
+              width="12"
+              height="12"
+              aria-hidden="true"
+            />
           </div>
           <div class="metadata-filter__content">
             <LabelsSelector