Added more run states to the Runs page

2022-12-19 16:34:15 +00:00
parent d2477b2a67
commit e721e2341d
4 changed files with 105 additions and 61 deletions
@@ -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>
  );
 }
@@ -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>
@@ -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"
      />
@@ -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>
+  );
+};