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 ( - - {id} - - ); + return {id}; }; const formatProcessModelIdentifier = (_row: any, identifier: any) => { - return ( - - {identifier} - - ); + return {identifier}; + }; + const formatProcessModelDisplayName = (_row: any, identifier: any) => { + return {identifier}; }; const formatSecondsForDisplay = (_row: any, seconds: any) => { @@ -1237,7 +1216,7 @@ export default function ProcessInstanceListTable({ const reportColumnFormatters: Record = { 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 ( - + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions + {formatter(row, value)} ); } - return {formatter(row, value)}; + 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 + + {formatter(row, value)} + + ); + } + return ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions + + {formatter(row, value)} + + ); }; const rows = processInstances.map((row: any) => { const currentRow = reportColumns().map((column: any) => { return formattedColumn(row, column); }); - return {currentRow}; + const rowStyle = { cursor: 'pointer' }; + return ( + + {currentRow} + + ); }); return (