cleaned up breadcrumbs some more and cleaned up console.log statements

spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx

@@ -32,9 +32,10 @@ const explodeCrumb = (crumb: HotCrumbItem) => {
     if (lastPathItem !== undefined) {
       paths.push(lastPathItem);
     }
-    const lastUrl = `/admin/${endingUrlType.replace('_', '-')}s/${paths.join(
+    // process_models to process-models
-      ':'
+    const lastUrl = `/admin/${endingUrlType
-    )}`;
+      .replace('_', '-')
+      .replace(/s*$/, 's')}/${paths.join(':')}`;
     breadcrumbItems.push(
       <BreadcrumbItem key={lastPathItem} href={lastUrl}>
         {lastPathItem}
@@ -69,7 +70,7 @@ export default function ProcessBreadcrumb({
           </BreadcrumbItem>
         );
       }
-      if (url && url.match(/^process_(model|group):/)) {
+      if (url && url.match(/^process[_-](model|group)s?:/)) {
         return explodeCrumb(crumb);
       }
       return (

spiffworkflow-frontend/src/components/ProcessGroupForm.tsx

@@ -79,12 +79,9 @@ export default function ProcessGroupForm({
       description: processGroup.description,
     };
     if (mode === 'new') {
-      console.log(`parentGroupId: ${parentGroupId}`);
-      console.log(`processGroup.id: ${processGroup.id}`);
       if (parentGroupId) {
         newProcessGroupId = `${parentGroupId}/${processGroup.id}`;
       }
-      console.log(`newProcessGroupId: ${newProcessGroupId}`);
       Object.assign(postBody, {
         id: parentGroupId
           ? `${parentGroupId}/${processGroup.id}`

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx

@@ -229,7 +229,7 @@ export default function ReactDiagramEditor({
     diagramModeler.on('spiff.script.edit', (event: any) => {
       const { error, element, scriptType, script, eventBus } = event;
       if (error) {
-        console.log(error);
+        console.error(error);
       }
       handleLaunchScriptEditor(element, script, scriptType, eventBus);
     });
@@ -237,7 +237,7 @@ export default function ReactDiagramEditor({
     diagramModeler.on('spiff.markdown.edit', (event: any) => {
       const { error, element, value, eventBus } = event;
       if (error) {
-        console.log(error);
+        console.error(error);
       }
       handleLaunchMarkdownEditor(element, value, eventBus);
     });
@@ -318,7 +318,7 @@ export default function ReactDiagramEditor({
     }
 
     function handleError(err: any) {
-      console.log('ERROR:', err);
+      console.error('ERROR:', err);
     }
 
     function checkTaskCanBeHighlighted(taskBpmnId: string) {
@@ -406,7 +406,6 @@ export default function ReactDiagramEditor({
     }
 
     function fetchDiagramFromURL(urlToUse: any) {
-      console.log(`urlToUse: ${urlToUse}`);
       fetch(urlToUse)
         .then((response) => response.text())
         .then((text) => {

spiffworkflow-frontend/src/routes/ProcessGroupNew.tsx

@@ -1,18 +1,25 @@
 import { useState } from 'react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import ProcessGroupForm from '../components/ProcessGroupForm';
-import { ProcessGroup } from '../interfaces';
+import { ProcessGroup, HotCrumbItem } from '../interfaces';
 
 export default function ProcessGroupNew() {
+  const searchParams = new URLSearchParams(document.location.search);
+  const parentGroupId = searchParams.get('parentGroupId');
   const [processGroup, setProcessGroup] = useState<ProcessGroup>({
     id: '',
     display_name: '',
     description: '',
   });
 
+  const hotCrumbs: HotCrumbItem[] = [['Process Groups', '/admin']];
+  if (parentGroupId) {
+    hotCrumbs.push(['', `process_group:${parentGroupId}:link`]);
+  }
+
   return (
     <>
-      <ProcessBreadcrumb />
+      <ProcessBreadcrumb hotCrumbs={hotCrumbs} />
       <h2>Add Process Group</h2>
       <ProcessGroupForm
         mode="new"

spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx

@@ -10,7 +10,7 @@ import {
   modifyProcessModelPath,
   unModifyProcessModelPath,
 } from '../helpers';
-import { ProcessGroup } from '../interfaces';
+import { ProcessGroup, ProcessModel } from '../interfaces';
 
 export default function ProcessGroupShow() {
   const params = useParams();
@@ -49,19 +49,19 @@ export default function ProcessGroupShow() {
     if (processGroup === null) {
       return null;
     }
-    const rows = processModels.map((row) => {
+    const rows = processModels.map((row: ProcessModel) => {
-      const modifiedProcessModelId: String = (row as any).id.replace('/', ':');
+      const modifiedProcessModelId: String = row.id.replace('/', ':');
       return (
-        <tr key={(row as any).id}>
+        <tr key={row.id}>
           <td>
             <Link
               to={`/admin/process-models/${modifiedProcessModelId}`}
               data-qa="process-model-show-link"
             >
-              {(row as any).id}
+              {row.id}
             </Link>
           </td>
-          <td>{(row as any).display_name}</td>
+          <td>{row.display_name}</td>
         </tr>
       );
     });
@@ -85,21 +85,19 @@ export default function ProcessGroupShow() {
     if (processGroup === null) {
       return null;
     }
-    const rows = processGroups.map((row) => {
+    const rows = processGroups.map((row: ProcessGroup) => {
-      const modifiedProcessGroupId: String = modifyProcessModelPath(
+      const modifiedProcessGroupId: String = modifyProcessModelPath(row.id);
-        (row as any).id
-      );
       return (
-        <tr key={(row as any).id}>
+        <tr key={row.id}>
           <td>
             <Link
               to={`/admin/process-groups/${modifiedProcessGroupId}`}
               data-qa="process-model-show-link"
             >
-              {(row as any).id}
+              {row.id}
             </Link>
           </td>
-          <td>{(row as any).display_name}</td>
+          <td>{row.display_name}</td>
         </tr>
       );
     });
@@ -121,15 +119,13 @@ export default function ProcessGroupShow() {
 
   if (processGroup && pagination) {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
-    const modifiedProcessGroupId = modifyProcessModelPath(
+    const modifiedProcessGroupId = modifyProcessModelPath(processGroup.id);
-      (processGroup as any).id
-    );
     return (
       <>
         <ProcessBreadcrumb
           hotCrumbs={[
             ['Process Groups', '/admin'],
-            [`Process Group: ${processGroup.display_name}`],
+            ['', `process_group:${processGroup.id}`],
           ]}
         />
         <ul>
@@ -159,7 +155,7 @@ export default function ProcessGroupShow() {
             perPage={perPage}
             pagination={pagination}
             tableToDisplay={buildModelTable()}
-            path={`/admin/process-groups/${(processGroup as any).id}`}
+            path={`/admin/process-groups/${processGroup.id}`}
           />
           <br />
           <br />
@@ -168,7 +164,7 @@ export default function ProcessGroupShow() {
             perPage={perPage}
             pagination={pagination}
             tableToDisplay={buildGroupTable()}
-            path={`/admin/process-groups/${(processGroup as any).id}`}
+            path={`/admin/process-groups/${processGroup.id}`}
           />
         </ul>
       </>

spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx

@@ -36,7 +36,6 @@ export default function ProcessInstanceLogList() {
     // return null;
     const rows = processInstanceLogs.map((row) => {
       const rowToUse = row as any;
-      console.log(`rowToUse: ${rowToUse}`);
       return (
         <tr key={rowToUse.id}>
           <td>{rowToUse.bpmn_process_identifier}</td>

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -268,7 +268,7 @@ export default function ProcessModelEditDiagram() {
       });
       event.eventBus.fire('spiff.json_files.returned', { options });
     } else {
-      console.log('There is no process Model.');
+      console.error('There is no process Model.');
     }
   };
 
@@ -281,10 +281,9 @@ export default function ProcessModelEditDiagram() {
           options.push({ label: ref.name, value: ref.id });
         });
       });
-      console.log('Options', options);
       event.eventBus.fire('spiff.dmn_files.returned', { options });
     } else {
-      console.log('There is no process model.');
+      console.error('There is no process model.');
     }
   };