Merge pull request #226 from sartography/feature/call-activity-references

Feature/call activity references

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 (
+      <Modal
+        open={showingReferences}
+        modalHeading="Process Model References"
+        onRequestClose={() => setShowingReferences(false)}
+        passiveModal
+      >
+        <UnorderedList>
+          {callers.map((ref: any) => (
+            <li>
+              <Link
+                size="lg"
+                href={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+                  ref.process_model_id
+                )}`}
+              >
+                {`${ref.display_name}`}
+              </Link>{' '}
+              ({ref.process_model_id})
+            </li>
+          ))}
+        </UnorderedList>
+      </Modal>
+    );
+  };
+
+  const getReferencesButton = () => {
+    if (callers.length > 0) {
+      let buttonText = `View ${callers.length} Reference`;
+      if (callers.length > 1) buttonText += 's';
+      return (
+        <Button onClick={() => setShowingReferences(true)}>{buttonText}</Button>
+      );
+    }
+    return null;
+  };
+
   const userActionOptions = () => {
     if (diagramType !== 'readonly') {
       return (
-        <>
+        <ButtonSet>
           <Can
             I="PUT"
             a={targetUris.processModelFileShowPath}
@@ -621,11 +667,17 @@ export default function ReactDiagramEditor({
               </Button>
             )}
           </Can>
-        </>
+          {getReferencesButton()}
+        </ButtonSet>
       );
     }
     return null;
   };
 
-  return <div>{userActionOptions()}</div>;
+  return (
+    <div>
+      {userActionOptions()}
+      {showReferences()}
+    </div>
+  );
 }

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[];

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(

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -119,6 +119,8 @@ export default function ProcessModelEditDiagram() {
 
   const processModelPath = `process-models/${modifiedProcessModelId}`;
 
+  const [callers, setCallers] = useState<Array<string>>([]);
+
   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}
       />
     );
   };

spiffworkflow-frontend/src/routes/ProcessModelNew.tsx

@@ -12,6 +12,7 @@ export default function ProcessModelNew() {
     display_name: '',
     description: '',
     primary_file_name: '',
+    primary_process_id: '',
     files: [],
   });