Showing the changes to apps/web/src (2 of 4 files). Show all
Unified · Split
| @@ -0,0 +1,28 @@ | |||
| 1 | import { ApprovalRequestId } from "@t3tools/contracts"; | ||
| 2 | import { renderToStaticMarkup } from "react-dom/server"; | ||
| 3 | import { describe, expect, it } from "vite-plus/test"; | ||
| 4 | |||
| 5 | import { ComposerPendingApprovalPanel } from "./ComposerPendingApprovalPanel"; | ||
| 6 | |||
| 7 | describe("ComposerPendingApprovalPanel", () => { | ||
| 8 | it("renders complete multiline command details without hover or truncation", () => { | ||
| 9 | const detail = `bun run release -- ${"long-argument ".repeat(20)}\nsecond line`; | ||
| 10 | const markup = renderToStaticMarkup( | ||
| 11 | <ComposerPendingApprovalPanel | ||
| 12 | approval={{ | ||
| 13 | requestId: ApprovalRequestId.make("approval-1"), | ||
| 14 | requestKind: "command", | ||
| 15 | createdAt: "2026-07-18T00:00:00.000Z", | ||
| 16 | detail, | ||
| 17 | }} | ||
| 18 | pendingCount={1} | ||
| 19 | />, | ||
| 20 | ); | ||
| 21 | |||
| 22 | expect(markup).toContain('data-approval-detail="complete"'); | ||
| 23 | expect(markup).toContain('aria-label="Command"'); | ||
| 24 | expect(markup).toContain(detail); | ||
| 25 | expect(markup).not.toContain("truncate"); | ||
| 26 | expect(markup).not.toContain("line-clamp"); | ||
| 27 | }); | ||
| 28 | }); | ||
| @@ -16,6 +16,12 @@ export const ComposerPendingApprovalPanel = memo(function ComposerPendingApprova · 15 unmodified lines | |||
| 16 | : approval.requestKind === "file-read" | 16 | : approval.requestKind === "file-read" |
| 17 | ? "File-read approval requested" | 17 | ? "File-read approval requested" |
| 18 | : "File-change approval requested"; | 18 | : "File-change approval requested"; |
| 19 | const detailLabel = | ||
| 20 | approval.requestKind === "command" | ||
| 21 | ? "Command" | ||
| 22 | : approval.requestKind === "file-read" | ||
| 23 | ? "File to read" | ||
| 24 | : "File change"; | ||
| 19 | 25 | ||
| 20 | return ( | 26 | return ( |
| 21 | <div className="px-4 py-3.5 sm:px-5 sm:py-4"> | 27 | <div className="px-4 py-3.5 sm:px-5 sm:py-4"> |
| @@ -26,6 +32,18 @@ export const ComposerPendingApprovalPanel = memo(function ComposerPendingApprova · 4 unmodified lines | |||
| 26 | <span className="text-xs text-muted-foreground">1/{pendingCount}</span> | 32 | <span className="text-xs text-muted-foreground">1/{pendingCount}</span> |
| 27 | ) : null} | 33 | ) : null} |
| 28 | </div> | 34 | </div> |
| 35 | {approval.detail ? ( | ||
| 36 | <div className="mt-3 rounded-lg border border-border/65 bg-background/70 p-3"> | ||
| 37 | <p className="text-xs font-medium text-muted-foreground">{detailLabel}</p> | ||
| 38 | <pre | ||
| 39 | aria-label={detailLabel} | ||
| 40 | className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground" | ||
| 41 | data-approval-detail="complete" | ||
| 42 | > | ||
| 43 | {approval.detail} | ||
| 44 | </pre> | ||
| 45 | </div> | ||
| 46 | ) : null} | ||
| 29 | </div> | 47 | </div> |
| 30 | ); | 48 | ); |
| 31 | }); | 49 | }); |