Use in WorkflowLayout as a container in Route element prop

lyft · Oct 17, 2024 · 272c29b · 272c29b
1 parent edf9ba1
commit 272c29b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/frontend/packages/core/src/AppProvider/index.tsx b/frontend/packages/core/src/AppProvider/index.tsx
@@ -15,6 +15,7 @@ import Landing from "../landing";
 import type { ClutchError } from "../Network/errors";
 import NotFound from "../not-found";
 import type { AppConfiguration } from "../Types";
+import WorkflowLayout, { LayoutProps } from "../WorkflowLayout";
 
 import { registeredWorkflows } from "./registrar";
 import ShortLinkProxy, { ShortLinkBaseRoute } from "./short-link-proxy";
@@ -214,21 +215,32 @@ const ClutchApp = ({
                             const heading = route.displayName
                               ? `${workflow.displayName}: ${route.displayName}`
                               : workflow.displayName;
+
+                            // We define these props in order to avoid UI changes before refactoring
+                            const workflowLayoutProps: LayoutProps = {
+                              variant: "custom",
+                              showHeader: false,
+                              heading: route.layoutProps?.heading || heading,
+                              ...route.layoutProps,
+                            };
                             return (
                               <Route
                                 key={workflow.path}
                                 path={`${route.path.replace(/^\/+/, "").replace(/\/+$/, "")}`}
                                 element={
-                                  <AppNotification
-                                    type="layout"
-                                    workflow={workflow?.displayName}
-                                    banners={appConfiguration?.banners}
-                                  >
-                                    {React.cloneElement(<route.component />, {
-                                      ...route.componentProps,
-                                      heading,
-                                    })}
-                                  </AppNotification>
+                                  <WorkflowLayout {...workflowLayoutProps}>
+                                    <AppNotification
+                                      type="layout"
+                                      workflow={workflow?.displayName}
+                                      banners={appConfiguration?.banners}
+                                    >
+                                      {React.cloneElement(<route.component />, {
+                                        ...route.componentProps,
+                                        // This is going to be removed to be used in the WorkflowLayout only
+                                        heading,
+                                      })}
+                                    </AppNotification>
+                                  </WorkflowLayout>
                                 }
                               />
                             );

diff --git a/frontend/packages/core/src/AppProvider/workflow.tsx b/frontend/packages/core/src/AppProvider/workflow.tsx
@@ -4,6 +4,7 @@ import { Alert, Grid, IconButton } from "@mui/material";
 
 import { Dialog, DialogContent } from "../dialog";
 import Code from "../text";
+import type { LayoutProps } from "../WorkflowLayout";
 
 import type { WorkflowIcon } from "./index";
 
@@ -90,6 +91,8 @@ export interface Route {
    * If this is not set the route will always be registered.
    */
   featureFlag?: string;
+
+  layoutProps?: LayoutProps;
 }
 
 export interface ConfiguredRoute extends Route {

diff --git a/frontend/packages/core/src/WorkflowLayout/index.tsx b/frontend/packages/core/src/WorkflowLayout/index.tsx
@@ -4,10 +4,10 @@ import type { CSSObject, Theme } from "@mui/material";
 import styled from "../styled";
 import { Typography } from "../typography";
 
-type LayoutVariant = "standard" | "wizard";
+export type LayoutVariant = "standard" | "wizard" | "custom";
 
-type LayoutProps = {
-  variant: LayoutVariant;
+export type LayoutProps = {
+  variant?: LayoutVariant;
   heading?: string | React.ReactElement;
   showHeader?: boolean;
 };
@@ -36,6 +36,8 @@ 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];
 };
@@ -58,7 +60,7 @@ const HeaderTitle = styled(Typography)({
 });
 
 const WorkflowLayout = ({
-  variant,
+  variant = "custom",
   showHeader,
   heading,
   children,