From 8a773c81f82a6dd8ff7166748993d74105dcafc4 Mon Sep 17 00:00:00 2001 From: jasquat <2487833+jasquat@users.noreply.github.com> Date: Mon, 25 Mar 2024 18:59:42 +0000 Subject: [PATCH] watch for specific values on params for useEffects w/ burnettk (#1271) Co-authored-by: jasquat --- .../src/hooks/UriListForPermissions.tsx | 10 ++++- .../src/routes/Extension.tsx | 6 +-- .../src/routes/ProcessGroupEdit.tsx | 2 +- .../src/routes/ProcessInstanceReportEdit.tsx | 2 +- .../src/routes/ProcessInstanceReportList.tsx | 5 +-- .../src/routes/ProcessInstanceShow.tsx | 41 +++++++++++-------- .../src/routes/ProcessModelEditDiagram.tsx | 3 +- .../src/routes/ReactFormEditor.tsx | 2 +- .../src/routes/SecretShow.tsx | 2 +- 9 files changed, 39 insertions(+), 34 deletions(-) diff --git a/spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx b/spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx index 923852264..881a0b664 100644 --- a/spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx +++ b/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 }; }; diff --git a/spiffworkflow-frontend/src/routes/Extension.tsx b/spiffworkflow-frontend/src/routes/Extension.tsx index 245fdc3d0..8f40fb213 100644 --- a/spiffworkflow-frontend/src/routes/Extension.tsx +++ b/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, diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx index 73845dd1b..840aabf00 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx +++ b/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}`]); diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceReportEdit.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceReportEdit.tsx index 558128dc6..7bea991e7 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceReportEdit.tsx +++ b/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(); diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx index 3028d8aaf..0d59801e3 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceReportList.tsx +++ b/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) => { diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx index 34082c4a8..88194213e 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx +++ b/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') diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx index 11467da20..39da8636a 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx +++ b/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; diff --git a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx b/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx index 0df0fd826..226d58dc3 100644 --- a/spiffworkflow-frontend/src/routes/ReactFormEditor.tsx +++ b/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) { diff --git a/spiffworkflow-frontend/src/routes/SecretShow.tsx b/spiffworkflow-frontend/src/routes/SecretShow.tsx index f221b6961..1bbecebe0 100644 --- a/spiffworkflow-frontend/src/routes/SecretShow.tsx +++ b/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) {