Merge pull request #172 from sartography/feature/click_on_row

When a row is clicked in a Process Instance list take the end user to…

spiffworkflow-frontend/cypress.config.js

@@ -32,7 +32,7 @@ if (process.env.SPIFFWORKFLOW_FRONTEND_URL) {
 
 const cypressConfig = {
   projectId: 'crax1q',
-
+  defaultCommandTimeout: 10000,
   videoUploadOnPasses: false,
   chromeWebSecurity: false,
   e2e: {

spiffworkflow-frontend/cypress/e2e/process_instances.cy.js

@@ -158,7 +158,7 @@ describe('process-instances', () => {
     // make sure we have some process instances
     cy.runPrimaryBpmnFile();
     cy.getBySel('process-instance-list-link').click();
-    cy.getBySel('process-instance-show-link').first().click();
+    cy.getBySel('process-instance-show-link-id').first().click();
     cy.getBySel('process-instance-log-list-link').click();
     cy.getBySel('process-instance-log-detailed').click();
     cy.contains('process_model_one');

spiffworkflow-frontend/cypress/e2e/process_models.cy.js

@@ -168,7 +168,7 @@ describe('process-models', () => {
       .click();
     cy.runPrimaryBpmnFile();
 
-    cy.getBySel('process-instance-show-link').click();
+    cy.getBySel('process-instance-show-link-id').click();
     cy.getBySel('process-instance-delete').click();
     cy.contains('Are you sure');
     cy.getBySel('process-instance-delete-modal-confirmation-dialog')

spiffworkflow-frontend/cypress/e2e/tasks.cy.js

@@ -74,7 +74,7 @@ describe('tasks', () => {
     cy.assertAtLeastOneItemInPaginatedResults();
 
     // This should get the first one which should be the one we just completed
-    cy.getBySel('process-instance-show-link').first().click();
+    cy.getBySel('process-instance-show-link-id').first().click();
     cy.contains('Process Instance Id: ');
 
     cy.get(`g[data-element-id=form3]`).click();
@@ -106,7 +106,7 @@ describe('tasks', () => {
     cy.assertAtLeastOneItemInPaginatedResults();
 
     // This should get the first one which should be the one we just completed
-    cy.getBySel('process-instance-show-link').first().click();
+    cy.getBySel('process-instance-show-link-id').first().click();
     cy.contains('Process Instance Id: ');
     cy.contains('Status: complete');
   });
@@ -120,6 +120,6 @@ describe('tasks', () => {
     kickOffModelWithForm();
 
     cy.navigateToHome();
-    cy.basicPaginationTest('process-instance-show-link');
+    cy.basicPaginationTest('process-instance-show-link-id');
   });
 });

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,66 @@ 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
+          data-qa={`process-instance-show-link-${column.accessor}`}
+          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 (