watch for specific values on params for useEffects w/ burnettk (#1271)

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

spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx

@@ -10,7 +10,7 @@ export const useUriListForPermissions = () => {
       messageInstanceListPath: '/v1.0/messages',
       dataStoreListPath: '/v1.0/data-stores',
       extensionListPath: '/v1.0/extensions',
-      extensionPath: `/v1.0/extensions/${params.process_model}`,
+      extensionPath: `/v1.0/extensions/${params.page_identifier}`,
       processGroupListPath: '/v1.0/process-groups',
       processGroupShowPath: `/v1.0/process-groups/${params.process_group_id}`,
       processInstanceActionPath: `/v1.0/process-instances/${params.process_model_id}/${params.process_instance_id}`,
@@ -40,7 +40,13 @@ export const useUriListForPermissions = () => {
       userSearch: `/v1.0/users/search`,
       userExists: `/v1.0/users/exists/by-username`,
     };
-  }, [params]);
+  }, [
+    params.process_model_id,
+    params.file_name,
+    params.process_group_id,
+    params.process_instance_id,
+    params.page_identifier,
+  ]);
 
   return { targetUris };
 };

spiffworkflow-frontend/src/routes/Extension.tsx

@@ -218,11 +218,7 @@ export default function Extension({
       path: targetUris.extensionListPath,
       successCallback: processExtensionResult,
     });
-  }, [
-    setConfigsIfDesiredSchemaFile,
-    targetUris.extensionListPath,
-    targetUris.extensionPath,
-  ]);
+  }, [setConfigsIfDesiredSchemaFile, targetUris.extensionListPath]);
 
   const processSubmitResult = (
     pageComponent: UiSchemaPageComponent,

spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx

@@ -20,7 +20,7 @@ export default function ProcessGroupEdit() {
       path: `/process-groups/${params.process_group_id}`,
       successCallback: setProcessGroupsFromResult,
     });
