Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (12)
📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
WalkthroughAdds the Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
carlagn
requested review from
AmanVarshney01,
ArthurGamby,
aidankmcalister,
ankur-arch,
mhartington and
mhessdev
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/site/src/app/query-insights/page.tsx (1)
209-227: Remove the large commented JSX block before merging.Keeping this much commented UI in the page makes future edits noisier. Prefer removing it and tracking reintroduction via an issue/PR when the video is ready.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/query-insights/page.tsx` around lines 209 - 227, Remove the large commented JSX block that contains the placeholder video section (the commented div with the YouTubePlayer component and its surrounding headings/paragraphs) from page.tsx; delete the entire commented block so the file no longer contains the noisy commented UI and, if needed, create an issue/PR to reintroduce the YouTubePlayer section (reference the YouTubePlayer usage and the "See how it works" heading) when the video is available.apps/site/src/components/query-insights.tsx (1)
14-51: Prefer semantic table markup for accessibility.This “table” is built from
divs, so assistive tech won’t get native header/cell relationships. Consider using<table>,<thead>,<tbody>,<tr>,<th>,<td>(or explicit ARIA roles) for better accessibility and long-term maintainability.Also applies to: 53-95
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/query-insights.tsx` around lines 14 - 51, The current components (Table, TableHeader, TableRow, TableHead, TableCell, TableBody) use divs which breaks native table semantics; change them to use proper HTML table elements (Table -> table, TableHeader -> thead, TableBody -> tbody, TableRow -> tr, TableHead -> th, TableCell -> td) or, if you must keep divs, add explicit ARIA roles/attributes (role="table"/"rowgroup"/"row"/"columnheader"/"cell" and proper scope on headers) and ensure props like className and children are preserved; update TableRow to accept placement of <th> vs <td> as needed and ensure keyboard/focus behavior is preserved for accessible reading by assistive tech.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/components/query-insights.tsx`:
- Around line 114-117: The component ContentBox (where className={clsx(...)} is
used) references clsx but it's not imported; add an import for clsx (e.g.,
import clsx from "clsx") at the top of the module and ensure the "clsx" package
is listed in dependencies (install it if missing) so the JSX expression using
clsx resolves and the component renders correctly.
---
Nitpick comments:
In `@apps/site/src/app/query-insights/page.tsx`:
- Around line 209-227: Remove the large commented JSX block that contains the
placeholder video section (the commented div with the YouTubePlayer component
and its surrounding headings/paragraphs) from page.tsx; delete the entire
commented block so the file no longer contains the noisy commented UI and, if
needed, create an issue/PR to reintroduce the YouTubePlayer section (reference
the YouTubePlayer usage and the "See how it works" heading) when the video is
available.
In `@apps/site/src/components/query-insights.tsx`:
- Around line 14-51: The current components (Table, TableHeader, TableRow,
TableHead, TableCell, TableBody) use divs which breaks native table semantics;
change them to use proper HTML table elements (Table -> table, TableHeader ->
thead, TableBody -> tbody, TableRow -> tr, TableHead -> th, TableCell -> td) or,
if you must keep divs, add explicit ARIA roles/attributes
(role="table"/"rowgroup"/"row"/"columnheader"/"cell" and proper scope on
headers) and ensure props like className and children are preserved; update
TableRow to accept placement of <th> vs <td> as needed and ensure keyboard/focus
behavior is preserved for accessible reading by assistive tech.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 45707511-9298-4de1-a0d5-2ec5b6ce9c13
⛔ Files ignored due to path filters (13)
apps/site/public/illustrations/query-insights/features_1.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_1_light.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_1_mobile_light.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_2.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_2_light.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_2_mobile_light.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_3.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_3_light.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_3_mobile_light.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_mobile_1.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_mobile_2.svgis excluded by!**/*.svgapps/site/public/illustrations/query-insights/features_mobile_3.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
apps/site/package.jsonapps/site/src/app/query-insights/page.tsxapps/site/src/components/query-insights.tsx
| className={clsx( | ||
| "flex flex-col gap-12 py-12", | ||
| reverse ? "md:flex-row-reverse" : "md:flex-row", | ||
| )} |
There was a problem hiding this comment.
clsx is undefined in ContentBox and will break rendering.
clsx is used on Line 114 but never imported. This causes a build/type error (Cannot find name 'clsx') or runtime failure depending on toolchain settings.
Proposed fix
- className={clsx(
+ className={cn(
"flex flex-col gap-12 py-12",
reverse ? "md:flex-row-reverse" : "md:flex-row",
)}📝 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.
| className={clsx( | |
| "flex flex-col gap-12 py-12", | |
| reverse ? "md:flex-row-reverse" : "md:flex-row", | |
| )} | |
| className={cn( | |
| "flex flex-col gap-12 py-12", | |
| reverse ? "md:flex-row-reverse" : "md:flex-row", | |
| )} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/components/query-insights.tsx` around lines 114 - 117, The
component ContentBox (where className={clsx(...)} is used) references clsx but
it's not imported; add an import for clsx (e.g., import clsx from "clsx") at the
top of the module and ensure the "clsx" package is listed in dependencies
(install it if missing) so the JSX expression using clsx resolves and the
component renders correctly.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/query-insights/page.tsx`:
- Line 54: The decorative <i> icons in the Query Insights page are being
announced by screen readers; update each decorative icon element in
apps/site/src/app/query-insights/page.tsx (specifically the <i> with className
"fa-solid fa-brain-circuit ml-2! inline-block!" and the other <i> occurrences
referenced in the review) to include aria-hidden="true" so they are ignored by
assistive tech; locate the <i> elements used alongside text (e.g., the
brain-circuit icon and the icons near "Start with Prisma Postgres" / "Read the
docs") and add the aria-hidden attribute to each decorative <i> tag.
- Around line 41-45: The exported async component Page currently declares an
unused parameter searchParams with a synchronous type that conflicts with
Next.js 16 async request APIs; remove the searchParams parameter and its type
annotation from the Page function signature (i.e., change export default async
function Page({ searchParams }: { ... }) to export default async function
Page()) and ensure there are no remaining references to searchParams inside the
Page function or its helpers (update any imports/usages if present).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d346a8d3-c42f-472e-b368-4b5e62dd11a1
📒 Files selected for processing (3)
apps/site/src/app/query-insights/page.tsxapps/site/src/components/query-insights.tsxpackages/ui/src/components/logo-parade.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/site/src/components/query-insights.tsx
| export default async function Page({ | ||
| searchParams, | ||
| }: { | ||
| searchParams: { [key: string]: string | string[] | undefined }; | ||
| }) { |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n apps/site/src/app/query-insights/page.tsxRepository: prisma/web
Length of output: 13741
🏁 Script executed:
# Check Next.js version
cat package.json | grep -A 2 -B 2 "next"Repository: prisma/web
Length of output: 36
🏁 Script executed:
# Check if there's a root layout that might define metadataBase
find apps/site/src -name "layout.tsx" | head -5Repository: prisma/web
Length of output: 82
🏁 Script executed:
head -50 package.jsonRepository: prisma/web
Length of output: 1113
🏁 Script executed:
cat -n apps/site/src/app/layout.tsx | head -80Repository: prisma/web
Length of output: 2995
🏁 Script executed:
cat apps/site/package.json | grep -A 2 -B 2 "next"Repository: prisma/web
Length of output: 671
🌐 Web query:
Next.js 15 searchParams page props async App Router
💡 Result:
In Next.js 15 (App Router), the Page component props changed: params and searchParams are now Promises, so you must await them (or unwrap them with use() in a Client Component). [1][2]
Server Component (recommended)
type SearchParams = Promise<Record<string, string | string[] | undefined>>
export default async function Page(props: { searchParams: SearchParams }) {
const searchParams = await props.searchParams
const q = searchParams.q
return <div>{q}</div>
}[1]
Client Component option
'use client'
import { use } from 'react'
export default function Page(props: { searchParams: Promise<any> }) {
const searchParams = use(props.searchParams)
return <div>{searchParams.q}</div>
}[1]
If you’re seeing errors about accessing searchParams “synchronously”, it’s because Next 15 still allows some sync access for migration, but it can error (e.g. with certain caching/prerender settings). The fix is to refactor to the async form (and/or run the Next codemod). [2]
Sources:
[1] Next.js “Upgrading: Version 15” (Async Request APIs / searchParams and params examples)
[2] Next.js error doc: “Cannot access Request information synchronously…” (explains Promises + migration guidance)
🏁 Script executed:
grep -r "next" pnpm-lock.yaml 2>/dev/null | grep "version:" | head -3Repository: prisma/web
Length of output: 1850
🏁 Script executed:
cat -n apps/site/package.json | head -30Repository: prisma/web
Length of output: 1132
Remove unused searchParams prop typed with incorrect synchronous API.
Line 41–45 declares searchParams with synchronous typing, which conflicts with Next.js 16's async request APIs. Since this prop is never used in the component, remove it entirely to avoid type misalignment and future friction.
Suggested fix
-export default async function Page({
- searchParams,
-}: {
- searchParams: { [key: string]: string | string[] | undefined };
-}) {
+export default async function Page() {
return (📝 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.
| export default async function Page({ | |
| searchParams, | |
| }: { | |
| searchParams: { [key: string]: string | string[] | undefined }; | |
| }) { | |
| export default async function Page() { | |
| return ( |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/query-insights/page.tsx` around lines 41 - 45, The exported
async component Page currently declares an unused parameter searchParams with a
synchronous type that conflicts with Next.js 16 async request APIs; remove the
searchParams parameter and its type annotation from the Page function signature
(i.e., change export default async function Page({ searchParams }: { ... }) to
export default async function Page()) and ensure there are no remaining
references to searchParams inside the Page function or its helpers (update any
imports/usages if present).
| <div className="title"> | ||
| <div className="eyebrow text-center uppercase font-mona-sans stretch-display font-extrabold text-foreground-ppg-weak mb-4!"> | ||
| <span>Query insights</span> | ||
| <i className="fa-solid fa-brain-circuit ml-2! inline-block!"></i> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's find and read the file
fd query-insights/page.tsxRepository: prisma/web
Length of output: 36
🏁 Script executed:
# Read the file to check the content at the specified lines
cat -n apps/site/src/app/query-insights/page.tsx | sed -n '45,85p'Repository: prisma/web
Length of output: 2497
🏁 Script executed:
# Check lines around 243 and 251
cat -n apps/site/src/app/query-insights/page.tsx | sed -n '235,260p'Repository: prisma/web
Length of output: 1110
Hide decorative icons from screen readers with aria-hidden="true".
The <i> elements at lines 54, 73, 77, 243, and 251 are purely decorative—each is paired with adjacent text that conveys the actual meaning. Without aria-hidden="true", screen readers will announce these icons unnecessarily, creating noise for assistive technology users. Since the text alone communicates the intent (e.g., "Start with Prisma Postgres", "Read the docs"), the icons should be explicitly hidden.
-<i className="fa-regular fa-book-open ml-3!" />
+<i className="fa-regular fa-book-open ml-3!" aria-hidden="true" focusable="false" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/query-insights/page.tsx` at line 54, The decorative <i>
icons in the Query Insights page are being announced by screen readers; update
each decorative icon element in apps/site/src/app/query-insights/page.tsx
(specifically the <i> with className "fa-solid fa-brain-circuit ml-2!
inline-block!" and the other <i> occurrences referenced in the review) to
include aria-hidden="true" so they are ignored by assistive tech; locate the <i>
elements used alongside text (e.g., the brain-circuit icon and the icons near
"Start with Prisma Postgres" / "Read the docs") and add the aria-hidden
attribute to each decorative <i> tag.
carlagn
force-pushed
the
feat/DR-7915-query-insights
branch
from
65d5c4c to
bcb3c56
Compare
1 participant
Pulling from website + updating some tokens
Summary by CodeRabbit
New Features
Chores
Refactor