GovOPlaN/govoplan-workflow
2
0
Fork 0
Code Issues 2 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 55bbd15ecc
commit a071692e75
6 changed files with 94 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/workflow/WorkflowCanvas.tsx
+3 -2
View File
@@ -15,6 +15,7 @@ import {
type Edge,
type ReactFlowInstance
} from "@xyflow/react";
import { StatePanel } from "@govoplan/core-webui";
import { definitionConnectionError } from "@govoplan/core-webui/definition-graph";
import type {
WorkflowDiagnostic,
@@ -211,7 +212,7 @@ export default function WorkflowCanvas({
return (
<div
className="workflow-canvas"
className="definition-graph-canvas workflow-canvas"
onDragOver={(event) => {
if (
event.dataTransfer.types.includes(
@@ -320,7 +321,7 @@ export default function WorkflowCanvas({
<Controls showInteractive={false} />
</ReactFlow>
{!graph.nodes.length ? (
<div className="workflow-canvas-empty">Drop a start node here</div>
<StatePanel className="definition-graph-canvas-empty" size="fill" description="Drop a start node here" />
) : null}
</div>
);
webui/src/features/workflow/WorkflowInspector.tsx
+8 -6
View File
@@ -1,10 +1,12 @@
import { useEffect, useMemo, useState } from "react";
import { Trash2 } from "lucide-react";
import {
ActionToolbar,
Button,
DismissibleAlert,
FormField,
ReferenceMultiSelect,
StatePanel,
useViewSurfaces,
type ReferenceOptionProvider
} from "@govoplan/core-webui";
@@ -87,7 +89,7 @@ export default function WorkflowInspector({
};
return (
<aside className="workflow-inspector" aria-label="Flow inspector">
<div className="workflow-panel-heading">
<ActionToolbar surface="section-header" className="workflow-panel-heading">
<span>
<strong>Flow</strong>
<small>{edge.type.replace(/^bpmn\./, "")}</small>
@@ -102,7 +104,7 @@ export default function WorkflowInspector({
>
<Trash2 size={16} />
</Button>
</div>
</ActionToolbar>
<div className="workflow-inspector-fields">
<FormField label="Flow type">
<select
@@ -184,8 +186,8 @@ export default function WorkflowInspector({
if (!node) {
return (
<aside className="workflow-inspector" aria-label="Node inspector">
<div className="workflow-panel-heading"><strong>Inspector</strong></div>
<div className="workflow-inspector-empty">No node selected</div>
<ActionToolbar surface="section-header" className="workflow-panel-heading"><strong>Inspector</strong></ActionToolbar>
<StatePanel size="compact" description="No node selected" />
</aside>
);
}
@@ -200,7 +202,7 @@ export default function WorkflowInspector({
return (
<aside className="workflow-inspector" aria-label="Node inspector">
<div className="workflow-panel-heading">
<ActionToolbar surface="section-header" className="workflow-panel-heading">
<span>
<strong>Inspector</strong>
<small>{definition?.label ?? node.type}</small>
@@ -215,7 +217,7 @@ export default function WorkflowInspector({
>
<Trash2 size={16} />
</Button>
</div>
</ActionToolbar>
<div className="workflow-inspector-fields">
{error ? (
<DismissibleAlert tone="danger" resetKey={error}>
webui/src/features/workflow/WorkflowNode.tsx
+4 -3
View File
@@ -48,6 +48,7 @@ import {
type Node,
type NodeProps
} from "@xyflow/react";
import { DefinitionNodeIcon } from "@govoplan/core-webui";
import type { WorkflowNodeType } from "../../api/workflow";
export type WorkflowFlowNodeData = {
@@ -127,13 +128,13 @@ export default function WorkflowNode({
id={port.id}
type="target"
position={Position.Left}
className="workflow-node-handle"
className="definition-node-handle"
style={{ top: portPosition(index, inputPorts.length) }}
isConnectable={isConnectable}
title={port.label}
/>
))}
<span className="workflow-node-icon"><Icon size={17} /></span>
<DefinitionNodeIcon className="workflow-node-icon"><Icon size={17} /></DefinitionNodeIcon>
<span className="workflow-node-copy">
<strong>{data.label}</strong>
<small>{data.definition.label}</small>
@@ -144,7 +145,7 @@ export default function WorkflowNode({
id={port.id}
type="source"
position={Position.Right}
className="workflow-node-handle"
className="definition-node-handle"
style={{ top: portPosition(index, outputPorts.length) }}
isConnectable={isConnectable}
title={port.label}
webui/src/features/workflow/WorkflowPage.tsx
+75 -79
View File
@@ -26,15 +26,28 @@ import { useSearchParams } from "react-router";
import { ToolbarGroup, ActionToolbar,
Button,
ConfirmDialog,
ContentGrid,
ContentSection,
Dialog,
DocumentationHelpLink,
DismissibleAlert,
DefinitionPalette,
DefinitionPaletteGroup,
DefinitionPaletteItem,
FilterBar,
FloatingStatus,
FormField,
IconButton,
LoadingFrame,
ReferenceSelect,
SelectionList,
SelectionListItem,
SelectionListItemContent,
StatePanel,
StatusBadge,
ToggleSwitch,
WorkspaceFrame,
WorkspaceLayout,
hasScope,
isApiError,
useUnsavedChanges,
@@ -582,10 +595,18 @@ export default function WorkflowPage({
};
return (
<main className="workflow-page">
<div className="workflow-shell">
<aside className="workflow-definition-panel">
<ActionToolbar className="workflow-panel-toolbar">
<WorkspaceFrame as="main" height="viewport" surface="plain" className="workflow-page" label="Workflow workspace">
<WorkspaceLayout
variant="split"
primarySize="compact"
surface="contained"
primaryScrollable={false}
contentScrollable={false}
primaryLabel="Workflows"
contentLabel="Workflow editor"
contentClassName="workflow-workspace"
primary={<>
<ActionToolbar surface="panel-header">
<strong>Workflows</strong>
<ToolbarGroup align="end" className="workflow-toolbar-actions">
<DocumentationHelpLink
@@ -618,7 +639,7 @@ export default function WorkflowPage({
/>
</ToolbarGroup>
</ActionToolbar>
<div className="workflow-definition-search">
<FilterBar surface="panel">
<input
type="search"
value={search}
@@ -626,52 +647,43 @@ export default function WorkflowPage({
placeholder="Search workflows"
aria-label="Search workflows"
/>
</div>
</FilterBar>
<LoadingFrame loading={loading} className="workflow-definition-list-frame">
<div className="workflow-definition-list">
<SelectionList variant="navigation" label="Workflows">
{visibleDefinitions.map((definition) => (
<button
<SelectionListItem
key={definition.id}
type="button"
className={definition.id === draft?.id ? "is-selected" : ""}
selected={definition.id === draft?.id}
onClick={() => selectDefinition(definition)}
>
<span>
<strong>{definition.name}</strong>
<small>
{definition.key} · revision {definition.current_revision}
</small>
<small>
{definition.governance.scope_type} · {definition.governance.definition_kind}
</small>
{definition.standard ? (
<small>
{definition.standard.kind === "baseline"
? `Standard · ${definition.standard.origin_module_id}`
: `Override · ${definition.standard.origin_module_id}`}
{definition.standard.update_available ? " · update available" : ""}
</small>
) : null}
</span>
<SelectionListItemContent
title={definition.name}
description={[
definition.key,
`revision ${definition.current_revision}`,
definition.governance.scope_type,
definition.governance.definition_kind,
definition.standard
? `${definition.standard.kind === "baseline" ? "Standard" : "Override"} · ${definition.standard.origin_module_id}${definition.standard.update_available ? " · update available" : ""}`
: ""
].filter(Boolean).join(" · ")}
/>
<StatusBadge
status={definition.status}
label={definition.status}
/>
</button>
</SelectionListItem>
))}
{!visibleDefinitions.length ? (
<div className="workflow-definition-empty">
No workflow definitions
</div>
<StatePanel size="compact" description="No workflow definitions" />
) : null}
</div>
</SelectionList>
</LoadingFrame>
</aside>
<section className="workflow-workspace">
</>}
>
{draft && displayedGraph ? (
<>
<ActionToolbar className="workflow-workspace-toolbar">
<ActionToolbar surface="panel-header" className="workflow-workspace-toolbar">
<span className="workflow-identity-fields">
<input
className="workflow-name-input"
@@ -872,21 +884,14 @@ export default function WorkflowPage({
) : null}
</div>
<div className="workflow-editor">
<aside className="workflow-palette">
<div className="workflow-panel-heading">
<span>
<strong>Node library</strong>
<small>Drag nodes onto the canvas</small>
</span>
</div>
<div className="workflow-palette-items">
<DefinitionPalette label="Node library" description="Drag nodes onto the canvas">
{paletteGroups.map((group) => (
<section key={group.category} className="workflow-palette-group">
<h3>{group.label}</h3>
<DefinitionPaletteGroup key={group.category} label={group.label}>
{group.nodes.map((nodeType) => (
<button
<DefinitionPaletteItem
key={nodeType.type}
type="button"
icon={<GitFork size={16} />}
label={nodeType.label}
draggable={!graphReadOnly}
disabled={graphReadOnly}
onDragStart={(event) =>
@@ -894,17 +899,12 @@ export default function WorkflowPage({
}
onClick={() => addNodeFromPalette(nodeType.type)}
title={nodeType.description}
>
<GitFork size={16} />
<span>{nodeType.label}</span>
<Plus size={13} className="workflow-palette-add" />
</button>
/>
))}
</section>
</DefinitionPaletteGroup>
))}
</div>
</aside>
<div className="workflow-editor-surface">
</DefinitionPalette>
<div className="definition-editor-surface workflow-editor-surface">
<ReactFlowProvider>
<WorkflowCanvas
graph={displayedGraph}
@@ -936,7 +936,7 @@ export default function WorkflowPage({
/>
{diagnostics.length ? (
<div className="workflow-diagnostics">
<div className="workflow-panel-heading">
<ActionToolbar surface="section-header" className="workflow-panel-heading">
<strong>Diagnostics</strong>
<StatusBadge
status={
@@ -946,7 +946,7 @@ export default function WorkflowPage({
}
label={String(diagnostics.length)}
/>
</div>
</ActionToolbar>
<div>
{diagnostics.map((item, index) => (
<button
@@ -965,25 +965,21 @@ export default function WorkflowPage({
) : null}
</div>
</div>
{working ? (
<div className="workflow-working-indicator" role="status">
Working...
</div>
) : null}
{working ? <FloatingStatus>Working...</FloatingStatus> : null}
</>
) : (
<div className="workflow-workspace-empty">
<GitFork size={34} />
<strong>No workflow selected</strong>
{canWrite ? (
<StatePanel
size="fill"
icon={<GitFork size={34} />}
title="No workflow selected"
actions={canWrite ? (
<Button variant="primary" onClick={createNew}>
<Plus size={16} /> New workflow
</Button>
) : null}
</div>
) : undefined}
/>
)}
</section>
</div>
</WorkspaceLayout>
<ConfirmDialog
open={deleteOpen}
title="Delete workflow"
@@ -1052,7 +1048,7 @@ export default function WorkflowPage({
}
}}
/>
</main>
</WorkspaceFrame>
);
}
@@ -1336,7 +1332,7 @@ function WorkflowDefinitionSettingsDialog({
))}
</select>
</FormField>
<div className="workflow-definition-toggles">
<ContentGrid columns={2} gap="default" collapseAt="narrow">
<ToggleSwitch
label="Visible to lower scopes"
checked={draft.inheritToLowerScopes}
@@ -1361,7 +1357,7 @@ function WorkflowDefinitionSettingsDialog({
disabled={!editable || draft.executionMode === "guided"}
onChange={(value) => onChange({ allowAutomation: value })}
/>
</div>
</ContentGrid>
{draft.governance?.automation_runtime_reason ? (
<DismissibleAlert
tone="warning"
@@ -1371,7 +1367,7 @@ function WorkflowDefinitionSettingsDialog({
</DismissibleAlert>
) : null}
{draft.governance?.derived_from_definition_id ? (
<section className="workflow-provenance">
<ContentSection spacing="none" surface="subtle" density="compact" layout="stack" className="workflow-provenance">
<strong>Derived from</strong>
<span>
{draft.governance.derived_from_definition_id}
@@ -1379,10 +1375,10 @@ function WorkflowDefinitionSettingsDialog({
{draft.governance.derived_from_revision}
</span>
<code>{draft.governance.derived_from_hash}</code>
</section>
</ContentSection>
) : null}
{provenance.length ? (
<section className="workflow-provenance">
<ContentSection spacing="none" surface="subtle" density="compact" layout="stack" className="workflow-provenance">
<strong>Effective Policy path</strong>
{provenance.map((item, index) => (
<span key={`${String(item.path ?? item.scope_type)}-${index}`}>
@@ -1392,7 +1388,7 @@ function WorkflowDefinitionSettingsDialog({
{!editable && draft.governance?.actions.edit?.reason ? (
<small>{draft.governance.actions.edit.reason}</small>
) : null}
</section>
</ContentSection>
) : null}
</div>
) : null}
webui/src/features/workflow/WorkflowRunsDialog.tsx
+3 -2
View File
@@ -20,6 +20,7 @@ import { ActionToolbar,
ConfirmDialog,
Dialog,
DismissibleAlert,
ContentGrid,
FormField,
IconButton,
LoadingFrame,
@@ -422,7 +423,7 @@ export default function WorkflowRunsDialog({
</a>
) : null}
{allowedActions.some((action) => action !== "cancel") ? (
<div className="workflow-run-action-form">
<ContentGrid columns={2} gap="compact" collapseAt="narrow" className="workflow-run-action-form">
<FormField label="Comment">
<textarea
value={comment}
@@ -466,7 +467,7 @@ export default function WorkflowRunsDialog({
</Button>
))}
</div>
</div>
</ContentGrid>
) : null}
</section>
) : null}