frontend: Improve breadcrumbs UX

lyft · Nov 13, 2024 · 6425d30 · 6425d30
1 parent 2a2f4fe
commit 6425d30
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/frontend/packages/core/src/AppProvider/index.tsx b/frontend/packages/core/src/AppProvider/index.tsx
@@ -217,7 +217,7 @@ const ClutchApp = ({
                               : workflow.displayName;
 
                             const workflowLayoutProps: LayoutProps = {
-                              workflow,
+                              workflowsInPath: workflows.filter(w => w.path === workflow.path),
                               title: heading,
                               subtitle: route.description,
                               variant:

diff --git a/frontend/packages/core/src/WorkflowLayout/index.tsx b/frontend/packages/core/src/WorkflowLayout/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { matchPath, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import type { Interpolation } from "@emotion/styled";
 import type { CSSObject, Theme } from "@mui/material";
 import { alpha } from "@mui/material";
@@ -14,7 +14,7 @@ import { generateBreadcrumbsEntries } from "../utils";
 export type LayoutVariant = "standard" | "wizard";
 
 export type LayoutProps = {
-  workflow: Workflow;
+  workflowsInPath: Array<Workflow>;
   variant?: LayoutVariant | null;
   title?: string | ((params: Record<string, string>) => string);
   subtitle?: string;
@@ -88,7 +88,7 @@ const Subtitle = styled(Typography)(({ theme }: { theme: Theme }) => ({
 }));
 
 const WorkflowLayout = ({
-  workflow,
+  workflowsInPath,
   variant = null,
   title = null,
   subtitle = null,
@@ -99,22 +99,18 @@ const WorkflowLayout = ({
   const params = useParams();
   const location = useLocation();
 
+  const entries = generateBreadcrumbsEntries(workflowsInPath, location);
+
   if (variant === null) {
     return <>{children}</>;
   }
 
-  const workflowPaths = workflow.routes.map(({ path }) => `/${workflow.path}/${path}`);
-  const breadcrumbsEntries = generateBreadcrumbsEntries(
-    location,
-    url => !!workflowPaths.find(path => !!matchPath({ path }, url))
-  );
-
   return (
     <LayoutContainer $variant={variant}>
       {!hideHeader && (
         <PageHeader $variant={variant}>
           <PageHeaderBreadcrumbsWrapper>
-            <Breadcrumbs entries={breadcrumbsEntries} />
+            <Breadcrumbs entries={entries} />
           </PageHeaderBreadcrumbsWrapper>
           {!breadcrumbsOnly && (title || subtitle) && (
             <PageHeaderMainContainer>

diff --git a/frontend/packages/core/src/utils/generateBreadcrumbsEntries.tsx b/frontend/packages/core/src/utils/generateBreadcrumbsEntries.tsx
@@ -1,23 +1,39 @@
-import type { Location } from "react-router-dom";
+import { Location, matchPath } from "react-router-dom";
 
+import type { Workflow } from "../AppProvider/workflow";
 import type { BreadcrumbEntry } from "../Breadcrumbs";
 
-const generateBreadcrumbsEntries = (location: Location, validateUrl: (url: string) => boolean) => {
+const HOME_ENTRY = { label: "Home", url: "/" };
+
+const generateBreadcrumbsEntries = (workflowsInPath: Array<Workflow>, location: Location) => {
+  const firstWorkflow = workflowsInPath[0];
+  const allRoutes = workflowsInPath.flatMap(w => w.routes);
+  const fullPaths = allRoutes.map(({ path }) => `/${firstWorkflow.path}/${path}`);
+
   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("/")}`;
+  const entries: Array<BreadcrumbEntry> = [HOME_ENTRY].concat(
+    labels.map((defaultLabel, index) => {
+      const nextIndex = index + 1;
+      const url = `/${labels.slice(0, nextIndex).join("/")}`;
 
-      if (!validateUrl(url)) {
-        url = undefined;
-      }
+      const path = fullPaths.find(p => !!matchPath(p, url));
+      const route = path
+        ? allRoutes.find(r =>
+            r.path.startsWith("/")
+              ? r.path
+              : `/${r.path}` === `/${path.split("/").slice(2).join("/")}`
+          )
+        : null;
 
       return {
-        label,
-        url,
+        label:
+          route?.displayName ||
+          (allRoutes.length === 1 && firstWorkflow.displayName) ||
+          defaultLabel,
+        url: !!path && labels.length !== nextIndex ? url : null,
       };
     })
   );