mirror of
https://github.com/fabro-sh/fabro.git
synced 2026-10-07 03:00:29 +00:00
refactor(web): simplify profile sessions layout
Split the unified list into separate Browser and CLI panels and drop provider, login, kind/current badges, and user agent. Each panel shows just the timestamps that matter, with revoke gated to CLI sessions. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp
parent
d2623662e0
commit
92ce72da6e
2 changed files with 71 additions and 77 deletions
|
|
@ -120,34 +120,40 @@ afterEach(() => {
|
|||
});
|
||||
|
||||
describe("ProfileSessions", () => {
|
||||
test("renders a profile-style skeleton while loading", () => {
|
||||
test("renders profile-style skeletons while loading", () => {
|
||||
currentResponse = undefined;
|
||||
const renderer = renderAndTrack();
|
||||
const text = textFromNode(renderer.toJSON());
|
||||
|
||||
// Skeleton has no real content, just placeholder bars; verify session
|
||||
// labels haven't rendered yet.
|
||||
expect(text).not.toContain("This browser");
|
||||
expect(text).not.toContain("Fabro CLI");
|
||||
// Skeletons render placeholder bars only, no panel headings or content.
|
||||
expect(text).not.toContain("Browser");
|
||||
expect(text).not.toContain("CLI");
|
||||
});
|
||||
|
||||
test("renders browser and CLI sessions from a unified response", () => {
|
||||
test("splits browser and CLI sessions into separate panels", () => {
|
||||
currentResponse = { sessions: [cliSession, browserSession] };
|
||||
const renderer = renderAndTrack();
|
||||
const text = textFromNode(renderer.toJSON());
|
||||
|
||||
expect(text).toContain("This browser");
|
||||
expect(text).toContain("Fabro CLI");
|
||||
expect(text).toContain("browser");
|
||||
expect(text).toContain("cli");
|
||||
expect(text).toContain("alice");
|
||||
expect(text).toContain("fabro/0.1.0 Darwin");
|
||||
expect(text).toContain("Browser");
|
||||
expect(text).toContain("CLI");
|
||||
expect(text).toContain("Signed in");
|
||||
expect(text).toContain("Expires");
|
||||
expect(text).toContain("Last active");
|
||||
// Login, provider, user agent, and kind labels are intentionally absent.
|
||||
expect(text).not.toContain("alice");
|
||||
expect(text).not.toContain("github");
|
||||
expect(text).not.toContain("fabro/0.1.0 Darwin");
|
||||
expect(text).not.toContain("This browser");
|
||||
expect(text).not.toContain("Fabro CLI");
|
||||
});
|
||||
|
||||
test("does not show a revoke button for non-revocable browser sessions", () => {
|
||||
test("shows an empty CLI panel when no CLI sessions exist", () => {
|
||||
currentResponse = { sessions: [browserSession] };
|
||||
const renderer = renderAndTrack();
|
||||
const text = textFromNode(renderer.toJSON());
|
||||
|
||||
expect(text).toContain("No CLI sessions.");
|
||||
const buttons = renderer.root.findAllByType("button");
|
||||
expect(buttons).toHaveLength(0);
|
||||
});
|
||||
|
|
@ -158,7 +164,7 @@ describe("ProfileSessions", () => {
|
|||
|
||||
const buttons = renderer.root.findAllByType("button");
|
||||
expect(buttons).toHaveLength(1);
|
||||
expect(buttons[0].props["aria-label"]).toBe("Revoke Fabro CLI");
|
||||
expect(buttons[0].props["aria-label"]).toBe("Revoke CLI session");
|
||||
});
|
||||
|
||||
test("clicking revoke calls the delete endpoint and refreshes the sessions query", async () => {
|
||||
|
|
|
|||
|
|
@ -6,11 +6,10 @@ import { ApiError, apiData, authApi } from "../lib/api-client";
|
|||
import { useAuthSessions } from "../lib/queries";
|
||||
import { queryKeys } from "../lib/query-keys";
|
||||
import {
|
||||
Badge,
|
||||
Mono,
|
||||
Muted,
|
||||
Panel,
|
||||
PanelSkeleton,
|
||||
Row,
|
||||
} from "../components/settings-panel";
|
||||
import { formatAbsoluteTs, formatRelativeTime } from "../lib/format";
|
||||
|
||||
|
|
@ -36,11 +35,15 @@ export default function ProfileSessions() {
|
|||
return (
|
||||
<div className="space-y-6">
|
||||
<PanelSkeleton />
|
||||
<PanelSkeleton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sessions = sortSessions(data.sessions);
|
||||
const browser = data.sessions.find((s) => s.kind === "browser") ?? null;
|
||||
const cli = data.sessions
|
||||
.filter((s) => s.kind === "cli")
|
||||
.sort((a, b) => Date.parse(b.lastSeenAt) - Date.parse(a.lastSeenAt));
|
||||
|
||||
async function revoke(id: string) {
|
||||
setRevokeError(null);
|
||||
|
|
@ -61,12 +64,31 @@ export default function ProfileSessions() {
|
|||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Panel title="Sessions">
|
||||
{sessions.length === 0 ? (
|
||||
<div className="px-4 py-6 text-sm text-fg-muted">No sessions.</div>
|
||||
<Panel title="Browser">
|
||||
{browser ? (
|
||||
<>
|
||||
<Row title="Signed in">
|
||||
<span title={formatAbsoluteTs(browser.createdAt)}>
|
||||
{formatRelativeTime(browser.createdAt)}
|
||||
</span>
|
||||
</Row>
|
||||
<Row title="Expires">{formatAbsoluteTs(browser.expiresAt)}</Row>
|
||||
</>
|
||||
) : (
|
||||
sessions.map((session) => (
|
||||
<SessionRow
|
||||
<div className="px-4 py-6 text-sm text-fg-muted">
|
||||
No browser session.
|
||||
</div>
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
<Panel title="CLI">
|
||||
{cli.length === 0 ? (
|
||||
<div className="px-4 py-6 text-sm text-fg-muted">
|
||||
No CLI sessions.
|
||||
</div>
|
||||
) : (
|
||||
cli.map((session) => (
|
||||
<CliRow
|
||||
key={session.id}
|
||||
session={session}
|
||||
onRevoke={revoke}
|
||||
|
|
@ -76,6 +98,7 @@ export default function ProfileSessions() {
|
|||
))
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
{revokeError ? (
|
||||
<div
|
||||
role="alert"
|
||||
|
|
@ -89,14 +112,7 @@ export default function ProfileSessions() {
|
|||
);
|
||||
}
|
||||
|
||||
function sortSessions(sessions: AuthSession[]): AuthSession[] {
|
||||
return [...sessions].sort((a, b) => {
|
||||
if (a.current !== b.current) return a.current ? -1 : 1;
|
||||
return Date.parse(b.lastSeenAt) - Date.parse(a.lastSeenAt);
|
||||
});
|
||||
}
|
||||
|
||||
function SessionRow({
|
||||
function CliRow({
|
||||
session,
|
||||
onRevoke,
|
||||
pending,
|
||||
|
|
@ -108,55 +124,27 @@ function SessionRow({
|
|||
disabled: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-4 px-4 py-3.5">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm text-fg">{session.label}</span>
|
||||
<Badge>{session.kind}</Badge>
|
||||
{session.current ? <Badge>current</Badge> : null}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted">
|
||||
<span>
|
||||
<Muted>Provider</Muted> <Mono>{session.provider}</Mono>
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 px-4 py-3.5">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-fg-2">
|
||||
<span>
|
||||
<Muted>Last active</Muted>{" "}
|
||||
<span title={formatAbsoluteTs(session.lastSeenAt)}>
|
||||
{formatRelativeTime(session.lastSeenAt)}
|
||||
</span>
|
||||
<span>
|
||||
<Muted>Login</Muted> <Mono>{session.login}</Mono>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted">
|
||||
<span>
|
||||
<Muted>Last active</Muted>{" "}
|
||||
<span title={formatAbsoluteTs(session.lastSeenAt)}>
|
||||
{formatRelativeTime(session.lastSeenAt)}
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<Muted>Expires</Muted>{" "}
|
||||
<span title={formatAbsoluteTs(session.expiresAt)}>
|
||||
{formatAbsoluteTs(session.expiresAt)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
{session.userAgent ? (
|
||||
<div className="truncate text-xs text-fg-muted" title={session.userAgent}>
|
||||
<Muted>User agent</Muted>{" "}
|
||||
<span className="font-mono text-fg-3">{session.userAgent}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center">
|
||||
{session.revocable ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRevoke(session.id)}
|
||||
disabled={disabled}
|
||||
aria-label={`Revoke ${session.label}`}
|
||||
className="rounded-md border border-line bg-overlay px-2.5 py-1 text-xs text-fg-2 transition-colors hover:bg-overlay-strong hover:text-fg disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{pending ? "Revoking…" : "Revoke"}
|
||||
</button>
|
||||
) : null}
|
||||
</span>
|
||||
<span>
|
||||
<Muted>Expires</Muted> {formatAbsoluteTs(session.expiresAt)}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRevoke(session.id)}
|
||||
disabled={disabled}
|
||||
aria-label="Revoke CLI session"
|
||||
className="rounded-md border border-line bg-overlay px-2.5 py-1 text-xs text-fg-2 transition-colors hover:bg-overlay-strong hover:text-fg disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{pending ? "Revoking…" : "Revoke"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue