From 9922b99f64aa75da5fe83143913d256484ad6c74 Mon Sep 17 00:00:00 2001
From: Elizabeth Esswein <elizabeth.esswein@gmail.com>
Date: Fri, 21 Apr 2023 17:22:17 -0400
Subject: [PATCH 1/4] get callers & pass to diagram editor

---
 .../src/components/ReactDiagramEditor.tsx         |  4 ++++
 spiffworkflow-frontend/src/interfaces.ts          |  1 +
 spiffworkflow-frontend/src/routes/MyTasks.tsx     |  1 +
 .../src/routes/ProcessModelEditDiagram.tsx        | 15 +++++++++++++++
 .../src/routes/ProcessModelNew.tsx                |  1 +
 5 files changed, 22 insertions(+)

diff --git a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
index ad583d92..208cbd29 100644
--- a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
+++ b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
@@ -85,6 +85,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 +111,7 @@ export default function ReactDiagramEditor({
   onSearchProcessModels,
   onElementsChanged,
   url,
+  callers,
 }: OwnProps) {
   const [diagramXMLString, setDiagramXMLString] = useState('');
   const [diagramModelerState, setDiagramModelerState] = useState(null);
@@ -125,6 +127,8 @@ export default function ReactDiagramEditor({
   const { ability } = usePermissionFetcher(permissionRequestData);
   const navigate = useNavigate();
 
+  console.log(callers);
+
   useEffect(() => {
     if (diagramModelerState) {
       return;
diff --git a/spiffworkflow-frontend/src/interfaces.ts b/spiffworkflow-frontend/src/interfaces.ts
index e482bede..93db3af5 100644
--- a/spiffworkflow-frontend/src/interfaces.ts
+++ b/spiffworkflow-frontend/src/interfaces.ts
@@ -197,6 +197,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 810c811b..2520f202 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 0dfd4afd..07f4d16f 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<Array<string>>([]);
+
   usePrompt('Changes you made may not be saved.', diagramHasChanges);
 
   useEffect(() => {
@@ -162,6 +164,18 @@ export default function ProcessModelEditDiagram() {
     }
   }, [processModelPath, params]);
 
+  useEffect(() => {
+    const getCallerIds = (result: any) => {
+      setCallers(result.map((r: any) => r.process_model_id)); 
+    }
+    if (processModel !== null) {
+      HttpService.makeCallToBackend({
+        path: `/processes/${processModel.primary_process_id}/callers`,
+        successCallback: getCallerIds,
+      });
+    }
+  }, [processModel]);
+
   const handleFileNameCancel = () => {
     setShowFileNameEditor(false);
     setNewFileName('');
@@ -958,6 +972,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 12a6e472..c3d3a67c 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: [],
   });
 

From 5e3c292f857051d3e88a70589a75d4197d1aa5ed Mon Sep 17 00:00:00 2001
From: Elizabeth Esswein <elizabeth.esswein@gmail.com>
Date: Mon, 24 Apr 2023 12:07:54 -0400
Subject: [PATCH 2/4] add modal to display references

---
 .../src/components/ReactDiagramEditor.tsx     | 54 +++++++++++++++++--
 .../src/routes/ProcessModelEditDiagram.tsx    |  5 +-
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
index 208cbd29..f42e9294 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, 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';
@@ -127,7 +131,7 @@ export default function ReactDiagramEditor({
   const { ability } = usePermissionFetcher(permissionRequestData);
   const navigate = useNavigate();
 
-  console.log(callers);
+  const [showingReferences, setShowingReferences] = useState(false);
 
   useEffect(() => {
     if (diagramModelerState) {
@@ -570,6 +574,42 @@ export default function ReactDiagramEditor({
 
   const canViewXml = fileName !== undefined;
 
+  const showReferences = () => {
+    return (
+      <Modal
+        open={showingReferences}
+        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>
+            </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 (
@@ -631,5 +671,11 @@ export default function ReactDiagramEditor({
     return null;
   };
 
-  return <div>{userActionOptions()}</div>;
+  return (
+    <div>
+      {userActionOptions()}
+      {getReferencesButton()}
+      {showReferences()}
+    </div>
+  );
 }
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
index 07f4d16f..1e200ec4 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
@@ -165,13 +165,10 @@ export default function ProcessModelEditDiagram() {
   }, [processModelPath, params]);
 
   useEffect(() => {
-    const getCallerIds = (result: any) => {
-      setCallers(result.map((r: any) => r.process_model_id)); 
-    }
     if (processModel !== null) {
       HttpService.makeCallToBackend({
         path: `/processes/${processModel.primary_process_id}/callers`,
-        successCallback: getCallerIds,
+        successCallback: setCallers,
       });
     }
   }, [processModel]);

From b43f1fde47822769ad5f6d444666095f4ef44123 Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Mon, 24 Apr 2023 13:22:16 -0400
Subject: [PATCH 3/4] lint

---
 .../src/spiffworkflow_backend/routes/tasks_controller.py        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py b/spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py
index 4adc9536..40c68885 100644
--- a/spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py
+++ b/spiffworkflow-backend/src/spiffworkflow_backend/routes/tasks_controller.py
@@ -422,7 +422,7 @@ def interstitial(process_instance_id: int) -> Response:
     return Response(
         stream_with_context(_interstitial_stream(process_instance_id)),
         mimetype="text/event-stream",
-        headers={'X-Accel-Buffering': 'no'}
+        headers={"X-Accel-Buffering": "no"},
     )
 
 

From 09ce19b27f100b47188952d86e195827229429fb Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Mon, 24 Apr 2023 16:34:16 -0400
Subject: [PATCH 4/4] also display the process model id in the call activity
 references modal w/ burnettk

---
 .../src/components/ReactDiagramEditor.tsx            | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
index f42e9294..f318fb59 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, Modal, UnorderedList, Link } 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';
@@ -578,6 +578,7 @@ export default function ReactDiagramEditor({
     return (
       <Modal
         open={showingReferences}
+        modalHeading="Process Model References"
         onRequestClose={() => setShowingReferences(false)}
         passiveModal
       >
@@ -591,7 +592,8 @@ export default function ReactDiagramEditor({
                 )}`}
               >
                 {`${ref.display_name}`}
-              </Link>
+              </Link>{' '}
+              ({ref.process_model_id})
             </li>
           ))}
         </UnorderedList>
@@ -613,7 +615,7 @@ export default function ReactDiagramEditor({
   const userActionOptions = () => {
     if (diagramType !== 'readonly') {
       return (
-        <>
+        <ButtonSet>
           <Can
             I="PUT"
             a={targetUris.processModelFileShowPath}
@@ -665,7 +667,8 @@ export default function ReactDiagramEditor({
               </Button>
             )}
           </Can>
-        </>
+          {getReferencesButton()}
+        </ButtonSet>
       );
     }
     return null;
@@ -674,7 +677,6 @@ export default function ReactDiagramEditor({
   return (
     <div>
       {userActionOptions()}
-      {getReferencesButton()}
       {showReferences()}
     </div>
   );