Assign field to a span question (#5717)

This PR includes a new component for assigning a field to the span
question in the dataset creation configuration

Closes #5715

---------

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

Author: leiyre

argilla-frontend/CHANGELOG.md

@@ -24,6 +24,7 @@ These are the section headers that we use:
 
 ### Fixed
 
+- Assign field to span question on dataset creation. ([#5717](https://github.com/argilla-io/argilla/pull/5717))
 - Fixed visible_options when updating question setting. ([#5716](https://github.com/argilla-io/argilla/pull/5716))
 - Fixed highlighting on same record ([#5693](https://github.com/argilla-io/argilla/pull/5693))
 

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

@@ -73,7 +73,6 @@ export default {
   props: {
     maxOptionsToShowBeforeCollapse: {
       type: Number,
-      required: true,
     },
     options: {
       type: Array,
@@ -165,21 +164,24 @@ export default {
     },
     remainingVisibleOptions() {
       return this.filteredOptions
-        .slice(this.maxOptionsToShowBeforeCollapse)
+        .slice(this.maxVisibleOptions)
         .filter((option) => option.isSelected);
     },
     visibleOptions() {
       if (this.isExpanded) return this.filteredOptions;
 
       return this.filteredOptions
-        .slice(0, this.maxOptionsToShowBeforeCollapse)
+        .slice(0, this.maxVisibleOptions)
         .concat(this.remainingVisibleOptions);
     },
+    maxVisibleOptions() {
+      return this.maxOptionsToShowBeforeCollapse ?? this.options.length + 1;
+    },
     numberToShowInTheCollapseButton() {
       return this.filteredOptions.length - this.visibleOptions.length;
     },
     showCollapseButton() {
-      return this.filteredOptions.length > this.maxOptionsToShowBeforeCollapse;
+      return this.filteredOptions.length > this.maxVisibleOptions;
     },
     showSearch() {
       return (
@@ -284,7 +286,7 @@ export default {
     expandLabelsOnTab(index) {
       if (!this.showCollapseButton) return;
 
-      if (index === this.maxOptionsToShowBeforeCollapse - 1) {
+      if (index === this.maxVisibleOptions - 1) {
         this.isExpanded = true;
       }
     },

argilla-frontend/components/features/annotation/settings/Validation.vue

@@ -6,7 +6,7 @@
         class="--error-message"
         v-for="error in validations"
         :key="error"
-        v-html="error"
+        v-html="$t(error)"
       />
     </template>
   </div>

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

@@ -90,11 +90,10 @@
                 <DatasetConfigurationQuestion
                   v-for="question in dataset.selectedSubset.questions"
                   :key="question.name"
+                  :selectedSubset="dataset.selectedSubset"
                   :question="question"
-                  :columns="dataset.selectedSubset.columns"
                   :remove-is-allowed="true"
                   :available-types="availableQuestionTypes"
-                  @remove="dataset.selectedSubset.removeQuestion(question.name)"
                   @change-type="onTypeIsChanged(question.name, $event)"
                   @is-focused="isFocused = $event"
                 />

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

@@ -0,0 +1,144 @@
+<template>
+  <BaseDropdown
+    class="column-selector"
+    :visible="dropdownIsVisible"
+    @visibility="onVisibility"
+  >
+    <template slot="dropdown-header">
+      <svgicon name="assign" height="12" />
+      {{ $t("datasetCreation.applyToaAField") }}
+      <span
+        v-if="options.length"
+        class="column-selector__chip"
+        v-text="value"
+      />
+    </template>
+    <template slot="dropdown-content">
+      <span class="column-selector__options__intro" v-text="$t('field')" />
+      <ul class="column-selector__options">
+        <li
+          :class="
+            option === value
+              ? 'column-selector__option--selected'
+              : 'column-selector__option'
+          "
+          v-for="(option, index) in filteredOptions"
+          :key="index"
+          @click="selectOption(option)"
+        >
+          {{ option?.name ?? option }}
+        </li>
+      </ul>
+    </template>
+  </BaseDropdown>
+</template>
+
+<script>
+import "assets/icons/assign";
+export default {
+  props: {
+    value: {
+      type: [Object, String],
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  model: {
+    prop: "value",
+    event: "onValueChange",
+  },
+  data() {
+    return {
+      dropdownIsVisible: false,
+    };
+  },
+  computed: {
+    filteredOptions() {
+      return this.options.filter(
+        (option) => JSON.stringify(option) !== JSON.stringify(this.value)
+      );
+    },
+    optionNames() {
+      return this.options.map((option) => option.name);
+    },
+  },
+  methods: {
+    onVisibility(value) {
+      this.dropdownIsVisible = value;
+    },
+    selectOption(option) {
+      this.$emit("onValueChange", option.name);
+
+      this.dropdownIsVisible = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.column-selector {
+  user-select: none;
+  font-weight: 400;
+
+  :deep(.dropdown__header) {
+    display: flex;
+    gap: $base-space;
+    flex-wrap: wrap;
+    min-height: $base-space * 4;
+    border: none;
+    color: var(--fg-cuaternary);
+    &:hover {
+      background: none;
+    }
+  }
+
+  :deep(.dropdown__content) {
+    bottom: 0;
+    top: auto;
+    right: auto;
+    min-width: 140px;
+  }
+
+  &__options {
+    min-width: 100%;
+    list-style: none;
+    padding: calc($base-space / 2);
+    margin: 0;
+    max-height: 120px;
+    overflow-y: auto;
+    &__intro {
+      display: block;
+      padding: 2px;
+      font-weight: 300;
+    }
+  }
+  &__chip {
+    padding: calc($base-space / 2) $base-space;
+    border-radius: $border-radius-m;
+    background: var(--bg-accent-grey-1);
+    color: var(--fg-cuaternary);
+    @include font-size(12px);
+  }
+  &__option {
+    padding: calc($base-space / 2);
+    border-radius: $border-radius;
+    transition: all 0.2s ease-in;
+    width: max-content;
+    min-width: 100%;
+    cursor: pointer;
+    &:hover {
+      background: var(--bg-opacity-4);
+      transition: all 0.2s ease-out;
+    }
+    &--selected {
+      background: var(--bg-opacity-4);
+      @extend .column-selector__option;
+    }
+  }
+  .svg-icon {
+    flex-shrink: 0;
+  }
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      :class="{ '--error': errors.length }"
+      :class="{ '--error': errors.options?.length }"
       class="dataset-config-label__input-container"
     >
       <input
@@ -14,7 +14,7 @@
         class="dataset-config-label__input"
       />
     </div>
-    <Validation v-if="errors.length" :validations="translatedValidations" />
+    <Validation v-if="errors.options?.length" :validations="errors.options" />
     <label
       v-else
       class="dataset-config-label__label"
@@ -29,7 +29,7 @@
 export default {
   data() {
     return {
-      errors: [],
+      errors: {},
       isDirty: false,
     };
   },
@@ -47,11 +47,6 @@ export default {
     optionsJoinedByCommas() {
       return this.question.options.map((item) => item.text).join(",");
     },
-    translatedValidations() {
-      return this.errors.map((validation) => {
-        return this.$t(validation);
-      });
-    },
   },
   methods: {
     validateOptions() {

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

@@ -25,6 +25,7 @@
       <DatasetConfigurationSpan
         v-else-if="question.settings.type.isSpanType"
         :question="question"
+        :textFields="selectedSubset.textFields"
         @is-focused="$emit('is-focused', $event)"
       />
       <DatasetConfigurationRating
@@ -42,7 +43,7 @@
     <DatasetConfigurationColumnSelector
       v-if="showColumnSelector"
       class="config-card__type"
-      :options="columns"
+      :options="selectedSubset.columns"
       v-model="question.column"
     />
     <BaseCheckbox
@@ -63,8 +64,8 @@ export default {
       type: Object,
       required: true,
     },
-    columns: {
-      type: Array,
+    selectedSubset: {
+      type: Object,
       required: true,
     },
     removeIsAllowed: {
@@ -90,7 +91,7 @@ export default {
   },
   methods: {
     remove() {
-      this.$emit("remove");
+      this.selectedSubset.removeQuestion(this.question.name);
     },
   },
 };

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      :class="{ '--error': errors.length }"
+      :class="{ '--error': errors.options?.length }"
       class="dataset-config-rating__input-container"
     >
       <input
@@ -21,15 +21,15 @@
         class="dataset-config-rating__input"
       />
     </div>
-    <Validation v-if="errors.length" :validations="translatedValidations" />
+    <Validation v-if="errors.options?.length" :validations="errors.options" />
   </div>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      errors: [],
+      errors: {},
       isDirty: false,
     };
   },
@@ -43,13 +43,6 @@ export default {
       default: "",
     },
   },
-  computed: {
-    translatedValidations() {
-      return this.errors.map((validation) => {
-        return this.$t(validation);
-      });
-    },
-  },
   methods: {
     validateOptions() {
       this.errors = this.question.validate();