frontend: Refactor workflows to use new spacing units

frontend/packages/core/src/AppProvider/index.tsx

@@ -217,9 +217,12 @@ const ClutchApp = ({
                               : workflow.displayName;
 
                             const workflowLayoutProps: LayoutProps = {
-                              ...route.layoutProps,
-                              heading: route.layoutProps?.heading || heading,
                               workflow,
+                              title: heading,
+                              subtitle: route.description,
+                              variant: route.layoutProps ? route.layoutProps.variant : null,
+                              breadcrumbsOnly: route.layoutProps?.breadcrumbsOnly || false,
+                              hideHeader: route.layoutProps?.hideHeader || false,
                             };
 
                             const workflowRouteComponent = (

frontend/packages/core/src/AppProvider/workflow.tsx

@@ -92,7 +92,7 @@ export interface Route {
    */
   featureFlag?: string;
 
-  layoutProps?: Omit<LayoutProps, "workflow">;
+  layoutProps?: Omit<LayoutProps, "workflow" | "title" | "subtitle">;
 }
 
 export interface ConfiguredRoute extends Route {

frontend/packages/core/src/WorkflowLayout/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { matchPath } from "react-router";
+import { matchPath, Params, useParams } from "react-router";
 import type { Interpolation } from "@emotion/styled";
 import type { CSSObject, Theme } from "@mui/material";
+import { alpha } from "@mui/system";
 
 import type { Workflow } from "../AppProvider/workflow";
 import Breadcrumbs from "../Breadcrumbs";
@@ -10,12 +11,14 @@ import styled from "../styled";
 import { Typography } from "../typography";
 import { generateBreadcrumbsEntries } from "../utils";
 
-export type LayoutVariant = "standard" | "wizard" | "custom";
+export type LayoutVariant = "standard" | "wizard";
 
 export type LayoutProps = {
   workflow: Workflow;
-  variant?: LayoutVariant;
-  heading?: string | React.ReactElement;
+  variant: LayoutVariant | null;
+  title?: string | ((params: Params) => string);
+  subtitle?: string;
+  breadcrumbsOnly?: boolean;
   hideHeader?: boolean;
 };
 
@@ -43,8 +46,6 @@ const getContainerVariantStyles = (variant: LayoutVariant, theme: Theme) => {
       padding: theme.spacing(theme.clutch.spacing.lg, theme.clutch.spacing.none),
       margin: theme.spacing(theme.clutch.spacing.none, "auto"),
     },
-    // No styles
-    custom: {},
   };
   return layoutVariantStylesMap[variant];
 };
@@ -63,49 +64,73 @@ const PageHeader = styled("div")(({ $variant, theme }: StyledVariantComponentPro
   width: "100%",
 }));
 
-const PageHeaderMainContainer = styled("div")({
+const PageHeaderBreadcrumbsWrapper = styled("div")(({ theme }: { theme: Theme }) => ({
+  marginBottom: theme.spacing(theme.clutch.spacing.xs),
+}));
+
+const PageHeaderMainContainer = styled("div")(({ theme }: { theme: Theme }) => ({
   display: "flex",
   alignItems: "center",
   height: "70px",
+  marginBottom: theme.spacing(theme.clutch.spacing.sm),
+}));
+
+const PageHeaderInformation = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-evenly",
+  height: "100%",
 });
 
-const Heading = styled(Typography)({
+const Title = styled(Typography)({
   lineHeight: 1,
 });
 
+const Subtitle = styled(Typography)(({ theme }: { theme: Theme }) => ({
+  color: alpha(theme.colors.neutral[900], 0.45),
+}));
+
 const WorkflowLayout = ({
   workflow,
-  variant = "standard",
-  heading = null,
+  variant,
+  title = null,
+  subtitle = null,
+  breadcrumbsOnly = false,
   hideHeader = false,
   children,
 }: React.PropsWithChildren<LayoutProps>) => {
+  const params = useParams();
   const location = useLocation();
+
+  if (variant === null) {
+    return <>{children}</>;
+  }
+
   const workflowPaths = workflow.routes.map(({ path }) => `/${workflow.path}/${path}`);
   const breadcrumbsEntries = generateBreadcrumbsEntries(
     location,
-    (url: string) =>
-      `/${workflow.path}` !== url &&
-      !workflowPaths.includes(url) &&
-      !workflowPaths.find(path => !!matchPath({ path }, url))
+    url => !!workflowPaths.find(path => !!matchPath({ path }, url))
   );
 
   return (
     <LayoutContainer $variant={variant}>
       {!hideHeader && (
         <PageHeader $variant={variant}>
-          <Breadcrumbs entries={breadcrumbsEntries} />
-          <PageHeaderMainContainer>
-            {heading && (
-              <>
-                {React.isValidElement(heading) ? (
-                  heading
-                ) : (
-                  <Heading variant="h2">{heading}</Heading>
+          <PageHeaderBreadcrumbsWrapper>
+            <Breadcrumbs entries={breadcrumbsEntries} />
+          </PageHeaderBreadcrumbsWrapper>
+          {!breadcrumbsOnly && (title || subtitle) && (
+            <PageHeaderMainContainer>
+              <PageHeaderInformation>
+                {title && (
+                  <Title variant="h2" textTransform="capitalize">
+                    {typeof title === "function" ? title(params) : title}
+                  </Title>
                 )}
-              </>
-            )}
-          </PageHeaderMainContainer>
+                {subtitle && <Subtitle variant="subtitle2">{subtitle}</Subtitle>}
+              </PageHeaderInformation>
+            </PageHeaderMainContainer>
+          )}
         </PageHeader>
       )}
       {children}

frontend/packages/core/src/utils/generateBreadcrumbsEntries.tsx

@@ -3,15 +3,15 @@ import type { Location } from "history";
 import type { BreadcrumbEntry } from "../Breadcrumbs";
 
 const generateBreadcrumbsEntries = (location: Location, validateUrl: (url: string) => boolean) => {
-  const labels = location.pathname
+  const labels = decodeURIComponent(location.pathname)
     .split("/")
     .slice(1, location.pathname.endsWith("/") ? -1 : undefined);
 
   const entries: Array<BreadcrumbEntry> = [{ label: "Home", url: "/" }].concat(
     labels.map((label, index) => {
       let url = `/${labels.slice(0, index + 1).join("/")}`;
 
-      if (validateUrl(url)) {
+      if (!validateUrl(url)) {
         url = undefined;
       }
 

frontend/packages/wizard/src/wizard.tsx

@@ -72,7 +72,6 @@ const Header = styled(Grid)<{ $orientation: MuiStepperProps["orientation"] }>(
 
 const Container = styled(MuiContainer)<{ $width: ContainerProps["width"] }>(
   {
-    paddingBlock: "24px 32px",
     height: "calc(100% - 56px)",
   },
   props => ({

frontend/workflows/audit/src/audit-event.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import ReactJson from "react-json-view";
 import type { clutch as IClutch } from "@clutch-sh/api";
-import { client, ClutchError, Error, Loadable, Typography, useParams } from "@clutch-sh/core";
+import { client, ClutchError, Error, Loadable, useParams } from "@clutch-sh/core";
 import { Stack } from "@mui/material";
 
 import type { WorkflowProps } from ".";
 
 const ENDPOINT = "/v1/audit/getEvent";
 
-const AuditEvent: React.FC<WorkflowProps> = ({ heading }) => {
+const AuditEvent: React.FC<WorkflowProps> = () => {
   const params = useParams();
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
   const [event, setEvent] = React.useState<IClutch.audit.v1.IEvent>();
@@ -37,8 +37,7 @@ const AuditEvent: React.FC<WorkflowProps> = ({ heading }) => {
   React.useEffect(() => fetch(), []);
 
   return (
-    <Stack spacing={2} direction="column" style={{ padding: "32px" }}>
-      <Typography variant="h2">{heading}</Typography>
+    <Stack spacing={2} direction="column">
       <Loadable isLoading={isLoading}>
         {error && <Error subject={error} />}
         <ReactJson

frontend/workflows/audit/src/index.tsx

@@ -25,13 +25,19 @@ const register = (): WorkflowConfiguration => {
         displayName: "Logs",
         description: "View audit log",
         component: AuditLog,
+        layoutProps: {
+          variant: "standard",
+        },
       },
       event: {
         path: "/event/:id",
         displayName: "Event Details",
         description: "View audit event",
         component: AuditEvent,
         hideNav: true,
+        layoutProps: {
+          variant: "standard",
+        },
       },
     },
   };

frontend/workflows/audit/src/logs/event-row.tsx

@@ -18,7 +18,7 @@ const ENDPOINT = "/v1/audit/getEvents";
 const COLUMN_COUNT = 6;
 const MonospaceText = styled("div")(({ theme }: { theme: Theme }) => ({
   fontFamily: "monospace",
-  padding: "8px",
+  padding: theme.spacing(theme.clutch.spacing.sm),
   border: "1px solid lightgray",
   borderRadius: "8px",
   background: theme.palette.secondary[200],
@@ -28,6 +28,10 @@ const MonospaceText = styled("div")(({ theme }: { theme: Theme }) => ({
   maxWidth: "400px",
 }));
 
+const ReactJsonWrapper = styled("div")(({ theme }: { theme: Theme }) => ({
+  padding: theme.spacing(theme.clutch.spacing.sm),
+}));
+
 interface EventRowAction {
   icon: React.ReactElement;
   name: string;
@@ -125,14 +129,15 @@ const EventRow = ({ event, detailsPathPrefix, downloadPrefix }: EventRowProps) =
       </TableRow>
       {open && (
         <TableRow colSpan={COLUMN_COUNT}>
-          <ReactJson
-            src={event}
-            name={null}
-            groupArraysAfterLength={5}
-            displayDataTypes={false}
-            collapsed={2}
-            style={{ padding: "8px" }}
-          />
+          <ReactJsonWrapper>
+            <ReactJson
+              src={event}
+              name={null}
+              groupArraysAfterLength={5}
+              displayDataTypes={false}
+              collapsed={2}
+            />
+          </ReactJsonWrapper>
         </TableRow>
       )}
       <Popper open={showActions} anchorRef={anchorRef} onClickAway={() => setShowActions(false)}>

frontend/workflows/audit/src/logs/index.tsx

@@ -6,7 +6,6 @@ import {
   IconButton,
   styled,
   Table,
-  Typography,
   useSearchParams,
   useTheme,
 } from "@clutch-sh/core";
@@ -19,7 +18,6 @@ import { DateTimeRangeSelector, QUICK_TIME_OPTIONS } from "./date-selector";
 import EventRows from "./event-row";
 
 const RootContainer = styled(Stack)({
-  padding: "32px",
   height: "100%",
 });
 
@@ -39,7 +37,7 @@ const LoadingSpinner = styled(CircularProgress)(({ theme }: { theme: Theme }) =>
   position: "absolute",
 }));
 
-const AuditLog: React.FC<AuditLogProps> = ({ heading, detailsPathPrefix, downloadPrefix }) => {
+const AuditLog: React.FC<AuditLogProps> = ({ detailsPathPrefix, downloadPrefix }) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [now] = React.useState<Date>(new Date());
   const [timeRangeKey, setTimeRangeKey] = React.useState<string>("");
@@ -74,7 +72,6 @@ const AuditLog: React.FC<AuditLogProps> = ({ heading, detailsPathPrefix, downloa
   const genTimeRangeKey = () => `${startTime}-${endTime}-${new Date().toString()}`;
   return (
     <RootContainer spacing={2} direction="column">
-      <Typography variant="h2">{heading}</Typography>
       <Stack direction="column" spacing={2}>
         <Stack
           direction={shrink ? "column" : "row"}

frontend/workflows/dynamodb/src/index.tsx

@@ -33,6 +33,9 @@ const register = (): WorkflowConfiguration => {
         displayName: "Update Capacity",
         description: "Update the table or GSI provisioned capacity.",
         requiredConfigProps: ["resolverType"],
+        layoutProps: {
+          variant: "wizard",
+        },
       },
     },
   };

frontend/workflows/dynamodb/src/update-capacity.tsx

@@ -282,7 +282,7 @@ const UpdateCapacity: React.FC<WorkflowProps> = ({
   };
 
   return (
-    <Wizard dataLayout={dataLayout} heading={heading}>
+    <Wizard dataLayout={dataLayout}>
       <TableIdentifier name="Lookup" resolverType={resolverType} notes={notes} />
       <TableDetails name="Modify" enableOverride={enableOverride} notes={notes} />
       <Confirm name="Results" />

frontend/workflows/ec2/src/index.tsx

@@ -33,20 +33,29 @@ const register = (): WorkflowConfiguration => {
         description: "Terminate an EC2 instance.",
         component: TerminateInstance,
         requiredConfigProps: ["resolverType"],
+        layoutProps: {
+          variant: "wizard",
+        },
       },
       rebootInstance: {
         path: "instance/reboot",
         displayName: "Reboot Instance",
         description: "Reboot an EC2 Instance",
         component: RebootInstance,
         requiredConfigProps: ["resolverType"],
+        layoutProps: {
+          variant: "wizard",
+        },
       },
       resizeAutoscalingGroup: {
         path: "asg/resize",
         displayName: "Resize Autoscaling Group",
         description: "Resize an autoscaling group.",
         component: ResizeAutoscalingGroup,
         requiredConfigProps: ["resolverType"],
+        layoutProps: {
+          variant: "wizard",
+        },
       },
     },
   };

frontend/workflows/ec2/src/reboot-instance.tsx

@@ -89,7 +89,7 @@ const RebootInstance: React.FC<WorkflowProps> = ({ heading, resolverType, notes
   };
 
   return (
-    <Wizard dataLayout={dataLayout} heading={heading}>
+    <Wizard dataLayout={dataLayout}>
       <InstanceIdentifier name="Lookup" resolverType={resolverType} />
       <InstanceDetails name="Verify" />
       <Confirm name="Result" notes={notes} />

frontend/workflows/ec2/src/resize-asg.tsx

@@ -134,7 +134,7 @@ const ResizeAutoscalingGroup: React.FC<WorkflowProps> = ({ heading, resolverType
   };
 
   return (
-    <Wizard dataLayout={dataLayout} heading={heading}>
+    <Wizard dataLayout={dataLayout}>
       <GroupIdentifier name="Lookup" resolverType={resolverType} />
       <GroupDetails name="Modify" />
       <Confirm name="Result" notes={notes} />

frontend/workflows/ec2/src/terminate-instance.tsx

@@ -108,7 +108,7 @@ const TerminateInstance: React.FC<WorkflowProps> = ({ heading, resolverType, not
   };
 
   return (
-    <Wizard dataLayout={dataLayout} heading={heading}>
+    <Wizard dataLayout={dataLayout}>
       <InstanceIdentifier name="Lookup" resolverType={resolverType} />
       <InstanceDetails name="Verify" />
       <Confirm name="Result" notes={notes} />

frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
+    class="MuiContainer-root css-1so714y-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"

frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="MuiContainer-root css-1s2y8jy-MuiContainer-root"
+    class="MuiContainer-root css-1so714y-MuiContainer-root"
   >
     <div
       class="MuiGrid-root MuiGrid-container css-1yw6yql-MuiGrid-root"