WIP layout for the runs page

apps/webapp/app/components/CreateNewWorkflow.tsx

@@ -1,14 +1,9 @@
-import Prism from "prismjs";
 import "prismjs/components/prism-typescript";
-import { useEffect } from "react";
 import CodeBlock from "./code/CodeBlock";
 import { Body } from "./primitives/text/Body";
 import { Header1, Header2 } from "./primitives/text/Headers";
 
 export default function CreateNewWorkflow() {
-  useEffect(() => {
-    Prism.highlightAll();
-  }, []);
   return (
     <>
       <Header1 className="mb-6">Create a Workflow</Header1>

apps/webapp/app/components/WorkflowNodeArrow.tsx

@@ -0,0 +1,9 @@
+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>
+  );
+}

apps/webapp/app/components/layout/List.tsx

@@ -0,0 +1,11 @@
+export type ListProps = {
+  children: React.ReactNode;
+};
+
+export function List({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="overflow-hidden bg-slate-800 shadow-md sm:rounded-md mb-10">
+      <ul className="divide-y divide-slate-850">{children}</ul>
+    </div>
+  );
+}

apps/webapp/app/components/layout/Panel.tsx

@@ -0,0 +1,27 @@
+import classNames from "classnames";
+
+export type PanelProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function Panel({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={classNames(
+        "bg-slate-800 shadow-md rounded-md pl-5 pt-3 pb-1 pr-3",
+        {
+          className,
+        }
+      )}
+    >
+      {children}
+    </div>
+  );
+}

apps/webapp/app/components/primitives/Select.tsx

@@ -6,7 +6,7 @@ type SelectProps = React.DetailedHTMLProps<
 >;
 
 const defaultClasses =
