vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use alert instead of custom component

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-07 16:29:38 +01:00
parent 16572b8f49
commit 4d7c68db3a
1 changed files with 36 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/workflows/[id].tsx
+16 -39
View File
@@ -32,6 +32,7 @@ import type {Template, Workflow, WorkflowExecution, WorkflowStep, WorkflowTransi
import {DashboardLayout} from '../../components/DashboardLayout'; import {DashboardLayout} from '../../components/DashboardLayout';
import {network} from '../../lib/network'; import {network} from '../../lib/network';
import { import {
AlertTriangle,
ArrowLeft, ArrowLeft,
ChevronDown, ChevronDown,
Clock, Clock,
@@ -446,22 +447,12 @@ export default function WorkflowEditorPage() {
{/* Active Executions Warning Banner */} {/* Active Executions Warning Banner */}
{activeExecutionsCount > 0 && ( {activeExecutionsCount > 0 && (
<div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg"> <Alert>
<div className="flex items-start"> <Info className="h-4 w-4" />
<div className="flex-shrink-0"> <AlertTitle>
<svg className="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3 flex-1">
<h3 className="text-sm font-medium text-blue-800">
{workflow.enabled ? 'Workflow is active with running executions' : 'Workflow has active executions'} {workflow.enabled ? 'Workflow is active with running executions' : 'Workflow has active executions'}
</h3> </AlertTitle>
<div className="mt-2 text-sm text-blue-700"> <AlertDescription>
<p> <p>
This workflow has <strong>{activeExecutionsCount}</strong> active execution This workflow has <strong>{activeExecutionsCount}</strong> active execution
{activeExecutionsCount !== 1 ? 's' : ''}.{' '} {activeExecutionsCount !== 1 ? 's' : ''}.{' '}
@@ -474,13 +465,11 @@ export default function WorkflowEditorPage() {
<li>Change the workflow trigger</li> <li>Change the workflow trigger</li>
</ul> </ul>
<p className="mt-2"> <p className="mt-2">
You can still rename steps and adjust their position. To make configuration changes, wait for You can still rename steps and adjust their position. To make configuration changes, wait for executions
executions to complete or cancel them from the Executions tab. to complete or cancel them from the Executions tab.
</p> </p>
</div> </AlertDescription>
</div> </Alert>
</div>
</div>
)} )}
{/* Validation Warning Banner */} {/* Validation Warning Banner */}
@@ -489,30 +478,18 @@ export default function WorkflowEditorPage() {
const validation = validateWorkflow(workflow); const validation = validateWorkflow(workflow);
if (!validation.valid) { if (!validation.valid) {
return ( return (
<div className="bg-amber-50 border-l-4 border-amber-400 p-4 rounded-r-lg"> <Alert variant="warning">
<div className="flex items-start"> <AlertTriangle className="h-4 w-4" />
<div className="flex-shrink-0"> <AlertTitle>Workflow has validation errors</AlertTitle>
<svg className="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor"> <AlertDescription>
<path
fillRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3 flex-1">
<h3 className="text-sm font-medium text-amber-800">Workflow has validation errors</h3>
<div className="mt-2 text-sm text-amber-700">
<p className="mb-2">Fix the following issues before enabling this workflow:</p> <p className="mb-2">Fix the following issues before enabling this workflow:</p>
<ul className="list-disc list-inside space-y-1"> <ul className="list-disc list-inside space-y-1">
{validation.errors.map((error, i) => ( {validation.errors.map((error, i) => (
<li key={i}>{error}</li> <li key={i}>{error}</li>
))} ))}
</ul> </ul>
</div> </AlertDescription>
</div> </Alert>
</div>
</div>
); );
} }
return null; return null;