Verified with the coordinated workspace changes by devkit full run 2026-09-08T225814-186389-0000-3e3ed7cd (all seven phases passed). This shared UI pass does not mark the individual module reviews complete.
39 lines
2.3 KiB
TypeScript
Executable File
39 lines
2.3 KiB
TypeScript
Executable File
import { useState } from "react";
|
|
import Button from "../src/components/Button";
|
|
import Card from "../src/components/Card";
|
|
import Dialog from "../src/components/Dialog";
|
|
import PageLayout from "../src/components/PageLayout";
|
|
import PageActionBar from "../src/components/PageActionBar";
|
|
import WorkspaceActionBar from "../src/components/WorkspaceActionBar";
|
|
import DocumentationHelpLink, { DocumentationHelpProvider } from "../src/components/help/DocumentationHelpLink";
|
|
import TextWithHelp from "../src/components/help/TextWithHelp";
|
|
import WidgetHeadingHelpScenario from "./WidgetHeadingHelpScenario";
|
|
|
|
export default function HeadingHelpScenario() {
|
|
const [open, setOpen] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
if (new URLSearchParams(location.search).has("widgets")) return <WidgetHeadingHelpScenario />;
|
|
const help = <DocumentationHelpLink reference={{ contextId: "dashboard" }} />;
|
|
const longTitle = `Dashboard ${"DokumentationsüberschriftOhneLeerzeichen".repeat(5)}`;
|
|
return <DocumentationHelpProvider localDocsAvailable={false}>
|
|
<main className="conformance-root">
|
|
<PageLayout archetype="overview" mode="embedded" title="Dashboard" titleHelp={help} headerLoading={loading}
|
|
actions={<PageActionBar variant="overview" primaryActions={<Button onClick={() => setLoading(value => !value)}>Toggle loading</Button>} />}>
|
|
<WorkspaceActionBar variant="workspace" title="Workspace" titleHelp={help} primaryActions={<Button>Refresh</Button>} />
|
|
<Card title={longTitle} titleHelp={help} collapsible persistCollapse={false} data-testid="help-card">
|
|
<p data-testid="help-card-content">Saved data</p>
|
|
</Card>
|
|
<TextWithHelp as="div" help={help}><h3>Section</h3></TextWithHelp>
|
|
<div style={{ width: 120 }} data-testid="raw-text-help">
|
|
<TextWithHelp help={help}>{"UnbrokenLabel".repeat(8)}</TextWithHelp>
|
|
</div>
|
|
<Button data-testid="open-help-dialog" onClick={() => setOpen(true)}>Edit settings</Button>
|
|
<Dialog open={open} title={longTitle} titleHelp={help} onClose={() => setOpen(false)}
|
|
footer={<Button data-testid="dialog-last-action">Save</Button>}>
|
|
<label>Value<input defaultValue="Saved value" /></label>
|
|
</Dialog>
|
|
</PageLayout>
|
|
</main>
|
|
</DocumentationHelpProvider>;
|
|
}
|