{
- setFormIdHasBeenUpdatedByUser(true);
- setFormId(event.srcElement.value);
- }}
- />
+ {formIdTextField()}
+
+ {jsonFormArea()}
+
+
+ Form Preview
+
+
+
+
+ );
}
diff --git a/src/routes/ProcessInstanceLogList.tsx b/src/routes/ProcessInstanceLogList.tsx
index acfb4020c..73fbb8fff 100644
--- a/src/routes/ProcessInstanceLogList.tsx
+++ b/src/routes/ProcessInstanceLogList.tsx
@@ -12,17 +12,23 @@ import {
import HttpService from '../services/HttpService';
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
-export default function ProcessInstanceLogList() {
+type OwnProps = {
+ variant: string;
+};
+
+export default function ProcessInstanceLogList({ variant }: OwnProps) {
const params = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [processInstanceLogs, setProcessInstanceLogs] = useState([]);
const [pagination, setPagination] = useState(null);
- const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
- `${params.process_model_id}`
- );
const { targetUris } = useUriListForPermissions();
const isDetailedView = searchParams.get('detailed') === 'true';
+ let processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${params.process_model_id}`;
+ if (variant === 'all') {
+ processInstanceShowPageBaseUrl = `/admin/process-instances/${params.process_model_id}`;
+ }
+
useEffect(() => {
const setProcessInstanceLogListFromResult = (result: any) => {
setProcessInstanceLogs(result.results);
@@ -65,7 +71,7 @@ export default function ProcessInstanceLogList() {
(false);
const [displayDetails, setDisplayDetails] = useState(false);
+ const [showProcessInstanceMetadata, setShowProcessInstanceMetadata] =
+ useState(false);
- const setErrorObject = (useContext as any)(ErrorContext)[1];
-
+ const { addError, removeError } = useAPIError();
const unModifiedProcessModelId = unModifyProcessIdentifierForPathParam(
`${params.process_model_id}`
);
@@ -112,6 +115,13 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
);
};
+ let processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${params.process_model_id}/${params.process_instance_id}`;
+ let processInstanceLogListPageBaseUrl = `/admin/logs/for-me/${params.process_model_id}/${params.process_instance_id}`;
+ if (variant === 'all') {
+ processInstanceShowPageBaseUrl = `/admin/process-instances/${params.process_model_id}/${params.process_instance_id}`;
+ processInstanceLogListPageBaseUrl = `/admin/logs/${params.process_model_id}/${params.process_instance_id}`;
+ }
+
useEffect(() => {
if (permissionsLoaded) {
const processTaskFailure = () => {
@@ -151,11 +161,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
}
}
}, [
+ targetUris,
params,
modifiedProcessModelId,
permissionsLoaded,
ability,
- targetUris,
searchParams,
taskListPath,
variant,
@@ -237,19 +247,26 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
return processInstance && currentSpiffStep() === processInstance.spiff_step;
};
- const spiffStepLink = (label: any, distance: number) => {
+ const spiffStepLink = (label: any, spiffStep: number) => {
const processIdentifier = searchParams.get('process_identifier');
- let queryParams = '';
+ const callActivityTaskId = searchParams.get('call_activity_task_id');
+ const queryParamArray = [];
if (processIdentifier) {
- queryParams = `?process_identifier=${processIdentifier}`;
+ queryParamArray.push(`process_identifier=${processIdentifier}`);
}
+ if (callActivityTaskId) {
+ queryParamArray.push(`call_activity_task_id=${callActivityTaskId}`);
+ }
+ let queryParams = '';
+ if (queryParamArray.length > 0) {
+ queryParams = `?${queryParamArray.join('&')}`;
+ }
+
return (
+
+ Current Diagram:{' '}
+
+
+
+
+ ) : null}
Started:{' '}
@@ -427,7 +461,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
size="sm"
className="button-white-background"
data-qa="process-instance-log-list-link"
- href={`/admin/logs/${modifiedProcessModelId}/${params.process_instance_id}`}
+ href={`${processInstanceLogListPageBaseUrl}`}
>
Logs
@@ -446,6 +480,19 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
Messages
+ {processInstance.process_metadata &&
+ processInstance.process_metadata.length > 0 ? (
+ {
+ setShowProcessInstanceMetadata(true);
+ }}
+ >
+ Metadata
+
+ ) : null}
@@ -684,7 +731,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
setSelectingEvent(false);
initializeTaskDataToDisplay(taskToDisplay);
setEventPayload('{}');
- setErrorObject(null);
+ console.log('cancel updating task');
+ removeError();
};
const taskDataStringToObject = (dataString: string) => {
@@ -699,16 +747,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
refreshPage();
};
- const saveTaskDataFailure = (result: any) => {
- setErrorObject({ message: result.message });
- };
-
const saveTaskData = () => {
if (!taskToDisplay) {
return;
}
-
- setErrorObject(null);
+ console.log('saveTaskData');
+ removeError();
// taskToUse is copy of taskToDisplay, with taskDataToDisplay in data attribute
const taskToUse: any = { ...taskToDisplay, data: taskDataToDisplay };
@@ -716,7 +760,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
path: `${targetUris.processInstanceTaskListDataPath}/${taskToUse.id}`,
httpMethod: 'PUT',
successCallback: saveTaskDataResult,
- failureCallback: saveTaskDataFailure,
+ failureCallback: addError,
postBody: {
new_task_data: taskToUse.data,
},
@@ -730,7 +774,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
path: `/send-event/${modifiedProcessModelId}/${params.process_instance_id}`,
httpMethod: 'POST',
successCallback: saveTaskDataResult,
- failureCallback: saveTaskDataFailure,
+ failureCallback: addError,
postBody: eventToSend,
});
};
@@ -903,6 +947,41 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
);
};
+ const processInstanceMetadataArea = () => {
+ if (
+ !processInstance ||
+ (processInstance.process_metadata &&
+ processInstance.process_metadata.length < 1)
+ ) {
+ return null;
+ }
+ const metadataComponents: any[] = [];
+ (processInstance.process_metadata || []).forEach(
+ (processInstanceMetadata: ProcessInstanceMetadata) => {
+ metadataComponents.push(
+
+
+ {processInstanceMetadata.key}
+
+
+ {processInstanceMetadata.value}
+
+
+ );
+ }
+ );
+ return (
+ setShowProcessInstanceMetadata(false)}
+ >
+ {metadataComponents}
+
+ );
+ };
+
const taskUpdateDisplayArea = () => {
const taskToUse: any = { ...taskToDisplay, data: taskDataToDisplay };
const candidateEvents: any = getEvents(taskToUse);
@@ -923,6 +1002,19 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
): {taskToUse.state}
{taskDisplayButtons(taskToUse)}
+ {taskToUse.task_spiff_step ? (
+
+
+ Task completed at step:{' '}
+ {spiffStepLink(
+ `${taskToUse.task_spiff_step}`,
+ taskToUse.task_spiff_step
+ )}
+
+
+ ) : null}
{selectingEvent
? eventSelector(candidateEvents)
: taskDataContainer()}
@@ -1027,6 +1119,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
showDateStarted={false}
showLastUpdated={false}
hideIfNoTasks
+ canCompleteAllTasks
/>
@@ -1034,6 +1127,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
([]);
const [displaySaveFileMessage, setDisplaySaveFileMessage] =
useState(false);
+ const [processModelFileInvalidText, setProcessModelFileInvalidText] =
+ useState('');
const handleShowMarkdownEditor = () => setShowMarkdownEditor(true);
@@ -100,7 +105,7 @@ export default function ProcessModelEditDiagram() {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
- const setErrorObject = (useContext as any)(ErrorContext)[1];
+ const { addError, removeError } = useAPIError();
const [processModelFile, setProcessModelFile] = useState(
null
);
@@ -160,6 +165,7 @@ export default function ProcessModelEditDiagram() {
const handleFileNameCancel = () => {
setShowFileNameEditor(false);
setNewFileName('');
+ setProcessModelFileInvalidText('');
};
const navigateToProcessModelFile = (_result: any) => {
@@ -176,7 +182,7 @@ export default function ProcessModelEditDiagram() {
const saveDiagram = (bpmnXML: any, fileName = params.file_name) => {
setDisplaySaveFileMessage(false);
- setErrorObject(null);
+ removeError();
setBpmnXmlForDiagramRendering(bpmnXML);
let url = `/process-models/${modifiedProcessModelId}/files`;
@@ -202,7 +208,7 @@ export default function ProcessModelEditDiagram() {
HttpService.makeCallToBackend({
path: url,
successCallback: navigateToProcessModelFile,
- failureCallback: setErrorObject,
+ failureCallback: addError,
httpMethod,
postBody: formData,
});
@@ -251,6 +257,11 @@ export default function ProcessModelEditDiagram() {
const handleFileNameSave = (event: any) => {
event.preventDefault();
+ if (!newFileName) {
+ setProcessModelFileInvalidText('Process Model file name is required.');
+ return;
+ }
+ setProcessModelFileInvalidText('');
setShowFileNameEditor(false);
saveDiagram(bpmnXmlForDiagramRendering);
};
@@ -267,17 +278,32 @@ export default function ProcessModelEditDiagram() {
onRequestSubmit={handleFileNameSave}
onRequestClose={handleFileNameCancel}
>
- File Name:
-
-
+
+
+ setNewFileName(e.target.value)}
+ invalidText={processModelFileInvalidText}
+ invalid={!!processModelFileInvalidText}
+ size="sm"
+ autoFocus
+ />
+
+
+ {fileExtension}
+
+
);
};
diff --git a/src/routes/ProcessModelShow.tsx b/src/routes/ProcessModelShow.tsx
index cdbe38a96..c7f83596f 100644
--- a/src/routes/ProcessModelShow.tsx
+++ b/src/routes/ProcessModelShow.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import {
Add,
@@ -32,7 +32,8 @@ import {
import { Can } from '@casl/react';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
-import ErrorContext from '../contexts/ErrorContext';
+import useAPIError from '../hooks/UseApiError';
+
import {
getGroupFromModifiedModelId,
modifyProcessIdentifierForPathParam,
@@ -52,7 +53,7 @@ import { Notification } from '../components/Notification';
export default function ProcessModelShow() {
const params = useParams();
- const setErrorObject = (useContext as any)(ErrorContext)[1];
+ const { addError, removeError } = useAPIError();
const [processModel, setProcessModel] = useState(null);
const [processInstance, setProcessInstance] =
@@ -148,7 +149,7 @@ export default function ProcessModelShow() {
!('file_contents' in processModelFile) ||
processModelFile.file_contents === undefined
) {
- setErrorObject({
+ addError({
message: `Could not file file contents for file: ${processModelFile.name}`,
});
return;
@@ -169,7 +170,7 @@ export default function ProcessModelShow() {
};
const downloadFile = (fileName: string) => {
- setErrorObject(null);
+ removeError();
const processModelPath = `process-models/${modifiedProcessModelId}`;
HttpService.makeCallToBackend({
path: `/${processModelPath}/files/${fileName}`,
@@ -374,7 +375,7 @@ export default function ProcessModelShow() {
const doFileUpload = (event: any) => {
event.preventDefault();
- setErrorObject(null);
+ removeError();
const url = `/process-models/${modifiedProcessModelId}/files`;
const formData = new FormData();
formData.append('file', filesToUpload[0]);
@@ -384,7 +385,7 @@ export default function ProcessModelShow() {
successCallback: onUploadedCallback,
httpMethod: 'POST',
postBody: formData,
- failureCallback: setErrorObject,
+ failureCallback: addError,
});
setFilesToUpload(null);
};
diff --git a/src/routes/ReactFormEditor.tsx b/src/routes/ReactFormEditor.tsx
index 58b2819b1..d1cb32010 100644
--- a/src/routes/ReactFormEditor.tsx
+++ b/src/routes/ReactFormEditor.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import Editor from '@monaco-editor/react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
// @ts-ignore
@@ -8,16 +8,14 @@ import HttpService from '../services/HttpService';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
import { modifyProcessIdentifierForPathParam } from '../helpers';
import { ProcessFile } from '../interfaces';
-import ErrorContext from '../contexts/ErrorContext';
import { Notification } from '../components/Notification';
-
+import useAPIError from '../hooks/UseApiError';
// NOTE: This is mostly the same as ProcessModelEditDiagram and if we go this route could
// possibly be merged into it. I'm leaving as a separate file now in case it does
// end up diverging greatly
export default function ReactFormEditor() {
const params = useParams();
- const setErrorObject = (useContext as any)(ErrorContext)[1];
-
+ const { addError, removeError } = useAPIError();
const [showFileNameEditor, setShowFileNameEditor] = useState(false);
const [newFileName, setNewFileName] = useState('');
const searchParams = useSearchParams()[0];
@@ -87,7 +85,7 @@ export default function ReactFormEditor() {
};
const saveFile = () => {
- setErrorObject(null);
+ removeError();
setDisplaySaveFileMessage(false);
let url = `/process-models/${modifiedProcessModelId}/files`;
@@ -116,7 +114,7 @@ export default function ReactFormEditor() {
HttpService.makeCallToBackend({
path: url,
successCallback: navigateToProcessModelFile,
- failureCallback: setErrorObject,
+ failureCallback: addError,
httpMethod,
postBody: formData,
});
@@ -190,6 +188,9 @@ export default function ReactFormEditor() {
if (processModelFile || !params.file_name) {
const processModelFileName = processModelFile ? processModelFile.name : '';
+ const formBuildFileParam = params.file_name
+ ? `?file_name=${params.file_name}`
+ : '';
return (
Save
- {params.file_name ? null : (
-
- navigate(
- `/admin/process-models/${params.process_model_id}/form-builder`
- )
- }
- variant="danger"
- data-qa="form-builder-button"
- >
- Form Builder
-
- )}
+
{params.file_name ? (
+ navigate(
+ `/admin/process-models/${params.process_model_id}/form-builder${formBuildFileParam}`
+ )
+ }
+ variant="danger"
+ data-qa="form-builder-button"
+ >
+ Form Builder
+
{hasDiagram ? (
diff --git a/src/routes/TaskShow.tsx b/src/routes/TaskShow.tsx
index 79bc52635..35ad48d43 100644
--- a/src/routes/TaskShow.tsx
+++ b/src/routes/TaskShow.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import validator from '@rjsf/validator-ajv8';
@@ -12,75 +12,81 @@ import {
// @ts-ignore
} from '@carbon/react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import MDEditor from '@uiw/react-md-editor';
// eslint-disable-next-line import/no-named-as-default
import Form from '../themes/carbon';
import HttpService from '../services/HttpService';
-import ErrorContext from '../contexts/ErrorContext';
+import useAPIError from '../hooks/UseApiError';
import { modifyProcessIdentifierForPathParam } from '../helpers';
-import { useUriListForPermissions } from '../hooks/UriListForPermissions';
-import { PermissionsToCheck } from '../interfaces';
-import { usePermissionFetcher } from '../hooks/PermissionService';
+import { ProcessInstanceTask } from '../interfaces';
export default function TaskShow() {
- const [task, setTask] = useState(null);
+ const [task, setTask] = useState(null);
const [userTasks, setUserTasks] = useState(null);
const params = useParams();
const navigate = useNavigate();
+ const [disabled, setDisabled] = useState(false);
- const setErrorObject = (useContext as any)(ErrorContext)[1];
-
- const { targetUris } = useUriListForPermissions();
- const permissionRequestData: PermissionsToCheck = {
- [targetUris.processInstanceTaskListDataPath]: ['GET'],
- };
- const { ability, permissionsLoaded } = usePermissionFetcher(
- permissionRequestData
- );
+ const { addError, removeError } = useAPIError();
useEffect(() => {
- if (permissionsLoaded) {
- const processResult = (result: any) => {
- setTask(result);
- if (ability.can('GET', targetUris.processInstanceTaskListDataPath)) {
- HttpService.makeCallToBackend({
- path: `/task-data/${modifyProcessIdentifierForPathParam(
- result.process_model_identifier
- )}/${params.process_instance_id}`,
- successCallback: setUserTasks,
- });
- }
- };
-
+ const processResult = (result: ProcessInstanceTask) => {
+ setTask(result);
+ const url = `/task-data/${modifyProcessIdentifierForPathParam(
+ result.process_model_identifier
+ )}/${params.process_instance_id}`;
+ // if user is unauthorized to get task-data then don't do anything
+ // Checking like this so we can dynamically create the url with the correct process model
+ // instead of passing the process model identifier in through the params
HttpService.makeCallToBackend({
- path: `/tasks/${params.process_instance_id}/${params.task_id}`,
- successCallback: processResult,
- // This causes the page to continuously reload
- // failureCallback: setErrorObject,
+ path: url,
+ successCallback: (tasks: any) => {
+ setDisabled(false);
+ setUserTasks(tasks);
+ },
+ onUnauthorized: () => {
+ setDisabled(false);
+ },
+ failureCallback: (error: any) => {
+ addError(error);
+ },
});
- }
- }, [params, permissionsLoaded, ability, targetUris]);
+ };
+ HttpService.makeCallToBackend({
+ path: `/tasks/${params.process_instance_id}/${params.task_id}`,
+ successCallback: processResult,
+ failureCallback: addError,
+ });
+ // FIXME: not sure what to do about addError. adding it to this array causes the page to endlessly reload
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [params]);
const processSubmitResult = (result: any) => {
- setErrorObject(null);
+ removeError();
if (result.ok) {
navigate(`/tasks`);
} else if (result.process_instance_id) {
navigate(`/tasks/${result.process_instance_id}/${result.id}`);
} else {
- setErrorObject(`Received unexpected error: ${result.message}`);
+ addError(result);
}
};
const handleFormSubmit = (event: any) => {
- setErrorObject(null);
+ if (disabled) {
+ return;
+ }
+ setDisabled(true);
+ removeError();
const dataToSubmit = event.formData;
delete dataToSubmit.isManualTask;
HttpService.makeCallToBackend({
path: `/tasks/${params.process_instance_id}/${params.task_id}`,
successCallback: processSubmitResult,
- failureCallback: setErrorObject,
+ failureCallback: (error: any) => {
+ addError(error);
+ setDisabled(false);
+ },
httpMethod: 'PUT',
postBody: dataToSubmit,
});
@@ -147,6 +153,7 @@ export default function TaskShow() {
Object.keys(jsonSchema.properties).forEach((propertyKey: string) => {
const propertyMetadata = jsonSchema.properties[propertyKey];
if (
+ typeof propertyMetadata === 'object' &&
'minimumDate' in propertyMetadata &&
propertyMetadata.minimumDate === 'today'
) {
@@ -161,17 +168,28 @@ export default function TaskShow() {
}
}
}
+
+ // recurse through all nested properties as well
+ getFieldsWithDateValidations(
+ propertyMetadata,
+ formData[propertyKey],
+ errors[propertyKey]
+ );
});
}
return errors;
};
- const formElement = (taskToUse: any) => {
+ const formElement = () => {
+ if (!task) {
+ return null;
+ }
+
let formUiSchema;
- let taskData = taskToUse.data;
- let jsonSchema = taskToUse.form_schema;
+ let taskData = task.data;
+ let jsonSchema = task.form_schema;
let reactFragmentToHideSubmitButton = null;
- if (taskToUse.type === 'Manual Task') {
+ if (task.type === 'Manual Task') {
taskData = {};
jsonSchema = {
type: 'object',
@@ -189,10 +207,10 @@ export default function TaskShow() {
'ui:widget': 'hidden',
},
};
- } else if (taskToUse.form_ui_schema) {
- formUiSchema = JSON.parse(taskToUse.form_ui_schema);
+ } else if (task.form_ui_schema) {
+ formUiSchema = task.form_ui_schema;
}
- if (taskToUse.state !== 'READY') {
+ if (task.state !== 'READY') {
formUiSchema = Object.assign(formUiSchema || {}, {
'ui:readonly': true,
});
@@ -204,10 +222,16 @@ export default function TaskShow() {
reactFragmentToHideSubmitButton =
;
}
- if (taskToUse.type === 'Manual Task' && taskToUse.state === 'READY') {
+ if (task.state === 'READY') {
+ let buttonText = 'Submit';
+ if (task.type === 'Manual Task') {
+ buttonText = 'Continue';
+ }
reactFragmentToHideSubmitButton = (
- Continue
+
+ {buttonText}
+
);
}
@@ -218,8 +242,9 @@ export default function TaskShow() {
return (
-
+