Adopt shared WebUI structural primitives
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user