From e096be235695c185bcbe7efad95b3f477b4eb242 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Mon, 19 Dec 2022 14:02:59 +0000 Subject: [PATCH] WIP layout for the runs page --- .../app/components/CreateNewWorkflow.tsx | 5 - .../app/components/WorkflowNodeArrow.tsx | 9 ++ apps/webapp/app/components/layout/List.tsx | 11 ++ apps/webapp/app/components/layout/Panel.tsx | 27 ++++ .../app/components/primitives/Select.tsx | 2 +- .../orgs/$organizationSlug/__org/index.tsx | 126 +++++++++--------- .../$organizationSlug/__org/integrations.tsx | 53 ++++---- .../workflows/$workflowSlug/runs/$runId.tsx | 109 ++++++++++++++- 8 files changed, 242 insertions(+), 100 deletions(-) create mode 100644 apps/webapp/app/components/WorkflowNodeArrow.tsx create mode 100644 apps/webapp/app/components/layout/List.tsx create mode 100644 apps/webapp/app/components/layout/Panel.tsx diff --git a/apps/webapp/app/components/CreateNewWorkflow.tsx b/apps/webapp/app/components/CreateNewWorkflow.tsx index 216463a34..b28c46352 100644 --- a/apps/webapp/app/components/CreateNewWorkflow.tsx +++ b/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 ( <> Create a Workflow diff --git a/apps/webapp/app/components/WorkflowNodeArrow.tsx b/apps/webapp/app/components/WorkflowNodeArrow.tsx new file mode 100644 index 000000000..ad8f713c9 --- /dev/null +++ b/apps/webapp/app/components/WorkflowNodeArrow.tsx @@ -0,0 +1,9 @@ +import { ArrowDownIcon } from "@heroicons/react/24/solid"; + +export function WorkflowNodeArrow() { + return ( +
+ +
+ ); +} diff --git a/apps/webapp/app/components/layout/List.tsx b/apps/webapp/app/components/layout/List.tsx new file mode 100644 index 000000000..c80bef3b0 --- /dev/null +++ b/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 ( +
+ +
+ ); +} diff --git a/apps/webapp/app/components/layout/Panel.tsx b/apps/webapp/app/components/layout/Panel.tsx new file mode 100644 index 000000000..d06296400 --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +} diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx index 8bbe43482..da81fcc4c 100644 --- a/apps/webapp/app/components/primitives/Select.tsx +++ b/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 ( diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/index.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/index.tsx index e58087fa4..96add4b54 100644 --- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/index.tsx +++ b/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 ( -
- -
+
+
+ + + + ); + })} + ); } diff --git a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/integrations.tsx b/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/integrations.tsx index 941baa47d..9cb8b6561 100644 --- a/apps/webapp/app/routes/__app/orgs/$organizationSlug/__org/integrations.tsx +++ b/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" : ""} -
- -
+ + + ))} + )} 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 045433559..f6be8ece5 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,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 ( <> - Run #1 -
Run workflow here
+
+ Run #1 +
+ + + Test Run + + + + Rerun + +
+
+ + + + +
+
    +
  • + + Type: + + Trigger +
    • +
  • + + Step: + +
    + + Complete +
    +
    • +
  • + + Org: + + apihero-run +
    • +
  • + + Repo: + + jsonhero-web +
    • +
+ +
+ + GitHub new issue (Webhook) + + + + ); } + +const workflowNodeFlexClasses = "flex gap-1 items-baseline"; +const workflowNodeUppercaseClasses = "uppercase text-slate-400"; +const workflowNode1code = `{ + "assignee": "samejr", + "issueId: "uiydfgydfg7yt34" +}`;