diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/$runId.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/$runId.tsx index c76deff41..31309c5cb 100644 --- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/$runId.tsx +++ b/apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/$runId.tsx @@ -20,7 +20,7 @@ import { import CodeBlock from "~/components/code/CodeBlock"; import { CheckCircleIcon } from "@heroicons/react/24/solid"; import { WorkflowNodeArrow } from "~/components/WorkflowNodeArrow"; -import type { FC } from "react"; +import type { ReactNode } from "react"; export default function Page() { return ( @@ -63,22 +63,59 @@ export default function Page() { - + - + - + - + ); } -type WorkflowStepProps = { - status: "error" | "inProgress" | "complete" | "notStarted"; -}; - -const WorkflowStep: FC = (props) => { +function WorkflowStep({ step }: { step: Step }) { const workflowNodeFlexClasses = "flex gap-1 items-baseline"; const workflowNodeUppercaseClasses = "uppercase text-slate-400"; const workflowNode1code = `{ @@ -86,39 +123,8 @@ const WorkflowStep: FC = (props) => { "issueId": "uiydfgydfg7yt34" }`; - let icon; - let statusText; - let borderColor; - - switch (props.status) { - case "error": - icon = ( - - ); - statusText = "Error"; - borderColor = "border-red-700"; - break; - case "inProgress": - icon = ; - statusText = "In progress"; - borderColor = "border-blue-700"; - break; - case "complete": - icon = ( - - ); - statusText = "Complete"; - borderColor = "border-slate-800"; - break; - default: - icon = ( - - ); - statusText = "Not started"; - borderColor = "border-slate-800"; - } return ( - +
  • @@ -132,8 +138,8 @@ const WorkflowStep: FC = (props) => { Step:
    - {icon} - {statusText} + + {step.status}
  • @@ -159,6 +165,113 @@ const WorkflowStep: FC = (props) => { GitHub new issue (Webhook) - + ); +} + +function Status({ status }: { status: WorkflowStepStatus }) { + switch (status) { + case "error": + return ( + + ); + case "inProgress": + return ; + case "complete": + return ( + + ); + default: + return ( + + ); + } +} + +function StepPanel({ + status, + children, +}: { + status: WorkflowStepStatus; + children: ReactNode; +}) { + let borderClass = "border-slate-800"; + switch (status) { + case "error": + borderClass = "border-red-700"; + break; + case "inProgress": + borderClass = "border-blue-700"; + break; + } + + return {children}; +} + +type Step = LogStep | DelayStep | RequestStep | TriggerStep; + +type TriggerStep = CommonStepData & { + type: "trigger"; + trigger: + | WebhookTrigger + | ScheduledTrigger + | CustomTrigger + | HttpTrigger + | AwsTrigger + | EmailTrigger; }; + +type LogStep = CommonStepData & { + type: "log"; + message: string; +}; + +type DelayStep = CommonStepData & { + type: "delay"; + duration: number; +}; + +type RequestStep = CommonStepData & { + type: "request"; + integration: string; +}; + +type WebhookTrigger = { + on: "webhook"; + input: any; +}; + +type ScheduledTrigger = { + on: "scheduled"; + input: any; +}; + +type CustomTrigger = { + on: "custom"; + name: string; + input: any; +}; + +type HttpTrigger = { + on: "http"; + method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE"; + path: string; +}; + +type EmailTrigger = { + on: "email"; + address: string; +}; + +type AwsTrigger = { + on: "aws"; + input: any; +}; + +type CommonStepData = { + status: WorkflowStepStatus; + startedAt?: Date; + completedAt?: Date; +}; + +type WorkflowStepStatus = "error" | "inProgress" | "complete" | "notStarted";