Conversation
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
Disabled knowledge base sources:
📝 WalkthroughWalkthroughAdds a workflow run detail page and route, makes workflow run rows navigable to that page, and introduces a tRPC endpoint that returns a workflow run with its jobs and per-job metadata. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Browser as Browser/Client
participant Router as React Router
participant Page as WorkflowRunDetailPage
participant API as tRPC Backend
participant DB as Database
User->>Browser: Click workflow run row
Browser->>Router: Navigate to /{workspace}/workflows/{workflowId}/runs/{runId}
Router->>Page: Render WorkflowRunDetailPage
Page->>API: trpc.workflows.get(workflowId)
API->>DB: Query workflow
DB-->>API: workflow
API-->>Page: workflow
Page->>API: trpc.workflows.runs.get({workflowRunId, workspaceId})
API->>DB: Query workflowRun
DB-->>API: workflowRun
API->>DB: Query jobs for run (with agent fields)
DB-->>API: jobs
API->>DB: Query jobMetadata for job IDs (getJobMetadataMap)
DB-->>API: metadata grouped by jobId
API-->>Page: run + jobs with metadata
Page->>Browser: Render inputs and jobs table
Browser->>User: Display run details
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
apps/web/app/routes/ws/workflows/page.$workflowId.runs.$runId.tsx (1)
39-45: Consider aligning component declarations with the repo’sReact.FCconvention.These new components use function declarations; the repo guideline asks for
React.FCwith explicit typing.As per coding guidelines,
**/*.{ts,tsx}: “For React components, useReact.FCwith explicit typing (e.g.,const My: React.FC = () => {})`.Also applies to: 82-82, 103-103, 132-132, 153-153
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/app/routes/ws/workflows/page`.$workflowId.runs.$runId.tsx around lines 39 - 45, Convert the function-style React components in this file to the repo convention using React.FC with explicit prop typing: change RunPageHeader (and the other components noted in the comment) from function declarations to const declarations typed as React.FC with an explicit props interface (e.g., specify { workflowName: string; runId: string } for RunPageHeader) and keep the same props and implementation body; update any exports/imports as necessary to match the new const component forms.
🤖 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/web/app/routes/ws/workflows/_components/WorkflowRunsTable.tsx`:
- Around line 29-36: TableRow currently only handles mouse clicks via onClick
(TableRow, navigate, workspace.slug, workflowId, run.id) and is not
keyboard-focusable/operable; make the row keyboard-accessible by either
rendering a real Link inside the row cell pointing to
`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}` or add accessible
semantics to TableRow: set tabIndex={0}, role="link", and handle onKeyDown to
trigger the same navigate call when Enter or Space is pressed, and ensure focus
styling is preserved for keyboard users.
In `@apps/web/app/routes/ws/workflows/page`.$workflowId.runs.$runId.tsx:
- Around line 89-98: The mapped fragment in entries.map uses the shorthand <>
which cannot accept a key, and currently the key props are placed on the inner
<span> elements (see entries.map and the two span elements using
`${key}-label`/`${key}-value`), so React reconciliation can be unstable; fix by
moving the key to the top-level mapped element: either replace the shorthand
fragment with a keyed Fragment (import Fragment and use <Fragment key={key}>) or
wrap the two spans in a keyed container element (e.g., <div key={key}> or
similar), and remove the duplicate keys on the inner spans.
- Around line 104-107: Replace the direct JSON.parse of
metadata["ctrlplane/links"] with a guarded parse: wrap JSON.parse in a try/catch
when building the links variable so malformed JSON falls back to an empty
object, and then iterate over the parsed object to include only entries whose
values are strings (ensuring links: Record<string,string>). Update the code that
constructs links (the variable named links and the access to
metadata["ctrlplane/links"]) to use this safe parse-and-validate flow so the
page won't crash on malformed metadata and only valid string values are kept.
In `@packages/trpc/src/routes/workflows.ts`:
- Around line 90-101: The runs.get procedure currently queries
schema.workflowRun by input.workflowRunId only, allowing cross-workspace access
if a run UUID is guessed; update the procedure input to include workspaceId
(and/or workflowId) and modify the DB WHERE clause to filter by both
eq(schema.workflowRun.id, input.workflowRunId) AND
eq(schema.workflowRun.workspaceId, ctx.session.workspaceId) (or
eq(schema.workflowRun.workflowId, input.workflowId) if scoping to workflow), and
ensure authorization uses ctx.session.workspaceId from the authenticated
session; adjust the protectedProcedure invocation and any related queries
(including the similar block around the code referenced at lines 120-133) to
apply the same workspace/workflow WHERE filters.
---
Nitpick comments:
In `@apps/web/app/routes/ws/workflows/page`.$workflowId.runs.$runId.tsx:
- Around line 39-45: Convert the function-style React components in this file to
the repo convention using React.FC with explicit prop typing: change
RunPageHeader (and the other components noted in the comment) from function
declarations to const declarations typed as React.FC with an explicit props
interface (e.g., specify { workflowName: string; runId: string } for
RunPageHeader) and keep the same props and implementation body; update any
exports/imports as necessary to match the new const component forms.
🪄 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: 8868d9f3-fac0-4a4b-9a68-7c06597c380e
📒 Files selected for processing (4)
apps/web/app/routes.tsapps/web/app/routes/ws/workflows/_components/WorkflowRunsTable.tsxapps/web/app/routes/ws/workflows/page.$workflowId.runs.$runId.tsxpackages/trpc/src/routes/workflows.ts
| <TableRow | ||
| className="cursor-pointer" | ||
| onClick={() => | ||
| navigate( | ||
| `/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`, | ||
| ) | ||
| } | ||
| > |
There was a problem hiding this comment.
Make row navigation keyboard-accessible.
The row is clickable with a mouse, but it is not focusable/operable via keyboard. Please add keyboard semantics (or render a real <Link> target in-cell).
♿ Suggested fix
<TableRow
className="cursor-pointer"
+ role="link"
+ tabIndex={0}
onClick={() =>
navigate(
`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`,
)
}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ navigate(`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`);
+ }
+ }}
>📝 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.
| <TableRow | |
| className="cursor-pointer" | |
| onClick={() => | |
| navigate( | |
| `/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`, | |
| ) | |
| } | |
| > | |
| <TableRow | |
| className="cursor-pointer" | |
| role="link" | |
| tabIndex={0} | |
| onClick={() => | |
| navigate( | |
| `/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`, | |
| ) | |
| } | |
| onKeyDown={(e) => { | |
| if (e.key === "Enter" || e.key === " ") { | |
| e.preventDefault(); | |
| navigate(`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}`); | |
| } | |
| }} | |
| > |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/app/routes/ws/workflows/_components/WorkflowRunsTable.tsx` around
lines 29 - 36, TableRow currently only handles mouse clicks via onClick
(TableRow, navigate, workspace.slug, workflowId, run.id) and is not
keyboard-focusable/operable; make the row keyboard-accessible by either
rendering a real Link inside the row cell pointing to
`/${workspace.slug}/workflows/${workflowId}/runs/${run.id}` or add accessible
semantics to TableRow: set tabIndex={0}, role="link", and handle onKeyDown to
trigger the same navigate call when Enter or Space is pressed, and ensure focus
styling is preserved for keyboard users.
Summary by CodeRabbit