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>
2026-06-28 12:49:58 +02:00
parent eb552331a6
commit 954f701c3f
5 changed files with 417 additions and 0 deletions
@@ -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>
+  );
+}