From e721e2341d0d55b459bd29b9738aeb4bcb66ceb4 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Mon, 19 Dec 2022 16:34:15 +0000
Subject: [PATCH] Added more run states to the Runs page

---
 .../app/components/WorkflowNodeArrow.tsx      |   4 +-
 apps/webapp/app/components/layout/Panel.tsx   |   9 +-
 .../app/components/primitives/Spinner.tsx     |   8 +-
 .../workflows/$workflowSlug/runs/$runId.tsx   | 145 ++++++++++++------
 4 files changed, 105 insertions(+), 61 deletions(-)

diff --git a/apps/webapp/app/components/WorkflowNodeArrow.tsx b/apps/webapp/app/components/WorkflowNodeArrow.tsx
index ad8f713c9..3704c054f 100644
--- a/apps/webapp/app/components/WorkflowNodeArrow.tsx
+++ b/apps/webapp/app/components/WorkflowNodeArrow.tsx
@@ -2,8 +2,8 @@ import { ArrowDownIcon } from "@heroicons/react/24/solid";
 
 export function WorkflowNodeArrow() {
   return (
-    <div className="relative flex items-center justify-center">
-      <ArrowDownIcon className="absolute left-[calc(50%-20px)] -top-1 h-10 w-10 text-slate-500" />
+    <div className="relative flex items-center justify-center mb-9">
+      <ArrowDownIcon className="absolute left-[calc(50%-20px)] -top-1 h-10 w-10 text-slate-700" />
     </div>
   );
 }
