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

refactor(webui): adopt semantic workspace actions

Browse Source
This commit is contained in:
zemion
2026-08-19 18:47:45 +02:00
parent 21da2e1ad4
commit d12e0bce7d
1 changed files with 46 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/dataflow/DataflowPage.tsx
+46 -69
View File
@@ -26,7 +26,7 @@ import {
TriangleAlert, TriangleAlert,
Upload Upload
} from "lucide-react"; } from "lucide-react";
import { DialogSection, ToolbarGroup, ActionToolbar, import { DialogSection, ActionToolbar,
ActionBlockerHint, ActionBlockerHint,
Button, Button,
ConfirmDialog, ConfirmDialog,
@@ -51,6 +51,7 @@ import { DialogSection, ToolbarGroup, ActionToolbar,
StatePanel, StatePanel,
StatusBadge, StatusBadge,
ToggleSwitch, ToggleSwitch,
WorkspaceActionBar,
WorkspaceFrame, WorkspaceFrame,
WorkspaceLayout, WorkspaceLayout,
hasScope, hasScope,
@@ -608,27 +609,21 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
contentLabel="Pipeline editor" contentLabel="Pipeline editor"
contentClassName="dataflow-workspace" contentClassName="dataflow-workspace"
primary={<> primary={<>
<ActionToolbar surface="panel-header"> <WorkspaceActionBar
<strong>Pipelines</strong> scope="collection-pane"
<ToolbarGroup align="end" className="dataflow-toolbar-actions"> variant="collection"
<IconButton refreshable
label="Refresh pipelines" reloadAction={{ onReload: () => void loadPipelines(draft?.id), loading, label: "Refresh pipelines" }}
icon={<RefreshCw size={16} />} contextActions={<strong>Pipelines</strong>}
variant="ghost" createAction={<IconButton
onClick={() => requestNavigation(() => void loadPipelines(draft?.id))} label="New pipeline"
disabled={loading} icon={<Plus size={17} />}
disabledReason={loading ? DATAFLOW_I18N.loading : undefined} variant="primary"
/> onClick={createNew}
<IconButton disabled={!canWrite}
label="New pipeline" disabledReason={!canWrite ? DATAFLOW_I18N.writeReason : undefined}
icon={<Plus size={17} />} />}
variant="primary" />
onClick={createNew}
disabled={!canWrite}
disabledReason={!canWrite ? DATAFLOW_I18N.writeReason : undefined}
/>
</ToolbarGroup>
</ActionToolbar>
<FilterBar surface="panel"> <FilterBar surface="panel">
<input <input
type="search" type="search"
@@ -662,8 +657,12 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
> >
{draft ? ( {draft ? (
<> <>
<ActionToolbar surface="panel-header" className="dataflow-workspace-toolbar"> <WorkspaceActionBar
<div className="dataflow-identity-fields"> scope="editor-pane"
variant="editor"
state={saving ? "saving" : dirty && !draft.name.trim() ? "invalid" : dirty ? "dirty" : "clean"}
className="dataflow-workspace-toolbar"
contextActions={<div className="dataflow-identity-fields">
<input <input
className="dataflow-name-input" className="dataflow-name-input"
value={draft.name} value={draft.name}
@@ -691,9 +690,9 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
</option> </option>
<option value="archived">Archived</option> <option value="archived">Archived</option>
</select> </select>
</div> </div>}
<div className="dataflow-command-bar"> helpAction={<DocumentationHelpLink reference={DATAFLOW_DOCUMENTATION} />}
<DocumentationHelpLink reference={DATAFLOW_DOCUMENTATION} /> primaryActions={<div className="dataflow-command-bar">
<SegmentedControl<EditorMode> <SegmentedControl<EditorMode>
ariaLabel="Pipeline editor mode" ariaLabel="Pipeline editor mode"
options={[ options={[
@@ -777,50 +776,28 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
disabledReason={!canViewTriggers ? DATAFLOW_I18N.writeReason : undefined} disabledReason={!canViewTriggers ? DATAFLOW_I18N.writeReason : undefined}
/> />
) : null} ) : null}
</div>}
destructiveActions={draft.id ? (
<IconButton <IconButton
label="Discard changes" label="Delete pipeline"
icon={<RotateCcw size={16} />} icon={<Trash2 size={16} />}
variant="ghost" variant="danger"
onClick={() => requestDiscard(() => undefined)} onClick={() => setDeleteOpen(true)}
disabled={!dirty || saving} disabled={!canEdit || saving}
disabledReason={ disabledReason={saving ? DATAFLOW_I18N.working : !canEdit ? editBlockedReason : undefined}
saving
? DATAFLOW_I18N.working
: !dirty
? DATAFLOW_I18N.noChanges
: undefined
}
/> />
{draft.id ? ( ) : undefined}
<IconButton discardAction={{
label="Delete pipeline" label: <><RotateCcw size={16} /> Discard</>,
icon={<Trash2 size={16} />} onClick: () => requestDiscard(() => undefined)
variant="danger" }}
onClick={() => setDeleteOpen(true)} saveAction={{
disabled={!canEdit || saving} label: <><Save size={16} /> {saving ? "Saving..." : "Save"}</>,
disabledReason={ onClick: () => void saveDraft(),
saving ? DATAFLOW_I18N.working : !canEdit ? editBlockedReason : undefined disabled: working || !canEdit,
} disabledReason: working ? DATAFLOW_I18N.working : !canEdit ? editBlockedReason : undefined
/> }}
) : null} />
<Button
variant="primary"
onClick={() => void saveDraft()}
disabled={saving || working || !dirty || !canEdit}
disabledReason={
saving || working
? DATAFLOW_I18N.working
: !canEdit
? editBlockedReason
: !dirty
? DATAFLOW_I18N.noChanges
: undefined
}
>
<Save size={16} /> {saving ? "Saving..." : "Save"}
</Button>
</div>
</ActionToolbar>
{error ? ( {error ? (
<DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert> <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>
) : null} ) : null}