fix(dashboard): Restricted row styling + Replays empty state#1366
Conversation
- User detail page: restyle the Restricted row so it matches the EditableInput appearance used by sibling fields (rounded border, ring, shadow, h-8). Previously it was a bare button with rounded-md hover styling that looked visually inconsistent with the rest of the user details grid. - Analytics > Replays: replace the bare "No session replays yet" empty state with a short description of what session replays do and a docs link to https://docs.stack-auth.com/docs/apps/analytics so new users can discover how to enable them.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughTwo small UI updates: the analytics replays empty-state was restyled (centered container, adjusted typography, added explanatory text and external docs link); the users page replaced a borderless "Restricted" button with a wrapped, restyled button that truncates its value. No control-flow or data changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
Greptile SummaryTwo focused UI polish changes: the Restricted field on the user detail page is re-styled to match sibling read-only inputs, and the Replays empty state now includes a description and a docs link so users understand what the feature is and how to enable it. Both changes are purely presentational with no logic alterations. Confidence Score: 5/5Safe to merge — purely visual changes with no logic, data, or security impact. Both changes are presentational only: CSS class adjustments and adding static copy/a link to the empty state. No business logic, API calls, or state changes are affected. All remaining observations are P2 style suggestions. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Replays page loads] --> B{Has replays?}
B -- Yes --> C[Render replay list / player]
B -- No --> D{Loading initial?}
D -- Yes --> E[Show skeleton loader]
D -- No --> F[Empty state]
F --> G[MonitorPlayIcon]
F --> H['No session replays yet' title]
F --> I[Description paragraph NEW]
F --> J[StyledLink → docs NEW]
Reviews (1): Last reviewed commit: "fix dashboard UI: restricted row styling..." | Re-trigger Greptile |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/dashboard/src/app/`(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx:
- Around line 325-335: The dialog trigger button that calls setDialogOpen(true)
lacks a descriptive accessible name; update the button (the element with
onClick={() => setDialogOpen(true)} and uses displayValue) to include a clear
aria label or aria-labelledby that includes the field context (e.g.,
"Restricted") plus the current displayValue and an action hint (e.g., "opens
restriction dialog"); ensure aria-haspopup="dialog" or similar is present so
screen readers know this opens the restriction dialog.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: d4503602-276c-4dbe-a3d9-7eb8bf500892
📒 Files selected for processing (2)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx
Replace separate "Learn more in the docs" link with an inline CTA
("For info on enabling replays, look here") inside the description.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/dashboard/src/app/`(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx:
- Around line 1958-1973: Update the external docs link to use descriptive text
and include rel for safety: change the StyledLink text from "look here" to "read
the analytics docs" and add rel="noopener noreferrer" to the StyledLink usage in
the replays page; then extend the LinkProps type in the link component by adding
rel?: string (and ensure the rel prop is forwarded to the underlying
anchor/next/link element in the StyledLink implementation) so the component
accepts and passes through the rel attribute.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1d8f6f4b-8496-443d-9f47-249b84e382f1
📒 Files selected for processing (1)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
2 participants
Summary
Two small UI polish fixes in
apps/dashboard:User ID,Display name,Primary email, etc.) by reusing the same input-box appearance (rounded-xlborder, ring, shadow,h-8). Previously it rendered as a bare button withrounded-mdhover styling, which looked out of place in the user details grid.https://docs.stack-auth.com/docs/apps/analytics) so new users can discover more.Files changed
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx—RestrictedStatusRowbutton now styled to mirror the read-onlyEditableInputlook.apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx— empty state now includes a description and aStyledLinkto the docs.Bug 1 — Restricted row no longer visually orphaned
Before, the Restricted row's value (
No) was just plain text inside the grid; every other row (User ID, Display name, Primary email, Password, 2-factor auth, Signed up at, Risk scores, Sign-up country code) was rendered inside a styled input box. After the fix, Restricted uses the same boxed style — the row is still clickable and still opens the existing restriction dialog.Before / after toggle (full page)
Cropped view of the changed region (clearer)
Wipe transition
Fade transition
Pixel diff (only the Restricted cell changes)
Bug 2 — Replays empty state explains itself
Before, an empty replays workspace showed only "No session replays yet". Users had no signal that there is anything they need to do, or where to look. After the fix, the empty state explains what session replays are, hints that replays will appear once captured, and links to the relevant docs page.
Before / after toggle (full page)
Cropped view of the empty state
Wipe transition
Fade transition
Pixel diff
Test plan
pnpm --filter @stackframe/dashboard run lintpassespnpm --filter @stackframe/dashboard run typecheckpasseslocalhost:8101:Notes for reviewers
RestrictionDialog,getRestrictionReasonText, or any restriction logic — this is purely visual.MonitorPlayIconand centered layout; only added the description paragraph and theStyledLink(which is already imported in this file).Summary by CodeRabbit