frontend: Generate breadcrumbs inside workflow layout (#3149)

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

@@ -218,10 +218,9 @@ const ClutchApp = ({
 
                             // We define these props in order to avoid UI changes before refactoring
                             const workflowLayoutProps: LayoutProps = {
-                              variant: "custom",
-                              hideHeader: true,
-                              heading,
                               ...route.layoutProps,
+                              heading: route.layoutProps?.heading || heading,
+                              workflow,
                             };
 
                             const workflowRouteComponent = (

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

@@ -1,14 +1,20 @@
 import React from "react";
+import { matchPath } from "react-router";
 import type { Interpolation } from "@emotion/styled";
 import type { CSSObject, Theme } from "@mui/material";
 
+import type { Workflow } from "../AppProvider/workflow";
+import Breadcrumbs from "../Breadcrumbs";
+import { useLocation } from "../navigation";
 import styled from "../styled";
 import { Typography } from "../typography";
+import { generateBreadcrumbsEntries } from "../utils";
 
 export type LayoutVariant = "standard" | "wizard" | "custom";
 
 export type LayoutProps = {
-  variant: LayoutVariant;
+  workflow: Workflow;
+  variant?: LayoutVariant;
   heading?: string | React.ReactElement;
   hideHeader?: boolean;
 };
@@ -61,15 +67,27 @@ const HeaderTitle = styled(Typography)({
 });
 
 const WorkflowLayout = ({
-  variant,
-  heading,
+  workflow,
+  variant = "standard",
+  heading = null,
   hideHeader = false,
   children,
 }: React.PropsWithChildren<LayoutProps>) => {
+  const location = useLocation();
+  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))
+  );
+
   return (
     <LayoutContainer $variant={variant}>
       {!hideHeader && (
         <PageHeader $variant={variant}>
+          <Breadcrumbs entries={breadcrumbsEntries} />
           {heading && (
             <>
               {React.isValidElement(heading) ? (

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

@@ -0,0 +1,28 @@
+import type { Location } from "history";
+
+import type { BreadcrumbEntry } from "../Breadcrumbs";
+
+const generateBreadcrumbsEntries = (location: Location, validateUrl: (url: string) => boolean) => {
+  const labels = 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)) {
+        url = undefined;
+      }
+
+      return {
+        label,
+        url,
+      };
+    })
+  );
+
+  return entries;
+};
+
+export default generateBreadcrumbsEntries;

frontend/packages/core/src/utils/index.ts

@@ -1,2 +1,3 @@
 export { default as getDisplayName } from "./getDisplayName";
 export { default as findPathMatchList } from "./pathMatching";
+export { default as generateBreadcrumbsEntries } from "./generateBreadcrumbsEntries";