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: [], });