feat: emphasize resume output proof
This commit is contained in:
@@ -191,6 +191,24 @@ describe("GuidedProductMoment", () => {
|
|||||||
expect(screen.queryByText("Trace frames")).not.toBeInTheDocument();
|
expect(screen.queryByText("Trace frames")).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("resume makes output primary and operation/resume payload supporting", () => {
|
||||||
|
const resumedDemo = demoWithAppliedCount(6);
|
||||||
|
|
||||||
|
render(
|
||||||
|
<GuidedProductMoment
|
||||||
|
beat={findBeat("resume-output-evidence", "resume")!}
|
||||||
|
demo={resumedDemo}
|
||||||
|
contract={contract}
|
||||||
|
operation={resumeOperation}
|
||||||
|
openEvidence={vi.fn()}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByRole("region", { name: /resume proof support/i })).toBeInTheDocument();
|
||||||
|
expect(screen.getByRole("region", { name: /workflow output report/i })).toHaveAttribute("data-output-priority", "report");
|
||||||
|
expect(screen.getByRole("region", { name: /workflow markdown output/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
it("resume shows operation, resume payload, and large output report", () => {
|
it("resume shows operation, resume payload, and large output report", () => {
|
||||||
const resumedDemo = demoWithAppliedCount(6);
|
const resumedDemo = demoWithAppliedCount(6);
|
||||||
|
|
||||||
|
|||||||
@@ -81,12 +81,14 @@ export const GuidedProductMoment = ({
|
|||||||
) : null}
|
) : null}
|
||||||
{moment === "resume" && runResume ? (
|
{moment === "resume" && runResume ? (
|
||||||
<div className="guided-product-moment__resume-grid">
|
<div className="guided-product-moment__resume-grid">
|
||||||
|
<aside className="guided-product-moment__resume-support" role="region" aria-label="resume proof support">
|
||||||
<OperationBlock
|
<OperationBlock
|
||||||
event={runResume}
|
event={runResume}
|
||||||
variant="expanded"
|
variant="expanded"
|
||||||
openEvidence={openEvidence}
|
openEvidence={openEvidence}
|
||||||
/>
|
/>
|
||||||
<RunResumeFacts facts={facts} />
|
<RunResumeFacts facts={facts} />
|
||||||
|
</aside>
|
||||||
<RunOutputFacts facts={facts} priority="report" />
|
<RunOutputFacts facts={facts} priority="report" />
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@@ -90,7 +90,12 @@ type RunOutputFactsProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const RunOutputFacts = ({ facts, priority = "summary" }: RunOutputFactsProps) => (
|
export const RunOutputFacts = ({ facts, priority = "summary" }: RunOutputFactsProps) => (
|
||||||
<div className="run-facts-card" data-output-priority={priority}>
|
<div
|
||||||
|
className="run-facts-card"
|
||||||
|
role="region"
|
||||||
|
aria-label={priority === "report" ? "workflow output report" : "workflow output summary"}
|
||||||
|
data-output-priority={priority}
|
||||||
|
>
|
||||||
<h3>Output</h3>
|
<h3>Output</h3>
|
||||||
{facts.output.state === "not-created" ? (
|
{facts.output.state === "not-created" ? (
|
||||||
<p>{facts.output.message}</p>
|
<p>{facts.output.message}</p>
|
||||||
|
|||||||
@@ -920,11 +920,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.run-facts-card[data-output-priority="report"] {
|
.run-facts-card[data-output-priority="report"] {
|
||||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
display: grid;
|
||||||
|
grid-template-rows: auto auto minmax(0, 1fr);
|
||||||
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.run-facts-card[data-output-priority="report"] .run-facts-scroll-region--markdown {
|
.run-facts-card[data-output-priority="report"] .run-facts-scroll-region--markdown {
|
||||||
min-height: 14rem;
|
min-height: 0;
|
||||||
|
max-height: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.run-facts-card--interrupt {
|
.run-facts-card--interrupt {
|
||||||
@@ -1316,11 +1319,28 @@
|
|||||||
|
|
||||||
.guided-product-moment__resume-grid {
|
.guided-product-moment__resume-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(18rem, 0.85fr) minmax(14rem, 0.45fr) minmax(0, 1fr);
|
grid-template-columns: minmax(18rem, 0.62fr) minmax(0, 1.38fr);
|
||||||
gap: 0.85rem;
|
gap: 0.85rem;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.guided-product-moment__resume-support {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: minmax(0, 0.75fr) auto;
|
||||||
|
gap: 0.75rem;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guided-product-moment__resume-support .operation-block--expanded {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guided-product-moment__resume-support .operation-command {
|
||||||
|
margin: 0.65rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
.guided-product-moment__output-grid {
|
.guided-product-moment__output-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
|||||||
Reference in New Issue
Block a user