feat(wikibase-schema-editor): create references editor component#98
Merged
feat(wikibase-schema-editor): create references editor component#98
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant ReferencesEditor
ParentComponent->>ReferencesEditor: Provide statementId, references, availableColumns, disabled
ReferencesEditor->>ParentComponent: emit add-reference (statementId, reference)
ReferencesEditor->>ParentComponent: emit remove-reference (statementId, referenceIndex)
ReferencesEditor->>ParentComponent: emit update-reference (statementId, referenceIndex, reference)
ParentComponent-->>ReferencesEditor: Update props as needed (references, columns, etc.)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (5)
✨ 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: 6
🧹 Nitpick comments (2)
.trae/rules/code-conventions.md (1)
1-1: Add trailing newline
POSIX text files should end with a newline to avoid diff noise in future edits.frontend/src/components/__tests__/ReferencesEditor.test.ts (1)
361-372: Consider using type assertions instead of @ts-ignore.While
@ts-ignoreworks for testing null assignments, consider using type assertions for better type safety:- // @ts-ignore - Test needs to set null values - selectedProperty.value = null + selectedProperty.value = null as PropertyReference | nullThis maintains type checking while allowing the test scenario.
Also applies to: 401-404
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
.kiro/specs/wikibase-schema-editor/tasks.md(1 hunks).trae/rules/code-conventions.md(1 hunks).trae/rules/product.md(1 hunks).trae/rules/structure.md(1 hunks).trae/rules/tech.md(1 hunks)frontend/components.d.ts(1 hunks)frontend/src/components/ReferencesEditor.vue(1 hunks)frontend/src/components/__tests__/ReferencesEditor.compile.test.ts(1 hunks)frontend/src/components/__tests__/ReferencesEditor.test.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/components.d.tsfrontend/src/components/__tests__/ReferencesEditor.compile.test.tsfrontend/src/components/__tests__/ReferencesEditor.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/components.d.tsfrontend/src/components/__tests__/ReferencesEditor.compile.test.tsfrontend/src/components/__tests__/ReferencesEditor.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/components/__tests__/ReferencesEditor.compile.test.tsfrontend/src/components/__tests__/ReferencesEditor.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/**/*.vue : Use storeToRefs for state in components
📚 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/components.d.tsfrontend/src/components/ReferencesEditor.vue
📚 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/components.d.tsfrontend/src/components/__tests__/ReferencesEditor.compile.test.tsfrontend/src/components/ReferencesEditor.vue
📚 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/components.d.tsfrontend/src/components/ReferencesEditor.vue
📚 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/components.d.tsfrontend/src/components/__tests__/ReferencesEditor.compile.test.tsfrontend/src/components/ReferencesEditor.vue
📚 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/components.d.tsfrontend/src/components/__tests__/ReferencesEditor.compile.test.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/components.d.tsfrontend/src/components/ReferencesEditor.vue
📚 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/components.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/components.d.tsfrontend/src/components/ReferencesEditor.vue
📚 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/components.d.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/components.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/components.d.ts
📚 Learning: applies to **/*.test.{ts,tsx,js,jsx} : use `bun test` instead of `jest` for running tests...
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 **/*.test.{ts,tsx,js,jsx} : Use `bun test` instead of `jest` for running tests
Applied to files:
frontend/src/components/__tests__/ReferencesEditor.compile.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/components/__tests__/ReferencesEditor.compile.test.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/src/components/__tests__/ReferencesEditor.compile.test.ts
📚 Learning: applies to **/*.{ts,tsx,js,jsx} : use `bun ` instead of `node ` or `ts-node ` for ...
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 **/*.{ts,tsx,js,jsx} : Use `bun <file>` instead of `node <file>` or `ts-node <file>` for running TypeScript or JavaScript files
Applied to files:
frontend/src/components/__tests__/ReferencesEditor.compile.test.ts
📚 Learning: applies to **/*.html : html files can import .tsx, .jsx, or .js files directly and bun's bundler wil...
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 : HTML files can import .tsx, .jsx, or .js files directly and Bun's bundler will transpile & bundle automatically
Applied to files:
frontend/src/components/__tests__/ReferencesEditor.compile.test.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/src/components/__tests__/ReferencesEditor.compile.test.ts
📚 Learning: for more information, read the official bun documentation at https://bun.sh/docs or check `node_modu...
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: For more information, read the official Bun documentation at https://bun.sh/docs or check `node_modules/bun-types/docs/**.md` if available locally
Applied to files:
frontend/src/components/__tests__/ReferencesEditor.compile.test.ts
📚 Learning: applies to **/*.{html,ts,tsx,css} : use `bun build ` instead of `webpack...
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,ts,tsx,css} : Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild` for building HTML, TypeScript, or CSS files
Applied to files:
frontend/src/components/__tests__/ReferencesEditor.compile.test.ts
📚 Learning: applies to src/**/*.vue : use <script setup lang="ts"> at the top, template second, style last (rare...
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 <script setup lang="ts"> at the top, template second, style last (rarely used) in Vue components
Applied to files:
frontend/src/components/ReferencesEditor.vue
🪛 GitHub Actions: Typecheck code
frontend/src/components/ReferencesEditor.vue
[error] 352-352: TypeScript error TS2345: Argument of type '{ id: string; label: string; dataType: string; }' is not assignable to parameter of type 'PropertyReference'. Types of property 'id' are incompatible: Type 'string' is not assignable to type 'P${number}'.
🔇 Additional comments (3)
frontend/components.d.ts (1)
35-35: LGTM!The component declaration follows the established pattern and correctly references the new ReferencesEditor component.
.kiro/specs/wikibase-schema-editor/tasks.md (1)
138-138: Task completion confirmed.The marking of task 23 as complete is appropriate - the ReferencesEditor component has been implemented with comprehensive test coverage.
frontend/src/components/__tests__/ReferencesEditor.compile.test.ts (1)
1-18: Well-structured compilation test.The test correctly verifies TypeScript compilation and follows the project's testing conventions using
bun:test.
Comment on lines
+47
to
+53
| const commonReferenceProperties = [ | ||
| { id: 'P248', label: 'stated in', dataType: 'wikibase-item' }, | ||
| { id: 'P854', label: 'reference URL', dataType: 'url' }, | ||
| { id: 'P813', label: 'retrieved', dataType: 'time' }, | ||
| { id: 'P577', label: 'publication date', dataType: 'time' }, | ||
| { id: 'P50', label: 'author', dataType: 'wikibase-item' }, | ||
| ] |
There was a problem hiding this comment.
Fix TypeScript error with property ID type.
The id field must match the P${number} type expected by PropertyReference.
const commonReferenceProperties = [
- { id: 'P248', label: 'stated in', dataType: 'wikibase-item' },
- { id: 'P854', label: 'reference URL', dataType: 'url' },
- { id: 'P813', label: 'retrieved', dataType: 'time' },
- { id: 'P577', label: 'publication date', dataType: 'time' },
- { id: 'P50', label: 'author', dataType: 'wikibase-item' },
+ { id: 'P248' as const, label: 'stated in', dataType: 'wikibase-item' },
+ { id: 'P854' as const, label: 'reference URL', dataType: 'url' },
+ { id: 'P813' as const, label: 'retrieved', dataType: 'time' },
+ { id: 'P577' as const, label: 'publication date', dataType: 'time' },
+ { id: 'P50' as const, label: 'author', dataType: 'wikibase-item' },
]Alternatively, properly type the array:
const commonReferenceProperties: PropertyReference[] = [
{ id: 'P248' as `P${number}`, label: 'stated in', dataType: 'wikibase-item' },
// ... rest of the properties
]🤖 Prompt for AI Agents
In frontend/src/components/ReferencesEditor.vue around lines 47 to 53, the id
field in commonReferenceProperties is causing a TypeScript error because it does
not match the expected template literal type `P${number}` from
PropertyReference. To fix this, explicitly type the array as PropertyReference[]
and cast each id value to the template literal type using 'as `P${number}`'.
This ensures the id fields conform to the expected type and resolves the
TypeScript error.
This was referenced Aug 1, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addresses Task 23 of #66