mirror of
https://github.com/priyanshujain/sanderling.git
synced 2026-10-02 19:17:10 +00:00
revert(inspect-ui): drop HtmlPanel + html tab
Removes the iframe-based HTML viewer and its before/after tab wiring from RunDetail.
This commit is contained in:
1 parent
77ee3ef641
commit
a597be9267
3 files changed
-164
No files matched your search
@@ -1,60 +0,0 @@
|
|||||||
.html-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html-toolbar {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html-tab {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 2px 10px;
|
|
||||||
background: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html-tab-active {
|
|
||||||
color: var(--text-primary);
|
|
||||||
border-color: var(--border-strong, var(--border));
|
|
||||||
}
|
|
||||||
|
|
||||||
.html-frame {
|
|
||||||
width: 100%;
|
|
||||||
height: 480px;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html-source {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
background: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
padding: 8px;
|
|
||||||
margin: 0;
|
|
||||||
max-height: 480px;
|
|
||||||
overflow: auto;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html-empty {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html-error {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-violation, #c33);
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { htmlUrl } from "../api";
|
|
||||||
import "./HtmlPanel.css";
|
|
||||||
|
|
||||||
interface HtmlPanelProps {
|
|
||||||
runId: string;
|
|
||||||
fileName: string;
|
|
||||||
available: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
type ViewMode = "render" | "source";
|
|
||||||
|
|
||||||
export default function HtmlPanel({ runId, fileName, available }: HtmlPanelProps): JSX.Element {
|
|
||||||
const [mode, setMode] = useState<ViewMode>("render");
|
|
||||||
const [source, setSource] = useState<string | null>(null);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const url = htmlUrl(runId, fileName);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!available || mode !== "source") return;
|
|
||||||
let cancelled = false;
|
|
||||||
setSource(null);
|
|
||||||
setError(null);
|
|
||||||
fetch(url)
|
|
||||||
.then((response) => {
|
|
||||||
if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
|
|
||||||
return response.text();
|
|
||||||
})
|
|
||||||
.then((text) => {
|
|
||||||
if (!cancelled) setSource(text);
|
|
||||||
})
|
|
||||||
.catch((failure: unknown) => {
|
|
||||||
if (!cancelled) setError(failure instanceof Error ? failure.message : String(failure));
|
|
||||||
});
|
|
||||||
return () => {
|
|
||||||
cancelled = true;
|
|
||||||
};
|
|
||||||
}, [available, mode, url]);
|
|
||||||
|
|
||||||
if (!available) {
|
|
||||||
return <div className="html-empty">no html captured for this step</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="html-panel">
|
|
||||||
<div className="html-toolbar">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={mode === "render" ? "html-tab html-tab-active" : "html-tab"}
|
|
||||||
onClick={() => setMode("render")}
|
|
||||||
>
|
|
||||||
render
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={mode === "source" ? "html-tab html-tab-active" : "html-tab"}
|
|
||||||
onClick={() => setMode("source")}
|
|
||||||
>
|
|
||||||
source
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{mode === "render" ? (
|
|
||||||
<iframe className="html-frame" src={url} sandbox="" title={fileName} />
|
|
||||||
) : error ? (
|
|
||||||
<div className="html-error">failed to load: {error}</div>
|
|
||||||
) : source === null ? (
|
|
||||||
<div className="html-empty">loading...</div>
|
|
||||||
) : (
|
|
||||||
<pre className="html-source">{source}</pre>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -4,7 +4,6 @@ import { getRun, getStep, screenshotUrl } from "../api";
|
|||||||
import type { Run, Step } from "../types";
|
import type { Run, Step } from "../types";
|
||||||
import ActionList from "../panels/ActionList";
|
import ActionList from "../panels/ActionList";
|
||||||
import HierarchyPanel from "../panels/HierarchyPanel";
|
import HierarchyPanel from "../panels/HierarchyPanel";
|
||||||
import HtmlPanel from "../panels/HtmlPanel";
|
|
||||||
import Screenshot from "../panels/Screenshot";
|
import Screenshot from "../panels/Screenshot";
|
||||||
import SnapshotTable from "../panels/SnapshotTable";
|
import SnapshotTable from "../panels/SnapshotTable";
|
||||||
import ViolationsPanel from "../panels/ViolationsPanel";
|
import ViolationsPanel from "../panels/ViolationsPanel";
|
||||||
@@ -142,21 +141,6 @@ export default function RunDetail() {
|
|||||||
label: "Hierarchy",
|
label: "Hierarchy",
|
||||||
content: <HierarchyPanel hierarchy={currentStep?.hierarchy} />,
|
content: <HierarchyPanel hierarchy={currentStep?.hierarchy} />,
|
||||||
},
|
},
|
||||||
...(runId && currentStep?.html_available
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
id: "html",
|
|
||||||
label: "HTML",
|
|
||||||
content: (
|
|
||||||
<HtmlPanel
|
|
||||||
runId={runId}
|
|
||||||
fileName={`step-${String(currentStep.step).padStart(5, "0")}.html`}
|
|
||||||
available
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
} satisfies TabDefinition,
|
|
||||||
]
|
|
||||||
: []),
|
|
||||||
{
|
{
|
||||||
id: "properties",
|
id: "properties",
|
||||||
label: "Properties",
|
label: "Properties",
|
||||||
@@ -213,21 +197,6 @@ export default function RunDetail() {
|
|||||||
label: "Hierarchy",
|
label: "Hierarchy",
|
||||||
content: <HierarchyPanel hierarchy={nextStep?.hierarchy ?? currentStep?.hierarchy} />,
|
content: <HierarchyPanel hierarchy={nextStep?.hierarchy ?? currentStep?.hierarchy} />,
|
||||||
},
|
},
|
||||||
...(runId && currentStep?.html_available
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
id: "html",
|
|
||||||
label: "HTML",
|
|
||||||
content: (
|
|
||||||
<HtmlPanel
|
|
||||||
runId={runId}
|
|
||||||
fileName={`step-${String(currentStep.step).padStart(5, "0")}-after.html`}
|
|
||||||
available
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
} satisfies TabDefinition,
|
|
||||||
]
|
|
||||||
: []),
|
|
||||||
{
|
{
|
||||||
id: "properties",
|
id: "properties",
|
||||||
label: "Properties",
|
label: "Properties",
|
||||||
|
|||||||
Reference in new issue
Block a user