diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx index 8a66298fd..34d6e9dd8 100644 --- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx +++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx @@ -1,4 +1,4 @@ -import { ArrowRight, Renew } from '@carbon/icons-react'; +import { ArrowRight, Renew, ArrowUpRight } from '@carbon/icons-react'; import { Grid, Column, @@ -8,6 +8,7 @@ import { Button, TableHeader, Stack, + ButtonSet, } from '@carbon/react'; import { useCallback, useEffect, useRef, useState } from 'react'; import 'react-datepicker/dist/react-datepicker.css'; @@ -236,6 +237,13 @@ export default function ProcessInstanceListTable({ ) => { return {identifier}; }; + const navigateToProcessInstance = (processInstance: ProcessInstance) => { + navigate( + `${processInstanceShowPathPrefix}/${modifyProcessIdentifierForPathParam( + processInstance.process_model_identifier + )}/${processInstance.id}` + ); + }; const getWaitingForTableCellComponent = (processInstanceTask: any) => { let fullUsernameString = ''; @@ -305,7 +313,10 @@ export default function ProcessInstanceListTable({ const defaultFormatter = (_row: ProcessInstance, value: any) => { return value; }; - const formattedColumn = (row: ProcessInstance, column: ReportColumn) => { + const formattedColumn = ( + processInstance: ProcessInstance, + column: ReportColumn + ) => { const reportColumnFormatters: Record = { id: formatProcessInstanceId, process_model_identifier: formatProcessModelIdentifier, @@ -325,39 +336,54 @@ export default function ProcessInstanceListTable({ const formatter = column.display_type ? displayTypeFormatters[column.display_type] : reportColumnFormatters[columnAccessor] ?? defaultFormatter; - const value = row[columnAccessor]; + const value = processInstance[columnAccessor]; if (columnAccessor === 'status') { return ( - - {formatter(row, value)} + navigateToProcessInstance(processInstance)} + onKeyDown={() => navigateToProcessInstance(processInstance)} + data-qa={`process-instance-status-${value}`} + > + {formatter(processInstance, value)} ); } - if (columnAccessor === 'process_model_display_name') { - return {formatter(row, value)} ; - } - if (columnAccessor === 'waiting_for') { - return {getWaitingForTableCellComponent(row)} ; - } if (columnAccessor === 'updated_at_in_seconds') { return ( navigateToProcessInstance(processInstance)} + onKeyDown={() => navigateToProcessInstance(processInstance)} /> ); } if (columnAccessor === 'task_updated_at_in_seconds') { return ( navigateToProcessInstance(processInstance)} + onKeyDown={() => navigateToProcessInstance(processInstance)} /> ); } + let cellContent: any = null; + if (columnAccessor === 'process_model_display_name') { + cellContent = formatter(processInstance, value); + } else if (columnAccessor === 'waiting_for') { + cellContent = getWaitingForTableCellComponent(processInstance); + } else { + cellContent = formatter(processInstance, value); + } return ( // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions - - {formatter(row, value)} + navigateToProcessInstance(processInstance)} + onKeyDown={() => navigateToProcessInstance(processInstance)} + data-qa={`process-instance-show-link-${columnAccessor}`} + > + {cellContent} ); }; @@ -465,7 +491,7 @@ export default function ProcessInstanceListTable({ return formattedColumn(processInstance, column); }); if (showActionsColumn) { - let buttonElement = null; + let goButtonElement = null; const taskShowUrl = `/tasks/${processInstance.id}/${processInstance.task_id}`; const regex = new RegExp(`\\b(${preferredUsername}|${userEmail})\\b`); let hasAccessToCompleteTask = false; @@ -476,7 +502,7 @@ export default function ProcessInstanceListTable({ hasAccessToCompleteTask = true; } if (hasAccessToCompleteTask && processInstance.task_id) { - buttonElement = ( + goButtonElement = (