feat(wikibase-schema-editor): integrate schema API in frontend#77
feat(wikibase-schema-editor): integrate schema API in frontend#77
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis change introduces a major refactor of the frontend schema store by flattening its state from a nested object to individual reactive properties. It adds new composables for schema API integration and schema building/parsing, updates types for clarity and reuse, and includes comprehensive tests for both the store and the new composables. TypeScript and ESLint configurations are updated accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant Component
participant useSchemaApi
participant apiClient
participant schemaStore
participant errorHandler
Component->>useSchemaApi: loadSchema(projectId, schemaId)
useSchemaApi->>schemaStore: setLoading(true)
useSchemaApi->>apiClient: getSchema(projectId, schemaId)
alt Success
useSchemaApi->>schemaStore: update refs with schema data
useSchemaApi->>schemaStore: setLoading(false)
else Error
useSchemaApi->>errorHandler: showError(error)
useSchemaApi->>schemaStore: $reset()
useSchemaApi->>schemaStore: setLoading(false)
end
Component->>useSchemaApi: createSchema(projectId, data)
useSchemaApi->>schemaStore: setLoading(true)
useSchemaApi->>apiClient: createSchema(projectId, data)
alt Success
useSchemaApi->>schemaStore: update refs with new schema
useSchemaApi->>schemaStore: setLoading(false)
else Error
useSchemaApi->>errorHandler: showError(error)
useSchemaApi->>schemaStore: setLoading(false)
end
Component->>useSchemaApi: updateSchema(projectId, schemaId, data)
useSchemaApi->>schemaStore: setLoading(true)
useSchemaApi->>apiClient: updateSchema(projectId, schemaId, data)
alt Success
useSchemaApi->>schemaStore: update refs
useSchemaApi->>schemaStore: markAsSaved()
useSchemaApi->>schemaStore: setLoading(false)
else Error
useSchemaApi->>errorHandler: showError(error)
useSchemaApi->>schemaStore: setLoading(false)
end
Component->>useSchemaApi: deleteSchema(projectId, schemaId)
useSchemaApi->>apiClient: deleteSchema(projectId, schemaId)
alt Success
useSchemaApi->>schemaStore: $reset()
else Error
useSchemaApi->>errorHandler: showError(error)
end
Possibly related PRs
✨ Finishing Touches
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: 5
🔭 Outside diff range comments (1)
frontend/src/stores/schema.store.ts (1)
122-127: Do not override serverupdatedAtin markAsSaved
markAsSavedcurrently resets the store’supdatedAtto the client’s “now,” which immediately clobbers the API-returned timestamp loaded vialoadSchemaIntoStore. Instead, let the backend driveupdatedAtand reservemarkAsSavedfor clearing the dirty flag and tracking the client’s save moment:• File: frontend/src/stores/schema.store.ts
• Lines: 122–127Suggested change:
const markAsSaved = () => { const now = new Date() isDirty.value = false lastSaved.value = now - updatedAt.value = now.toISOString() }—remove the
updatedAt.value = …line so thatupdatedAtremains the timestamp from the server response.
🧹 Nitpick comments (3)
frontend/package.json (1)
8-10: Consider migrating from Vite to Bun for consistency with coding guidelines.The coding guidelines specify using
Bun.serve()for frontend development instead of Vite, andbun buildfor building HTML/TypeScript/CSS files. Consider updating the scripts to align with these guidelines.- "dev": "vite", - "build": "vite build", - "preview": "vite preview", + "dev": "bun run dev.ts", + "build": "bun build src/main.ts --outdir dist", + "preview": "bun run preview.ts",frontend/env.d.ts (1)
1-1: Consider updating to align with Bun usage guidelines.The coding guidelines specify using Bun instead of Vite for frontend development. Consider whether Vite client types are still needed if migrating to Bun.
frontend/src/composables/__tests__/useSchemaApi.test.ts (1)
139-164: Use undefined assignment instead of delete operator for better performanceThe static analysis tool correctly identifies that the delete operator can impact performance. Use undefined assignment as suggested.
if (originalUseApi) { globalThis.useApi = originalUseApi } else { - delete globalThis.useApi + globalThis.useApi = undefined as any } if (originalUseErrorHandling) { globalThis.useErrorHandling = originalUseErrorHandling } else { - delete globalThis.useErrorHandling + globalThis.useErrorHandling = undefined as any } if (originalUseSchemaBuilder) { globalThis.useSchemaBuilder = originalUseSchemaBuilder } else { - delete globalThis.useSchemaBuilder + globalThis.useSchemaBuilder = undefined as any } if (originalUseSchemaStore) { globalThis.useSchemaStore = originalUseSchemaStore } else { - delete globalThis.useSchemaStore + globalThis.useSchemaStore = undefined as any }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (12)
.kiro/specs/wikibase-schema-editor/tasks.md(1 hunks)frontend/.eslintrc-auto-import.json(3 hunks)frontend/auto-imports.d.ts(3 hunks)frontend/env.d.ts(1 hunks)frontend/package.json(2 hunks)frontend/src/composables/__tests__/useSchemaApi.test.ts(1 hunks)frontend/src/composables/useSchemaApi.ts(1 hunks)frontend/src/composables/useSchemaBuilder.ts(1 hunks)frontend/src/stores/__tests__/schema.store.test.ts(9 hunks)frontend/src/stores/schema.store.ts(5 hunks)frontend/src/types/wikibase-schema.ts(2 hunks)frontend/tsconfig.typecheck.json(0 hunks)
💤 Files with no reviewable changes (1)
- frontend/tsconfig.typecheck.json
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,ts,jsx,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc
**/*.{html,ts,css}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc
**/*.{html,js,ts,jsx,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc
**/*.test.{js,ts,jsx,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc
🧠 Learnings (3)
frontend/package.json (4)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-19T07:24:31.852Z
Learning: Applies to **/*.test.{js,ts,jsx,tsx} : Use `bun test` instead of `jest` or `vitest` 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-19T07:24:31.852Z
Learning: Applies to **/*.{js,ts,jsx,tsx} : Use `bun <file>` instead of `node <file>` or `ts-node <file>` for running scripts.
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-19T07:24:31.852Z
Learning: Applies to **/*.{html,ts,css} : Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild` for building HTML, TypeScript, or CSS files.
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-19T07:24:31.852Z
Learning: Applies to **/*.{html,js,ts,jsx,tsx} : Use HTML imports with `Bun.serve()` instead of `vite` for frontend development.
frontend/env.d.ts (3)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-19T07:24:31.852Z
Learning: Applies to **/*.{html,js,ts,jsx,tsx} : Use HTML imports with `Bun.serve()` instead of `vite` for frontend development.
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-19T07:24:31.852Z
Learning: Applies to **/*.{js,ts,jsx,tsx} : Do not use dotenv; Bun automatically loads .env files.
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-19T07:24:31.852Z
Learning: Applies to **/*.html : HTML files can import `.tsx`, `.jsx`, or `.js` files directly and Bun's bundler will transpile and bundle automatically.
frontend/auto-imports.d.ts (1)
Learnt from: CR
PR: DaxServer/dataforge#0
File: .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-07-19T07:24:31.852Z
Learning: Applies to **/*.{html,js,ts,jsx,tsx} : Use HTML imports with `Bun.serve()` instead of `vite` for frontend development.
🧬 Code Graph Analysis (1)
frontend/src/composables/useSchemaBuilder.ts (1)
frontend/src/types/wikibase-schema.ts (9)
Label(73-73)ColumnMapping(81-85)StatementSchemaMapping(109-116)WikibaseSchemaMapping(57-65)ItemSchemaMapping(67-71)TermsSchemaMapping(75-79)PropertyReference(118-122)ValueMapping(124-128)StatementRank(140-140)
🪛 Biome (1.9.4)
frontend/env.d.ts
[error] 5-5: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 5-5: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
frontend/src/composables/__tests__/useSchemaApi.test.ts
[error] 144-144: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 150-150: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 156-156: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 162-162: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
🪛 GitHub Check: test
frontend/src/composables/useSchemaApi.ts
[failure] 29-29: TypeError: Right side of assignment cannot be destructured
at loadSchemaIntoStore (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:29:9)
at <anonymous> (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:56:7)
[failure] 29-29: TypeError: Right side of assignment cannot be destructured
at loadSchemaIntoStore (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:29:9)
at <anonymous> (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:104:7)
[failure] 29-29: TypeError: Right side of assignment cannot be destructured
at loadSchemaIntoStore (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:29:9)
at <anonymous> (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:104:7)
[failure] 29-29: TypeError: Right side of assignment cannot be destructured
at loadSchemaIntoStore (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:29:9)
at <anonymous> (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:81:7)
[failure] 29-29: TypeError: Right side of assignment cannot be destructured
at loadSchemaIntoStore (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:29:9)
at <anonymous> (/home/runner/work/dataforge/dataforge/frontend/src/composables/useSchemaApi.ts:56:7)
🪛 GitHub Actions: Run tests
frontend/src/composables/__tests__/useSchemaApi.test.ts
[error] 1-1: Unknown error reported in test file. No further details provided.
🔇 Additional comments (19)
frontend/package.json (2)
12-12: LGTM! Typecheck script simplification is appropriate.The simplified
vue-tsc --skipLibCheckcommand is sufficient for type checking, especially after removing the separatetsconfig.typecheck.jsonfile.
30-30: Good addition of Pinia testing utilities.Adding
@pinia/testingaligns well with the new test suites for schema stores and composables mentioned in the AI summary..kiro/specs/wikibase-schema-editor/tasks.md (1)
27-27: LGTM! Task completion accurately reflects the implemented work.The marking of Task 5 as completed aligns with the implementation of the
useSchemaApicomposable and its comprehensive test suite mentioned in the AI summary.frontend/.eslintrc-auto-import.json (3)
12-12: LGTM! Type addition supports auto-import functionality.Adding
CreateSchemaRequestto globals enables its usage without explicit imports, consistent with the new schema API integration.
34-34: LGTM! Label type addition enhances development experience.Adding the
Labeltype to globals facilitates its usage across components without manual imports.
317-318: LGTM! Composable auto-imports improve developer experience.Adding
useSchemaApianduseSchemaBuilderto globals enables seamless usage of these new composables throughout the application.frontend/env.d.ts (1)
3-7: LGTM! Standard Vue module declaration pattern.The
{}type usage flagged by static analysis is acceptable here as it's the standard pattern for declaring Vue components in TypeScript. TheDefineComponent<{}, {}, any>signature is appropriate for generic.vuefile declarations.frontend/src/types/wikibase-schema.ts (3)
26-26: LGTM! Improved type safety with ValidationContext.Replacing the generic
contextproperty with the specificValidationContextinterface provides better type safety and clearer expectations for validation error context data.
73-73: LGTM! Label type alias enhances code clarity.The
Labeltype alias improves code readability and reusability for language-to-column mappings.
76-77: LGTM! Consistent use of Label type improves maintainability.Using the
Labeltype alias for bothlabelsanddescriptionsproperties enhances type consistency and makes future modifications easier.frontend/src/composables/__tests__/useSchemaApi.test.ts (1)
166-487: Excellent test coverage!The test suite comprehensively covers all CRUD operations, error scenarios, and state management. The tests are well-structured and provide confidence in the composable's functionality.
frontend/src/stores/__tests__/schema.store.test.ts (1)
53-365: Well-structured tests for the refactored store!The test suite effectively covers the flattened store structure and all its operations. The tests properly verify the integration with mocked dependencies and edge cases.
frontend/src/stores/schema.store.ts (3)
17-32: Well-structured state refactoring!The flattened state structure using individual reactive refs is a solid design choice that improves reactivity tracking, type inference, and testability.
41-90: Clean implementation of term management actions.The label, description, and alias management actions are well-implemented with proper initialization, cleanup of empty arrays, and consistent dirty state tracking.
92-120: Good integration with the schema builder composable.The statement management properly delegates construction to
buildStatementand maintains consistent state updates with dirty tracking.frontend/auto-imports.d.ts (4)
262-263: LGTM! Composable declarations properly added.The new
useSchemaApianduseSchemaBuildercomposables are correctly declared following the established pattern and maintain alphabetical ordering.
349-350: LGTM! Type export correctly declared.The
CreateSchemaRequesttype export follows the established pattern and is properly positioned within the global type declarations.
358-358: LGTM! Label type correctly added.The
Labeltype is properly added to the existing type exports from wikibase-schema, maintaining consistency with the auto-generated format.
619-620: LGTM! Vue component properties correctly declared.The readonly properties for the new composables are properly added to the Vue component custom properties interface, maintaining the established pattern and alphabetical ordering.
1 participant
Addresses Task 5 of #66