moved usage of ProcessBreadcrumb to use hotCrumbs except for report pages

spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx

@@ -32,7 +32,7 @@ const explodeCrumb = (crumb: HotCrumbItem) => {
     if (lastPathItem !== undefined) {
       paths.push(lastPathItem);
     }
-    // process_models to process-models
+    // process_model to process-models
     const lastUrl = `/admin/${endingUrlType
       .replace('_', '-')
       .replace(/s*$/, 's')}/${paths.join(':')}`;

spiffworkflow-frontend/src/routes/MessageInstanceList.tsx

@@ -7,6 +7,8 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
   convertSecondsToFormattedDate,
   getPageInfoFromSearchParams,
+  modifyProcessModelPath,
+  unModifyProcessModelPath,
 } from '../helpers';
 import HttpService from '../services/HttpService';
 
@@ -44,15 +46,9 @@ export default function MessageInstanceList() {
           <td>
             <Link
               data-qa="process-model-show-link"
-              to={`/admin/process-groups/${rowToUse.process_group_identifier}`}
+              to={`/admin/process-models/${modifyProcessModelPath(
-            >
+                rowToUse.process_model_identifier
-              {rowToUse.process_group_identifier}
+              )}`}
-            </Link>
-          </td>
-          <td>
-            <Link
-              data-qa="process-model-show-link"
-              to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}`}
             >
               {rowToUse.process_model_identifier}
             </Link>
@@ -60,7 +56,9 @@ export default function MessageInstanceList() {
           <td>
             <Link
               data-qa="process-instance-show-link"
-              to={`/admin/process-models/${rowToUse.process_group_identifier}/${rowToUse.process_model_identifier}/process-instances/${rowToUse.process_instance_id}`}
+              to={`/admin/process-models/${modifyProcessModelPath(
+                rowToUse.process_model_identifier
+              )}/process-instances/${rowToUse.process_instance_id}`}
             >
               {rowToUse.process_instance_id}
             </Link>
@@ -80,7 +78,6 @@ export default function MessageInstanceList() {
         <thead>
           <tr>
             <th>Instance Id</th>
-            <th>Process Group</th>
             <th>Process Model</th>
             <th>Process Instance</th>
             <th>Message Model</th>
@@ -107,9 +104,21 @@ export default function MessageInstanceList() {
       )}&process_instance_id=${searchParams.get('process_instance_id')}`;
       breadcrumbElement = (
         <ProcessBreadcrumb
-          processModelId={searchParams.get('process_model_id') as any}
+          hotCrumbs={[
-          processGroupId={searchParams.get('process_group_id') as any}
+            ['Process Groups', '/admin'],
-          linkProcessModel
+            [
+              `Process Model: ${params.process_model_id}`,
+              `process_model:${unModifyProcessModelPath(
+                searchParams.get('process_model_id') || ''
+              )}:link`,
+            ],
+            [
+              `${searchParams.get('process_instance_id')}`,
+              `/admin/process-models/${searchParams.get(
+                'process_model_id'
+              )}/process-instances/${searchParams.get('process_instance_id')}`,
+            ],
+          ]}
         />
       );
     }

spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx

@@ -8,6 +8,7 @@ import {
   getPageInfoFromSearchParams,
   convertSecondsToFormattedDate,
   modifyProcessModelPath,
+  unModifyProcessModelPath,
 } from '../helpers';
 import HttpService from '../services/HttpService';
 