-  "mt-1 block w-full rounded-md border-gray-300 py-1 pl-2 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm";
+  "block rounded bg-slate-700 text-slate-200 shadow-md border-none py-2 pl-4 pr-9 text-sm hover:cursor-pointer hover:bg-slate-700/50 focus:border-none focus:outline-none focus:ring-0 transition";
 
 export function Select({ children, className, ...props }: SelectProps) {
   return (

apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/index.tsx

@@ -17,6 +17,7 @@ import logoGithub from "~/assets/images/integrations/logo-github.png";
 import logoTrello from "~/assets/images/integrations/logo-trello.png";
 import logoAirtable from "~/assets/images/integrations/logo-airtable.png";
 import { formatDateTime } from "~/utils";
+import { List } from "~/components/layout/List";
 import { useCurrentOrganization } from "~/hooks/useOrganizations";
 
 export default function Page() {
@@ -55,76 +56,73 @@ function WorkflowList({
   currentOrganizationSlug: string;
 }) {
   return (
-    <div className="overflow-hidden bg-slate-800 shadow-md sm:rounded-md mb-10">
-      <ul className="divide-y divide-slate-850">
-        {workflows.map((workflow) => {
-          return (
-            <li key={workflow.id}>
-              <Link
-                to={`/orgs/${currentOrganizationSlug}/workflows/${workflow.slug}`}
-                className="block hover:bg-slate-850/50 transition"
-              >
-                <div className="flex items-center px-4 py-4 sm:px-6">
-                  <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
-                    <div className="truncate">
-                      <Header3 size="small" className="truncate font-medium">
-                        {workflow.title}
-                      </Header3>
+    <List>
+      {workflows.map((workflow) => {
+        return (
+          <li key={workflow.id}>
+            <Link
+              to={`/orgs/${currentOrganizationSlug}/workflows/${workflow.slug}`}
+              className="block hover:bg-slate-850/50 transition"
+            >
+              <div className="flex items-center px-4 py-4 sm:px-6">
+                <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
+                  <div className="truncate">
+                    <Header3 size="small" className="truncate font-medium">
+                      {workflow.title}
+                    </Header3>
 
-                      <div className="mt-2 flex flex-col gap-2">
-                        <div className="flex items-center text-sm text-slate-400">
-                          <IdentificationIcon
-                            className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
-                            aria-hidden="true"
-                          />
-                          <p className="mr-1">ID: {workflow.slug}</p>
-                        </div>
-                        <div className="flex items-center text-sm">
-                          <CalendarIcon
-                            className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
-                            aria-hidden="true"
-                          />
-                          <p className="mr-1 text-slate-400">Last modified:</p>
-                          <time
-                            className="text-slate-400"
-                            //TODO: Fix this so dates come in as dates, not strings
-                            dateTime={workflow.updatedAt.toISOString()}
-                          >
-                            {formatDateTime(workflow.updatedAt)}
-                          </time>
-                        </div>
+                    <div className="mt-2 flex flex-col gap-2">
+                      <div className="flex items-center text-sm text-slate-400">
+                        <IdentificationIcon
+                          className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
+                          aria-hidden="true"
+                        />
+                        <p className="mr-1">ID: {workflow.slug}</p>
+                      </div>
+                      <div className="flex items-center text-sm">
+                        <CalendarIcon
+                          className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
+                          aria-hidden="true"
+                        />
+                        <p className="mr-1 text-slate-400">Last modified:</p>
+                        <time
+                          className="text-slate-400"
+                          dateTime={workflow.updatedAt.toISOString()}
+                        >
+                          {formatDateTime(workflow.updatedAt)}
+                        </time>
                       </div>
                     </div>
-                    <div className="flex gap-2">
-                      <img
-                        className="h-8 w-8"
-                        src={logoGithub}
-                        alt="Github integration logo"
-                      />
-                      <img
-                        className="h-8 w-8"
-                        src={logoAirtable}
-                        alt="Github integration logo"
-                      />
-                      <img
-                        className="h-8 w-8"
-                        src={logoTrello}
-                        alt="Github integration logo"
-                      />
-                    </div>
                   </div>
-                  <div className="ml-5 flex-shrink-0">
-                    <ChevronRightIcon
-                      className="h-5 w-5 text-slate-400"
-                      aria-hidden="true"
+                  <div className="flex gap-2">
+                    <img
+                      className="h-8 w-8"
+                      src={logoGithub}
+                      alt="Github integration logo"
+                    />
+                    <img
+                      className="h-8 w-8"
+                      src={logoAirtable}
+                      alt="Github integration logo"
+                    />
+                    <img
+                      className="h-8 w-8"
+                      src={logoTrello}
+                      alt="Github integration logo"
                     />
                   </div>
                 </div>
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
+                <div className="ml-5 flex-shrink-0">
+                  <ChevronRightIcon
+                    className="h-5 w-5 text-slate-400"
+                    aria-hidden="true"
+                  />
+                </div>
+              </div>
+            </Link>
+          </li>
+        );
+      })}
+    </List>
   );
 }

apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/integrations.tsx

@@ -17,6 +17,7 @@ import {
 import { requireUserId } from "~/services/session.server";
 import logoGithub from "~/assets/images/integrations/logo-github.png";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
+import { List } from "~/components/layout/List";
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   await requireUserId(request);
@@ -47,35 +48,33 @@ export default function Integrations() {
               {connections.length} connected integration
               {connections.length > 1 ? "s" : ""}
             </Header2>
-            <div className="overflow-hidden bg-slate-800 shadow-md sm:rounded-md mb-10">
-              <ul className="divide-y divide-slate-850">
-                {connections.map((connection) => (
-                  <li key={connection.id}>
-                    <div className="flex gap-4 items-center px-4 py-4">
-                      <img
-                        className="h-14 w-14 shadow-md"
-                        src={logoGithub}
-                        alt="Github integration logo"
-                      />
-                      <div className="flex flex-col gap-2">
-                        <Header3 size="small" className="truncate font-medium">
-                          {connection.title}
-                        </Header3>
-                        <div className="flex items-center gap-1">
-                          <ArrowsRightLeftIcon
-                            className="h-5 w-5 flex-shrink-0 text-slate-400"
-                            aria-hidden="true"
-                          />
-                          <Body size="small" className="text-slate-400">
-                            Active in 100,000 workflows
-                          </Body>
-                        </div>
+            <List>
+              {connections.map((connection) => (
+                <li key={connection.id}>
+                  <div className="flex gap-4 items-center px-4 py-4">
+                    <img
+                      className="h-14 w-14 shadow-md"
+                      src={logoGithub}
+                      alt="Github integration logo"
+                    />
+                    <div className="flex flex-col gap-2">
+                      <Header3 size="small" className="truncate font-medium">
+                        {connection.title}
+                      </Header3>
+                      <div className="flex items-center gap-1">
+                        <ArrowsRightLeftIcon
+                          className="h-5 w-5 flex-shrink-0 text-slate-400"
+                          aria-hidden="true"
+                        />
+                        <Body size="small" className="text-slate-400">
+                          Active in 100,000 workflows
+                        </Body>
                       </div>
                     </div>
-                  </li>
-                ))}
-              </ul>
-            </div>
+                  </div>
+                </li>
+              ))}
+            </List>
           </>
         )}
       </div>

apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/$runId.tsx

@@ -1,10 +1,113 @@
-import { Header1 } from "~/components/primitives/text/Headers";
+import { ClockIcon, PlayCircleIcon } from "@heroicons/react/24/solid";
+import {
+  ArrowPathRoundedSquareIcon,
+  BeakerIcon,
+} from "@heroicons/react/24/solid";
+import { Panel } from "~/components/layout/Panel";
+import { PrimaryButton } from "~/components/primitives/Buttons";
+import { Spinner } from "~/components/primitives/Spinner";
+import { Select } from "~/components/primitives/Select";
+import { Body } from "~/components/primitives/text/Body";
+import {
+  Header1,
+  Header2,
+  Header3,
+} from "~/components/primitives/text/Headers";
+import CodeBlock from "~/components/code/CodeBlock";
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import { WorkflowNodeArrow } from "~/components/WorkflowNodeArrow";
 
 export default function Page() {
   return (
     <>
-      <Header1>Run #1</Header1>
-      <div>Run workflow here</div>
+      <div className="flex justify-between items-center mb-4">
+        <Header1 className="">Run #1</Header1>
+        <div className="flex gap-2">
+          <Body
+            size="extra-small"
+            className="flex items-center pl-2 pr-3 py-0.5 rounded uppercase tracking-wide border border-slate-700 text-slate-500"
+          >
+            <BeakerIcon className="h-4 w-4 mr-1" />
+            Test Run
+          </Body>
+          <PrimaryButton>
+            <ArrowPathRoundedSquareIcon className="h-5 w-5 -ml-1" />
+            Rerun
+          </PrimaryButton>
+        </div>
+      </div>
+
+      <ul className="flex gap-6 mb-4">
+        <li className="flex gap-2 items-center">
+          <Spinner />
+          <Header2 size="small" className="text-slate-400">
+            In progress
+          </Header2>
+        </li>
+        <li className="flex gap-1 items-center">
+          <PlayCircleIcon className="h-5 w-5 text-slate-400" />
+          <Header2 size="small" className="text-slate-400">
+            Started: 12:34:56pm Dec 13, 2022
+          </Header2>
+        </li>
+        <li className="flex gap-1 items-center">
+          <ClockIcon className="h-5 w-5 text-slate-400" />
+          <Header2 size="small" className="text-slate-400">
+            Duration: 1m 23s
+          </Header2>
+        </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>
+      <WorkflowNodeArrow />
     </>
   );
 }
+
+const workflowNodeFlexClasses = "flex gap-1 items-baseline";
+const workflowNodeUppercaseClasses = "uppercase text-slate-400";
+const workflowNode1code = `{ 
+  "assignee": "samejr",
+  "issueId: "uiydfgydfg7yt34"
+}`;