Conversation
Appwrite ArenaProject ID: Tip Sites support three domain rule types: Active deployment, Git branch, and Redirect |
WalkthroughThis pull request adds biome-ignore lint suppression comments to five React components to bypass linting rules for accessibility and uniqueness checks. Additionally, TwoModes.tsx introduces explicit type annotations for the PANELS configuration object, expands the data structure with optional success and error fields, updates panel content to reflect newer SDK usage, and adds conditional UI rendering for the new success banner and error list fields. ModelDetailPage updates the useEffect dependency array to include the setFilter callback. Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes 🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/charts/RadarPerformance.tsx (1)
148-160:⚠️ Potential issue | 🟠 MajorDon’t suppress this: legend control is not keyboard-operable.
Line 160 has a no-op key handler, so keyboard users can focus but not activate reliably. Please replace the interactive
spanwith a realbuttoninstead of suppressing the rule.Suggested fix
- // biome-ignore lint/a11y/useSemanticElements: interactive legend item within recharts - <span + <button + type="button" key={item.value} - role="button" - tabIndex={0} onClick={() => onLegendClick?.({ value: item.value, } as never) } onMouseEnter={() => setHoveredModel(item.value as string)} onMouseLeave={() => setHoveredModel(null)} - onKeyDown={() => {}} style={{ display: "inline-flex", alignItems: "center", gap: 6, + background: "transparent", + border: 0, + padding: 0, }} - > + > ... - </span> + </button>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/charts/RadarPerformance.tsx` around lines 148 - 160, Replace the non-semantic interactive span with a real <button type="button"> element (remove the biome-ignore lint and role="button" and tabIndex) so keyboard users can activate the legend natively; keep the existing props and handlers (key={item.value}, onClick={() => onLegendClick?.({ value: item.value } as never)}, onMouseEnter={() => setHoveredModel(item.value as string)}, onMouseLeave={() => setHoveredModel(null)}) and ensure styling is preserved so it looks identical to the previous span while relying on the button's built-in keyboard activation instead of the no-op onKeyDown.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/TwoModes.tsx`:
- Around line 193-196: The map over panel.errors in TwoModes.tsx uses
key={error}, which can collide when messages repeat; update the map callback
(panel.errors.map) to use a stable unique key per item instead—prefer using a
stable identifier (e.g., an error.id if errors are objects) or combine the panel
identifier with the item index (e.g., `${panel.id}-${index}`) so each rendered
<div> has a unique key and avoids React key collisions.
- Around line 124-136: The sample SDK code in the TwoModes.tsx snippet uses the
wrong property name for table rows; update the TablesDB.createRow call to use
rowId instead of documentId (keep the ID.unique() usage) so the call matches the
Appwrite Web SDK signature (refer to the TablesDB.createRow invocation and the
ID.unique() usage in the snippet).
---
Outside diff comments:
In `@src/components/charts/RadarPerformance.tsx`:
- Around line 148-160: Replace the non-semantic interactive span with a real
<button type="button"> element (remove the biome-ignore lint and role="button"
and tabIndex) so keyboard users can activate the legend natively; keep the
existing props and handlers (key={item.value}, onClick={() => onLegendClick?.({
value: item.value } as never)}, onMouseEnter={() => setHoveredModel(item.value
as string)}, onMouseLeave={() => setHoveredModel(null)}) and ensure styling is
preserved so it looks identical to the previous span while relying on the
button's built-in keyboard activation instead of the no-op onKeyDown.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5b8a8fdd-2e32-49f6-816c-6fc95c9700ea
📒 Files selected for processing (6)
src/components/Footer.tsxsrc/components/HeroSection.tsxsrc/components/HowItWorks.tsxsrc/components/TwoModes.tsxsrc/components/charts/RadarPerformance.tsxsrc/routes/model/$modelId.tsx
| code: `import { Client, TablesDB, ID } from 'appwrite'; | ||
|
|
||
| const client = new Client() | ||
| .setEndpoint('https://<REGION>.cloud.appwrite.io/v1') | ||
| .setProject('<PROJECT_ID>'); | ||
|
|
||
| const databases = new Databases(client); | ||
| await databases.createDocument({ | ||
| const tables = new TablesDB(client); | ||
| await tables.createRow({ | ||
| databaseId: '<DATABASE_ID>', | ||
| collectionId: '<COLLECTION_ID>', | ||
| tableId: '<TABLE_ID>', | ||
| documentId: ID.unique(), | ||
| data: { title: 'Hello', content: 'World' } | ||
| });`, |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Appwrite Web SDK TablesDB.createRow method signature documentation
💡 Result:
Appwrite Web SDK TablesDB.createRow (TypeScript) signature
Preferred (object-params) overload:
createRow<Row extends Models.Row = Models.DefaultRow>(params: {
databaseId: string;
tableId: string;
rowId: string;
data: Row extends Models.DefaultRow
? Partial<Models.Row> & Record<string, any>
: Partial<Models.Row> & Omit<Row, keyof Models.Row>;
permissions?: string[];
transactionId?: string;
}): Promise<Row>;[1]
Deprecated (positional-params) overload:
createRow<Row extends Models.Row = Models.DefaultRow>(
databaseId: string,
tableId: string,
rowId: string,
data: Row extends Models.DefaultRow
? Partial<Models.Row> & Record<string, any>
: Partial<Models.Row> & Omit<Row, keyof Models.Row>,
permissions?: string[],
transactionId?: string
): Promise<Row>;[1]
Parameter meanings (rowId/data/permissions/transactionId) match the TablesDB “Create row” API reference. [2]
Sources: [1] Web SDK implementation (src/services/tables-db.ts) [2] TablesDB API reference (“Create row”).
Fix SDK example: use rowId instead of documentId.
Line 134 uses documentId in the TablesDB.createRow example, but the Appwrite Web SDK expects rowId. This will cause the sample code to fail when users copy-paste it.
Correction
await tables.createRow({
databaseId: '<DATABASE_ID>',
tableId: '<TABLE_ID>',
- documentId: ID.unique(),
+ rowId: ID.unique(),
data: { title: 'Hello', content: 'World' }
});🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/TwoModes.tsx` around lines 124 - 136, The sample SDK code in
the TwoModes.tsx snippet uses the wrong property name for table rows; update the
TablesDB.createRow call to use rowId instead of documentId (keep the ID.unique()
usage) so the call matches the Appwrite Web SDK signature (refer to the
TablesDB.createRow invocation and the ID.unique() usage in the snippet).
| {panel.errors.map((error) => ( | ||
| <div | ||
| key={error} | ||
| className="flex items-start gap-1.5 rounded-md border border-red-200 bg-red-50 px-2 py-1.5 font-mono text-[10px] leading-tight text-red-600" |
There was a problem hiding this comment.
key={error} can collide for duplicate messages.
Line 195 should use a stable unique key per item; duplicate error strings will produce duplicate React keys.
Suggested fix
- {panel.errors.map((error) => (
+ {panel.errors.map((error, idx) => (
<div
- key={error}
+ key={`${panel.label}-${idx}-${error}`}
className="flex items-start gap-1.5 rounded-md border border-red-200 bg-red-50 px-2 py-1.5 font-mono text-[10px] leading-tight text-red-600"
>📝 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.
| {panel.errors.map((error) => ( | |
| <div | |
| key={error} | |
| className="flex items-start gap-1.5 rounded-md border border-red-200 bg-red-50 px-2 py-1.5 font-mono text-[10px] leading-tight text-red-600" | |
| {panel.errors.map((error, idx) => ( | |
| <div | |
| key={`${panel.label}-${idx}-${error}`} | |
| className="flex items-start gap-1.5 rounded-md border border-red-200 bg-red-50 px-2 py-1.5 font-mono text-[10px] leading-tight text-red-600" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/TwoModes.tsx` around lines 193 - 196, The map over
panel.errors in TwoModes.tsx uses key={error}, which can collide when messages
repeat; update the map callback (panel.errors.map) to use a stable unique key
per item instead—prefer using a stable identifier (e.g., an error.id if errors
are objects) or combine the panel identifier with the item index (e.g.,
`${panel.id}-${index}`) so each rendered <div> has a unique key and avoids React
key collisions.
1 participant
What does this PR do?
(Provide a description of what this PR does.)
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
(Write your answer here.)
Summary by CodeRabbit
New Features
Updates