From aa2c21efb4dc53aaac08dc4314e760f39145888d Mon Sep 17 00:00:00 2001
From: Dan <daniel.h.funk@gmail.com>
Date: Fri, 10 Mar 2023 10:36:42 -0500
Subject: [PATCH] When a row is clicked in a Process Instance list take the end
 user to that process instance UNLESS they click on the column containing the
 process name, in which case take them to that process model. Belugh.

---
 .../components/ProcessInstanceListTable.tsx   | 85 ++++++++++++-------
 1 file changed, 54 insertions(+), 31 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
index 76a044405..d4af460d5 100644
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@@ -1,10 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Link,
-  useNavigate,
-  useParams,
-  useSearchParams,
-} from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 // @ts-ignore
 import { Filter, Close, AddAlt } from '@carbon/icons-react';
@@ -66,7 +61,6 @@ import ProcessModelSearch from './ProcessModelSearch';
 import ProcessInstanceReportSearch from './ProcessInstanceReportSearch';
 import ProcessInstanceListDeleteReport from './ProcessInstanceListDeleteReport';
 import ProcessInstanceListSaveAsReport from './ProcessInstanceListSaveAsReport';
-import { FormatProcessModelDisplayName } from './MiniComponents';
 import { Notification } from './Notification';
 import useAPIError from '../hooks/UseApiError';
 
@@ -1203,28 +1197,13 @@ export default function ProcessInstanceListTable({
     });
 
     const formatProcessInstanceId = (row: ProcessInstance, id: number) => {
-      const modifiedProcessModelId: String =
-        modifyProcessIdentifierForPathParam(row.process_model_identifier);
-      return (
-        <Link
-          data-qa="process-instance-show-link"
-          to={`${processInstanceShowPathPrefix}/${modifiedProcessModelId}/${id}`}
-          title={`View process instance ${id}`}
-        >
-          <span data-qa="paginated-entity-id">{id}</span>
-        </Link>
-      );
+      return <span data-qa="paginated-entity-id">{id}</span>;
     };
     const formatProcessModelIdentifier = (_row: any, identifier: any) => {
-      return (
-        <Link
-          to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
-            identifier
-          )}`}
-        >
-          {identifier}
-        </Link>
-      );
+      return <span>{identifier}</span>;
+    };
+    const formatProcessModelDisplayName = (_row: any, identifier: any) => {
+      return <span>{identifier}</span>;
     };
 
     const formatSecondsForDisplay = (_row: any, seconds: any) => {
@@ -1237,7 +1216,7 @@ export default function ProcessInstanceListTable({
     const reportColumnFormatters: Record<string, any> = {
       id: formatProcessInstanceId,
       process_model_identifier: formatProcessModelIdentifier,
-      process_model_display_name: FormatProcessModelDisplayName,
+      process_model_display_name: formatProcessModelDisplayName,
       start_in_seconds: formatSecondsForDisplay,
       end_in_seconds: formatSecondsForDisplay,
     };
@@ -1245,21 +1224,65 @@ export default function ProcessInstanceListTable({
       const formatter =
         reportColumnFormatters[column.accessor] ?? defaultFormatter;
       const value = row[column.accessor];
+      const modifiedModelId = modifyProcessIdentifierForPathParam(
+        row.process_model_identifier
+      );
+      const navigateToProcessInstance = () => {
+        navigate(
+          `${processInstanceShowPathPrefix}/${modifiedModelId}/${row.id}`
+        );
+      };
+      const navigateToProcessModel = () => {
+        navigate(`/admin/process-models/${modifiedModelId}`);
+      };
+
       if (column.accessor === 'status') {
         return (
-          <td data-qa={`process-instance-status-${value}`}>
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          <td
+            onClick={navigateToProcessInstance}
+            onKeyDown={navigateToProcessInstance}
+            data-qa={`process-instance-status-${value}`}
+          >
             {formatter(row, value)}
           </td>
         );
       }
-      return <td>{formatter(row, value)}</td>;
+      console.log(column.accessor);
+      if (column.accessor === 'process_model_display_name') {
+        const pmStyle = { background: 'rgba(0, 0, 0, .02)' };
+        return (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          <td
+            style={pmStyle}
+            onClick={navigateToProcessModel}
+            onKeyDown={navigateToProcessModel}
+          >
+            {formatter(row, value)}
+          </td>
+        );
+      }
+      return (
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <td
+          onKeyDown={navigateToProcessModel}
+          onClick={navigateToProcessInstance}
+        >
+          {formatter(row, value)}
+        </td>
+      );
     };
 
     const rows = processInstances.map((row: any) => {
       const currentRow = reportColumns().map((column: any) => {
         return formattedColumn(row, column);
       });
-      return <tr key={row.id}>{currentRow}</tr>;
+      const rowStyle = { cursor: 'pointer' };
+      return (
+        <tr style={rowStyle} key={row.id}>
+          {currentRow}
+        </tr>
+      );
     });
 
     return (