feat(v2-ui): v2 frontend vertical slice — schemas, records, search, reference review

.github/workflows/extralit-frontend.yml

@@ -41,6 +41,11 @@ jobs:
         run: |
           npm install
 
+      - name: Check generated v2 API types are current 🔒
+        run: |
+          npm run gen:api:types
+          git diff --exit-code -- v2/infrastructure/api/generated
+
       - name: Run lint 🧹
         continue-on-error: true
         run: |

.github/workflows/extralit-server.yml

@@ -15,6 +15,7 @@ on:
       - releases/**
     paths:
       - "extralit-server/**"
+      - "extralit-frontend/v2/infrastructure/api/**"
 
 permissions:
   id-token: write
@@ -96,6 +97,12 @@ jobs:
       - name: Install dependencies
         run: uv sync --dev --extra postgresql
 
+      - name: Check frontend v2 OpenAPI snapshot is current 🔒
+        run: |
+          uv run python -m extralit_server.cli openapi-dump --output /tmp/openapi-v2.json
+          diff -u ../extralit-frontend/v2/infrastructure/api/openapi.json /tmp/openapi-v2.json \
+            || { echo "::error::v2 OpenAPI drift — run 'npm run gen:api' in extralit-frontend and commit"; exit 1; }
+
       - name: Run tests 📈
         id: run-tests
         continue-on-error: true

extralit-frontend/.gitignore

@@ -10,3 +10,6 @@ node_modules/
 dist/
 .vercel
 .env*
+
+# v2 e2e generated seed output (regenerated per run)
+e2e/v2/seed/seed-output.json

extralit-frontend/__mocks__/tabulator-tables.js

@@ -1,11 +1,26 @@
 // Mock implementation for tabulator-tables
 export class TabulatorFull {
-  constructor() {
+  // Test hooks: how many times the ctor ran (rebuild detection) and the latest instance
+  // (so tests can fire its stored event handlers). Reset these in a test's beforeEach.
+  static constructed = 0;
+  static latest = null;
+
+  constructor(element, options) {
+    this.element = element;
+    this.options = options || {};
+    this.handlers = {};
     this.rows = [];
     this.columns = [];
     this.data = [];
     // Mock all required methods to prevent errors
     this.initialized = true;
+    TabulatorFull.constructed += 1;
+    TabulatorFull.latest = this;
+  }
+
+  // Fire a stored handler from a test, e.g. instance.emit("cellEdited", fakeCell).
+  emit(event, ...args) {
+    this.handlers[event]?.(...args);
   }
 
   addRow(data, position, index) {
@@ -70,10 +85,15 @@ export class TabulatorFull {
     return true;
   }
 
-  on() {
+  on(event, callback) {
+    this.handlers[event] = callback;
     return this;
   }
 
+  destroy() {
+    return true;
+  }
+
   redraw() {
     return true;
   }

extralit-frontend/components/features/annotation/container/questions/form/shared-components/label-selection/LabelSelection.component.vue → extralit-frontend/components/base/inputs/label-selection/LabelSelection.component.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="container" @keydown="keyboardHandler">
-    <div class="component-header" v-if="showSearch || showCollapseButton">
+    <div v-if="showSearch || showCollapseButton" class="component-header">
       <div class="left-header">
         <SearchLabelComponent
           v-if="showSearch"
           ref="searchComponentRef"
           v-model="searchInput"
-          :searchRef="searchRef"
+          :search-ref="searchRef"
           :placeholder="$t('spanAnnotation.searchLabels')"
         />
       </div>
       <div class="right-header">
         <button
+          v-if="showCollapseButton"
           ref="showLessButtonRef"
           type="button"
           class="show-less-button cursor-pointer"
-          v-if="showCollapseButton"
           @click="toggleShowLess"
         >
           <span :class="isExpanded ? '--less' : '--more'" v-text="textToShowInTheCollapseButton" />
@@ -24,31 +24,31 @@
       </div>
     </div>
     <transition-group
+      v-if="filteredOptions.length"
       ref="inputsAreaRef"
       :key="searchInput"
       name="shuffle"
       :css="modelValue.length < 50"
       class="inputs-area"
-      v-if="filteredOptions.length"
       role="group"
       aria-multiselectable="multiple"
       aria-label="Label-Options"
     >
       <div
-        class="input-button"
         v-for="(option, index) in visibleOptions"
         :key="option.id"
-        @keydown.enter.prevent
+        class="input-button"
         role="button"
         :aria-label="option.text"
+        @keydown.enter.prevent
       >
         <input
+          :id="option.id"
           ref="options"
+          v-model="option.isSelected"
           type="checkbox"
           :name="option.text"
-          :id="option.id"
           :data-keyboard="keyboards[option.id]"
-          v-model="option.isSelected"
           @change="onSelect(option)"
           @focus="onFocus"
           @keydown.tab="expandLabelsOnTab(index)"
@@ -82,7 +82,7 @@
         </BaseTooltip>
       </div>
     </transition-group>
-    <i class="no-result" v-if="!filteredOptions.length" />
+    <i v-if="!filteredOptions.length" class="no-result" />
   </div>
 </template>
 
@@ -93,12 +93,6 @@ import { useLabelSelectionViewModel } from "./useLabelSelectionViewModel";
 
 export default {
   name: "LabelSelectionComponent",
-  // Consumed via `v-model="question.answer.values"` from parent (Single/Multi/Rating/Span).
-  // Vue 3 removed the `model: { prop, event }` option, so `v-model` now desugars to
-  // `:modelValue` + `@update:modelValue`. The selection list is mutated in place
-  // (`option.isSelected = ...`), so reactivity flows via the shared array reference;
-  // we still declare `update:modelValue` for correctness.
-  emits: ["update:modelValue", "on-focus", "on-selected"],
   props: {
     maxOptionsToShowBeforeCollapse: {
       type: Number,
@@ -131,39 +125,22 @@ export default {
       default: true,
     },
   },
+  // Consumed via `v-model="question.answer.values"` from parent (Single/Multi/Rating/Span).
+  // Vue 3 removed the `model: { prop, event }` option, so `v-model` now desugars to
+  // `:modelValue` + `@update:modelValue`. The selection list is mutated in place
+  // (`option.isSelected = ...`), so reactivity flows via the shared array reference;
+  // we still declare `update:modelValue` for correctness.
+  emits: ["update:modelValue", "on-focus", "on-selected"],
+  setup(props) {
+    return useLabelSelectionViewModel(props);
+  },
   data() {
     return {
       searchInput: "",
       timer: null,
       keyCode: "",
     };
   },
-  created() {
-    this.searchRef = `${this.componentId}SearchFilterRef`;
-  },
-  watch: {
-    isFocused: {
-      immediate: true,
-      handler(newValue) {
-        if (newValue) {
-          this.$nextTick(() => {
-            const options = this.$refs?.options;
-            if (options?.some((o) => o.contains(document.activeElement))) {
-              return;
-            }
-
-            if (options?.length > 0) {
-              options[0].focus({
-                preventScroll: true,
-              });
-            } else {
-              this.$refs.searchComponentRef?.searchInputRef.focus();
-            }
-          });
-        }
-      },
-    },
-  },
   computed: {
     keyboards() {
       return this.modelValue.reduce((acc, option, index) => {
@@ -227,6 +204,32 @@ export default {
       return this.maxOptionsToShowBeforeCollapse ?? this.modelValue.length + 1;
     },
   },
+  watch: {
+    isFocused: {
+      immediate: true,
+      handler(newValue) {
+        if (newValue) {
+          this.$nextTick(() => {
+            const options = this.$refs?.options;
+            if (options?.some((o) => o.contains(document.activeElement))) {
+              return;
+            }
+
+            if (options?.length > 0) {
+              options[0].focus({
+                preventScroll: true,
+              });
+            } else {
+              this.$refs.searchComponentRef?.searchInputRef.focus();
+            }
+          });
+        }
+      },
+    },
+  },
+  created() {
+    this.searchRef = `${this.componentId}SearchFilterRef`;
+  },
   methods: {
     keyboardHandler($event) {
       if (this.timer) clearTimeout(this.timer);
@@ -341,9 +344,6 @@ export default {
       return tooltip;
     },
   },
-  setup(props) {
-    return useLabelSelectionViewModel(props);
-  },
 };
 </script>
 

extralit-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/DndSelection.component.vue → extralit-frontend/components/base/inputs/ranking/DndSelection.component.vue

@@ -12,9 +12,9 @@
       <template #item="{ element: item }">
         <div
           :id="item.value"
+          ref="questions"
           :title="item.text"
           tabindex="0"
-          ref="questions"
           @keydown="rankWithKeyboard($event, item)"
           @focus="onFocus"
         >
@@ -24,15 +24,15 @@
             :text="getSuggestedAgent(item)"
             minimalist
           >
-            <svgicon width="6" name="draggable" :id="`${item.value}-icon`" aria-label="Dragging Icon" />
-            <span class="draggable__rank-card__title" v-text="item.text" :id="`${item.value}-span`" />
+            <svgicon :id="`${item.value}-icon`" width="6" name="draggable" aria-label="Dragging Icon" />
+            <span :id="`${item.value}-span`" class="draggable__rank-card__title" v-text="item.text" />
 
             <span v-if="isSuggested(item)" class="draggable__suggestion">
               <span v-text="getSuggestedRank(item)" />
               <svgicon name="suggestion" width="10" height="10" />
               <span
-                class="draggable__suggestion__score"
                 v-if="getSuggestedScore(item)"
+                class="draggable__suggestion__score"
                 v-text="getSuggestedScore(item)"
               />
             </span>
@@ -42,10 +42,10 @@
     </draggable>
     <div class="draggable__slots-container">
       <div
-        class="draggable__slot"
-        :class="{ '--active-slot': items.length }"
         v-for="{ index, rank, items } in ranking.slots"
         :key="index"
+        class="draggable__slot"
+        :class="{ '--active-slot': items.length }"
       >
         <span class="draggable__slot-box--ranking" v-text="rank" />
         <draggable
@@ -60,9 +60,9 @@
           <template #item="{ element: item }">
             <div
               :id="item.value"
+              ref="items"
               :title="item.text"
               tabindex="0"
-              ref="items"
               @keydown="rankWithKeyboard($event, item)"
               @focus="onFocus"
             >
@@ -72,15 +72,15 @@
                 minimalist
                 class="draggable__rank-card--ranked"
               >
-                <svgicon width="6" name="draggable" :id="`${item.value}-icon`" />
-                <span class="draggable__rank-card__title" v-text="item.text" :id="`${item.value}-span`" />
+                <svgicon :id="`${item.value}-icon`" width="6" name="draggable" />
+                <span :id="`${item.value}-span`" class="draggable__rank-card__title" v-text="item.text" />
 
                 <span v-if="isSuggested(item)" class="draggable__suggestion">
                   <span v-text="getSuggestedRank(item)" />
                   <svgicon name="suggestion" width="10" height="10" />
                   <span
-                    class="draggable__suggestion__score"
                     v-if="getSuggestedScore(item)"
+                    class="draggable__suggestion__score"
                     v-text="getSuggestedScore(item)"
                   />
                 </span>

extralit-frontend/components/features/annotation/container/questions/form/ranking/drag-and-drop-selection/dndSelection.component.spec.js → extralit-frontend/components/base/inputs/ranking/dndSelection.component.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import DndSelectionComponent from "./DndSelection.component";
-import { adaptQuestionsToSlots } from "../ranking-adapter";
-import { settingsFake, settingsFakeWith12Elements } from "../ranking-fakes";
+import { adaptQuestionsToSlots } from "./ranking-adapter";
+import { settingsFake, settingsFakeWith12Elements } from "./ranking-fakes";
 
 let wrapper = null;
 const options = {

extralit-frontend/components/features/annotation/container/questions/form/rating/RatingMonoSelection.component.vue → extralit-frontend/components/base/inputs/rating/RatingMonoSelection.component.vue

@@ -2,24 +2,24 @@
   <div class="container">
     <div class="inputs-area" role="radiogroup" aria-label="Label-Options">
       <div
-        class="input-button"
         v-for="option in modelValue"
         :key="option.id"
-        @keydown.enter.prevent
+        class="input-button"
         role="button"
         :aria-label="option.text"
+        @keydown.enter.prevent
       >
         <BaseTooltip
           :title="isSuggested(option) ? $t('suggestion.name') : ''"
           :text="getSuggestedInfo(option)"
           minimalist
         >
           <input
+            :id="option.id"
             ref="options"
+            v-model="option.isSelected"
             type="checkbox"
             :name="option.value"
-            :id="option.id"
-            v-model="option.isSelected"
             @change="onSelect(option)"
             @focus="onFocus"
           />
@@ -43,9 +43,6 @@
 <script>
 export default {
   name: "RatingMonoSelectionComponent",
-  // v-model consumer (rating/Rating.component.vue): same Vue 3 migration as
-  // LabelSelection — rename `options` → `modelValue` and emit `update:modelValue`.
-  emits: ["update:modelValue", "on-focus", "on-selected"],
   props: {
     modelValue: {
       type: Array,
@@ -59,6 +56,9 @@ export default {
       type: Object,
     },
   },
+  // v-model consumer (rating/Rating.component.vue): same Vue 3 migration as
+  // LabelSelection — rename `options` → `modelValue` and emit `update:modelValue`.
+  emits: ["update:modelValue", "on-focus", "on-selected"],
   watch: {
     isFocused: {
       immediate: true,