feat(console): build the user detail screen - #706
Merged
Conversation
# Conflicts: # internal/api/integration_test/user_list_test.go
Replaces the read-only key/value dump at /users/{id} with the screen from the
design (467:44362): a header carrying the user id with copy-to-clipboard, an
Overview / Authentication tab pair, the profile rendered from the user's own
schema, the registered passkey count, and the Delete user card wired to the
dialog from #632.
Elements of the design whose data does not exist are left out rather than
rendered empty, each recorded in the route's docblock: the status badge and
Created (#703), Last sign-in (no field at all), the schema version badge (#445),
and the Password row's last-changed date. The profile fields are read-only and
say so — there is no update endpoint (#693), and an editable field with no Save
promises more than a plain one.
The design's Project permissions block is not missing but removed, per the
design decisions log (D6).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Contributor
🦋 Changeset detectedLatest commit: 60f8ef0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
# Conflicts: # api/generated/oas_json_gen.go # api/generated/oas_schemas_gen.go
Local integration only, so the console work can build against the metadata contract while #721 is still open. Resolved the one conflict — a generated ogen file — by regenerating rather than hand-merging.
Builds the two parts of #630 that #721 unblocks. - **Status** column from `metadata.status` (`active`, `suspended`, `deactivated`, `pending_purge`), rendered as a badge. A record the server has not stamped shows an em dash rather than an invented value. - **Load more** (design decisions log D5), walking `next_page_token`. Pages append rather than replace, and a route invalidation — a delete, a create — resets to the first page, since the set has changed underneath. A later page can reference a schema the first did not, so the columns are recomputed as pages arrive. `metadata` joins `id` and `$schema` as a reserved key, kept out of the schema-driven columns so it is not rendered as an attribute. Drops the "Showing N of the N users loaded" caveat: with a Load more button its presence already says there is more and its absence says the list is complete, and the search caveat restated what the rows show. The spec stubs move from a bare array to `{ users }`, matching the new response.
Main gained a SQLite dialect (#665) after the metadata branch was cut, so the two never met until now: the merge is clean textually and then fails to build. `Status`, `CreatedAt` and `UpdatedAt` moved onto `User.Metadata`, `Attribute.Key` became a typed `AttributeKey`, and `CreateAttribute` is a value rather than a pointer — the same treatment Postgres and Spanner already had here. Belongs to #721 and should drop out when this branch rebases onto it.
Verified the built screen against Figma `467:44362` and fixed what the numeric readout and a per-region pixel diff turned up. Sampling the design export rather than reading tokens off the mock is what caught most of it — the mock's own Tabs instance disagrees with the library it came from. Design system components, so every console screen inherits the fix: - Tabs: the active trigger is `base/input` at full strength. Upstream shadcn uses `bg-input/30` in dark, which renders (16,16,16) where the design is (42,42,42). The resting label is muted in both themes, and the trigger fills the 34px the list's 3px padding leaves. - Badge: `h-5`, the library's own height. Left to hug it rendered 22px. The status pill moves into one shared component. `Badge` already had the left icon slot the design fills with a dot; the list and the detail screen were rendering two near-identical pills instead of using it. The dot is `bg-success` — Tailwind v4's own `green-500` is oklch and renders (0,201,80), not the (34,197,94) the design system means. Screen fixes: field grid gaps to 18px, the panel divider inset inside the body padding, input fill to `base/background` so it reads as inset against the card, delete card padding and typography, the delete button to `lg` for its 40px height, and the meta card's rule stacking flush-left on mobile (`520:80552`) instead of indenting Created when the row wraps. The Authentication tab's icon is `Key`, read off the node rather than inferred, and its badge only claims `Enabled` when a passkey exists — the design has no `None` state, and the count already says so. Deviations left in place, deliberately: - Content inset stays 32px. The detail mock insets 24px and the list mock 32px; matching each would jump the layout 8px between the two screens. - The copy control stays a 24px button against the design's 13px glyph, which keeps the meta card 73px against the mock's 66px. Shrinking it would put the tap target under WCAG 2.5.8.
…ated `Load more` appends to state the route loader owns, and both the delete dialog and the add-user drawer invalidate that loader. A page still in flight when either fires resolves into a list that has already reset to a fresh first page, appending rows the server no longer returns — including the user just deleted — and recomputing the columns against them. The loader hands back a new object per invalidation, so its identity is the generation of the list on screen. `loadMore` captures it and checks it after both awaits, before any state write, so the three setters are atomic with respect to the check. The button still re-enables, leaving it ready to fetch the current page 2.
…ail-631 # Conflicts: # apps/console/src/routes/_authed/users/index.tsx
Contributor
There was a problem hiding this comment.
Pull request overview
This PR replaces the console’s /users/$userId raw record dump with a structured user detail screen aligned to the design, including schema-driven profile rendering, metadata header, Authentication tab passkey count, and a delete action flow. It also updates shared console UI primitives (Tabs/Badge) and introduces new shared components used by both the users list and detail screen.
Changes:
- Implement the new user detail route UI + loader behavior (best-effort schema/passkeys fetch that doesn’t fail the page).
- Introduce
UserStatusBadgeand switch the users list status pill to the shared component. - Add shadcn
Card, adjust Tabs/Badge styling to match the design system, add tests and a changeset.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| apps/console/src/routes/_authed/users/user-detail.spec.tsx | Adds route-level tests covering schema-driven profile rendering, metadata display, passkey loading failure behavior, and delete→redirect flow. |
| apps/console/src/routes/_authed/users/index.tsx | Switches the users list status rendering to the shared UserStatusBadge. |
| apps/console/src/routes/_authed/users/$userId.tsx | Replaces the raw dump page with the designed user detail screen, including loader fetching user/schema/passkeys and new UI layout/actions. |
| apps/console/src/components/user-status-badge.tsx | Adds a shared status pill component (dot + label) for consistent rendering across screens. |
| apps/console/src/components/ui/tabs.tsx | Adjusts Tabs trigger styling to align with the design system (resting and active styles). |
| apps/console/src/components/ui/card.tsx | Adds the shadcn Card primitive used for section layout. |
| apps/console/src/components/ui/badge.tsx | Adjusts Badge sizing to match the design-system height. |
| .changeset/console-user-detail.md | Adds release intent note for the shipped (embedded) console user detail screen behavior. |
`schemaFields` surfaces `number` and `integer` properties, and a schema may define a boolean, but both screens read attribute values with `field`, which returns only strings — so a real value rendered as an empty cell or field. `displayValue` stringifies primitives and is used for schema attributes on both the list and the detail screen. `field` keeps its string-only contract for server-owned keys like `id` and `$schema`, where a non-string means the record is not what was expected. Objects and arrays still render as nothing: they have no one-line form, and `JSON.stringify` in a table cell is noise.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Which Problems Are Solved
/users/{id}renders a raw key/value dump of the API response. The design (467:44362) specifies a real screen: a header carrying the user id and status, Overview and Authentication tabs, the profile laid out from the user's schema, and a delete action.How the Problems Are Solved
metadatablock added in feat: user metadata #721.$schema, so the fields are whatever that schema defines — the same rule as the users list columns and the Add-user drawer. Plus the Delete user card, wired to the dialog from Frontend: Delete user confirmation dialog #632, which returns to the list on success.GET /users/{user_id}/passkeys.12 Jul 2026is that mock's locale rather than a format to impose, so day, short month and year are requested and the order is the viewer's.Additional Changes
Three changes reach beyond this screen, which is why the diff touches
components/ui:Badgealready carried the icon slot the design fills with a dot; the users list and this screen were rendering two near-identical pills instead of using it. The dot uses thesuccesscolour added in chore: sync tokens from Figma #753.Cardprimitive, which the console did not have and this design uses for every section.Out of Scope
Five design elements are deliberately absent, recorded on #631:
PATCH/PUT /users/{user_id}, so the fields are read-only and the design's Save is absent rather than disabledv1 · liveschema badgeTwo deviations from the mock are intentional and worth a reviewer's agreement rather than a silent pass:
Additional Context