feat(frontend): SQL/CTE viewer with shiki highlighting
TDD: SqlViewer renders collapsible CTE blocks with name/field-count/ test-status badges, shiki-highlighted SQL body (dangerouslySetInnerHTML), per-field comments, and a vertical/horizontal layout toggle. highlight.ts wraps shiki as a lazy singleton; tests mock it for determinism (pattern mirrors mermaid.ts). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.6
@@ -0,0 +1,75 @@
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { SqlViewer } from "./SqlViewer";
|
||||
|
||||
vi.mock("./highlight", () => ({
|
||||
highlightSql: vi.fn().mockResolvedValue('<pre data-testid="hl">SELECT 1</pre>'),
|
||||
}));
|
||||
|
||||
const blocks = [
|
||||
{
|
||||
name: "base_orders",
|
||||
fields: 5,
|
||||
testStatus: "passed" as const,
|
||||
sql: "SELECT id, amount FROM orders",
|
||||
comments: { amount: "importo lordo" },
|
||||
},
|
||||
{
|
||||
name: "final_query",
|
||||
fields: 3,
|
||||
testStatus: "failed" as const,
|
||||
sql: "SELECT * FROM base_orders",
|
||||
},
|
||||
];
|
||||
|
||||
test("(a) renders headers with name, field count, and test-status badge", async () => {
|
||||
render(<SqlViewer blocks={blocks} />);
|
||||
// Headers should be visible immediately
|
||||
expect(screen.getByText("base_orders")).toBeInTheDocument();
|
||||
expect(screen.getByText("final_query")).toBeInTheDocument();
|
||||
|
||||
// Field counts
|
||||
expect(screen.getByText(/5 campi/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/3 campi/i)).toBeInTheDocument();
|
||||
|
||||
// Test-status badges
|
||||
expect(screen.getByText(/passed/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/failed/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("(b) bodies start expanded and clicking header collapses then re-expands", async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<SqlViewer blocks={blocks} />);
|
||||
|
||||
// Both highlighted bodies should appear after async highlight resolves
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByTestId("hl")).toHaveLength(2);
|
||||
});
|
||||
|
||||
// Collapse the first block by clicking its header
|
||||
const firstHeader = screen.getByRole("button", { name: /base_orders/i });
|
||||
await user.click(firstHeader);
|
||||
|
||||
// Now only one highlighted block visible
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByTestId("hl")).toHaveLength(1);
|
||||
});
|
||||
|
||||
// Re-expand
|
||||
await user.click(firstHeader);
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByTestId("hl")).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
|
||||
test("(c) layout toggle switches between vertical and horizontal", async () => {
|
||||
render(<SqlViewer blocks={blocks} />);
|
||||
|
||||
const toggle = screen.getByRole("button", { name: /orizzontale|verticale/i });
|
||||
expect(toggle).toBeInTheDocument();
|
||||
await userEvent.click(toggle);
|
||||
// After click the label should flip
|
||||
expect(
|
||||
screen.getByRole("button", { name: /orizzontale|verticale/i })
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { highlightSql } from "./highlight";
|
||||
|
||||
export interface SqlBlock {
|
||||
name: string;
|
||||
fields?: number;
|
||||
testStatus?: "passed" | "failed" | "untested";
|
||||
sql: string;
|
||||
comments?: Record<string, string>;
|
||||
}
|
||||
|
||||
type Layout = "vertical" | "horizontal";
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
passed: "passed",
|
||||
failed: "failed",
|
||||
untested: "untested",
|
||||
};
|
||||
|
||||
const STATUS_CLASSES: Record<string, string> = {
|
||||
passed: "bg-green-100 text-green-800",
|
||||
failed: "bg-red-100 text-red-800",
|
||||
untested: "bg-gray-100 text-gray-600",
|
||||
};
|
||||
|
||||
function Block({ block }: { block: SqlBlock }) {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [html, setHtml] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
highlightSql(block.sql).then((result) => {
|
||||
if (!cancelled) setHtml(result);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [block.sql]);
|
||||
|
||||
const badge = block.testStatus ? STATUS_LABELS[block.testStatus] : null;
|
||||
const badgeClass = block.testStatus
|
||||
? STATUS_CLASSES[block.testStatus]
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div className="sql-block border rounded mb-2">
|
||||
<button
|
||||
className="w-full flex items-center gap-2 px-3 py-2 text-left font-mono text-sm hover:bg-muted/30"
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
aria-expanded={open}
|
||||
>
|
||||
<span className="select-none">{open ? "▾" : "▸"}</span>
|
||||
<span className="font-semibold">{block.name}</span>
|
||||
{block.fields !== undefined && (
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{block.fields} campi
|
||||
</span>
|
||||
)}
|
||||
{badge && (
|
||||
<span
|
||||
className={`ml-auto text-xs px-1.5 py-0.5 rounded ${badgeClass}`}
|
||||
>
|
||||
{badge}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="sql-block-body px-3 pb-3">
|
||||
{html ? (
|
||||
// eslint-disable-next-line react/no-danger
|
||||
<div dangerouslySetInnerHTML={{ __html: html }} />
|
||||
) : (
|
||||
<pre className="text-sm opacity-50">{block.sql}</pre>
|
||||
)}
|
||||
{block.comments && Object.keys(block.comments).length > 0 && (
|
||||
<dl className="mt-2 text-xs text-muted-foreground grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5">
|
||||
{Object.entries(block.comments).map(([field, comment]) => (
|
||||
<React.Fragment key={field}>
|
||||
<dt className="font-mono font-medium">{field}</dt>
|
||||
<dd>{comment}</dd>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</dl>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SqlViewer({ blocks }: { blocks: SqlBlock[] }) {
|
||||
const [layout, setLayout] = useState<Layout>("vertical");
|
||||
|
||||
return (
|
||||
<div className="sql-viewer">
|
||||
<div className="flex gap-2 mb-2">
|
||||
<button
|
||||
className="text-xs px-2 py-1 border rounded hover:bg-muted/30"
|
||||
onClick={() =>
|
||||
setLayout((l) => (l === "vertical" ? "horizontal" : "vertical"))
|
||||
}
|
||||
>
|
||||
{layout === "vertical" ? "Orizzontale" : "Verticale"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
layout === "horizontal"
|
||||
? "flex gap-2 overflow-x-auto"
|
||||
: "flex flex-col"
|
||||
}
|
||||
>
|
||||
{blocks.map((block) => (
|
||||
<div
|
||||
key={block.name}
|
||||
className={layout === "horizontal" ? "min-w-72 flex-1" : ""}
|
||||
>
|
||||
<Block block={block} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { Highlighter } from "shiki";
|
||||
|
||||
let _highlighter: Highlighter | null = null;
|
||||
|
||||
async function getHighlighter(): Promise<Highlighter> {
|
||||
if (_highlighter) return _highlighter;
|
||||
const { createHighlighter } = await import("shiki");
|
||||
_highlighter = await createHighlighter({
|
||||
themes: ["github-light", "github-dark"],
|
||||
langs: ["sql"],
|
||||
});
|
||||
return _highlighter;
|
||||
}
|
||||
|
||||
export async function highlightSql(code: string): Promise<string> {
|
||||
const hl = await getHighlighter();
|
||||
return hl.codeToHtml(code, {
|
||||
lang: "sql",
|
||||
themes: { light: "github-light", dark: "github-dark" },
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user