diff --git a/apps/webapp/app/components/layout/Panel.tsx b/apps/webapp/app/components/layout/Panel.tsx
index d06296400..d67501251 100644
--- a/apps/webapp/app/components/layout/Panel.tsx
+++ b/apps/webapp/app/components/layout/Panel.tsx
@@ -1,5 +1,3 @@
-import classNames from "classnames";
-
 export type PanelProps = {
   children: React.ReactNode;
   className?: string;
@@ -14,12 +12,7 @@ export function Panel({
 }) {
   return (
     <div
-      className={classNames(
-        "bg-slate-800 shadow-md rounded-md pl-5 pt-3 pb-1 pr-3",
-        {
-          className,
-        }
-      )}
+      className={`bg-slate-800 shadow-md rounded-md pl-5 pt-3 pb-1 pr-3 ${className}`}
     >
       {children}
     </div>
diff --git a/apps/webapp/app/components/primitives/Spinner.tsx b/apps/webapp/app/components/primitives/Spinner.tsx
index bfc074834..2b713269a 100644
--- a/apps/webapp/app/components/primitives/Spinner.tsx
+++ b/apps/webapp/app/components/primitives/Spinner.tsx
@@ -1,4 +1,4 @@
-export function Spinner() {
+export function Spinner({ className }: { className?: string }) {
   return (
     <svg
       width="20"
@@ -6,7 +6,7 @@ export function Spinner() {
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className="animate-spin"
+      className={`animate-spin ${className}`}
     >
       <rect
         x="2"
@@ -14,12 +14,12 @@ export function Spinner() {
         width="16"
         height="16"
         rx="8"
-        stroke="#BBF7D0"
+        stroke="rgba(59 130 246 / 0.4)"
         strokeWidth="3"
       />
       <path
         d="M10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2"
-        stroke="#22C55E"
+        stroke="rgba(59 130 246)"
         strokeWidth="3"
         strokeLinecap="round"
       />
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 f6be8ece5..c10d5573c 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
@@ -1,4 +1,8 @@
-import { ClockIcon, PlayCircleIcon } from "@heroicons/react/24/solid";
+import {
+  ClockIcon,
+  PlayCircleIcon,
+  XCircleIcon,
+} from "@heroicons/react/24/solid";
 import {
   ArrowPathRoundedSquareIcon,
   BeakerIcon,
@@ -16,11 +20,12 @@ import {
 import CodeBlock from "~/components/code/CodeBlock";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import { WorkflowNodeArrow } from "~/components/WorkflowNodeArrow";
+import type { FC } from "react";
 
 export default function Page() {
   return (
     <>
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex sticky -top-12 py-4 bg-slate-850 justify-between items-center z-10">
         <Header1 className="">Run #1</Header1>
         <div className="flex gap-2">
           <Body
@@ -58,56 +63,102 @@ export default function Page() {
         </li>
       </ul>
 
-      <Panel>
-        <div className="flex mb-4 pb-3 justify-between items-center border-b border-slate-700">
-          <ul className="flex gap-4 items-center">
-            <li className={workflowNodeFlexClasses}>
-              <Body size="extra-small" className={workflowNodeUppercaseClasses}>
-                Type:
-              </Body>
-              <Body size="small">Trigger</Body>
-            </li>
-            <li className={workflowNodeFlexClasses}>
-              <Body size="extra-small" className={workflowNodeUppercaseClasses}>
-                Step:
-              </Body>
-              <div className="flex gap-0.5 items-baseline">
-                <CheckCircleIcon className="relative top-[3px] h-4 w-4 text-green-500" />
-                <Body size="small">Complete</Body>
-              </div>
-            </li>
-            <li className={workflowNodeFlexClasses}>
-              <Body size="extra-small" className={workflowNodeUppercaseClasses}>
-                Org:
-              </Body>
-              <Body size="small">apihero-run</Body>
-            </li>
-            <li className={workflowNodeFlexClasses}>
-              <Body size="extra-small" className={workflowNodeUppercaseClasses}>
-                Repo:
-              </Body>
-              <Body size="small">jsonhero-web</Body>
-            </li>
-          </ul>
-          <Select>
-            <option value="GitHub #1">GitHub #1</option>
-            <option value="GitHub #2">GitHub #2</option>
-            <option value="GitHub #3">GitHub #3</option>
-          </Select>
-        </div>
-        <Header3 size="large" className="mb-4">
-          GitHub new issue (Webhook)
-        </Header3>
-        <CodeBlock code={workflowNode1code} />
-      </Panel>
+      <WorkflowStep status={"complete"} />
       <WorkflowNodeArrow />
+      <WorkflowStep status={"error"} />
+      <WorkflowNodeArrow />
+      <WorkflowStep status={"inProgress"} />
+      <WorkflowNodeArrow />
+      <WorkflowStep status={"notStarted"} />
     </>
   );
 }
 
-const workflowNodeFlexClasses = "flex gap-1 items-baseline";
-const workflowNodeUppercaseClasses = "uppercase text-slate-400";
-const workflowNode1code = `{ 
+type WorkflowStepProps = {
+  status: "error" | "inProgress" | "complete" | "notStarted";
+};
+
+const WorkflowStep: FC<WorkflowStepProps> = (props) => {
+  const workflowNodeFlexClasses = "flex gap-1 items-baseline";
+  const workflowNodeUppercaseClasses = "uppercase text-slate-400";
+  const workflowNode1code = `{ 
   "assignee": "samejr",
   "issueId: "uiydfgydfg7yt34"
 }`;
+
+  let icon;
+  let statusText;
+  let borderColor;
+
+  switch (props.status) {
+    case "error":
+      icon = (
+        <XCircleIcon className="relative top-[3px] h-4 w-4 text-red-500" />
+      );
+      statusText = "Error";
+      borderColor = "border-red-700";
+      break;
+    case "inProgress":
+      icon = <Spinner className="relative top-[3px] h-4 w-4 text-blue-500" />;
+      statusText = "In progress";
+      borderColor = "border-blue-700";
+      break;
+    case "complete":
+      icon = (
+        <CheckCircleIcon className="relative top-[3px] h-4 w-4 text-green-500" />
+      );
+      statusText = "Complete";
+      borderColor = "border-slate-800";
+      break;
+    default:
+      icon = (
+        <ClockIcon className="relative top-[3px] h-4 w-4 text-slate-500" />
+      );
+      statusText = "Not started";
+      borderColor = "border-slate-800";
+  }
+  return (
+    <Panel className={`border ${borderColor}`}>
+      <div className="flex mb-4 pb-3 justify-between items-center border-b border-slate-700">
+        <ul className="flex gap-4 items-center">
+          <li className={workflowNodeFlexClasses}>
+            <Body size="extra-small" className={workflowNodeUppercaseClasses}>
+              Type:
+            </Body>
+            <Body size="small">Trigger</Body>
+          </li>
+          <li className={workflowNodeFlexClasses}>
+            <Body size="extra-small" className={workflowNodeUppercaseClasses}>
+              Step:
+            </Body>
+            <div className="flex gap-0.5 items-baseline">
+              {icon}
+              <Body size="small">{statusText}</Body>
+            </div>
+          </li>
+          <li className={workflowNodeFlexClasses}>
+            <Body size="extra-small" className={workflowNodeUppercaseClasses}>
+              Org:
+            </Body>
+            <Body size="small">apihero-run</Body>
+          </li>
+          <li className={workflowNodeFlexClasses}>
+            <Body size="extra-small" className={workflowNodeUppercaseClasses}>
+              Repo:
+            </Body>
+            <Body size="small">jsonhero-web</Body>
+          </li>
+        </ul>
+        <Select>
+          <option value="GitHub #1">GitHub #1</option>
+          <option value="GitHub #2">GitHub #2</option>
+          <option value="GitHub #3">GitHub #3</option>
+        </Select>
+      </div>
+      <Header3 size="large" className="mb-4">
+        GitHub new issue (Webhook)
+      </Header3>
+      <CodeBlock code={workflowNode1code} />
+    </Panel>
+  );
+};