@@ -33,7 +34,6 @@ export default function ProcessInstanceLogList() {
   }, [searchParams, params]);
 
   const buildTable = () => {
-    // return null;
     const rows = processInstanceLogs.map((row) => {
       const rowToUse = row as any;
       return (
@@ -56,7 +56,7 @@ export default function ProcessInstanceLogList() {
       );
     });
     return (
-      <Table striped bordered>
+      <Table size="lg">
         <thead>
           <tr>
             <th>Bpmn Process Identifier</th>
@@ -74,13 +74,24 @@ export default function ProcessInstanceLogList() {
   };
 
   if (pagination) {
+    console.log('params.process_model_id', params.process_model_id);
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <main>
         <ProcessBreadcrumb
-          processModelId={params.process_model_id}
+          hotCrumbs={[
-          processGroupId={params.process_group_id}
+            ['Process Groups', '/admin'],
-          linkProcessModel
+            [
+              `Process Model: ${params.process_model_id}`,
+              `process_model:${unModifyProcessModelPath(
+                params.process_model_id || ''
+              )}:link`,
+            ],
+            [
+              `${params.process_instance_id}`,
+              `/admin/process-models/${params.process_model_id}/process-instances/${params.process_instance_id}`,
+            ],
+          ]}
         />
         <PaginationForTable
           page={page}

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -1,8 +1,15 @@
 import { useContext, useEffect, useState } from 'react';
 import Editor from '@monaco-editor/react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
-// @ts-ignore
+import {
-import { Button, Modal, Stack } from '@carbon/react';
+  Grid,
+  Column,
+  Button,
+  Modal,
+  Stack,
+  UnorderedList,
+  // @ts-ignore
+} from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
@@ -129,7 +136,6 @@ export default function ProcessInstanceShow() {
     distance: number
   ) => {
     return (
-      <li>
       <Link
         reloadDocument
         data-qa="process-instance-step-link"
@@ -141,7 +147,6 @@ export default function ProcessInstanceShow() {
       >
         {label}
       </Link>
-      </li>
     );
   };
 
@@ -150,7 +155,7 @@ export default function ProcessInstanceShow() {
       return null;
     }
 
-    return spiffStepLink(processInstanceToUse, 'Previous Step', -1);
+    return spiffStepLink(processInstanceToUse, '<<', -1);
   };
 
   const nextStepLink = (processInstanceToUse: any) => {
@@ -158,7 +163,7 @@ export default function ProcessInstanceShow() {
       return null;
     }
 
-    return spiffStepLink(processInstanceToUse, 'Next Step', 1);
+    return spiffStepLink(processInstanceToUse, '>>', 1);
   };
 
   const getInfoTag = (processInstanceToUse: any) => {
@@ -177,7 +182,7 @@ export default function ProcessInstanceShow() {
     }
 
     return (
-      <ul>
+      <UnorderedList>
         <li>
           Started:{' '}
           {convertSecondsToFormattedDate(processInstanceToUse.start_in_seconds)}
@@ -200,13 +205,7 @@ export default function ProcessInstanceShow() {
             Messages
           </Link>
         </li>
-        <li>
+      </UnorderedList>
-          Step {currentSpiffStep(processInstanceToUse)} of{' '}
-          {processInstanceToUse.spiff_step}
-        </li>
-        {previousStepLink(processInstanceToUse)}
-        {nextStepLink(processInstanceToUse)}
-      </ul>
     );
   };
 
@@ -433,6 +432,21 @@ export default function ProcessInstanceShow() {
     return null;
   };
 
+  const stepsElement = (processInstanceToUse: any) => {
+    return (
+      <Grid fullWidth>
+        <Column sm={3} md={3} lg={3}>
+          <Stack orientation="horizontal" gap={3}>
+            {previousStepLink(processInstanceToUse)}
+            Step {currentSpiffStep(processInstanceToUse)} of{' '}
+            {processInstanceToUse.spiff_step}
+            {nextStepLink(processInstanceToUse)}
+          </Stack>
+        </Column>
+      </Grid>
+    );
+  };
+
   if (processInstance && tasks) {
     const processInstanceToUse = processInstance as any;
     const taskIds = getTaskIds();
@@ -449,22 +463,28 @@ export default function ProcessInstanceShow() {
               `Process Model: ${processModelId}`,
               `process_model:${processModelId}:link`,
             ],
-            [`Process Instance: ${params.process_instance_id}`],
+            [`${processInstanceToUse.id}`],
           ]}
         />
+        <h1>Process Instance Id: {processInstanceToUse.id}</h1>
         <Stack orientation="horizontal" gap={3}>
-          <h2>Process Instance Id: {processInstanceToUse.id}</h2>
           <ButtonWithConfirmation
             description="Delete Process Instance?"
             onConfirmation={deleteProcessInstance}
             buttonLabel="Delete"
+            confirmButtonLabel="Delete"
           />
           {terminateButton(processInstanceToUse)}
           {suspendButton(processInstanceToUse)}
           {resumeButton(processInstanceToUse)}
         </Stack>
+        <br />
+        <br />
         {getInfoTag(processInstanceToUse)}
+        <br />
         {taskDataDisplayArea()}
+        {stepsElement(processInstanceToUse)}
+        <br />
         <ReactDiagramEditor
           processModelId={processModelId || ''}
           diagramXML={processInstanceToUse.bpmn_xml_file_contents || ''}

spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx

@@ -30,7 +30,6 @@ export default function ProcessModelEdit() {
             ],
           ]}
         />
-        <ProcessBreadcrumb processGroupId={params.process_group_id} />
         <h2>Edit Process Model: {(processModel as any).id}</h2>
         <ProcessModelForm
           mode="edit"

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -448,7 +448,7 @@ export default function ProcessModelShow() {
     }
     return (
       <Grid fullWidth>
-        <Column md={4} lg={8}>
+        <Column md={5} lg={9} sm={3}>
           <Accordion align="end">
             <AccordionItem
               data-qa="files-accordion"

spiffworkflow-frontend/src/routes/ReactFormEditor.tsx

@@ -153,9 +153,6 @@ export default function ReactFormEditor() {
     return (
       <main>
         <ProcessBreadcrumb
-          processGroupId={params.process_group_id}
-          processModelId={params.process_model_id}
-          linkProcessModel
           hotCrumbs={[
             ['Process Groups', '/admin'],
             [