add view on process instance show page to view related messages

package-lock.json

@@ -7167,7 +7167,7 @@
     },
     "node_modules/bpmn-js-spiffworkflow": {
       "version": "0.0.8",
-      "resolved": "git+ssh://git@github.com/sartography/bpmn-js-spiffworkflow.git#c4f46a4d52e824dcade96f7d0a95ac653d1f6429",
+      "resolved": "git+ssh://git@github.com/sartography/bpmn-js-spiffworkflow.git#1f86a459ebef992973b2e2b4e1a6cf9ac79e50e2",
       "license": "MIT",
       "dependencies": {
         "@bpmn-io/properties-panel": "^0.19.0",
@@ -33207,7 +33207,7 @@
       }
     },
     "bpmn-js-spiffworkflow": {
-      "version": "git+ssh://git@github.com/sartography/bpmn-js-spiffworkflow.git#c4f46a4d52e824dcade96f7d0a95ac653d1f6429",
+      "version": "git+ssh://git@github.com/sartography/bpmn-js-spiffworkflow.git#1f86a459ebef992973b2e2b4e1a6cf9ac79e50e2",
       "from": "bpmn-js-spiffworkflow@sartography/bpmn-js-spiffworkflow#main",
       "requires": {
         "@bpmn-io/properties-panel": "^0.19.0",

src/routes/AdminRoutes.tsx

@@ -19,6 +19,7 @@ import ProcessInstanceReportEdit from './ProcessInstanceReportEdit';
 import ReactFormEditor from './ReactFormEditor';
 import ErrorContext from '../contexts/ErrorContext';
 import ProcessInstanceLogList from './ProcessInstanceLogList';
+import MessageInstanceList from './MessageInstanceList';
 
 export default function AdminRoutes() {
   const location = useLocation();
@@ -99,6 +100,7 @@ export default function AdminRoutes() {
           path="/process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id/logs"
           element={<ProcessInstanceLogList />}
         />
+        <Route path="/messages" element={<MessageInstanceList />} />
       </Routes>
     );
   }

src/routes/MessageInstanceList.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { Table } from 'react-bootstrap';
+import { useParams, useSearchParams } from 'react-router-dom';
+import PaginationForTable from '../components/PaginationForTable';
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
+import {
+  convertSecondsToFormattedDate,
+  getPageInfoFromSearchParams,
+} from '../helpers';
+import HttpService from '../services/HttpService';
+
+export default function MessageInstanceList() {
+  const params = useParams();
+  const [searchParams] = useSearchParams();
+  const [messageIntances, setMessageInstances] = useState([]);
+  const [pagination, setPagination] = useState(null);
+
+  useEffect(() => {
+    const setMessageInstanceListFromResult = (result: any) => {
+      setMessageInstances(result.results);
+      setPagination(result.pagination);
+    };
+    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
+    let queryParamString = `per_page=${perPage}&page=${page}`;
+    if (searchParams.get('process_instance_id')) {
+      queryParamString += `&process_instance_id=${searchParams.get(
+        'process_instance_id'
+      )}`;
+    }
+    HttpService.makeCallToBackend({
+      path: `/messages?${queryParamString}`,
+      successCallback: setMessageInstanceListFromResult,
+    });
+  }, [searchParams, params]);
+
+  const buildTable = () => {
+    // return null;
+    const rows = messageIntances.map((row) => {
+      const rowToUse = row as any;
+      return (
+        <tr key={rowToUse.id}>
+          <td>{rowToUse.id}</td>
+          <td>{rowToUse.message_model_id}</td>
+          <td>{rowToUse.message_type}</td>
+          <td>{rowToUse.failure_cause}</td>
+          <td>{rowToUse.status}</td>
+          <td>
+            {convertSecondsToFormattedDate(rowToUse.created_at_in_seconds)}
+          </td>
+        </tr>
+      );
+    });
+    return (
+      <Table striped bordered>
+        <thead>
+          <tr>
+            <th>Instance Id</th>
+            <th>Model</th>
+            <th>Type</th>
+            <th>Failure Cause</th>
+            <th>Status</th>
+            <th>Created At</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    );
+  };
+
+  if (pagination) {
+    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
+    let queryParamString = '';
+    let breadcrumbElement = null;
+    if (searchParams.get('process_instance_id')) {
+      queryParamString += `&process_group_id=${searchParams.get(
+        'process_group_id'
+      )}&process_model_id=${searchParams.get(
+        'process_model_id'
+      )}&process_instance_id=${searchParams.get('process_instance_id')}`;
+      breadcrumbElement = (
+        <ProcessBreadcrumb
+          processModelId={searchParams.get('process_model_id') as any}
+          processGroupId={searchParams.get('process_group_id') as any}
+          linkProcessModel
+        />
+      );
+    }
+    console.log('breadcrumbElement', breadcrumbElement);
+    return (
+      <main>
+        {breadcrumbElement}
+        <PaginationForTable
+          page={page}
+          perPage={perPage}
+          pagination={pagination}
+          tableToDisplay={buildTable()}
+          queryParamString={queryParamString}
+          path="/admin/messages"
+        />
+      </main>
+    );
+  }
+  return null;
+}

src/routes/ProcessInstanceShow.tsx

@@ -99,6 +99,14 @@ export default function ProcessInstanceShow() {
             Logs
           </Link>
         </li>
+        <li>
+          <Link
+            data-qa="process-instance-message-instance-list-link"
+            to={`/admin/messages?process_group_id=${params.process_group_id}&process_model_id=${params.process_model_id}&process_instance_id=${params.process_instance_id}`}
+          >
+            Messages
+          </Link>
+        </li>
       </ul>
     );
   };