refactor(webui): adopt semantic workspace actions

webui/src/features/dataflow/DataflowPage.tsx

@@ -26,7 +26,7 @@ import {
   TriangleAlert,
   Upload
 } from "lucide-react";
-import { DialogSection, ToolbarGroup, ActionToolbar,
+import { DialogSection, ActionToolbar,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -51,6 +51,7 @@ import { DialogSection, ToolbarGroup, ActionToolbar,
   StatePanel,
   StatusBadge,
   ToggleSwitch,
+  WorkspaceActionBar,
   WorkspaceFrame,
   WorkspaceLayout,
   hasScope,
@@ -608,27 +609,21 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
         contentLabel="Pipeline editor"
         contentClassName="dataflow-workspace"
         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))}
-                disabled={loading}
-                disabledReason={loading ? DATAFLOW_I18N.loading : undefined}
-              />
-              <IconButton
               label="New pipeline"
               icon={<Plus size={17} />}
               variant="primary"
               onClick={createNew}
               disabled={!canWrite}
               disabledReason={!canWrite ? DATAFLOW_I18N.writeReason : undefined}
+            />}
           />
-            </ToolbarGroup>
-          </ActionToolbar>
           <FilterBar surface="panel">
             <input
               type="search"
@@ -662,8 +657,12 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
       >
           {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
                     className="dataflow-name-input"
                     value={draft.name}
@@ -691,9 +690,9 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
                     </option>
                     <option value="archived">Archived</option>
                   </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>
                     ariaLabel="Pipeline editor mode"
                     options={[
@@ -777,50 +776,28 @@ export default function DataflowPage({ settings, auth }: { settings: ApiSettings
                       disabledReason={!canViewTriggers ? DATAFLOW_I18N.writeReason : undefined}
                     />
                   ) : null}
-                  <IconButton
+                </div>}
-                    label="Discard changes"
+                destructiveActions={draft.id ? (
-                    icon={<RotateCcw size={16} />}
-                    variant="ghost"
-                    onClick={() => requestDiscard(() => undefined)}
-                    disabled={!dirty || saving}
-                    disabledReason={
-                      saving
-                        ? DATAFLOW_I18N.working
-                        : !dirty
-                          ? DATAFLOW_I18N.noChanges
-                          : undefined
-                    }
-                  />
-                  {draft.id ? (
                   <IconButton
                     label="Delete pipeline"
                     icon={<Trash2 size={16} />}
                     variant="danger"
                     onClick={() => setDeleteOpen(true)}
                     disabled={!canEdit || saving}
-                      disabledReason={
+                    disabledReason={saving ? DATAFLOW_I18N.working : !canEdit ? editBlockedReason : undefined}
-                        saving ? DATAFLOW_I18N.working : !canEdit ? editBlockedReason : undefined
+                  />
-                      }
+                ) : undefined}
+                discardAction={{
+                  label: <><RotateCcw size={16} /> Discard</>,
+                  onClick: () => requestDiscard(() => undefined)
+                }}
+                saveAction={{
+                  label: <><Save size={16} /> {saving ? "Saving..." : "Save"}</>,
+                  onClick: () => void saveDraft(),
+                  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 ? (
                 <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>
               ) : null}