Adopt shared WebUI layout primitives

This commit is contained in:
2026-08-18 10:42:55 +02:00
parent 8305bd5c5b
commit 55bbd15ecc
2 changed files with 10 additions and 10 deletions
+7 -7
View File
@@ -23,7 +23,7 @@ import {
} from "lucide-react"; } from "lucide-react";
import { ReactFlowProvider } from "@xyflow/react"; import { ReactFlowProvider } from "@xyflow/react";
import { useSearchParams } from "react-router"; import { useSearchParams } from "react-router";
import { import { ToolbarGroup, ActionToolbar,
Button, Button,
ConfirmDialog, ConfirmDialog,
Dialog, Dialog,
@@ -585,9 +585,9 @@ export default function WorkflowPage({
<main className="workflow-page"> <main className="workflow-page">
<div className="workflow-shell"> <div className="workflow-shell">
<aside className="workflow-definition-panel"> <aside className="workflow-definition-panel">
<div className="workflow-panel-toolbar"> <ActionToolbar className="workflow-panel-toolbar">
<strong>Workflows</strong> <strong>Workflows</strong>
<span className="workflow-toolbar-actions"> <ToolbarGroup align="end" className="workflow-toolbar-actions">
<DocumentationHelpLink <DocumentationHelpLink
reference={{ topicId: "workflow.editor", documentationType: "user" }} reference={{ topicId: "workflow.editor", documentationType: "user" }}
label="Open Workflow documentation" label="Open Workflow documentation"
@@ -616,8 +616,8 @@ export default function WorkflowPage({
disabled={!canWrite} disabled={!canWrite}
disabledReason={!canWrite ? "Workflow definition write permission is required." : undefined} disabledReason={!canWrite ? "Workflow definition write permission is required." : undefined}
/> />
</span> </ToolbarGroup>
</div> </ActionToolbar>
<div className="workflow-definition-search"> <div className="workflow-definition-search">
<input <input
type="search" type="search"
@@ -671,7 +671,7 @@ export default function WorkflowPage({
<section className="workflow-workspace"> <section className="workflow-workspace">
{draft && displayedGraph ? ( {draft && displayedGraph ? (
<> <>
<div className="workflow-workspace-toolbar"> <ActionToolbar className="workflow-workspace-toolbar">
<span className="workflow-identity-fields"> <span className="workflow-identity-fields">
<input <input
className="workflow-name-input" className="workflow-name-input"
@@ -858,7 +858,7 @@ export default function WorkflowPage({
/> />
) : null} ) : null}
</span> </span>
</div> </ActionToolbar>
<div className="workflow-alerts"> <div className="workflow-alerts">
{error ? ( {error ? (
<DismissibleAlert tone="danger" resetKey={error}> <DismissibleAlert tone="danger" resetKey={error}>
@@ -15,7 +15,7 @@ import {
RotateCcw, RotateCcw,
XCircle XCircle
} from "lucide-react"; } from "lucide-react";
import { import { ActionToolbar,
Button, Button,
ConfirmDialog, ConfirmDialog,
Dialog, Dialog,
@@ -299,7 +299,7 @@ export default function WorkflowRunsDialog({
onClose={close} onClose={close}
footer={<Button onClick={close}>Close</Button>} footer={<Button onClick={close}>Close</Button>}
> >
<div className="workflow-runs-toolbar"> <ActionToolbar className="workflow-runs-toolbar">
<span> <span>
<strong>Workflow instances</strong> <strong>Workflow instances</strong>
<small>Revision-pinned runs and human handoffs</small> <small>Revision-pinned runs and human handoffs</small>
@@ -325,7 +325,7 @@ export default function WorkflowRunsDialog({
<Play size={16} /> Start <Play size={16} /> Start
</Button> </Button>
</span> </span>
</div> </ActionToolbar>
{error ? ( {error ? (
<DismissibleAlert tone="danger" resetKey={error}> <DismissibleAlert tone="danger" resetKey={error}>
{error} {error}