+ * Please press the Apply button when you have completed updating the
+ filters.
+
+ );
+ }
+ const resultsTable = (
<>
- {reportColumnForm()}
- {processInstanceReportSaveTag()}
- {filterComponent()}
+ {refilterTextComponent}
any;
onDeleteFile?: (..._args: any[]) => any;
isPrimaryFile?: boolean;
@@ -364,18 +364,18 @@ export default function ReactDiagramEditor({
function highlightBpmnIoElement(
canvas: any,
- processInstanceTask: ProcessInstanceTask,
+ task: Task,
bpmnIoClassName: string,
bpmnProcessIdentifiers: string[]
) {
- if (checkTaskCanBeHighlighted(processInstanceTask.name)) {
+ if (checkTaskCanBeHighlighted(task.bpmn_identifier)) {
try {
if (
bpmnProcessIdentifiers.includes(
- processInstanceTask.process_identifier
+ task.bpmn_process_definition_identifier
)
) {
- canvas.addMarker(processInstanceTask.name, bpmnIoClassName);
+ canvas.addMarker(task.bpmn_identifier, bpmnIoClassName);
}
} catch (bpmnIoError: any) {
// the task list also contains task for processes called from call activities which will
@@ -450,7 +450,10 @@ export default function ReactDiagramEditor({
if (alreadyImportedXmlRef.current) {
return;
}
- diagramModelerToUse.importXML(diagramXMLToDisplay);
+ diagramModelerToUse.importXML(diagramXMLToDisplay).then(() => {
+ diagramModelerToUse.get('canvas').zoom('fit-viewport');
+ });
+
alreadyImportedXmlRef.current = true;
}
diff --git a/spiffworkflow-frontend/src/components/TaskListTable.tsx b/spiffworkflow-frontend/src/components/TaskListTable.tsx
index 26577b3b..b6901f73 100644
--- a/spiffworkflow-frontend/src/components/TaskListTable.tsx
+++ b/spiffworkflow-frontend/src/components/TaskListTable.tsx
@@ -9,14 +9,14 @@ import {
getPageInfoFromSearchParams,
modifyProcessIdentifierForPathParam,
refreshAtInterval,
+ REFRESH_INTERVAL_SECONDS,
+ REFRESH_TIMEOUT_SECONDS,
} from '../helpers';
import HttpService from '../services/HttpService';
import { PaginationObject, ProcessInstanceTask } from '../interfaces';
import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
-const REFRESH_INTERVAL = 5;
-const REFRESH_TIMEOUT = 600;
type OwnProps = {
apiPath: string;
@@ -89,7 +89,11 @@ export default function TaskListTable({
};
getTasks();
if (autoReload) {
- return refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, getTasks);
+ return refreshAtInterval(
+ REFRESH_INTERVAL_SECONDS,
+ REFRESH_TIMEOUT_SECONDS,
+ getTasks
+ );
}
return undefined;
}, [
@@ -141,7 +145,7 @@ export default function TaskListTable({
rowElements.push(
{
diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx
index 413a7d35..a59b2fab 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceLogList.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
// @ts-ignore
import { Table, Tabs, TabList, Tab } from '@carbon/react';
-import { useParams, useSearchParams, Link } from 'react-router-dom';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
import PaginationForTable from '../components/PaginationForTable';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import {
@@ -10,6 +10,7 @@ import {
} from '../helpers';
import HttpService from '../services/HttpService';
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
+import { ProcessInstanceLogEntry } from '../interfaces';
type OwnProps = {
variant: string;
@@ -29,6 +30,11 @@ export default function ProcessInstanceLogList({ variant }: OwnProps) {
}
useEffect(() => {
+ // Clear out any previous results to avoid a "flicker" effect where columns
+ // are updated above the incorrect data.
+ setProcessInstanceLogs([]);
+ setPagination(null);
+
const setProcessInstanceLogListFromResult = (result: any) => {
setProcessInstanceLogs(result.results);
setPagination(result.pagination);
@@ -45,24 +51,25 @@ export default function ProcessInstanceLogList({ variant }: OwnProps) {
isDetailedView,
]);
- const getTableRow = (row: any) => {
+ const getTableRow = (logEntry: ProcessInstanceLogEntry) => {
const tableRow = [];
const taskNameCell = (
- {row.bpmn_task_name ||
- (row.bpmn_task_type === 'Default Start Event'
- ? 'Process Started'
- : '') ||
- (row.bpmn_task_type === 'End Event' ? 'Process Ended' : '')}
+ {logEntry.task_definition_name ||
+ (logEntry.bpmn_task_type === 'StartEvent' ? 'Process Started' : '') ||
+ (logEntry.bpmn_task_type === 'EndEvent' ? 'Process Ended' : '')}
);
const bpmnProcessCell = (
- {row.bpmn_process_name || row.bpmn_process_identifier}
+
+ {logEntry.bpmn_process_definition_name ||
+ logEntry.bpmn_process_definition_identifier}
+
);
if (isDetailedView) {
tableRow.push(
<>
- {row.id}
+ {logEntry.id}
{bpmnProcessCell}
{taskNameCell}
@@ -78,33 +85,44 @@ export default function ProcessInstanceLogList({ variant }: OwnProps) {
if (isDetailedView) {
tableRow.push(
<>
- {row.bpmn_task_type}
- {row.message}
+ {logEntry.bpmn_task_type}
+ {logEntry.event_type}
- {row.username || (
+ {logEntry.username || (
system
)}
);
}
- tableRow.push(
-
-
+
+ let timestampComponent = (
+ {convertSecondsToFormattedDateTime(logEntry.timestamp)}
);
- return {tableRow} ;
+ if (logEntry.spiff_task_guid) {
+ timestampComponent = (
+
+
+ );
+ }
+ tableRow.push(timestampComponent);
+
+ return {tableRow} ;
};
const buildTable = () => {
- const rows = processInstanceLogs.map((row) => {
- return getTableRow(row);
- });
+ const rows = processInstanceLogs.map(
+ (logEntry: ProcessInstanceLogEntry) => {
+ return getTableRow(logEntry);
+ }
+ );
const tableHeaders = [];
if (isDetailedView) {
@@ -127,7 +145,7 @@ export default function ProcessInstanceLogList({ variant }: OwnProps) {
tableHeaders.push(
<>
Task Type
- Message
+ Event
User
);
@@ -173,7 +191,7 @@ export default function ProcessInstanceLogList({ variant }: OwnProps) {
setSearchParams(searchParams);
}}
>
- Simple
+ Milestones
- Detailed
+ Events
diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
index 8abd54ce..29d4bedc 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
@@ -7,12 +7,10 @@ import {
useSearchParams,
} from 'react-router-dom';
import {
- CaretRight,
TrashCan,
StopOutline,
PauseOutline,
PlayOutline,
- CaretLeft,
InProgress,
Checkmark,
Warning,
@@ -42,11 +40,14 @@ import {
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
import {
+ EventDefinition,
PermissionsToCheck,
ProcessData,
ProcessInstance,
ProcessInstanceMetadata,
- ProcessInstanceTask,
+ Task,
+ TaskDefinitionPropertiesJson,
+ TaskIds,
} from '../interfaces';
import { usePermissionFetcher } from '../hooks/PermissionService';
import ProcessInstanceClass from '../classes/ProcessInstanceClass';
@@ -64,10 +65,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
const [processInstance, setProcessInstance] =
useState(null);
- const [tasks, setTasks] = useState(null);
+ const [tasks, setTasks] = useState(null);
const [tasksCallHadError, setTasksCallHadError] = useState(false);
- const [taskToDisplay, setTaskToDisplay] =
- useState(null);
+ const [taskToDisplay, setTaskToDisplay] = useState(null);
+ const [taskToTimeTravelTo, setTaskToTimeTravelTo] = useState(
+ null
+ );
const [taskDataToDisplay, setTaskDataToDisplay] = useState('');
const [showTaskDataLoading, setShowTaskDataLoading] =
useState(false);
@@ -127,41 +130,58 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
}
useEffect(() => {
- if (permissionsLoaded) {
- const processTaskFailure = () => {
- setTasksCallHadError(true);
- };
- let queryParams = '';
- const processIdentifier = searchParams.get('process_identifier');
- if (processIdentifier) {
- queryParams = `?process_identifier=${processIdentifier}`;
- }
- let apiPath = '/process-instances/for-me';
- if (variant === 'all') {
- apiPath = '/process-instances';
- }
- HttpService.makeCallToBackend({
- path: `${apiPath}/${modifiedProcessModelId}/${params.process_instance_id}${queryParams}`,
- successCallback: setProcessInstance,
- });
- let taskParams = '?all_tasks=true';
- if (typeof params.spiff_step !== 'undefined') {
- taskParams = `${taskParams}&spiff_step=${params.spiff_step}`;
- }
- let taskPath = '';
- if (ability.can('GET', taskListPath)) {
- taskPath = `${taskListPath}${taskParams}`;
- }
- if (taskPath) {
- HttpService.makeCallToBackend({
- path: taskPath,
- successCallback: setTasks,
- failureCallback: processTaskFailure,
- });
- } else {
- setTasksCallHadError(true);
- }
+ if (!permissionsLoaded) {
+ return undefined;
}
+ const processTaskFailure = () => {
+ setTasksCallHadError(true);
+ };
+ const processTasksSuccess = (results: Task[]) => {
+ if (params.to_task_guid) {
+ const matchingTask = results.find(
+ (task: Task) => task.guid === params.to_task_guid
+ );
+ if (matchingTask) {
+ setTaskToTimeTravelTo(matchingTask);
+ }
+ }
+ setTasks(results);
+ };
+ let queryParams = '';
+ const processIdentifier = searchParams.get('process_identifier');
+ if (processIdentifier) {
+ queryParams = `?process_identifier=${processIdentifier}`;
+ }
+ let apiPath = '/process-instances/for-me';
+ if (variant === 'all') {
+ apiPath = '/process-instances';
+ }
+ HttpService.makeCallToBackend({
+ path: `${apiPath}/${modifiedProcessModelId}/${params.process_instance_id}${queryParams}`,
+ successCallback: setProcessInstance,
+ });
+ let taskParams = '?most_recent_tasks_only=true';
+ if (typeof params.to_task_guid !== 'undefined') {
+ taskParams = `${taskParams}&to_task_guid=${params.to_task_guid}`;
+ }
+ const bpmnProcessGuid = searchParams.get('bpmn_process_guid');
+ if (bpmnProcessGuid) {
+ taskParams = `${taskParams}&bpmn_process_guid=${bpmnProcessGuid}`;
+ }
+ let taskPath = '';
+ if (ability.can('GET', taskListPath)) {
+ taskPath = `${taskListPath}${taskParams}`;
+ }
+ if (taskPath) {
+ HttpService.makeCallToBackend({
+ path: taskPath,
+ successCallback: processTasksSuccess,
+ failureCallback: processTaskFailure,
+ });
+ } else {
+ setTasksCallHadError(true);
+ }
+ return undefined;
}, [
targetUris,
params,
@@ -211,21 +231,13 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
};
const getTaskIds = () => {
- const taskIds = { completed: [], readyOrWaiting: [] };
+ const taskIds: TaskIds = { completed: [], readyOrWaiting: [] };
if (tasks) {
- const callingSubprocessId = searchParams.get('call_activity_task_id');
- tasks.forEach(function getUserTasksElement(task: ProcessInstanceTask) {
- if (
- callingSubprocessId &&
- callingSubprocessId !== task.calling_subprocess_task_id
- ) {
- return null;
- }
+ tasks.forEach(function getUserTasksElement(task: Task) {
if (task.state === 'COMPLETED') {
- (taskIds.completed as any).push(task);
- }
- if (task.state === 'READY' || task.state === 'WAITING') {
- (taskIds.readyOrWaiting as any).push(task);
+ taskIds.completed.push(task);
+ } else if (task.state === 'READY' || task.state === 'WAITING') {
+ taskIds.readyOrWaiting.push(task);
}
return null;
});
@@ -233,72 +245,57 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
return taskIds;
};
- const currentSpiffStep = () => {
- if (processInstance && typeof params.spiff_step === 'undefined') {
- return processInstance.spiff_step || 0;
+ const currentToTaskGuid = () => {
+ if (taskToTimeTravelTo) {
+ return taskToTimeTravelTo.guid;
}
-
- return Number(params.spiff_step);
+ return null;
};
- const showingFirstSpiffStep = () => {
- return currentSpiffStep() === 1;
+ // right now this just assume if taskToTimeTravelTo was passed in then
+ // this cannot be the active task.
+ // we may need a better way to figure this out.
+ const showingActiveTask = () => {
+ return !taskToTimeTravelTo;
};
- const showingLastSpiffStep = () => {
- return processInstance && currentSpiffStep() === processInstance.spiff_step;
- };
-
- const spiffStepLink = (label: any, spiffStep: number) => {
+ const queryParams = () => {
const processIdentifier = searchParams.get('process_identifier');
- const callActivityTaskId = searchParams.get('call_activity_task_id');
+ const callActivityTaskId = searchParams.get('bpmn_process_guid');
const queryParamArray = [];
if (processIdentifier) {
queryParamArray.push(`process_identifier=${processIdentifier}`);
}
if (callActivityTaskId) {
- queryParamArray.push(`call_activity_task_id=${callActivityTaskId}`);
+ queryParamArray.push(`bpmn_process_guid=${callActivityTaskId}`);
}
- let queryParams = '';
+ let queryParamString = '';
if (queryParamArray.length > 0) {
- queryParams = `?${queryParamArray.join('&')}`;
+ queryParamString = `?${queryParamArray.join('&')}`;
}
+ return queryParamString;
+ };
+ const completionViewLink = (label: any, taskGuid: string) => {
return (
;
};
- const processTaskResult = (result: ProcessInstanceTask) => {
+ const processTaskResult = (result: Task) => {
if (result == null) {
setTaskDataToDisplay('');
} else {
@@ -518,15 +515,15 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
setShowTaskDataLoading(false);
};
- const initializeTaskDataToDisplay = (task: ProcessInstanceTask | null) => {
+ const initializeTaskDataToDisplay = (task: Task | null) => {
if (
task &&
- task.state === 'COMPLETED' &&
+ (task.state === 'COMPLETED' || task.state === 'READY') &&
ability.can('GET', targetUris.processInstanceTaskDataPath)
) {
setShowTaskDataLoading(true);
HttpService.makeCallToBackend({
- path: `${targetUris.processInstanceTaskDataPath}/${task.task_spiff_step}`,
+ path: `${targetUris.processInstanceTaskDataPath}/${task.guid}`,
httpMethod: 'GET',
successCallback: processTaskResult,
failureCallback: (error: any) => {
@@ -577,13 +574,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
successCallback: handleProcessDataShowResponse,
});
} else if (tasks) {
- const matchingTask: any = tasks.find((task: any) => {
- const callingSubprocessId = searchParams.get('call_activity_task_id');
+ const matchingTask: Task | undefined = tasks.find((task: Task) => {
return (
- (!callingSubprocessId ||
- callingSubprocessId === task.calling_subprocess_task_id) &&
- task.name === shapeElement.id &&
- bpmnProcessIdentifiers.includes(task.process_identifier)
+ task.bpmn_identifier === shapeElement.id &&
+ bpmnProcessIdentifiers.includes(
+ task.bpmn_process_definition_identifier
+ )
);
});
if (matchingTask) {
@@ -600,7 +596,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
const getTaskById = (taskId: string) => {
if (tasks !== null) {
- return tasks.find((task: any) => task.id === taskId);
+ return tasks.find((task: Task) => task.guid === taskId) || null;
}
return null;
};
@@ -609,81 +605,86 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
console.log('result', result);
};
+ const getParentTaskFromTask = (task: Task) => {
+ return task.properties_json.parent;
+ };
+
const createScriptUnitTest = () => {
if (taskToDisplay) {
- const taskToUse: any = taskToDisplay;
- const previousTask: any = getTaskById(taskToUse.parent);
+ const previousTask: Task | null = getTaskById(
+ getParentTaskFromTask(taskToDisplay)
+ );
HttpService.makeCallToBackend({
path: `/process-models/${modifiedProcessModelId}/script-unit-tests`,
httpMethod: 'POST',
successCallback: processScriptUnitTestCreateResult,
postBody: {
- bpmn_task_identifier: taskToUse.name,
- input_json: previousTask.data,
- expected_output_json: taskToUse.data,
+ bpmn_task_identifier: taskToDisplay.bpmn_identifier,
+ input_json: previousTask ? previousTask.data : '',
+ expected_output_json: taskToDisplay.data,
},
});
}
};
- const isCurrentTask = (task: any) => {
+ const isActiveTask = (task: Task) => {
const subprocessTypes = [
'Subprocess',
- 'Call Activity',
+ 'CallActivity',
'Transactional Subprocess',
];
return (
(task.state === 'WAITING' &&
- subprocessTypes.filter((t) => t === task.type).length > 0) ||
+ subprocessTypes.filter((t) => t === task.typename).length > 0) ||
task.state === 'READY'
);
};
- const canEditTaskData = (task: any) => {
+ const canEditTaskData = (task: Task) => {
return (
processInstance &&
ability.can('PUT', targetUris.processInstanceTaskDataPath) &&
- isCurrentTask(task) &&
+ isActiveTask(task) &&
processInstance.status === 'suspended' &&
- showingLastSpiffStep()
+ showingActiveTask()
);
};
- const canSendEvent = (task: any) => {
+ const canSendEvent = (task: Task) => {
// We actually could allow this for any waiting events
const taskTypes = ['Event Based Gateway'];
return (
processInstance &&
processInstance.status === 'waiting' &&
ability.can('POST', targetUris.processInstanceSendEventPath) &&
- taskTypes.filter((t) => t === task.type).length > 0 &&
+ taskTypes.filter((t) => t === task.typename).length > 0 &&
task.state === 'WAITING' &&
- showingLastSpiffStep()
+ showingActiveTask()
);
};
- const canCompleteTask = (task: any) => {
+ const canCompleteTask = (task: Task) => {
return (
processInstance &&
processInstance.status === 'suspended' &&
ability.can('POST', targetUris.processInstanceCompleteTaskPath) &&
- isCurrentTask(task) &&
- showingLastSpiffStep()
+ isActiveTask(task) &&
+ showingActiveTask()
);
};
- const canResetProcess = (task: any) => {
+ const canResetProcess = (task: Task) => {
return (
ability.can('POST', targetUris.processInstanceResetPath) &&
processInstance &&
processInstance.status === 'suspended' &&
task.state === 'READY' &&
- !showingLastSpiffStep()
+ !showingActiveTask()
);
};
- const getEvents = (task: any) => {
- const handleMessage = (eventDefinition: any) => {
+ const getEvents = (task: Task) => {
+ const handleMessage = (eventDefinition: EventDefinition) => {
if (eventDefinition.typename === 'MessageEventDefinition') {
const newEvent = eventDefinition;
delete newEvent.message_var;
@@ -693,7 +694,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
return eventDefinition;
};
if (task.event_definition && task.event_definition.event_definitions)
- return task.event_definition.event_definitions.map((e: any) =>
+ return task.event_definition.event_definitions.map((e: EventDefinition) =>
handleMessage(e)
);
if (task.event_definition) return [handleMessage(task.event_definition)];
@@ -717,7 +718,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
setEditingTaskData(false);
const dataObject = taskDataStringToObject(taskDataToDisplay);
if (taskToDisplay) {
- const taskToDisplayCopy: ProcessInstanceTask = {
+ const taskToDisplayCopy: Task = {
...taskToDisplay,
data: dataObject,
}; // spread operator
@@ -730,13 +731,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
if (!taskToDisplay) {
return;
}
- console.log('saveTaskData');
removeError();
// taskToUse is copy of taskToDisplay, with taskDataToDisplay in data attribute
- const taskToUse: any = { ...taskToDisplay, data: taskDataToDisplay };
+ const taskToUse: Task = { ...taskToDisplay, data: taskDataToDisplay };
HttpService.makeCallToBackend({
- path: `${targetUris.processInstanceTaskDataPath}/${taskToUse.id}`,
+ path: `${targetUris.processInstanceTaskDataPath}/${taskToUse.guid}`,
httpMethod: 'PUT',
successCallback: saveTaskDataResult,
failureCallback: addError,
@@ -759,20 +759,21 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
};
const completeTask = (execute: boolean) => {
- const taskToUse: any = taskToDisplay;
- HttpService.makeCallToBackend({
- path: `/task-complete/${modifiedProcessModelId}/${params.process_instance_id}/${taskToUse.id}`,
- httpMethod: 'POST',
- successCallback: returnToLastSpiffStep,
- postBody: { execute },
- });
+ if (taskToDisplay) {
+ HttpService.makeCallToBackend({
+ path: `/task-complete/${modifiedProcessModelId}/${params.process_instance_id}/${taskToDisplay.guid}`,
+ httpMethod: 'POST',
+ successCallback: returnToProcessInstance,
+ postBody: { execute },
+ });
+ }
};
- const taskDisplayButtons = (task: any) => {
+ const taskDisplayButtons = (task: Task) => {
const buttons = [];
if (
- task.type === 'Script Task' &&
+ task.typename === 'Script Task' &&
ability.can('PUT', targetUris.processModelShowPath)
) {
buttons.push(
@@ -785,11 +786,15 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
);
}
- if (task.type === 'Call Activity') {
+ if (task.typename === 'CallActivity') {
+ console.log('task', task);
+ const taskDefinitionPropertiesJson: TaskDefinitionPropertiesJson =
+ task.task_definition_properties_json;
+ console.log('taskDefinitionPropertiesJson', taskDefinitionPropertiesJson);
buttons.push(
- {taskToUse.name} (
- {taskToUse.type}
+ {taskToUse.bpmn_identifier} (
+ {taskToUse.typename}
): {taskToUse.state}
{taskDisplayButtons(taskToUse)}
- {taskToUse.task_spiff_step ? (
+
+
+ Guid: {taskToUse.guid}
+
+
+ {taskToUse.state === 'COMPLETED' ? (
- Task completed at step:{' '}
- {spiffStepLink(
- `${taskToUse.task_spiff_step}`,
- taskToUse.task_spiff_step
+ {completionViewLink(
+ 'View process instance at the time when this task was active.',
+ taskToUse.guid
)}
@@ -1012,23 +1024,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
return null;
};
- const stepsElement = () => {
- if (!processInstance) {
- return null;
- }
- return (
-
-
-
- {previousStepLink()}
- Step {currentSpiffStep()} of {processInstance.spiff_step}
- {nextStepLink()}
-
-
-
- );
- };
-
const buttonIcons = () => {
if (!processInstance) {
return null;
@@ -1063,6 +1058,39 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
return elements;
};
+ const viewMostRecentStateComponent = () => {
+ if (!taskToTimeTravelTo) {
+ return null;
+ }
+ const title = `${taskToTimeTravelTo.id}: ${taskToTimeTravelTo.guid}: ${taskToTimeTravelTo.bpmn_identifier}`;
+ return (
+ <>
+
+
+
+ Viewing process instance at the time when{' '}
+
+
+ {taskToTimeTravelTo.bpmn_name ||
+ taskToTimeTravelTo.bpmn_identifier}
+
+ {' '}
+ was active.{' '}
+
+
+
+
+
+ );
+ };
+
if (processInstance && (tasks || tasksCallHadError)) {
const taskIds = getTaskIds();
const processModelId = unModifyProcessIdentifierForPathParam(
@@ -1116,8 +1144,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
{taskUpdateDisplayArea()}
{processDataDisplayArea()}
{processInstanceMetadataArea()}
- {stepsElement()}
+ {viewMostRecentStateComponent()}
{
+ return `/connector-proxy/type-ahead/${category}?prefix=${inputText}&limit=100`;
+ };
+
+ const lastSearchTerm = useRef('');
+ const [items, setItems] = useState([]);
+ const [selectedItem, setSelectedItem] = useState(null);
+ const itemFormatRegex = /[^{}]+(?=})/g;
+ const itemFormatSubstitutions = itemFormat.match(itemFormatRegex);
+
+ const itemToString = (item: any) => {
+ if (!item) {
+ return null;
+ }
+
+ let str = itemFormat;
+ itemFormatSubstitutions.forEach((key: string) => {
+ str = str.replace(`{${key}}`, item[key]);
+ });
+ return str;
+ };
+
+ const handleTypeAheadResult = (result: any, inputText: string) => {
+ if (lastSearchTerm.current === inputText) {
+ setItems(result);
+ }
+ };
+
+ const typeAheadSearch = (inputText: string) => {
+ if (inputText) {
+ lastSearchTerm.current = inputText;
+ // TODO: check cache of prefixes -> results
+ HttpService.makeCallToBackend({
+ path: pathForCategory(inputText),
+ successCallback: (result: any) =>
+ handleTypeAheadResult(result, inputText),
+ });
+ }
+ };
+
+ return (
+ {
+ setSelectedItem(event.selectedItem);
+ onChange(itemToString(event.selectedItem));
+ }}
+ id={id}
+ items={items}
+ itemToString={itemToString}
+ placeholder={`Start typing to search for ${category}...`}
+ titleText={`Type ahead search for ${category}`}
+ selectedItem={selectedItem}
+ />
+ );
+}
+
+class UnexpectedHumanTaskType extends Error {
+ constructor(message: string) {
+ super(message);
+ this.name = 'UnexpectedHumanTaskType';
+ }
+}
+
+enum FormSubmitType {
+ Default,
+ Draft,
+}
+
export default function TaskShow() {
const [task, setTask] = useState(null);
- const [userTasks, setUserTasks] = useState(null);
+ const [userTasks] = useState(null);
const params = useParams();
const navigate = useNavigate();
const [disabled, setDisabled] = useState(false);
+ // save current form data so that we can avoid validations in certain situations
+ const [currentFormObject, setCurrentFormObject] = useState({});
+
const { addError, removeError } = useAPIError();
+ // eslint-disable-next-line sonarjs/no-duplicate-string
+ const supportedHumanTaskTypes = ['User Task', 'Manual Task'];
+
useEffect(() => {
const processResult = (result: ProcessInstanceTask) => {
setTask(result);
+ setDisabled(false);
+ /* Disable call to load previous tasks -- do not display menu.
const url = `/v1.0/process-instances/for-me/${modifyProcessIdentifierForPathParam(
result.process_model_identifier
)}/${params.process_instance_id}/task-info`;
@@ -52,6 +141,7 @@ export default function TaskShow() {
addError(error);
},
});
+ */
};
HttpService.makeCallToBackend({
path: `/tasks/${params.process_instance_id}/${params.task_id}`,
@@ -73,16 +163,24 @@ export default function TaskShow() {
}
};
- const handleFormSubmit = (event: any) => {
+ const handleFormSubmit = (
+ formObject: any,
+ _event: any,
+ submitType: FormSubmitType = FormSubmitType.Default
+ ) => {
if (disabled) {
return;
}
+ let queryParams = '';
+ if (submitType === FormSubmitType.Draft) {
+ queryParams = '?save_as_draft=true';
+ }
setDisabled(true);
removeError();
- const dataToSubmit = event.formData;
+ const dataToSubmit = formObject.formData;
delete dataToSubmit.isManualTask;
HttpService.makeCallToBackend({
- path: `/tasks/${params.process_instance_id}/${params.task_id}`,
+ path: `/tasks/${params.process_instance_id}/${params.task_id}${queryParams}`,
successCallback: processSubmitResult,
failureCallback: (error: any) => {
addError(error);
@@ -180,6 +278,11 @@ export default function TaskShow() {
return errors;
};
+ const updateFormData = (formObject: any) => {
+ currentFormObject.formData = formObject.formData;
+ setCurrentFormObject(currentFormObject);
+ };
+
const formElement = () => {
if (!task) {
return null;
@@ -223,16 +326,35 @@ export default function TaskShow() {
}
if (task.state === 'READY') {
- let buttonText = 'Submit';
+ let submitButtonText = 'Submit';
+ let saveAsDraftButton = null;
if (task.type === 'Manual Task') {
- buttonText = 'Continue';
+ submitButtonText = 'Continue';
+ } else if (task.type === 'User Task') {
+ saveAsDraftButton = (
+
+ handleFormSubmit(currentFormObject, null, FormSubmitType.Draft)
+ }
+ >
+ Save as draft
+
+ );
+ } else {
+ throw new UnexpectedHumanTaskType(
+ `Invalid task type given: ${task.type}. Only supported types: ${supportedHumanTaskTypes}`
+ );
}
reactFragmentToHideSubmitButton = (
-
-
- {buttonText}
+
+
+ {submitButtonText}
-
+ {saveAsDraftButton}
+
);
}
@@ -240,6 +362,8 @@ export default function TaskShow() {
return getFieldsWithDateValidations(jsonSchema, formData, errors);
};
+ const widgets = { typeAhead: TypeAheadWidget };
+
return (
@@ -249,8 +373,12 @@ export default function TaskShow() {
onSubmit={handleFormSubmit}
schema={jsonSchema}
uiSchema={formUiSchema}
+ widgets={widgets}
validator={validator}
+ onChange={updateFormData}
customValidate={customValidate}
+ omitExtraData
+ liveOmit
>
{reactFragmentToHideSubmitButton}
 }})
+