From c6325303d445d6dabf3c44deb5185523f243b948 Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Wed, 9 Nov 2022 22:55:14 -0500
Subject: [PATCH] add breadcrumb to instances page sometimes

---
 .../src/routes/ProcessInstanceList.tsx        | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
index 04fcfd875..011a8a899 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
@@ -41,6 +41,7 @@ import 'react-bootstrap-typeahead/css/Typeahead.css';
 import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
 import { PaginationObject, ProcessModel } from '../interfaces';
 import ProcessModelSearch from '../components/ProcessModelSearch';
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 
 export default function ProcessInstanceList() {
   const params = useParams();
@@ -471,26 +472,31 @@ export default function ProcessInstanceList() {
     );
   };
 
-  const processInstanceTitleElement = () => {
+  const processInstanceBreadcrumbElement = () => {
     const processModelFullIdentifier =
       getProcessModelFullIdentifierFromSearchParams(searchParams);
     if (processModelFullIdentifier === null) {
-      return <h2>Process Instances</h2>;
+      return null;
     }
+
     return (
-      <h2>
-        Process Instances for:{' '}
-        <Link
-          to={`/admin/process-models/${modifyProcessModelPath(
-            processModelFullIdentifier
-          )}`}
-        >
-          {processModelFullIdentifier}
-        </Link>
-      </h2>
+      <ProcessBreadcrumb
+        hotCrumbs={[
+          ['Process Groups', '/admin'],
+          [
+            `Process Model: ${processModelFullIdentifier}`,
+            `process_model:${processModelFullIdentifier}:link`,
+          ],
+          ['Process Instances'],
+        ]}
+      />
     );
   };
 
+  const processInstanceTitleElement = () => {
+    return <h2>Process Instances</h2>;
+  };
+
   const toggleShowFilterOptions = () => {
     setShowFilterOptions(!showFilterOptions);
   };
@@ -499,6 +505,7 @@ export default function ProcessInstanceList() {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <>
+        {processInstanceBreadcrumbElement()}
         {processInstanceTitleElement()}
         <Grid fullWidth>
           <Column