feat(wikibase-schema-editor): extract drag drop validation #104
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis change introduces a comprehensive real-time validation system for drag-and-drop schema editing in the frontend. It adds two new composables— Changes
Sequence Diagram(s)Real-Time Drag-and-Drop Validation FlowsequenceDiagram
participant User
participant UI
participant useDragDropContext
participant useRealTimeValidation
participant ValidationStore
User->>UI: Drag column over drop target
UI->>useDragDropContext: enterDropZone(column, target)
useDragDropContext->>useRealTimeValidation: validateDragOperation(column, target)
useRealTimeValidation->>ValidationStore: (optional) Add validation error
useRealTimeValidation-->>useDragDropContext: Validation result / feedback
useDragDropContext-->>UI: Update drop feedback in UI
User->>UI: Drop column
UI->>useDragDropContext: drop(column, target)
useDragDropContext->>useRealTimeValidation: validateDragOperation(column, target)
alt Valid
useDragDropContext-->>UI: Accept drop
else Invalid
useDragDropContext-->>UI: Reject drop, show error
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
frontend/src/composables/useDragDropContext.ts (1)
5-5: Consider using auto-import for consistency.Since
useRealTimeValidationis configured for auto-import in both ESLint and TypeScript declaration files, the explicit import might be redundant. Consider removing this import line to leverage the auto-import feature consistently across the codebase.-import { useRealTimeValidation } from '@frontend/composables/useRealTimeValidation'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
.kiro/specs/wikibase-schema-editor/tasks.md(1 hunks)frontend/.eslintrc-auto-import.json(2 hunks)frontend/auto-imports.d.ts(4 hunks)frontend/src/composables/__tests__/useDragDropContext.test.ts(1 hunks)frontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts(1 hunks)frontend/src/composables/__tests__/useRealTimeValidation.test.ts(1 hunks)frontend/src/composables/__tests__/useSchemaValidationUI.test.ts(1 hunks)frontend/src/composables/useDragDropContext.ts(4 hunks)frontend/src/composables/useRealTimeValidation.ts(1 hunks)frontend/src/composables/useSchemaValidationUI.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
**/*.{ts,tsx,js,jsx}: Usebun <file>instead ofnode <file>orts-node <file>for running TypeScript or JavaScript files
Do not use dotenv; Bun automatically loads .env files
UseBun.serve()for HTTP servers and WebSockets instead ofexpress
Usebun:sqlitefor SQLite instead ofbetter-sqlite3
UseBun.redisfor Redis instead ofioredis
UseBun.sqlfor Postgres instead ofpgorpostgres.js
Use built-inWebSocketinstead ofws
PreferBun.fileovernode:fs's readFile/writeFile
UseBun.$(e.g.,Bun.$ls``) instead of execa for running shell commands
Files:
frontend/src/composables/__tests__/useDragDropContext.test.tsfrontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/useSchemaValidationUI.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.tsfrontend/src/composables/useDragDropContext.tsfrontend/auto-imports.d.tsfrontend/src/composables/useRealTimeValidation.tsfrontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts
**/*.test.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun testinstead ofjestfor running tests
Files:
frontend/src/composables/__tests__/useDragDropContext.test.tsfrontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.tsfrontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts
**/*.{html,ts,tsx,css}
📄 CodeRabbit Inference Engine (.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc)
Use
bun build <file.html|file.ts|file.css>instead ofwebpackoresbuildfor building HTML, TypeScript, or CSS files
Files:
frontend/src/composables/__tests__/useDragDropContext.test.tsfrontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/useSchemaValidationUI.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.tsfrontend/src/composables/useDragDropContext.tsfrontend/auto-imports.d.tsfrontend/src/composables/useRealTimeValidation.tsfrontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts
🧠 Learnings (21)
📓 Common learnings
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
📚 Learning: applies to src/**/*.vue : use auto-imports for vue, pinia, composables, and utilities...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use auto-imports for Vue, Pinia, composables, and utilities
Applied to files:
frontend/.eslintrc-auto-import.jsonfrontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.{vue,ts} : use useapi composable (elysia eden) for all api calls...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use useApi composable (Elysia Eden) for all API calls
Applied to files:
frontend/.eslintrc-auto-import.jsonfrontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/useSchemaValidationUI.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.tsfrontend/src/composables/useDragDropContext.tsfrontend/auto-imports.d.tsfrontend/src/composables/useRealTimeValidation.ts
📚 Learning: applies to **/*.{html,tsx,jsx,js,css} : use html imports with `bun.serve()` instead of `vite` for fr...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.{html,tsx,jsx,js,css} : Use HTML imports with `Bun.serve()` instead of `vite` for frontend development
Applied to files:
frontend/.eslintrc-auto-import.jsonfrontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.{vue,ts} : always use backend-inferred types for api data...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Always use backend-inferred types for API data
Applied to files:
frontend/.eslintrc-auto-import.jsonfrontend/auto-imports.d.ts
📚 Learning: applies to **/*.{tsx,jsx,js} : import .css files directly in .tsx, .jsx, or .js files and bun will h...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-20T14:13:40.153Z
Learning: Applies to **/*.{tsx,jsx,js} : Import .css files directly in .tsx, .jsx, or .js files and Bun will handle them
Applied to files:
frontend/.eslintrc-auto-import.json
📚 Learning: applies to src/composables/**/*.ts : use composables for logic that is not global state...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Use composables for logic that is not global state
Applied to files:
frontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/useSchemaValidationUI.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.tsfrontend/src/composables/useDragDropContext.tsfrontend/auto-imports.d.tsfrontend/src/composables/useRealTimeValidation.tsfrontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts
📚 Learning: applies to src/**/*.vue : use vue 3 with composition api and <script setup lang="ts"> in all vue com...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use Vue 3 with Composition API and <script setup lang="ts"> in all Vue components
Applied to files:
frontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/useSchemaValidationUI.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.tsfrontend/auto-imports.d.tsfrontend/src/composables/useRealTimeValidation.ts
📚 Learning: applies to src/composables/**/*.ts : do not proxy or export pinia store state/actions from composabl...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not proxy or export Pinia store state/actions from composables
Applied to files:
frontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/useSchemaValidationUI.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.tsfrontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts
📚 Learning: applies to src/**/*.{vue,ts} : use pinia stores for global state...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use Pinia stores for global state
Applied to files:
frontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.tsfrontend/auto-imports.d.tsfrontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts
📚 Learning: applies to src/composables/**/*.ts : place composables in the composables/ directory...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Place composables in the composables/ directory
Applied to files:
frontend/src/composables/__tests__/useSchemaValidationUI.test.tsfrontend/src/composables/useSchemaValidationUI.tsfrontend/src/composables/__tests__/useRealTimeValidation.test.ts
📚 Learning: applies to src/composables/**/*.ts : do not export store state from composables...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/composables/**/*.ts : Do not export store state from composables
Applied to files:
frontend/src/composables/useSchemaValidationUI.tsfrontend/src/composables/useDragDropContext.tsfrontend/auto-imports.d.tsfrontend/src/composables/useRealTimeValidation.ts
📚 Learning: applies to src/**/*.vue : use reactive objects for form state and errors...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use reactive objects for form state and errors
Applied to files:
frontend/src/composables/useSchemaValidationUI.tsfrontend/auto-imports.d.tsfrontend/src/composables/useRealTimeValidation.ts
📚 Learning: applies to src/**/*.vue : prefer composables over methods in vue components...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Prefer composables over methods in Vue components
Applied to files:
frontend/src/composables/useSchemaValidationUI.tsfrontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.vue : props and emits must use explicit typescript interfaces...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Props and emits must use explicit TypeScript interfaces
Applied to files:
frontend/src/composables/useSchemaValidationUI.tsfrontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.{ts,vue} : type safety everywhere...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{ts,vue} : Type safety everywhere
Applied to files:
frontend/src/composables/useSchemaValidationUI.tsfrontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.{vue,ts} : use readonly and shallowreactive for large or expensive data...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.{vue,ts} : Use readonly and shallowReactive for large or expensive data
Applied to files:
frontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.vue : use storetorefs for state in components...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use storeToRefs for state in components
Applied to files:
frontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.vue : use v-memo, shallowref, markraw, and suspense for performance optimization...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use v-memo, shallowRef, markRaw, and Suspense for performance optimization
Applied to files:
frontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.vue : use primevue as the ui library in all vue components...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Use PrimeVue as the UI library in all Vue components
Applied to files:
frontend/auto-imports.d.ts
📚 Learning: applies to src/**/*.vue : build reusable, well-structured components...
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/frontend-setup.rule.md:0-0
Timestamp: 2025-07-20T14:13:24.706Z
Learning: Applies to src/**/*.vue : Build reusable, well-structured components
Applied to files:
frontend/auto-imports.d.ts
🧬 Code Graph Analysis (5)
frontend/src/composables/useSchemaValidationUI.ts (4)
frontend/src/composables/useRealTimeValidation.ts (1)
useRealTimeValidation(33-437)frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/stores/validation.store.ts (1)
useValidationStore(9-128)frontend/auto-imports.d.ts (2)
ColumnInfo(382-382)DropTarget(376-376)
frontend/src/composables/__tests__/useRealTimeValidation.test.ts (4)
frontend/auto-imports.d.ts (3)
ColumnInfo(382-382)DropTarget(376-376)WikibaseDataType(382-382)frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/stores/validation.store.ts (1)
useValidationStore(9-128)frontend/src/composables/useRealTimeValidation.ts (1)
useRealTimeValidation(33-437)
frontend/src/composables/useDragDropContext.ts (3)
frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/composables/useDataTypeCompatibility.ts (1)
useDataTypeCompatibility(8-44)frontend/src/composables/useRealTimeValidation.ts (1)
useRealTimeValidation(33-437)
frontend/auto-imports.d.ts (2)
frontend/src/composables/useRealTimeValidation.ts (1)
useRealTimeValidation(33-437)frontend/src/composables/useSchemaValidationUI.ts (1)
useSchemaValidationUI(12-190)
frontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts (4)
frontend/src/stores/drag-drop.store.ts (1)
useDragDropStore(10-174)frontend/src/stores/validation.store.ts (1)
useValidationStore(9-128)frontend/src/composables/useDragDropContext.ts (1)
useDragDropContext(41-270)frontend/src/composables/useRealTimeValidation.ts (1)
useRealTimeValidation(33-437)
🔇 Additional comments (11)
.kiro/specs/wikibase-schema-editor/tasks.md (1)
154-154: Documentation update is appropriate.The task completion aligns with the PR's implementation of real-time validation functionality.
frontend/src/composables/__tests__/useDragDropContext.test.ts (1)
168-168: Test expectation correctly updated.The validation message format change aligns with the new real-time validation system's message conventions.
frontend/.eslintrc-auto-import.json (1)
322-322: ESLint configuration properly updated.The new composables are correctly added as global identifiers and maintain alphabetical ordering.
Also applies to: 334-334
frontend/auto-imports.d.ts (1)
1-6: Verify auto-generation process for type declarations.The new composable declarations are correctly added and maintain alphabetical ordering. However, since this file is marked as auto-generated, please confirm these changes were made through the proper auto-generation process rather than manual edits.
Also applies to: 263-263, 275-275, 644-644, 656-656
frontend/src/composables/useDragDropContext.ts (2)
123-139: Validation refactoring is well-implemented.The delegation to
realTimeValidation.validateDragOperationsuccessfully centralizes validation logic while maintaining the original interface. The error handling with fallback message ensures robustness.
107-115: Feedback delegation properly implemented.The use of
realTimeValidation.getValidationFeedbackensures consistent validation feedback across the application.frontend/src/composables/__tests__/useRealTimeValidation.test.ts (1)
37-134: Well-structured validation tests.The real-time drag validation tests comprehensively cover various validation scenarios including data type compatibility, nullable constraints, property requirements, and length constraints. Good use of reactive property testing.
frontend/src/composables/__tests__/useSchemaValidationUI.test.ts (2)
213-213: Update tests after removing unusedacceptedTypesparameter.These test calls need to be updated once the
acceptedTypesparameter is removed fromgetDropZoneClassesmethod as suggested in the implementation review.- const classes = ui.getDropZoneClasses('item.terms.labels.en', ['string']) + const classes = ui.getDropZoneClasses('item.terms.labels.en')Apply similar changes to lines 241, 269, and 275.
Also applies to: 241-241, 269-269, 275-275
380-392: Remove tests for direct store access.Since direct store access should be removed from the composable as per coding guidelines, these tests should be updated accordingly.
describe('Direct Access', () => { it('should provide direct access to underlying composables', () => { const ui = useSchemaValidationUI() expect(ui.realTimeValidation).toBeDefined() - expect(ui.dragDropStore).toBeDefined() - expect(ui.validationStore).toBeDefined() - - // Should be the same instances - expect(ui.dragDropStore).toBe(dragDropStore) - expect(ui.validationStore).toBe(validationStore) }) })frontend/src/composables/__tests__/useDragDropValidationIntegration.test.ts (1)
115-269: Excellent store integration test coverage.The store integration tests thoroughly verify error synchronization, clearing behavior, and multiple path handling. The drag store integration tests properly validate target computation and state changes.
frontend/src/composables/useRealTimeValidation.ts (1)
286-348: Well-implemented real-time validation lifecycle management.The implementation properly manages watchers with cleanup, handles all relevant state changes, and provides immediate feedback. Good use of Vue's reactivity system.
| const currentDragValidation = computed(() => { | ||
| if (!dragDropStore.draggedColumn || !dragDropStore.hoveredTarget) { | ||
| return null | ||
| } | ||
|
|
||
| const target = dragDropStore.availableTargets.find( | ||
| (t) => t.path === dragDropStore.hoveredTarget, | ||
| ) | ||
| if (!target) return null | ||
|
|
||
| return realTimeValidation.validateDragOperation(dragDropStore.draggedColumn, target) | ||
| }) | ||
|
|
||
| // UI feedback for current drag operation | ||
| const currentDragFeedback = computed(() => { | ||
| if (!dragDropStore.draggedColumn || !dragDropStore.hoveredTarget) { | ||
| return null | ||
| } | ||
|
|
||
| const target = dragDropStore.availableTargets.find( | ||
| (t) => t.path === dragDropStore.hoveredTarget, | ||
| ) | ||
| if (!target) return null | ||
|
|
||
| return realTimeValidation.getValidationFeedback(dragDropStore.draggedColumn, target) | ||
| }) | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor duplicated target lookup logic.
The target lookup logic is duplicated between currentDragValidation and currentDragFeedback computed properties. This violates the DRY principle.
Consider extracting the target lookup logic into a helper computed property:
+ // Helper computed property for current hovered target
+ const currentHoveredTarget = computed(() => {
+ if (!dragDropStore.hoveredTarget) return null
+ return dragDropStore.availableTargets.find(
+ (t) => t.path === dragDropStore.hoveredTarget,
+ )
+ })
+
// Current drag validation state
const currentDragValidation = computed(() => {
if (!dragDropStore.draggedColumn || !dragDropStore.hoveredTarget) {
return null
}
- const target = dragDropStore.availableTargets.find(
- (t) => t.path === dragDropStore.hoveredTarget,
- )
+ const target = currentHoveredTarget.value
if (!target) return null
return realTimeValidation.validateDragOperation(dragDropStore.draggedColumn, target)
})
// UI feedback for current drag operation
const currentDragFeedback = computed(() => {
if (!dragDropStore.draggedColumn || !dragDropStore.hoveredTarget) {
return null
}
- const target = dragDropStore.availableTargets.find(
- (t) => t.path === dragDropStore.hoveredTarget,
- )
+ const target = currentHoveredTarget.value
if (!target) return null
return realTimeValidation.getValidationFeedback(dragDropStore.draggedColumn, target)
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const currentDragValidation = computed(() => { | |
| if (!dragDropStore.draggedColumn || !dragDropStore.hoveredTarget) { | |
| return null | |
| } | |
| const target = dragDropStore.availableTargets.find( | |
| (t) => t.path === dragDropStore.hoveredTarget, | |
| ) | |
| if (!target) return null | |
| return realTimeValidation.validateDragOperation(dragDropStore.draggedColumn, target) | |
| }) | |
| // UI feedback for current drag operation | |
| const currentDragFeedback = computed(() => { | |
| if (!dragDropStore.draggedColumn || !dragDropStore.hoveredTarget) { | |
| return null | |
| } | |
| const target = dragDropStore.availableTargets.find( | |
| (t) => t.path === dragDropStore.hoveredTarget, | |
| ) | |
| if (!target) return null | |
| return realTimeValidation.getValidationFeedback(dragDropStore.draggedColumn, target) | |
| }) | |
| // Helper computed property for current hovered target | |
| const currentHoveredTarget = computed(() => { | |
| if (!dragDropStore.hoveredTarget) return null | |
| return dragDropStore.availableTargets.find( | |
| (t) => t.path === dragDropStore.hoveredTarget, | |
| ) | |
| }) | |
| const currentDragValidation = computed(() => { | |
| if (!dragDropStore.draggedColumn || !dragDropStore.hoveredTarget) { | |
| return null | |
| } | |
| const target = currentHoveredTarget.value | |
| if (!target) return null | |
| return realTimeValidation.validateDragOperation(dragDropStore.draggedColumn, target) | |
| }) | |
| // UI feedback for current drag operation | |
| const currentDragFeedback = computed(() => { | |
| if (!dragDropStore.draggedColumn || !dragDropStore.hoveredTarget) { | |
| return null | |
| } | |
| const target = currentHoveredTarget.value | |
| if (!target) return null | |
| return realTimeValidation.getValidationFeedback(dragDropStore.draggedColumn, target) | |
| }) |
🤖 Prompt for AI Agents
In frontend/src/composables/useSchemaValidationUI.ts between lines 25 and 51,
the logic to find the target from dragDropStore.availableTargets based on
dragDropStore.hoveredTarget is duplicated in both currentDragValidation and
currentDragFeedback computed properties. Extract this target lookup into a
separate computed property, for example named currentDragTarget, that returns
the found target or null. Then update currentDragValidation and
currentDragFeedback to use this new computed property instead of repeating the
lookup logic.
| } | ||
|
|
||
| // Get drop zone classes based on current drag state | ||
| const getDropZoneClasses = (targetPath: string, acceptedTypes: string[]) => { |
There was a problem hiding this comment.
Remove unused parameter acceptedTypes.
The acceptedTypes parameter is not used within the getDropZoneClasses method.
- const getDropZoneClasses = (targetPath: string, acceptedTypes: string[]) => {
+ const getDropZoneClasses = (targetPath: string) => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const getDropZoneClasses = (targetPath: string, acceptedTypes: string[]) => { | |
| const getDropZoneClasses = (targetPath: string) => { |
🤖 Prompt for AI Agents
In frontend/src/composables/useSchemaValidationUI.ts at line 103, the function
getDropZoneClasses has an unused parameter acceptedTypes. Remove the
acceptedTypes parameter from the function signature to clean up the code and
avoid confusion.
| // Direct access to underlying composables | ||
| realTimeValidation, | ||
| dragDropStore, | ||
| validationStore, | ||
| } |
There was a problem hiding this comment.
Do not export store instances from composables.
According to the coding guidelines, composables should not export Pinia store state or actions. Directly exposing dragDropStore and validationStore violates this principle.
Remove the direct store exports from the return statement:
// Control methods
enableRealTimeValidation,
disableRealTimeValidation,
clearAllValidation,
clearPathValidation,
- // Direct access to underlying composables
- realTimeValidation,
- dragDropStore,
- validationStore,
+ // Direct access to underlying composable only
+ realTimeValidation,
}If components need to access store state, they should import the stores directly rather than accessing them through this composable.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Direct access to underlying composables | |
| realTimeValidation, | |
| dragDropStore, | |
| validationStore, | |
| } | |
| return { | |
| // Control methods | |
| enableRealTimeValidation, | |
| disableRealTimeValidation, | |
| clearAllValidation, | |
| clearPathValidation, | |
| // Direct access to underlying composable only | |
| realTimeValidation, | |
| } |
🤖 Prompt for AI Agents
In frontend/src/composables/useSchemaValidationUI.ts around lines 185 to 189,
remove the direct exports of the Pinia store instances dragDropStore and
validationStore from the return statement of the composable. Instead, only
export non-store composables or functions. Components that need access to these
stores should import them directly rather than accessing them through this
composable.
1 participant
Addresses Task 26 of #66