infrastructure/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve layout and accessibility of workflow header and buttons

Browse Source
This commit is contained in:
Dries Augustyns
2026-04-24 12:09:54 +02:00
parent c910d20bb7
commit ab3edd7dc9
1 changed files with 58 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/workflows/[id].tsx
+29 -13
View File
@@ -441,7 +441,6 @@ export default function WorkflowEditorPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<Link href="/workflows"> <Link href="/workflows">
<Button variant="ghost" size="sm"> <Button variant="ghost" size="sm">
@@ -473,28 +472,30 @@ export default function WorkflowEditorPage() {
<p className="text-neutral-500 mt-1 text-sm sm:text-base">{workflow.description}</p> <p className="text-neutral-500 mt-1 text-sm sm:text-base">{workflow.description}</p>
)} )}
</div> </div>
</div> <div className="flex items-center gap-1.5 flex-shrink-0">
<div className="flex flex-wrap items-center gap-2"> <Button variant="ghost" size="icon" onClick={() => setShowSettingsDialog(true)} aria-label="Settings">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)} className="flex-1 sm:flex-none">
<Settings className="h-4 w-4" /> <Settings className="h-4 w-4" />
<span className="hidden sm:inline">Settings</span>
</Button> </Button>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none"> <Button
variant="ghost"
size="icon"
onClick={() => setShowDeleteDialog(true)}
aria-label="Delete workflow"
className="text-neutral-400 hover:text-red-600 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span className="hidden sm:inline">Delete</span>
</Button> </Button>
<Button onClick={handleToggleEnabled} className="flex-1 sm:flex-none"> <div className="h-5 w-px bg-neutral-200 mx-1" />
<Button variant={workflow.enabled ? 'outline' : 'default'} onClick={handleToggleEnabled}>
{workflow.enabled ? ( {workflow.enabled ? (
<> <>
<PowerOff className="h-4 w-4" /> <PowerOff className="h-4 w-4" />
<span className="hidden sm:inline">Disable</span> Disable
<span className="sm:hidden">Off</span>
</> </>
) : ( ) : (
<> <>
<Power className="h-4 w-4" /> <Power className="h-4 w-4" />
<span className="hidden sm:inline">Enable</span> Enable
<span className="sm:hidden">On</span>
</> </>
)} )}
</Button> </Button>
@@ -528,7 +529,7 @@ export default function WorkflowEditorPage() {
</Alert> </Alert>
)} )}
{/* Validation Warning Banner */} {/* Validation Warning Banner / Ready-to-enable Banner */}
{!workflow.enabled && {!workflow.enabled &&
(() => { (() => {
const validation = validateWorkflow(workflow); const validation = validateWorkflow(workflow);
@@ -548,6 +549,21 @@ export default function WorkflowEditorPage() {
</Alert> </Alert>
); );
} }
if (workflow.steps.length > 0) {
return (
<Alert>
<Power className="h-4 w-4" />
<AlertTitle>Workflow is disabled</AlertTitle>
<AlertDescription className="flex items-center justify-between gap-4">
<span>Contacts won&apos;t be processed until this workflow is enabled.</span>
<Button size="sm" onClick={handleToggleEnabled} className="shrink-0">
<Power className="h-3.5 w-3.5" />
Enable
</Button>
</AlertDescription>
</Alert>
);
}
return null; return null;
})()} })()}