[RELEASES] v2.4.1

argilla-frontend/CHANGELOG.md

@@ -16,6 +16,20 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+## [2.4.1](https://github.com/argilla-io/argilla/compare/v2.4.0...v2.4.1)
+
+### Added
+
+- Add a high-contrast theme & improvements for the forced-colors mode. ([#5661](https://github.com/argilla-io/argilla/pull/5661))
+- Added redirect to error page when repoId is invalid ([#5670](https://github.com/argilla-io/argilla/pull/5670))
+
+### Fixed
+
+- Fixed redirection problems after users sign-in using HF OAuth. ([#5635](https://github.com/argilla-io/argilla/pull/5635))
+- Fixed highlighting of the searched text in text and chat fields ([#5678](https://github.com/argilla-io/argilla/pull/5678))
+- Fixed validation for rating question when creating a dataset ([#5670](https://github.com/argilla-io/argilla/pull/5670))
+- Fixed question name based on question type when creating a dataset ([#5670](https://github.com/argilla-io/argilla/pull/5670))
+
 ## [2.4.0](https://github.com/argilla-io/argilla/compare/v2.3.0...v2.4.0)
 
 ### Added

argilla-frontend/assets/scss/abstract/variables/_themes.scss

@@ -78,7 +78,7 @@
   --bg-banner-error: hsl(3, 100%, 92%);
   --bg-tooltip: var(--color-dark-grey);
   --bg-config-card: hsl(227, 100%, 90%);
-  --bg-congig-alert: hsl(41, 100%, 82%, 0.8);
+  --bg-config-alert: hsl(41, 100%, 82%, 0.8);
   --fg-chat-1: #488d81;
   --fg-chat-2: #e07be0;
   --fg-chat-3: #fd926a;
@@ -151,7 +151,7 @@
   --bg-banner-error: hsl(3, 100%, 20%);
   --bg-tooltip: hsl(207, 9%, 32%);
   --bg-config-card: hsla(227, 100%, 66%, 20%);
-  --bg-congig-alert: hsl(41, 100%, 82%, 0.4);
+  --bg-config-alert: hsl(41, 100%, 82%, 0.4);
   --fg-chat-1: #628e87;
   --fg-chat-2: #af6daf;
   --fg-chat-3: #cd8065;

argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue

@@ -2,6 +2,7 @@
   <div class="chat" :key="title">
     <span class="chat__title" v-text="title" />
     <div
+      :id="`fields-content-${name}`"
       class="chat__wrapper"
       :class="checkIfAreLessThanTwoRoles ? '--simple' : '--multiple'"
     >

argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue

@@ -16,7 +16,7 @@
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div class="content-area --body1">
+    <div :id="`fields-content-${name}`" class="content-area --body1">
       <MarkdownRenderer v-if="useMarkdown" :markdown="fieldText" />
       <Sandbox v-else-if="isHTML" :content="fieldText" />
       <div v-else :class="classes" v-html="fieldText" />

argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts

@@ -121,8 +121,10 @@ export const useSearchTextHighlight = (fieldId: string) => {
 
   const highlightText = (searchText: string) => {
     const fieldComponent = document.getElementById(FIELD_ID_TO_HIGHLIGHT);
-    if (!searchText || !fieldComponent) return;
-
+    if (!searchText || !fieldComponent) {
+      CSS.highlights.delete(HIGHLIGHT_CLASS);
+      return;
+    }
     const ranges = createRangesToHighlight(fieldComponent, searchText);
 
     CSS.highlights.set(HIGHLIGHT_CLASS, new Highlight(...ranges));

argilla-frontend/components/features/dataset-creation/configuration/DatasetConfigurationForm.vue

@@ -31,13 +31,11 @@
               :group="{ name: 'fields' }"
               ghost-class="config-form__ghost"
               :disabled="isFocused"
-              @start="drag = true"
-              @end="drag = false"
             >
               <transition-group
                 class="config-form__draggable-area-wrapper"
                 type="transition"
-                :name="!drag ? 'flip-list' : null"
+                :css="false"
               >
                 <DatasetConfigurationField
                   v-for="field in dataset.selectedSubset.fields.filter(
@@ -87,7 +85,7 @@
               <transition-group
                 class="config-form__draggable-area-wrapper"
                 type="transition"
-                :name="!drag ? 'flip-list' : null"
+                :css="false"
               >
                 <DatasetConfigurationQuestion
                   v-for="question in dataset.selectedSubset.questions"
@@ -139,22 +137,50 @@ export default {
     return {
       isFocused: false,
       visibleDatasetCreationDialog: false,
-      drag: false,
     };
   },
+  computed: {
+    getMaxNumberInNames() {
+      return Math.max(
+        ...this.dataset.selectedSubset.questions.map((question) => {
+          const numberInName = question.name.split("_").pop();
+          return parseInt(numberInName) || 0;
+        })
+      );
+    },
+  },
   methods: {
     createDataset() {
       this.create(this.dataset);
     },
-    addQuestion(type) {
-      const questionName = `${type} ${this.dataset.selectedSubset.questions.length}`;
-      this.dataset.selectedSubset.addQuestion(questionName, { type });
+    generateName(type, number) {
+      const typeName = this.$t(`config.questionId.${type}`);
+      return `${typeName}_${parseInt(number) || 0}`;
     },
-    onTypeIsChanged(name, type) {
-      this.dataset.selectedSubset.addQuestion(name, {
-        type: type.value,
+    addQuestion(type) {
+      const questionName = this.generateName(
+        type,
+        this.getMaxNumberInNames + 1
+      );
+      this.dataset.selectedSubset.addQuestion(questionName, {
+        type,
       });
     },
+    onTypeIsChanged(oldName, type) {
+      const numberInName = oldName.split("_").pop();
+      const index = this.dataset.selectedSubset.questions.findIndex(
+        (q) => q.name === oldName
+      );
+      this.dataset.selectedSubset.removeQuestion(oldName);
+      const newQuestionName = this.generateName(type.value, numberInName);
+      this.dataset.selectedSubset.addQuestion(
+        newQuestionName,
+        {
+          type: type.value,
+        },
+        index !== -1 ? index : undefined
+      );
+    },
   },
   setup() {
     return useDatasetConfigurationForm();
@@ -223,13 +249,12 @@ export default {
   }
   &__ghost {
     opacity: 0.5;
-    background: lime;
   }
   &__selector {
     &__intro {
       display: block;
       padding: 4px;
-      background: var(--bg-congig-alert);
+      background: var(--bg-config-alert);
       @include font-size(12px);
       @include line-height(16px);
     }
@@ -247,8 +272,5 @@ export default {
       justify-content: center;
     }
   }
-  .flip-list-move {
-    transition: transform 0.3s;
-  }
 }
 </style>

argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationQuestion.vue

@@ -29,7 +29,7 @@
       />
       <DatasetConfigurationRating
         v-else-if="question.settings.type.isRatingType"
-        v-model="question.settings.options"
+        :question="question"
         @is-focused="$emit('is-focused', $event)"
       />
       <DatasetConfigurationRanking

argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRanking.vue

@@ -98,6 +98,7 @@ export default {
     width: 100%;
     outline: none;
     color: var(--fg-secondary);
+    @include font-size(12px);
     @include input-placeholder {
       color: var(--fg-tertiary);
     }

argilla-frontend/components/features/dataset-creation/configuration/questions/DatasetConfigurationRating.vue

@@ -1,46 +1,80 @@
 <template>
-  <div class="dataset-config-rating__input-container">
-    <input
-      type="number"
-      min="0"
-      max="10"
-      step="1"
-      :value="value.length - 1"
-      @input="onInput($event.target.value)"
-      @focus="$emit('is-focused', true)"
-      @blur="$emit('is-focused', false)"
-      :placeholder="placeholder"
-      class="dataset-config-rating__input"
-    />
+  <div>
+    <div
+      :class="{ '--error': errors.length }"
+      class="dataset-config-rating__input-container"
+    >
+      <input
+        type="number"
+        min="0"
+        max="10"
+        step="1"
+        :value="
+          question.settings.options.length
+            ? question.settings.options.length - 1
+            : 0
+        "
+        @input="onInput($event.target.value)"
+        @focus.stop="onFocus"
+        @blur="onBlur"
+        :placeholder="placeholder"
+        class="dataset-config-rating__input"
+      />
+    </div>
+    <Validation v-if="errors.length" :validations="translatedValidations" />
   </div>
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      errors: [],
+      isDirty: false,
+    };
+  },
   props: {
-    value: {
-      type: Array,
+    question: {
+      type: Object,
       required: true,
     },
     placeholder: {
       type: String,
       default: "",
     },
   },
-  model: {
-    prop: "value",
-    event: "on-value-change",
+  computed: {
+    translatedValidations() {
+      return this.errors.map((validation) => {
+        return this.$t(validation);
+      });
+    },
   },
   methods: {
+    validateOptions() {
+      this.errors = this.question.validate();
+    },
+    onFocus() {
+      this.$emit("is-focused", true);
+    },
+    onBlur() {
+      this.isDirty = true;
+      this.validateOptions();
+      this.$emit("is-focused", false);
+    },
     onInput(inputValue) {
-      const valuesArray = Array.from(
-        { length: parseInt(inputValue) + 1 },
-        (_, i) => ({
-          value: i,
-        })
-      );
+      let value = parseInt(inputValue);
+      value = Math.max(1, Math.min(value, 10));
+
+      const valuesArray = Array.from({ length: value + 1 }, (_, i) => ({
+        value: i,
+      }));
+
+      this.question.settings.options = valuesArray;
 
-      this.$emit("on-value-change", valuesArray);
+      if (this.isDirty) {
+        this.validateOptions();
+      }
     },
   },
 };
@@ -65,6 +99,7 @@ export default {
   width: 100%;
   outline: none;
   color: var(--fg-secondary);
+  @include font-size(12px);
   @include input-placeholder {
     color: var(--fg-tertiary);
   }

argilla-frontend/components/features/dataset-creation/configuration/shared/DatasetConfigurationChipsSelector.vue

@@ -56,7 +56,7 @@ export default {
   &__options {
     display: flex;
     flex-wrap: wrap;
-    gap: $base-space;
+    gap: $base-space - 1px;
     padding: 0;
     margin: $base-space 0 0;
   }

argilla-frontend/middleware/route-guard.ts

@@ -17,23 +17,25 @@
 
 import { Context } from "@nuxt/types";
 import { useRunningEnvironment } from "~/v1/infrastructure/services/useRunningEnvironment";
+import { useLocalStorage } from "~/v1/infrastructure/services";
+
+const { set } = useLocalStorage();
 
 export default ({ $auth, route, redirect }: Context) => {
   const { isRunningOnHuggingFace } = useRunningEnvironment();
 
+  // By-pass unknown routes. This is needed to avoid errors with API calls.
+  if (route.name == null) return;
+
   switch (route.name) {
     case "sign-in":
       if ($auth.loggedIn) return redirect("/");
 
       if (route.params.omitCTA) return;
 
       if (isRunningOnHuggingFace()) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { redirect: _, ...query } = route.query;
-
         return redirect({
           name: "welcome-hf-sign-in",
-          query,
         });
       }
       break;
@@ -50,14 +52,11 @@ export default ({ $auth, route, redirect }: Context) => {
     default:
       if (!$auth.loggedIn) {
         if (route.path !== "/") {
-          route.query.redirect = route.fullPath;
+          set("redirectTo", route.fullPath);
         }
 
         redirect({
           name: "sign-in",
-          query: {
-            ...route.query,
-          },
         });
       }
   }

argilla-frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argilla",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "private": true,
   "scripts": {
     "dev": "nuxt",

argilla-frontend/pages/_id.vue

@@ -24,6 +24,11 @@
 import { useNewDatasetViewModel } from "./useNewDatasetViewModel";
 
 export default {
+  middleware({ route, redirect }) {
+    if (route.params.id === "datasets") {
+      redirect("/");
+    }
+  },
   mounted() {
     this.getNewDatasetByRepoIdFromUrl();
   },

argilla-frontend/pages/new/_id.vue

@@ -0,0 +1,14 @@
+<template></template>
+
+<script>
+export default {
+  middleware({ route, redirect }) {
+    if (route.params.id) {
+      const newRoute = encodeURIComponent(route.params.id);
+      redirect(newRoute);
+    } else {
+      redirect("/");
+    }
+  },
+};
+</script>