124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { highlightSql } from "./highlight";
|
|
import { statusBadgeClass } from "./statusBadge";
|
|
|
|
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",
|
|
};
|
|
|
|
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
|
|
? statusBadgeClass(block.testStatus)
|
|
: "";
|
|
|
|
return (
|
|
<div className="sql-block rounded-lg border border-border/70 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-md ${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="font-mono 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">
|
|
{blocks.length > 1 && (
|
|
<div className="flex gap-2 mb-2">
|
|
<button
|
|
className="text-xs px-2 py-1 rounded-md border border-border/70 shadow-xs transition-colors hover:bg-accent"
|
|
onClick={() =>
|
|
setLayout((l) => (l === "vertical" ? "horizontal" : "vertical"))
|
|
}
|
|
>
|
|
{layout === "vertical" ? "Horizontal" : "Vertical"}
|
|
</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>
|
|
);
|
|
}
|