feature/progress-page-for-me-nav (#846)

* use for-me on progress page when appropriate w/ burnettk

* use a hook for navigate instead of window.location w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/hooks/useProcessInstanceNavigate.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from 'react-router-dom';
+import { modifyProcessIdentifierForPathParam } from '../helpers';
+import { ProcessInstance } from '../interfaces';
+import HttpService from '../services/HttpService';
+
+type OwnProps = {
+  processInstanceId: number;
+  suffix?: string;
+};
+export default function useProcessInstanceNavigate() {
+  const navigate = useNavigate();
+
+  const handleProcessInstanceNavigation = (
+    result: any,
+    processInstanceId: number,
+    suffix: string | undefined
+  ) => {
+    const processInstanceResult: ProcessInstance = result.process_instance;
+    let path = '/process-instances';
+    if (result.uri_type === 'for-me') {
+      path += '/for-me';
+    }
+    path += `/${modifyProcessIdentifierForPathParam(
+      processInstanceResult.process_model_identifier
+    )}/${processInstanceResult.id}`;
+    if (suffix !== undefined) {
+      path += suffix;
+    }
+    navigate(path);
+  };
+
+  const navigateToInstance = ({ processInstanceId, suffix }: OwnProps) => {
+    HttpService.makeCallToBackend({
+      path: `/process-instances/find-by-id/${processInstanceId}`,
+      successCallback: (result: any) =>
+        handleProcessInstanceNavigation(result, processInstanceId, suffix),
+    });
+  };
+
+  return { navigateToInstance };
+}

spiffworkflow-frontend/src/routes/ProcessInstanceShortLink.tsx

@@ -1,31 +1,16 @@
 import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { modifyProcessIdentifierForPathParam } from '../helpers';
-import HttpService from '../services/HttpService';
-import { ProcessInstance } from '../interfaces';
+import { useParams } from 'react-router-dom';
+import useProcessInstanceNavigate from '../hooks/useProcessInstanceNavigate';
 
 export default function ProcessInstanceShortLink() {
   const params = useParams();
-  const navigate = useNavigate();
+  const { navigateToInstance } = useProcessInstanceNavigate();
 
   useEffect(() => {
-    const handleProcessInstanceNavigation = (result: any) => {
-      const processInstance: ProcessInstance = result.process_instance;
-      let path = '/process-instances/';
-      if (result.uri_type === 'for-me') {
-        path += 'for-me/';
-      }
-      path += `${modifyProcessIdentifierForPathParam(
-        processInstance.process_model_identifier
-      )}/${processInstance.id}`;
-      navigate(path);
-    };
-
-    HttpService.makeCallToBackend({
-      path: `/process-instances/find-by-id/${params.process_instance_id}`,
-      successCallback: handleProcessInstanceNavigation,
+    navigateToInstance({
+      processInstanceId: parseInt(params.process_instance_id || '0', 10),
     });
-  }, [params.process_instance_id, navigate]);
+  }, [params.process_instance_id, navigateToInstance]);
 
   return null;
 }

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -83,6 +83,7 @@ import { Notification } from '../components/Notification';
 import DateAndTimeService from '../services/DateAndTimeService';
 import ProcessInstanceCurrentTaskInfo from '../components/ProcessInstanceCurrentTaskInfo';
 import useKeyboardShortcut from '../hooks/useKeyboardShortcut';
+import useProcessInstanceNavigate from '../hooks/useProcessInstanceNavigate';
 
 type OwnProps = {
   variant: string;
@@ -92,6 +93,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
   const navigate = useNavigate();
   const params = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
+  const { navigateToInstance } = useProcessInstanceNavigate();
 
   const eventsThatNeedPayload = ['MessageEventDefinition'];
 
@@ -167,16 +169,19 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     );
   };
 
-  const onProcessInstanceRun = (processInstanceResult: ProcessInstance) => {
-    const processInstanceId = processInstanceResult.id;
+  const onProcessInstanceForceRun = (
+    processInstanceResult: ProcessInstance
+  ) => {
     if (processInstanceResult.process_model_uses_queued_execution) {
-      navigate(
-        `/process-instances/${modifiedProcessModelId}/${processInstanceId}/progress`
-      );
+      navigateToInstance({
+        processInstanceId: processInstanceResult.id,
+        suffix: '/progress',
+      });
     } else {
-      navigate(
-        `/process-instances/${modifiedProcessModelId}/${processInstanceId}/interstitial`
-      );
+      navigateToInstance({
+        processInstanceId: processInstanceResult.id,
+        suffix: '/interstitial',
+      });
     }
   };
 
@@ -184,7 +189,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     if (ability.can('POST', targetUris.processInstanceActionPath)) {
       HttpService.makeCallToBackend({
         path: `${targetUris.processInstanceActionPath}/run?force_run=true`,
-        successCallback: onProcessInstanceRun,
+        successCallback: onProcessInstanceForceRun,
         httpMethod: 'POST',
       });
     }

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -80,7 +80,7 @@ export default function TaskShow() {
       if (!result.can_complete) {
         if (result.process_model_uses_queued_execution) {
           navigate(
-            `/process-instances/${modifyProcessIdentifierForPathParam(
+            `/process-instances/for-me/${modifyProcessIdentifierForPathParam(
               result.process_model_identifier
             )}/${result.process_instance_id}/progress`
           );
@@ -199,7 +199,7 @@ export default function TaskShow() {
         navigate(`/tasks/${result.process_instance_id}/${result.id}`);
       } else if (result.process_model_uses_queued_execution) {
         navigate(
-          `/process-instances/${modifyProcessIdentifierForPathParam(
+          `/process-instances/for-me/${modifyProcessIdentifierForPathParam(
             result.process_model_identifier
           )}/${result.process_instance_id}/progress`
         );