The Workflow Designer UI is the visual orchestration layer of Certimate. It allows users to design, configure, and monitor SSL certificate automation pipelines using a node-based graph editor. The system is built on top of @flowgram.ai/fixed-layout-editor ui/src/components/workflow/designer/Designer.tsx13-15 and integrates deeply with the Ant Design component library for node configuration and state management.
The Designer UI follows a provider-consumer pattern where the editor state is managed by the Flowgram engine, while node rendering and configuration forms are custom React components.
The WorkflowDesigner component (implemented in Designer.tsx) serves as the entry point for the visual editor ui/src/components/workflow/designer/Designer.tsx45-46 It supports both an interactive editing mode (used in WorkflowDetailDesign) and a readonly mode for viewing execution results (used in WorkflowRunDetail) ui/src/pages/workflows/WorkflowDetailDesign.tsx140-151
Key Responsibilities:
workflowStore via the orchestrate function ui/src/pages/workflows/WorkflowDetailDesign.tsx49-62validateAllNodes ui/src/components/workflow/designer/Designer.tsx202-206This diagram illustrates how user interactions in the UI translate to state changes in the backend via the designer components.
Title: "Workflow Designer State Flow"
Sources: ui/src/components/workflow/designer/Designer.tsx ui/src/pages/workflows/WorkflowDetailDesign.tsx49-62 ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx93-97
Certimate implements several specialized node types, each defined in the NodeType enum ui/src/components/workflow/designer/nodes/typings.ts4-17 Nodes are rendered using custom components that wrap an InternalNodeCard ui/src/components/workflow/designer/nodes/_shared.tsx85-144
| Node Type | Purpose | Registry / Component |
|---|---|---|
start | Entry point, configures execution triggers. | StartNodeRegistry ui/src/components/workflow/designer/nodes/StartNode.tsx10 |
bizApply | ACME certificate issuance logic. | BizApplyNodeRegistry ui/src/components/workflow/designer/nodes/BizApplyNodeRegistry.tsx12 |
bizDeploy | Certificate deployment to cloud/infra. | BizDeployNodeRegistry ui/src/components/workflow/designer/nodes/BizDeployNodeRegistry.tsx12 |
bizUpload | Manual certificate import (PEM/URL/Local). | BizUploadNodeRegistry ui/src/components/workflow/designer/nodes/BizUploadNodeRegistry.tsx12 |
bizNotify | Sends alerts via configured channels. | BizNotifyNodeRegistry ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx24 |
bizMonitor | TLS health check and monitoring. | BizMonitorNodeRegistry ui/src/components/workflow/designer/forms/BizMonitorNodeConfigForm.tsx23 |
delay | Configurable wait in seconds. | DelayNodeRegistry ui/src/components/workflow/designer/nodes/typings.ts15 |
condition | If/Else branching logic container. | ConditionNodeRegistry ui/src/components/workflow/designer/nodes/ConditionNode.tsx13 |
branchBlock | Individual branch logic with expressions. | BranchBlockNodeRegistry ui/src/components/workflow/designer/nodes/ConditionNode.tsx44 |
tryCatch | Error handling and recovery blocks. | TryCatchNodeRegistry ui/src/components/workflow/designer/nodes/TryCatchNode.tsx10 |
catchBlock | Error handling logic block. | CatchBlockNodeRegistry ui/src/components/workflow/designer/nodes/TryCatchNode.tsx37 |
end | Termination of the workflow. | EndNodeRegistry ui/src/components/workflow/designer/nodes/EndNode.tsx10 |
Each node provides a menu for renaming, duplicating, and removing nodes via InternalNodeMenuButton ui/src/components/workflow/designer/nodes/_shared.tsx146-235 The UI visually distinguishes between "Draft" states and "Published" states by highlighting invalid nodes based on form validation status (isNodeInvalid) ui/src/components/workflow/designer/nodes/_shared.tsx104-106
Sources: ui/src/components/workflow/designer/nodes/typings.ts4-17 ui/src/components/workflow/designer/nodes/_shared.tsx ui/src/components/workflow/designer/nodes/ConditionNode.tsx13-17
Node configuration is handled via a "Drawer" pattern. When a node is clicked, the WorkflowNodeDrawer opens, rendering a specific NodeConfigForm based on the node's type ui/src/pages/workflows/WorkflowDetailDesign.tsx150-151
The drawer manages the lifecycle of the configuration form, including loading initial values from the node's internal state and persisting them back upon form submission. It uses useAntdForm to bridge Ant Design forms with the Flowgram node data ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx93-97
Forms are built using antd and antd-zod for schema-based validation.
BizApplyNodeConfigFieldsProvider ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx107certificateOutputNodeId (a previous bizApply or bizUpload node) to define which certificate to deploy ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx70-79 It utilizes DeploymentProviderPicker for visual target selection ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx132-137PresetNotifyTemplatesPopselect to quickly apply pre-defined message templates ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx116-129validatePEMCertificate and validatePEMPrivateKey ui/src/components/workflow/designer/forms/BizUploadNodeConfigForm.tsx158-160BranchBlockNodeConfigExprInputBox ui/src/components/workflow/designer/forms/BranchBlockNodeConfigExprInputBox.tsx140-151 It performs deep validation of selectors to ensure they refer to valid previous nodes via getAllPreviousNodes ui/src/components/workflow/designer/nodes/ConditionNode.tsx75-106The following diagram maps the domain types to the configuration forms.
Title: "Node Config Form Mapping"
Sources: ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx ui/src/components/workflow/designer/forms/BizDeployNodeConfigForm.tsx ui/src/components/workflow/designer/forms/BizNotifyNodeConfigForm.tsx ui/src/components/workflow/designer/forms/BizUploadNodeConfigForm.tsx
The WorkflowToolbar component provides canvas-level controls ui/src/components/workflow/designer/Toolbar.tsx24-34:
HORIZONTAL_FIXED_LAYOUT and VERTICAL_FIXED_LAYOUT ui/src/components/workflow/designer/Toolbar.tsx60-66The system supports portability via JSON graph representations:
WorkflowGraphExportModal ui/src/pages/workflows/WorkflowDetailDesign.tsx124-126WorkflowGraphImportModal and overwrites the current draft using workflowStore.orchestrate ui/src/pages/workflows/WorkflowDetailDesign.tsx107-122Sources: ui/src/components/workflow/designer/Toolbar.tsx ui/src/pages/workflows/WorkflowDetailDesign.tsx103-126
When viewing a completed or running workflow, the Designer UI displays the execution status of each node.
NodeRender component renders nodes in the graph. Nodes reflect their execution state (activated, lineActivated) via the Flowgram render engine ui/src/components/workflow/designer/nodes/_shared.tsx96-102workflowStore.rollback if a draft is invalid, or publish a verified draft to the scheduler via workflowStore.publish ui/src/pages/workflows/WorkflowDetailDesign.tsx64-101Promise.withResolvers before initialization ui/src/utils/browser.ts1-12Sources: ui/src/pages/workflows/WorkflowDetailDesign.tsx ui/src/components/workflow/designer/nodes/_shared.tsx ui/src/utils/browser.ts
Refresh this wiki