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 ActionList from "../panels/ActionList";
|
||||
import HierarchyPanel from "../panels/HierarchyPanel";
|
||||
import HtmlPanel from "../panels/HtmlPanel";
|
||||
import Screenshot from "../panels/Screenshot";
|
||||
import SnapshotTable from "../panels/SnapshotTable";
|
||||
import ViolationsPanel from "../panels/ViolationsPanel";
|
||||
@@ -142,21 +141,6 @@ export default function RunDetail() {
|
||||
label: "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",
|
||||
label: "Properties",
|
||||
@@ -213,21 +197,6 @@ export default function RunDetail() {
|
||||
label: "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",
|
||||
label: "Properties",
|
||||
|
||||
Reference in new issue
Block a user