diff --git a/frontend/packages/core/src/AppProvider/index.tsx b/frontend/packages/core/src/AppProvider/index.tsx index 7aca4801aa..0ea18eb2fc 100644 --- a/frontend/packages/core/src/AppProvider/index.tsx +++ b/frontend/packages/core/src/AppProvider/index.tsx @@ -157,7 +157,7 @@ const ClutchApp = ({ return ( - +
@@ -217,9 +217,22 @@ const ClutchApp = ({ : workflow.displayName; const workflowLayoutProps: LayoutProps = { - ...route.layoutProps, - heading: route.layoutProps?.heading || heading, workflow, + title: heading, + subtitle: route.description, + variant: + route.layoutProps?.variant === null || + route.layoutProps?.variant !== undefined + ? route.layoutProps?.variant + : workflow.defaultLayoutProps?.variant, + breadcrumbsOnly: + route.layoutProps?.breadcrumbsOnly ?? + workflow.defaultLayoutProps?.breadcrumbsOnly ?? + false, + hideHeader: + route.layoutProps?.hideHeader ?? + workflow.defaultLayoutProps?.hideHeader ?? + false, }; const workflowRouteComponent = ( @@ -240,7 +253,7 @@ const ClutchApp = ({ key={workflow.path} path={`${route.path.replace(/^\/+/, "").replace(/\/+$/, "")}`} element={ - appConfiguration?.enableWorkflowLayout ? ( + appConfiguration?.useWorkflowLayout ? ( {workflowRouteComponent} diff --git a/frontend/packages/core/src/AppProvider/themes.tsx b/frontend/packages/core/src/AppProvider/themes.tsx index 6944a85902..0d89876d64 100644 --- a/frontend/packages/core/src/AppProvider/themes.tsx +++ b/frontend/packages/core/src/AppProvider/themes.tsx @@ -22,14 +22,21 @@ declare module "@mui/material/styles" { const useTheme = () => useMuiTheme() as MuiTheme; -const Theme: React.FC = ({ children }) => { +interface ThemeProps { + useWorkflowLayout?: boolean; +} + +const Theme: React.FC = ({ useWorkflowLayout = false, children }) => { // Uncomment to use dark mode /* // Detect system color mode const prefersDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; */ const prefersDarkMode = false; return ( - + {children} ); diff --git a/frontend/packages/core/src/AppProvider/workflow.tsx b/frontend/packages/core/src/AppProvider/workflow.tsx index 8d0e40357e..9ae6d29957 100644 --- a/frontend/packages/core/src/AppProvider/workflow.tsx +++ b/frontend/packages/core/src/AppProvider/workflow.tsx @@ -51,7 +51,17 @@ interface WorkflowShortlinkConfiguration { shortLink?: boolean; } -export interface Workflow extends BaseWorkflowConfiguration, WorkflowShortlinkConfiguration { +interface WorkflowLayoutConfiguration { + /** + * (Optional) property to pass the defined layout properties to all of its defined routes + */ + defaultLayoutProps?: Omit; +} + +export interface Workflow + extends BaseWorkflowConfiguration, + WorkflowShortlinkConfiguration, + WorkflowLayoutConfiguration { /** * An optional property that is set via the config and allows for the display of an icon given a path, * this will override the default avatar. @@ -68,7 +78,8 @@ export interface Workflow extends BaseWorkflowConfiguration, WorkflowShortlinkCo export interface WorkflowConfiguration extends BaseWorkflowConfiguration, - WorkflowShortlinkConfiguration { + WorkflowShortlinkConfiguration, + WorkflowLayoutConfiguration { shortLink?: boolean; routes: { [key: string]: Route; @@ -91,8 +102,10 @@ export interface Route { * If this is not set the route will always be registered. */ featureFlag?: string; - - layoutProps?: Omit; + /** + * (Optional) property to define layout properties for a single route + */ + layoutProps?: Omit; } export interface ConfiguredRoute extends Route { diff --git a/frontend/packages/core/src/Theme/theme.tsx b/frontend/packages/core/src/Theme/theme.tsx index 1717888277..dc49adc238 100644 --- a/frontend/packages/core/src/Theme/theme.tsx +++ b/frontend/packages/core/src/Theme/theme.tsx @@ -18,6 +18,7 @@ declare module "@emotion/react" { declare module "@mui/material/styles" { interface Theme { clutch: { + useWorkflowLayout: boolean; spacing: { none: number; xs: number; @@ -27,10 +28,14 @@ declare module "@mui/material/styles" { lg: number; xl: number; }; + layout: { + gutter: string; + }; }; } interface ThemeOptions { clutch: { + useWorkflowLayout: boolean; spacing: { none: number; xs: number; @@ -40,12 +45,15 @@ declare module "@mui/material/styles" { lg: number; xl: number; }; + layout: { + gutter: string; + }; }; } } // Create a Material UI theme is propagated to all children. -const createTheme = (variant: ThemeVariant): MuiTheme => { +const createTheme = (variant: ThemeVariant, useWorkflowLayout: boolean): MuiTheme => { return createMuiTheme({ colors: clutchColors(variant), palette: palette(variant), @@ -53,6 +61,7 @@ const createTheme = (variant: ThemeVariant): MuiTheme => { // https://v5.mui.com/material-ui/customization/spacing/ spacing: 8, clutch: { + useWorkflowLayout, spacing: { none: 0, xs: 0.5, @@ -62,6 +71,9 @@ const createTheme = (variant: ThemeVariant): MuiTheme => { lg: 4, xl: 5, }, + layout: { + gutter: useWorkflowLayout ? "0px" : "24px", + }, }, transitions: { // https://material-ui.com/getting-started/faq/#how-can-i-disable-transitions-globally @@ -114,12 +126,17 @@ const createTheme = (variant: ThemeVariant): MuiTheme => { interface ThemeProps { variant?: ThemeVariant; + useWorkflowLayout?: boolean; children: React.ReactNode; } -const ThemeProvider = ({ children, variant = THEME_VARIANTS.light }: ThemeProps) => ( +const ThemeProvider = ({ + children, + useWorkflowLayout = false, + variant = THEME_VARIANTS.light, +}: ThemeProps) => ( - + {children} diff --git a/frontend/packages/core/src/Types/app.tsx b/frontend/packages/core/src/Types/app.tsx index bcbd8f37c9..9e407b13e6 100644 --- a/frontend/packages/core/src/Types/app.tsx +++ b/frontend/packages/core/src/Types/app.tsx @@ -6,5 +6,5 @@ export interface AppConfiguration { /** Supports a react node or a string representing a public assets path */ logo?: React.ReactNode | string; banners?: AppBanners; - enableWorkflowLayout?: boolean; + useWorkflowLayout?: boolean; } diff --git a/frontend/packages/core/src/WorkflowLayout/index.tsx b/frontend/packages/core/src/WorkflowLayout/index.tsx index 5c2df0c6cc..c9aab5d0da 100644 --- a/frontend/packages/core/src/WorkflowLayout/index.tsx +++ b/frontend/packages/core/src/WorkflowLayout/index.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { matchPath } from "react-router-dom"; +import { matchPath, useParams } from "react-router-dom"; import type { Interpolation } from "@emotion/styled"; import type { CSSObject, Theme } from "@mui/material"; +import { alpha } from "@mui/material"; 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: Record) => 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 = null, + title = null, + subtitle = null, + breadcrumbsOnly = false, hideHeader = false, children, }: React.PropsWithChildren) => { + 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 ( {!hideHeader && ( - - - {heading && ( - <> - {React.isValidElement(heading) ? ( - heading - ) : ( - {heading} + + + + {!breadcrumbsOnly && (title || subtitle) && ( + + + {title && ( + + {typeof title === "function" ? title(params) : title} + )} - - )} - + {subtitle && {subtitle}} + + + )} )} {children} diff --git a/frontend/packages/core/src/utils/generateBreadcrumbsEntries.tsx b/frontend/packages/core/src/utils/generateBreadcrumbsEntries.tsx index 964671c64f..099e1e213b 100644 --- a/frontend/packages/core/src/utils/generateBreadcrumbsEntries.tsx +++ b/frontend/packages/core/src/utils/generateBreadcrumbsEntries.tsx @@ -3,7 +3,7 @@ import type { Location } from "react-router-dom"; 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); @@ -11,7 +11,7 @@ const generateBreadcrumbsEntries = (location: Location, validateUrl: (url: strin labels.map((label, index) => { let url = `/${labels.slice(0, index + 1).join("/")}`; - if (validateUrl(url)) { + if (!validateUrl(url)) { url = undefined; } diff --git a/frontend/packages/wizard/src/wizard.tsx b/frontend/packages/wizard/src/wizard.tsx index 3fc8098e45..17de8ec39e 100644 --- a/frontend/packages/wizard/src/wizard.tsx +++ b/frontend/packages/wizard/src/wizard.tsx @@ -16,6 +16,7 @@ import { useLocation, useNavigate, useSearchParams, + useTheme, WizardContext, } from "@clutch-sh/core"; import type { ManagerLayout } from "@clutch-sh/data-layout"; @@ -71,10 +72,10 @@ const Header = styled(Grid)<{ $orientation: MuiStepperProps["orientation"] }>( ); const Container = styled(MuiContainer)<{ $width: ContainerProps["width"] }>( - { - paddingBlock: "24px 32px", - height: "calc(100% - 56px)", - }, + ({ theme }: { theme: Theme }) => ({ + padding: theme.clutch.layout.gutter, + height: "100%", + }), props => ({ width: props.$width === "full" ? "100%" : "800px", }) @@ -126,6 +127,7 @@ const Wizard = ({ const locationState = useLocation().state as { origin?: string }; const navigate = useNavigate(); const [origin] = React.useState(locationState?.origin); + const theme = useTheme(); const updateStepData = (stepName: string, data: object) => { setWizardStepData(prevState => { @@ -253,7 +255,7 @@ const Wizard = ({ return ( - {heading && ( + {!theme.clutch.useWorkflowLayout && heading && (
{React.isValidElement(heading) ? ( heading diff --git a/frontend/workflows/audit/src/audit-event.tsx b/frontend/workflows/audit/src/audit-event.tsx index f4dd129b46..66aef8fa48 100644 --- a/frontend/workflows/audit/src/audit-event.tsx +++ b/frontend/workflows/audit/src/audit-event.tsx @@ -2,13 +2,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 { Stack } from "@mui/material"; +import { Stack, useTheme } from "@mui/material"; import type { WorkflowProps } from "."; const ENDPOINT = "/v1/audit/getEvent"; const AuditEvent: React.FC = ({ heading }) => { + const theme = useTheme(); const params = useParams(); const [isLoading, setIsLoading] = React.useState(true); const [event, setEvent] = React.useState(); @@ -37,8 +38,8 @@ const AuditEvent: React.FC = ({ heading }) => { React.useEffect(() => fetch(), []); return ( - - {heading} + + {!theme.clutch.useWorkflowLayout && {heading}} {error && } { path: "audit", group: "Audit", displayName: "Audit Trail", + defaultLayoutProps: { + variant: "standard", + }, routes: { landing: { path: "/", diff --git a/frontend/workflows/audit/src/logs/index.tsx b/frontend/workflows/audit/src/logs/index.tsx index 4477c0166d..e88c4fc98e 100644 --- a/frontend/workflows/audit/src/logs/index.tsx +++ b/frontend/workflows/audit/src/logs/index.tsx @@ -19,7 +19,6 @@ import { DateTimeRangeSelector, QUICK_TIME_OPTIONS } from "./date-selector"; import EventRows from "./event-row"; const RootContainer = styled(Stack)({ - padding: "32px", height: "100%", }); @@ -73,8 +72,8 @@ const AuditLog: React.FC = ({ heading, detailsPathPrefix, downloa const genTimeRangeKey = () => `${startTime}-${endTime}-${new Date().toString()}`; return ( - - {heading} + + {!theme.clutch.useWorkflowLayout && {heading}} { path: "dynamodb", group: "AWS", displayName: "DynamoDB", + defaultLayoutProps: { + variant: "wizard", + }, routes: { updateCapacity: { path: "/capacity", diff --git a/frontend/workflows/ec2/src/index.tsx b/frontend/workflows/ec2/src/index.tsx index 301f198e59..719d90f5b1 100644 --- a/frontend/workflows/ec2/src/index.tsx +++ b/frontend/workflows/ec2/src/index.tsx @@ -26,6 +26,9 @@ const register = (): WorkflowConfiguration => { path: "ec2", group: "AWS", displayName: "EC2", + defaultLayoutProps: { + variant: "wizard", + }, routes: { terminateInstance: { path: "instance/terminate", diff --git a/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap b/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap index 38d61b7ec5..5feca0d424 100644 --- a/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap +++ b/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap @@ -3,7 +3,7 @@ exports[`renders correctly 1`] = `
{ path: "envoy", group: "Envoy", displayName: "Envoy", + defaultLayoutProps: { + variant: "wizard", + }, routes: { remoteTriage: { path: "triage", diff --git a/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap b/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap index 4acc3c0d26..2f954164f4 100644 --- a/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap +++ b/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap @@ -3,7 +3,7 @@ exports[`renders correctly 1`] = `
({ display: "flex", flex: "1 auto", - margin: "30px", -}); + padding: theme.clutch.layout.gutter, +})); const Heading = styled(Typography)({ padding: "16px 0", @@ -20,13 +20,16 @@ interface PageLayoutProps { } const PageLayout: React.FC = ({ heading, error, children }) => { + const theme = useTheme(); const hasError = error !== undefined && error !== null; return ( - - {heading} - + {!theme.clutch.useWorkflowLayout && ( + + {heading} + + )} {hasError && } {children} diff --git a/frontend/workflows/experimentation/src/index.tsx b/frontend/workflows/experimentation/src/index.tsx index 116474b20f..7718a09371 100644 --- a/frontend/workflows/experimentation/src/index.tsx +++ b/frontend/workflows/experimentation/src/index.tsx @@ -14,6 +14,9 @@ const register = (): WorkflowConfiguration => { path: "experimentation", group: "Chaos Experimentation", displayName: "Chaos Experimentation", + defaultLayoutProps: { + variant: "standard", + }, routes: { listExperiments: { path: "list", diff --git a/frontend/workflows/experimentation/src/tests/__snapshots__/list-experiments.test.tsx.snap b/frontend/workflows/experimentation/src/tests/__snapshots__/list-experiments.test.tsx.snap index ca869fb5c7..1f2133b8ba 100644 --- a/frontend/workflows/experimentation/src/tests/__snapshots__/list-experiments.test.tsx.snap +++ b/frontend/workflows/experimentation/src/tests/__snapshots__/list-experiments.test.tsx.snap @@ -3,7 +3,7 @@ exports[`renders correctly 1`] = `
{ const { asFragment } = render( - + + + ); diff --git a/frontend/workflows/k8s/src/index.tsx b/frontend/workflows/k8s/src/index.tsx index baf8a95d15..09ea9f3b4f 100644 --- a/frontend/workflows/k8s/src/index.tsx +++ b/frontend/workflows/k8s/src/index.tsx @@ -31,6 +31,9 @@ const register = (): WorkflowConfiguration => { path: "k8s", group: "K8s", displayName: "K8s", + defaultLayoutProps: { + variant: "wizard", + }, routes: { deletePod: { path: "pod/delete", @@ -59,6 +62,9 @@ const register = (): WorkflowConfiguration => { description: "Dashboard for Kubernetes Resources.", component: KubeDashboard, requiredConfigProps: [], + layoutProps: { + variant: "standard", + }, }, cordonNode: { path: "node/cordon", diff --git a/frontend/workflows/k8s/src/k8s-dashboard.tsx b/frontend/workflows/k8s/src/k8s-dashboard.tsx index 3258bdda4f..322f274901 100644 --- a/frontend/workflows/k8s/src/k8s-dashboard.tsx +++ b/frontend/workflows/k8s/src/k8s-dashboard.tsx @@ -1,6 +1,6 @@ import React from "react"; import type { clutch as IClutch } from "@clutch-sh/api"; -import { client, ClutchError, Error, Paper, styled, Tab, Tabs } from "@clutch-sh/core"; +import { client, ClutchError, Error, Paper, styled, Tab, Tabs, useTheme } from "@clutch-sh/core"; import { DataLayoutContext, useDataLayoutManager } from "@clutch-sh/data-layout"; import AppsIcon from "@mui/icons-material/Apps"; import CropFreeIcon from "@mui/icons-material/CropFree"; @@ -16,15 +16,15 @@ import K8sDashSearch from "./k8s-dash-search"; import PodTable from "./pods-table"; import StatefulSetTable from "./stateful-sets-table"; -const Container = styled("div")({ +const Container = styled("div")(({ theme }: { theme: Theme }) => ({ flex: 1, - margin: "32px", + padding: theme.clutch.layout.gutter, display: "flex", flexDirection: "column", "> *:first-child": { margin: "0", }, -}); +})); const Content = styled("div")({ margin: "32px 0", @@ -63,6 +63,7 @@ const defaultRequestData = inputData => { }; const KubeDashboard: React.FC = () => { + const theme = useTheme(); const [error, setError] = React.useState(undefined); const dataLayout = { @@ -177,7 +178,7 @@ const KubeDashboard: React.FC = () => { return ( - + {!theme.clutch.useWorkflowLayout && } handleSubmit(namespace, clientset)} /> {error !== undefined ? ( diff --git a/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap b/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap index 38d61b7ec5..5feca0d424 100644 --- a/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap +++ b/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap @@ -3,7 +3,7 @@ exports[`renders correctly 1`] = `
{ path: "kinesis", group: "AWS", displayName: "Kinesis", + defaultLayoutProps: { + variant: "wizard", + }, routes: { updateShardCount: { path: "shards", diff --git a/frontend/workflows/projectCatalog/src/catalog/index.tsx b/frontend/workflows/projectCatalog/src/catalog/index.tsx index 173665774e..79e6a95b95 100644 --- a/frontend/workflows/projectCatalog/src/catalog/index.tsx +++ b/frontend/workflows/projectCatalog/src/catalog/index.tsx @@ -122,20 +122,24 @@ const Catalog: React.FC = ({ allowDisabled }) => { }; return ( - -
- - Project Catalog - -
-
- Project Catalog -
- - A catalog of all projects. - -
-
+ + {!theme.clutch.useWorkflowLayout && ( + <> +
+ + Project Catalog + +
+
+ Project Catalog +
+ + A catalog of all projects. + +
+
+ + )}
diff --git a/frontend/workflows/projectCatalog/src/details/components/layout.tsx b/frontend/workflows/projectCatalog/src/details/components/layout.tsx index ed2624933d..5a888e81b6 100644 --- a/frontend/workflows/projectCatalog/src/details/components/layout.tsx +++ b/frontend/workflows/projectCatalog/src/details/components/layout.tsx @@ -1,6 +1,6 @@ import React from "react"; import type { clutch as IClutch } from "@clutch-sh/api"; -import { Grid, QuickLinkGroup, styled, useNavigate, useParams } from "@clutch-sh/core"; +import { Grid, QuickLinkGroup, useNavigate, useParams, useTheme } from "@clutch-sh/core"; import type { ProjectDetailsWorkflowProps } from "../../types"; import { ProjectDetailsContext } from "../context"; @@ -19,10 +19,6 @@ export interface CatalogLayoutProps quickLinkSettings?: boolean; } -const StyledContainer = styled(Grid)({ - padding: "8px 24px", -}); - const CatalogLayout = ({ routes = [], title, @@ -38,6 +34,7 @@ const CatalogLayout = ({ null ); const projInfo = React.useMemo(() => ({ projectId, projectInfo }), [projectId, projectInfo]); + const theme = useTheme(); const redirectNotFound = () => navigate(`/${projectId}/notFound`, { replace: true }); @@ -69,12 +66,14 @@ const CatalogLayout = ({ return ( - - - - + + {!theme.clutch.useWorkflowLayout && ( + + + + - + )} {children && children} - + ); }; diff --git a/frontend/workflows/projectCatalog/src/details/config/index.tsx b/frontend/workflows/projectCatalog/src/details/config/index.tsx index 011bbd972f..fdcf0697bb 100644 --- a/frontend/workflows/projectCatalog/src/details/config/index.tsx +++ b/frontend/workflows/projectCatalog/src/details/config/index.tsx @@ -117,13 +117,10 @@ const CatalogConfigPage = ({ description = "", ...props }: ProjectDetailsConfigWorkflowProps) => { - const { configType = defaultRoute } = useParams(); - return ( { path: "catalog", group: "Catalog", displayName: "Catalog", + defaultLayoutProps: { + variant: "standard", + breadcrumbsOnly: true, + }, routes: { catalog: { path: "/", @@ -20,6 +24,9 @@ const register = (): WorkflowConfiguration => { description: "A searchable catalog of services", component: Catalog, featureFlag: "projectCatalog", + layoutProps: { + breadcrumbsOnly: false, + }, }, details: { path: "/:projectId", diff --git a/frontend/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap b/frontend/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap index e19c0ffea8..80bd04f7d0 100644 --- a/frontend/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap +++ b/frontend/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap @@ -3,7 +3,7 @@ exports[`renders correctly 1`] = `
{ path: "server-experimentation", group: "Chaos Experimentation", displayName: "Server Fault Injection", + defaultLayoutProps: { + variant: "standard", + }, routes: { startExperiment: { path: "start", diff --git a/frontend/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap b/frontend/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap index 773257f271..1cce74f981 100644 --- a/frontend/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap +++ b/frontend/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap @@ -3,7 +3,7 @@ exports[`renders correctly 1`] = `
{ path: "scm", group: "Source Control", displayName: "Source Control", + defaultLayoutProps: { + variant: "wizard", + }, routes: { createRepository: { path: "createRepository", diff --git a/tools/scaffolding/templates/frontend/workflow/internal/src/hello-world.tsx b/tools/scaffolding/templates/frontend/workflow/internal/src/hello-world.tsx index c0282b8628..dcc1c22310 100644 --- a/tools/scaffolding/templates/frontend/workflow/internal/src/hello-world.tsx +++ b/tools/scaffolding/templates/frontend/workflow/internal/src/hello-world.tsx @@ -15,10 +15,10 @@ const WelcomeStep: React.FC = () => ( ); -const HelloWorld: React.FC = ({ heading }) => { +const HelloWorld: React.FC = () => { const dataLayout = {}; return ( - + ); diff --git a/tools/scaffolding/templates/frontend/workflow/internal/src/index.tsx b/tools/scaffolding/templates/frontend/workflow/internal/src/index.tsx index e7a20eb68e..0543bd5273 100644 --- a/tools/scaffolding/templates/frontend/workflow/internal/src/index.tsx +++ b/tools/scaffolding/templates/frontend/workflow/internal/src/index.tsx @@ -19,6 +19,13 @@ const register = (): WorkflowConfiguration => { displayName: "{{ .Name }}", description: "{{ .Description }}.", component: HelloWorld, + layoutProps: { + {{- if .IsWizardTemplate}} + variant: "wizard", + {{- else}} + variant: "standard", + {{- end}} + }, }, }, };