diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx index 00184594a..2cc3c835a 100644 --- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx +++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx @@ -1,16 +1,17 @@ -import { ArrowRight } from '@carbon/icons-react'; +import { ArrowRight, Renew } from '@carbon/icons-react'; import { Grid, Column, TableRow, Table, - TableHeader, TableHead, Button, + TableHeader, + Stack, } from '@carbon/react'; import { useCallback, useEffect, useRef, useState } from 'react'; import 'react-datepicker/dist/react-datepicker.css'; -import { useNavigate, useSearchParams } from 'react-router-dom'; +import { Link, useNavigate, useSearchParams } from 'react-router-dom'; import { getLastMilestoneFromProcessInstance, @@ -43,6 +44,7 @@ type OwnProps = { additionalReportFilters?: ReportFilter[]; autoReload?: boolean; canCompleteAllTasks?: boolean; + filterComponent?: Function; header?: SpiffTableHeader; onProcessInstanceTableListUpdate?: Function; paginationClassName?: string; @@ -61,6 +63,7 @@ export default function ProcessInstanceListTable({ additionalReportFilters, autoReload = false, canCompleteAllTasks = false, + filterComponent, header, onProcessInstanceTableListUpdate, paginationClassName, @@ -225,6 +228,20 @@ export default function ProcessInstanceListTable({ return []; }; + const getProcessModelSpanTag = ( + processInstance: ProcessInstance, + identifier: string + ) => { + const modifiedModelId = modifyProcessIdentifierForPathParam( + processInstance.process_model_identifier + ); + return ( + + {identifier} + + ); + }; + const getWaitingForTableCellComponent = (processInstanceTask: any) => { let fullUsernameString = ''; let shortUsernameString = ''; @@ -244,20 +261,31 @@ export default function ProcessInstanceListTable({ } return {shortUsernameString}; }; - const formatProcessInstanceId = (_row: ProcessInstance, id: number) => { - return {id}; + const formatProcessInstanceId = ( + processInstance: ProcessInstance, + id: number + ) => { + const modifiedModelId = modifyProcessIdentifierForPathParam( + processInstance.process_model_identifier + ); + const piLink = `${processInstanceShowPathPrefix}/${modifiedModelId}/${processInstance.id}`; + return ( + + {id} + + ); }; const formatProcessModelIdentifier = ( - _row: ProcessInstance, + processInstance: ProcessInstance, identifier: any ) => { - return {identifier}; + return getProcessModelSpanTag(processInstance, identifier); }; const formatProcessModelDisplayName = ( - _row: ProcessInstance, + processInstance: ProcessInstance, identifier: any ) => { - return {identifier}; + return getProcessModelSpanTag(processInstance, identifier); }; const formatLastMilestone = ( processInstance: ProcessInstance, @@ -337,6 +365,48 @@ export default function ProcessInstanceListTable({ ); }; + const tableTitle = () => { + let headerTextElement = null; + if (header) { + headerTextElement = header.text; + // poor man's markdown, just so we can allow bolded words in headers + if (header.text.includes('**')) { + const parts = header.text.split('**'); + if (parts.length === 3) { + headerTextElement = ( + <> + {parts[0]} + {parts[1]} + {parts[2]} + + ); + } + } + } + + if (header) { + return ( + +

+ {headerTextElement} +

+