support process-groups in breadcrumb component

spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx

@@ -13,7 +13,7 @@ type OwnProps = {
 const explodeCrumb = (crumb: HotCrumbItem) => {
   const url: string = crumb[1] || '';
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_unused, processModelId, link] = url.split(':');
+  const [endingUrlType, processModelId, link] = url.split(':');
   const processModelIdSegments = splitProcessModelId(processModelId);
   const paths: string[] = [];
   const lastPathItem = processModelIdSegments.pop();
@@ -29,7 +29,12 @@ const explodeCrumb = (crumb: HotCrumbItem) => {
     }
   );
   if (link === 'link') {
-    const lastUrl = `/admin/process-models/${paths.join(':')}:${lastPathItem}`;
+    if (lastPathItem !== undefined) {
+      paths.push(lastPathItem);
+    }
+    const lastUrl = `/admin/${endingUrlType.replace('_', '-')}s/${paths.join(
+      ':'
+    )}`;
     breadcrumbItems.push(
       <BreadcrumbItem key={lastPathItem} href={lastUrl}>
         {lastPathItem}
@@ -64,7 +69,7 @@ export default function ProcessBreadcrumb({
           </BreadcrumbItem>
         );
       }
-      if (url && url.startsWith('process_model:')) {
+      if (url && url.match(/^process_(model|group):/)) {
         return explodeCrumb(crumb);
       }
       return (

spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx

@@ -24,7 +24,15 @@ export default function ProcessGroupEdit() {
   if (processGroup) {
     return (
       <>
-        <ProcessBreadcrumb processGroupId={(processGroup as any).id} />
+        <ProcessBreadcrumb
+          hotCrumbs={[
+            ['Process Groups', '/admin'],
+            [
+              `Process Group: ${processGroup.id}:link`,
+              `process_group:${processGroup.id}:link`,
+            ],
+          ]}
+        />
         <h2>Edit Process Group: {(processGroup as any).id}</h2>
         <ProcessGroupForm
           mode="edit"

spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx

@@ -4,10 +4,11 @@ import { useParams } from 'react-router-dom';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ProcessModelForm from '../components/ProcessModelForm';
+import { ProcessModel } from '../interfaces';
 
 export default function ProcessModelEdit() {
   const params = useParams();
-  const [processModel, setProcessModel] = useState(null);
+  const [processModel, setProcessModel] = useState<ProcessModel | null>(null);
   const processModelPath = `process-models/${params.process_model_id}`;
 
   useEffect(() => {
@@ -20,6 +21,15 @@ export default function ProcessModelEdit() {
   if (processModel) {
     return (
       <>
+        <ProcessBreadcrumb
+          hotCrumbs={[
+            ['Process Groups', '/admin'],
+            [
+              `Process Model: ${processModel.id}`,
+              `process_model:${processModel.id}:link`,
+            ],
+          ]}
+        />
         <ProcessBreadcrumb processGroupId={params.process_group_id} />
         <h2>Edit Process Model: {(processModel as any).id}</h2>
         <ProcessModelForm

spiffworkflow-frontend/src/routes/ProcessModelNew.tsx

@@ -16,7 +16,15 @@ export default function ProcessModelNew() {
 
   return (
     <>
-      <ProcessBreadcrumb />
+      <ProcessBreadcrumb
+        hotCrumbs={[
+          ['Process Groups', '/admin'],
+          [
+            `Process Group: ${params.process_group_id}`,
+            `process_group:${params.process_group_id}:link`,
+          ],
+        ]}
+      />
       <h2>Add Process Model</h2>
       <ProcessModelForm
         mode="new"