diff --git a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
index ad583d92c..f318fb59b 100644
--- a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
+++ b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
@@ -19,7 +19,7 @@ import {
import React, { useRef, useEffect, useState } from 'react';
// @ts-ignore
-import { Button } from '@carbon/react';
+import { Button, ButtonSet, Modal, UnorderedList, Link } from '@carbon/react';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
@@ -58,7 +58,11 @@ import { Can } from '@casl/react';
import HttpService from '../services/HttpService';
import ButtonWithConfirmation from './ButtonWithConfirmation';
-import { getBpmnProcessIdentifiers, makeid } from '../helpers';
+import {
+ getBpmnProcessIdentifiers,
+ makeid,
+ modifyProcessIdentifierForPathParam,
+} from '../helpers';
import { useUriListForPermissions } from '../hooks/UriListForPermissions';
import { PermissionsToCheck, Task } from '../interfaces';
import { usePermissionFetcher } from '../hooks/PermissionService';
@@ -85,6 +89,7 @@ type OwnProps = {
onSearchProcessModels?: (..._args: any[]) => any;
onElementsChanged?: (..._args: any[]) => any;
url?: string;
+ callers?: any;
};
// https://codesandbox.io/s/quizzical-lake-szfyo?file=/src/App.js was a handy reference
@@ -110,6 +115,7 @@ export default function ReactDiagramEditor({
onSearchProcessModels,
onElementsChanged,
url,
+ callers,
}: OwnProps) {
const [diagramXMLString, setDiagramXMLString] = useState('');
const [diagramModelerState, setDiagramModelerState] = useState(null);
@@ -125,6 +131,8 @@ export default function ReactDiagramEditor({
const { ability } = usePermissionFetcher(permissionRequestData);
const navigate = useNavigate();
+ const [showingReferences, setShowingReferences] = useState(false);
+
useEffect(() => {
if (diagramModelerState) {
return;
@@ -566,10 +574,48 @@ export default function ReactDiagramEditor({
const canViewXml = fileName !== undefined;
+ const showReferences = () => {
+ return (
+ setShowingReferences(false)}
+ passiveModal
+ >
+
+ {callers.map((ref: any) => (
+
+
+ {`${ref.display_name}`}
+ {' '}
+ ({ref.process_model_id})
+
+ ))}
+
+
+ );
+ };
+
+ const getReferencesButton = () => {
+ if (callers.length > 0) {
+ let buttonText = `View ${callers.length} Reference`;
+ if (callers.length > 1) buttonText += 's';
+ return (
+
+ );
+ }
+ return null;
+ };
+
const userActionOptions = () => {
if (diagramType !== 'readonly') {
return (
- <>
+
)}
- >
+ {getReferencesButton()}
+
);
}
return null;
};
- return
{userActionOptions()}
;
+ return (
+
+ {userActionOptions()}
+ {showReferences()}
+
+ );
}
diff --git a/spiffworkflow-frontend/src/interfaces.ts b/spiffworkflow-frontend/src/interfaces.ts
index 42b285404..cd280cb88 100644
--- a/spiffworkflow-frontend/src/interfaces.ts
+++ b/spiffworkflow-frontend/src/interfaces.ts
@@ -206,6 +206,7 @@ export interface ProcessModel {
description: string;
display_name: string;
primary_file_name: string;
+ primary_process_id: string;
files: ProcessFile[];
parent_groups?: ProcessGroupLite[];
metadata_extraction_paths?: MetadataExtractionPath[];
diff --git a/spiffworkflow-frontend/src/routes/MyTasks.tsx b/spiffworkflow-frontend/src/routes/MyTasks.tsx
index 810c811bf..2520f202b 100644
--- a/spiffworkflow-frontend/src/routes/MyTasks.tsx
+++ b/spiffworkflow-frontend/src/routes/MyTasks.tsx
@@ -147,6 +147,7 @@ export default function MyTasks() {
description: '',
display_name: '',
primary_file_name: '',
+ primary_process_id: '',
files: [],
};
const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
index 0dfd4afd5..1e200ec4e 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
@@ -119,6 +119,8 @@ export default function ProcessModelEditDiagram() {
const processModelPath = `process-models/${modifiedProcessModelId}`;
+ const [callers, setCallers] = useState>([]);
+
usePrompt('Changes you made may not be saved.', diagramHasChanges);
useEffect(() => {
@@ -162,6 +164,15 @@ export default function ProcessModelEditDiagram() {
}
}, [processModelPath, params]);
+ useEffect(() => {
+ if (processModel !== null) {
+ HttpService.makeCallToBackend({
+ path: `/processes/${processModel.primary_process_id}/callers`,
+ successCallback: setCallers,
+ });
+ }
+ }, [processModel]);
+
const handleFileNameCancel = () => {
setShowFileNameEditor(false);
setNewFileName('');
@@ -958,6 +969,7 @@ export default function ProcessModelEditDiagram() {
onDmnFilesRequested={onDmnFilesRequested}
onSearchProcessModels={onSearchProcessModels}
onElementsChanged={onElementsChanged}
+ callers={callers}
/>
);
};
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelNew.tsx b/spiffworkflow-frontend/src/routes/ProcessModelNew.tsx
index 12a6e4724..c3d3a67c1 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelNew.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelNew.tsx
@@ -12,6 +12,7 @@ export default function ProcessModelNew() {
display_name: '',
description: '',
primary_file_name: '',
+ primary_process_id: '',
files: [],
});