GovOPlaN/govoplan-reporting
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt shared WebUI structural primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 13:17:32 +02:00
parent e13d95c843
commit 63ee29e222
3 changed files with 34 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/reporting/ProviderReportWorkspace.tsx
+3 -2
View File
@@ -7,6 +7,7 @@ import { ContentGrid, ActionToolbar,
DismissibleAlert,
IconButton,
MetricCard,
StatePanel,
StatusBadge,
hasScope,
type ApiSettings,
@@ -175,7 +176,7 @@ export function ProviderReportWorkspace({ settings, auth, report }: {
</div>
{execution ?
<>
<ActionToolbar className="reporting-output-toolbar">
<ActionToolbar surface="panel-header" className="reporting-output-toolbar">
<span>Generated {formatDateTime(execution.generated_at)}</span>
{report.export_formats.includes("csv") &&
<IconButton label="Download CSV" icon={<Download size={17} />} variant="ghost" onClick={() => void download("csv")} />
@@ -188,7 +189,7 @@ export function ProviderReportWorkspace({ settings, auth, report }: {
<ProviderResult execution={execution} />
</div>
</> :
<div className="reporting-empty">Select the parameters and run this governed report.</div>
<StatePanel size="fill" description="Select the parameters and run this governed report." />
}
</>
);
webui/src/features/reporting/ReportingPage.tsx
+27 -27
View File
@@ -25,13 +25,19 @@ import { FormGrid, ActionToolbar,
Dialog,
DocumentationHelpLink,
DismissibleAlert,
FilterBar,
IconButton,
LoadingIndicator,
PageScrollViewport,
StatePanel,
SegmentedControl,
SelectionList,
SelectionListItem,
SelectionListItemContent,
StatusBadge,
ToggleSwitch,
hasScope,
WorkspaceFrame,
type DataGridColumn,
type PlatformRouteContext
} from "@govoplan/core-webui";
@@ -249,9 +255,9 @@ export default function ReportingPage({ settings, auth }: PlatformRouteContext)
return (
<main className="reporting-page">
<div className="reporting-shell">
<ActionToolbar className="reporting-toolbar">
<form className="reporting-search" onSubmit={submitSearch}>
<WorkspaceFrame className="reporting-shell" label="Reporting workspace" interfaceId="reporting.workspace" helpContextId="reporting.page.workspace" helpModuleId="reporting">
<ActionToolbar surface="panel-header" className="reporting-toolbar">
<FilterBar as="form" surface="control" wrap="never" width="compact" className="reporting-search" onSubmit={submitSearch}>
<Search size={17} aria-hidden="true" />
<input
value={search}
@@ -259,7 +265,7 @@ export default function ReportingPage({ settings, auth }: PlatformRouteContext)
aria-label="Search reports"
placeholder="Search reports"
/>
</form>
</FilterBar>
<span className="reporting-count">{reports.length + providerReports.length} reports</span>
<DocumentationHelpLink
reference={{ topicId: "reporting.governed-bi", documentationType: "user" }}
@@ -280,38 +286,32 @@ export default function ReportingPage({ settings, auth }: PlatformRouteContext)
<div className="reporting-workspace">
<PageScrollViewport className="reporting-catalogue">
{loading && <LoadingIndicator label="Loading reports" />}
{!loading && reports.length + providerReports.length === 0 && <div className="reporting-empty">No active reports are available.</div>}
<div className="reporting-report-list" role="list">
{providerReports.length > 0 && <div className="reporting-list-heading">Module reports</div>}
{!loading && reports.length + providerReports.length === 0 && <StatePanel size="compact" description="No active reports are available." />}
<SelectionList variant="navigation" label="Reports">
{providerReports.length > 0 && <div className="reporting-list-heading" role="presentation">Module reports</div>}
{providerReports.map((item) => {
const key = `${item.provider_id}:${item.report_id}`;
return (
<button
type="button"
role="listitem"
<SelectionListItem
key={key}
className={`reporting-report-row${selectedProviderKey === key ? " is-selected" : ""}`}
selected={selectedProviderKey === key}
onClick={() => { setSelectedProviderKey(key); setSelectedId(""); }}>
<BarChart3 size={17} aria-hidden="true" />
<span><strong>{item.title}</strong><small>{item.provider_id} · {item.revision}</small></span>
<SelectionListItemContent leading={<BarChart3 size={17} />} title={item.title} description={`${item.provider_id} · ${item.revision}`} />
<StatusBadge status={item.available ? "active" : "locked"} label={item.available ? "Available" : "Restricted"} />
</button>
</SelectionListItem>
);
})}
{reports.length > 0 && <div className="reporting-list-heading">Semantic reports</div>}
{reports.length > 0 && <div className="reporting-list-heading" role="presentation">Semantic reports</div>}
{reports.map((item) =>
<button
type="button"
role="listitem"
<SelectionListItem
key={item.definition_id}
className={`reporting-report-row${selectedId === item.definition_id ? " is-selected" : ""}`}
selected={selectedId === item.definition_id}
onClick={() => { setSelectedId(item.definition_id); setSelectedProviderKey(""); }}>
<BarChart3 size={17} aria-hidden="true" />
<span><strong>{item.name}</strong><small>{item.definition_key} · r{item.revision}</small></span>
<SelectionListItemContent leading={<BarChart3 size={17} />} title={item.name} description={`${item.definition_key} · r${item.revision}`} />
<StatusBadge status="active" label="Active" />
</button>
</SelectionListItem>
)}
</div>
</SelectionList>
</PageScrollViewport>
<section className="reporting-result-region">
{selectedProvider ?
@@ -345,7 +345,7 @@ export default function ReportingPage({ settings, auth }: PlatformRouteContext)
onQueryChange={setQuery}
onParametersChange={setParameters}
/>
<ActionToolbar className="reporting-output-toolbar">
<ActionToolbar surface="panel-header" className="reporting-output-toolbar">
<SegmentedControl
ariaLabel="Report output"
value={outputMode}
@@ -367,12 +367,12 @@ export default function ReportingPage({ settings, auth }: PlatformRouteContext)
}
</ActionToolbar>
<div className="reporting-output">
{!execution && <div className="reporting-empty">Run the report or select a previous execution.</div>}
{!execution && <StatePanel size="fill" description="Run the report or select a previous execution." />}
{execution && outputMode === "visual" && <ReportVisual execution={execution} onDrill={execution.query.mode === "detail" ? undefined : drill} />}
{execution && outputMode === "table" && <ReportTable execution={execution} onDrill={execution.query.mode === "detail" ? undefined : drill} />}
</div>
</> :
<div className="reporting-empty">Select a report.</div>
<StatePanel size="fill" title="Reports" description="Select a report." />
}
</section>
<PageScrollViewport className="reporting-inspector">
@@ -398,7 +398,7 @@ export default function ReportingPage({ settings, auth }: PlatformRouteContext)
/>}
</PageScrollViewport>
</div>
</div>
</WorkspaceFrame>
<SaveViewDialog
open={saveDialogOpen}
onClose={() => setSaveDialogOpen(false)}
webui/src/styles/reporting.css
+4 -74
View File
@@ -1,19 +1,10 @@
.reporting-page,
.reporting-shell {
.reporting-page {
height: 100%;
min-height: 0;
overflow: hidden;
}
.reporting-shell {
display: flex;
flex-direction: column;
background: var(--surface);
}
.reporting-toolbar,
.reporting-result-header,
.reporting-output-toolbar {
.reporting-result-header {
display: flex;
align-items: center;
gap: 10px;
@@ -21,21 +12,8 @@
background: var(--surface-raised);
}
.reporting-toolbar {
min-height: 56px;
padding: 9px 14px;
}
.reporting-search {
display: flex;
align-items: center;
gap: 8px;
width: min(440px, 46vw);
}
.reporting-search input {
min-width: 140px;
flex: 1;
flex: 1 1 440px;
}
.reporting-count {
@@ -66,7 +44,6 @@
border-left: 1px solid var(--border);
}
.reporting-report-list,
.reporting-inspector-content section {
overflow: hidden;
border: 1px solid var(--border);
@@ -84,7 +61,6 @@
text-transform: uppercase;
}
.reporting-report-row,
.reporting-inspector-content section > button {
display: grid;
align-items: center;
@@ -97,45 +73,15 @@
cursor: pointer;
}
.reporting-report-row {
grid-template-columns: 22px minmax(0, 1fr) auto;
gap: 8px;
min-height: 58px;
padding: 8px 10px;
}
.reporting-report-row:last-child,
.reporting-inspector-content section > button:last-child {
border-bottom: 0;
}
.reporting-report-row:hover,
.reporting-report-row:focus-visible,
.reporting-report-row.is-selected,
.reporting-inspector-content section > button:hover,
.reporting-inspector-content section > button.is-selected {
background: var(--hover-bg);
}
.reporting-report-row.is-selected {
box-shadow: inset 3px 0 0 var(--accent);
}
.reporting-report-row > span:nth-child(2) {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.reporting-report-row strong,
.reporting-report-row small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reporting-report-row small,
.reporting-inspector-content small,
.reporting-inspector-content p {
color: var(--text-soft);
@@ -251,11 +197,6 @@
min-width: min(320px, 35vw);
}
.reporting-output-toolbar {
min-height: 48px;
padding: 6px 12px;
}
.reporting-output-toolbar > span {
margin-left: auto;
color: var(--text-soft);
@@ -288,12 +229,6 @@
min-width: 100%;
}
.reporting-empty {
padding: 38px 12px;
color: var(--text-soft);
text-align: center;
}
.reporting-inspector-content {
display: flex;
flex-direction: column;
@@ -632,13 +567,8 @@
border-bottom: 1px solid var(--border);
}
.reporting-result-header,
.reporting-toolbar {
.reporting-result-header {
flex-wrap: wrap;
}
.reporting-search {
width: 100%;
}
}