From 31efcabb57f2a4a2e3a9d1c83c32d1eb73c561e9 Mon Sep 17 00:00:00 2001 From: Orlando Valverde Date: Tue, 22 Oct 2024 13:27:47 -0600 Subject: [PATCH 1/2] frotnend: Adjust workflow layout whitespace --- .../packages/core/src/Breadcrumbs/index.tsx | 1 - .../core/src/WorkflowLayout/index.tsx | 37 ++++++++++++------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/frontend/packages/core/src/Breadcrumbs/index.tsx b/frontend/packages/core/src/Breadcrumbs/index.tsx index c04b486691..c463ea04d2 100644 --- a/frontend/packages/core/src/Breadcrumbs/index.tsx +++ b/frontend/packages/core/src/Breadcrumbs/index.tsx @@ -12,7 +12,6 @@ interface BreadcrumbsProps { } const StyledBreadcrumbs = styled(MuiBreadcrumbs)(({ theme }: { theme: Theme }) => ({ - margin: theme.spacing(theme.clutch.spacing.sm, theme.clutch.spacing.none), "& .MuiBreadcrumbs-separator": { color: alpha(theme.colors.neutral[900], 0.6), }, diff --git a/frontend/packages/core/src/WorkflowLayout/index.tsx b/frontend/packages/core/src/WorkflowLayout/index.tsx index 97733a9a14..27fba7569a 100644 --- a/frontend/packages/core/src/WorkflowLayout/index.tsx +++ b/frontend/packages/core/src/WorkflowLayout/index.tsx @@ -13,7 +13,7 @@ import { generateBreadcrumbsEntries } from "../utils"; export type LayoutVariant = "standard" | "wizard" | "custom"; export type LayoutProps = { - workflow: Workflow; + workflow?: Workflow; variant?: LayoutVariant; heading?: string | React.ReactElement; hideHeader?: boolean; @@ -56,13 +56,20 @@ const LayoutContainer = styled("div")( const PageHeader = styled("div")(({ $variant, theme }: StyledVariantComponentProps) => ({ padding: theme.spacing( - theme.clutch.spacing.base, + theme.clutch.spacing.none, $variant === "wizard" ? theme.clutch.spacing.md : theme.clutch.spacing.none ), + paddingBottom: theme.spacing(theme.clutch.spacing.base), width: "100%", })); -const HeaderTitle = styled(Typography)({ +const PageHeaderMainContainer = styled("div")({ + display: "flex", + alignItems: "center", + height: "70px", +}); + +const Heading = styled(Typography)({ lineHeight: 1, }); @@ -74,11 +81,11 @@ const WorkflowLayout = ({ children, }: React.PropsWithChildren) => { const location = useLocation(); - const workflowPaths = workflow.routes.map(({ path }) => `/${workflow.path}/${path}`); + const workflowPaths = workflow?.routes.map(({ path }) => `/${workflow?.path}/${path}`); const breadcrumbsEntries = generateBreadcrumbsEntries( location, (url: string) => - `/${workflow.path}` !== url && + `/${workflow?.path}` !== url && !workflowPaths.includes(url) && !workflowPaths.find(path => !!matchPath({ path }, url)) ); @@ -88,15 +95,17 @@ const WorkflowLayout = ({ {!hideHeader && ( - {heading && ( - <> - {React.isValidElement(heading) ? ( - heading - ) : ( - {heading} - )} - - )} + + {heading && ( + <> + {React.isValidElement(heading) ? ( + heading + ) : ( + {heading} + )} + + )} + )} {children} From 2dca5884a996bf5fb2dcd904040ebdfd3a9d477a Mon Sep 17 00:00:00 2001 From: Orlando Valverde Date: Wed, 23 Oct 2024 11:46:34 -0600 Subject: [PATCH 2/2] Fix items stated in code review --- frontend/packages/core/src/AppProvider/index.tsx | 2 -- frontend/packages/core/src/AppProvider/workflow.tsx | 2 +- frontend/packages/core/src/WorkflowLayout/index.tsx | 6 +++--- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/frontend/packages/core/src/AppProvider/index.tsx b/frontend/packages/core/src/AppProvider/index.tsx index c3c4a5162d..7aca4801aa 100644 --- a/frontend/packages/core/src/AppProvider/index.tsx +++ b/frontend/packages/core/src/AppProvider/index.tsx @@ -216,7 +216,6 @@ const ClutchApp = ({ ? `${workflow.displayName}: ${route.displayName}` : workflow.displayName; - // We define these props in order to avoid UI changes before refactoring const workflowLayoutProps: LayoutProps = { ...route.layoutProps, heading: route.layoutProps?.heading || heading, @@ -231,7 +230,6 @@ const ClutchApp = ({ > {React.cloneElement(, { ...route.componentProps, - // This is going to be removed to be used in the WorkflowLayout only heading, })} diff --git a/frontend/packages/core/src/AppProvider/workflow.tsx b/frontend/packages/core/src/AppProvider/workflow.tsx index cd5865fae0..8d0e40357e 100644 --- a/frontend/packages/core/src/AppProvider/workflow.tsx +++ b/frontend/packages/core/src/AppProvider/workflow.tsx @@ -92,7 +92,7 @@ export interface Route { */ featureFlag?: string; - layoutProps?: LayoutProps; + layoutProps?: Omit; } export interface ConfiguredRoute extends Route { diff --git a/frontend/packages/core/src/WorkflowLayout/index.tsx b/frontend/packages/core/src/WorkflowLayout/index.tsx index 27fba7569a..bdfcd5fff9 100644 --- a/frontend/packages/core/src/WorkflowLayout/index.tsx +++ b/frontend/packages/core/src/WorkflowLayout/index.tsx @@ -13,7 +13,7 @@ import { generateBreadcrumbsEntries } from "../utils"; export type LayoutVariant = "standard" | "wizard" | "custom"; export type LayoutProps = { - workflow?: Workflow; + workflow: Workflow; variant?: LayoutVariant; heading?: string | React.ReactElement; hideHeader?: boolean; @@ -81,11 +81,11 @@ const WorkflowLayout = ({ children, }: React.PropsWithChildren) => { const location = useLocation(); - const workflowPaths = workflow?.routes.map(({ path }) => `/${workflow?.path}/${path}`); + const workflowPaths = workflow.routes.map(({ path }) => `/${workflow.path}/${path}`); const breadcrumbsEntries = generateBreadcrumbsEntries( location, (url: string) => - `/${workflow?.path}` !== url && + `/${workflow.path}` !== url && !workflowPaths.includes(url) && !workflowPaths.find(path => !!matchPath({ path }, url)) );