-  }, [params]);
+  }, [params.process_group_id]);
 
   if (processGroup) {
     setPageTitle([`Editing ${processGroup.display_name}`]);

spiffworkflow-frontend/src/routes/ProcessInstanceReportEdit.tsx

@@ -57,7 +57,7 @@ export default function ProcessInstanceReportEdit() {
     }
 
     getProcessInstanceReport();
-  }, [params]);
+  }, [params.report_identifier]);
 
   const editProcessInstanceReport = (event: any) => {
     event.preventDefault();

spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 // @ts-ignore
 import { Button, Table } from '@carbon/react';
-import { useParams, Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Can } from '@casl/react';
 import HttpService from '../services/HttpService';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
@@ -9,7 +9,6 @@ import { PermissionsToCheck } from '../interfaces';
 import { usePermissionFetcher } from '../hooks/PermissionService';
 
 export default function ProcessInstanceReportList() {
-  const params = useParams();
   const [processInstanceReports, setProcessInstanceReports] = useState([]);
 
   const { targetUris } = useUriListForPermissions();
@@ -23,7 +22,7 @@ export default function ProcessInstanceReportList() {
       path: `/process-instances/reports`,
       successCallback: setProcessInstanceReports,
     });
-  }, [params]);
+  }, []);
 
   const buildTable = () => {
     const rows = processInstanceReports.map((row) => {

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -237,6 +237,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     processInstanceShowPageBaseUrl = processInstanceShowPageBaseUrlAllVariant;
   }
 
+  const bpmnProcessGuid = searchParams.get('bpmn_process_guid');
+  const tab = searchParams.get('tab');
+  const taskSubTab = searchParams.get('taskSubTab');
+  const processIdentifier = searchParams.get('process_identifier');
+
   const handleAddErrorInUseEffect = useCallback((value: ErrorForDisplay) => {
     addError(value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -262,7 +267,6 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     if (typeof params.to_task_guid !== 'undefined') {
       taskParams = `${taskParams}&to_task_guid=${params.to_task_guid}`;
     }
-    const bpmnProcessGuid = searchParams.get('bpmn_process_guid');
     if (bpmnProcessGuid) {
       taskParams = `${taskParams}&bpmn_process_guid=${bpmnProcessGuid}`;
     }
@@ -283,13 +287,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     ability,
     handleAddErrorInUseEffect,
     params.to_task_guid,
-    searchParams,
     taskListPath,
+    bpmnProcessGuid,
   ]);
 
   const getProcessInstance = useCallback(() => {
     let queryParams = '';
-    const processIdentifier = searchParams.get('process_identifier');
     if (processIdentifier) {
       queryParams = `?process_identifier=${processIdentifier}`;
     }
@@ -301,7 +304,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
       path: `${apiPath}/${modifiedProcessModelId}/${params.process_instance_id}${queryParams}`,
       successCallback: setProcessInstance,
     });
-  }, [params, modifiedProcessModelId, searchParams, variant]);
+  }, [
+    params.process_instance_id,
+    modifiedProcessModelId,
+    variant,
+    processIdentifier,
+  ]);
 
   useEffect(() => {
     if (processInstance) {
@@ -320,20 +328,19 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     getProcessInstance();
     getActionableTaskList();
 
-    if (searchParams.get('tab')) {
-      setSelectedTabIndex(parseInt(searchParams.get('tab') || '0', 10));
+    if (tab) {
+      setSelectedTabIndex(parseInt(tab || '0', 10));
     }
-    if (searchParams.get('taskSubTab')) {
-      setSelectedTaskTabSubTab(
-        parseInt(searchParams.get('taskSubTab') || '0', 10)
-      );
+    if (taskSubTab) {
+      setSelectedTaskTabSubTab(parseInt(taskSubTab || '0', 10));
     }
     return undefined;
   }, [
     permissionsLoaded,
     getActionableTaskList,
     getProcessInstance,
-    searchParams,
+    tab,
+    taskSubTab,
   ]);
 
   const updateSearchParams = (value: string, key: string) => {
@@ -354,14 +361,12 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
   };
 
   const queryParams = () => {
-    const processIdentifier = searchParams.get('process_identifier');
-    const callActivityTaskId = searchParams.get('bpmn_process_guid');
     const queryParamArray = [];
     if (processIdentifier) {
       queryParamArray.push(`process_identifier=${processIdentifier}`);
     }
-    if (callActivityTaskId) {
-      queryParamArray.push(`bpmn_process_guid=${callActivityTaskId}`);
+    if (bpmnProcessGuid) {
+      queryParamArray.push(`bpmn_process_guid=${bpmnProcessGuid}`);
     }
     let queryParamString = '';
     if (queryParamArray.length > 0) {
@@ -790,15 +795,15 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     }
     const dataObjectIdentifer = dataObjectRef.id;
     const parentProcess = shapeElement.businessObject.$parent;
-    const processIdentifier = parentProcess.id;
+    const parentProcessIdentifier = parentProcess.id;
 
     let additionalParams = '';
     if (tasks) {
       const matchingTask: Task | undefined = tasks.find((task: Task) => {
-        return task.bpmn_identifier === processIdentifier;
+        return task.bpmn_identifier === parentProcessIdentifier;
       });
       if (matchingTask) {
-        additionalParams = `?process_identifier=${processIdentifier}&bpmn_process_guid=${matchingTask.guid}`;
+        additionalParams = `?process_identifier=${parentProcessIdentifier}&bpmn_process_guid=${matchingTask.guid}`;
       } else if (
         searchParams.get('process_identifier') &&
         searchParams.get('bpmn_process_guid')

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -32,7 +32,6 @@ import {
 import { gray } from '@carbon/colors';
 
 import Editor, { DiffEditor } from '@monaco-editor/react';
-
 import MDEditor from '@uiw/react-md-editor';
 import HttpService from '../services/HttpService';
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
@@ -191,7 +190,7 @@ export default function ProcessModelEditDiagram() {
         successCallback: fileResult,
       });
     }
-  }, [processModelPath, params]);
+  }, [processModelPath, params.file_name]);
 
   useEffect(() => {
     const bpmnProcessIds = processModelFile?.bpmn_process_ids;

spiffworkflow-frontend/src/routes/ReactFormEditor.tsx

@@ -93,7 +93,7 @@ export default function ReactFormEditor() {
         successCallback: processResult,
       });
     }
-  }, [params, modifiedProcessModelId]);
+  }, [params.file_name, modifiedProcessModelId]);
 
   useEffect(() => {
     if (processModelFile && processModel) {

spiffworkflow-frontend/src/routes/SecretShow.tsx

@@ -21,7 +21,7 @@ export default function SecretShow() {
       path: `/secrets/${params.key}`,
       successCallback: setSecret,
     });
-  }, [params]);
+  }, [params.key]);
 
   const handleSecretValueChange = (event: any) => {
     if (secret) {