diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
index 00184594..2cc3c835 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}
+
+
- {headerTextElement}
-
- ) : null}
+ {tableTitle()}