diff --git a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx index c13ca4c0f..19befeacf 100644 --- a/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { TrashCan, Edit } from '@carbon/icons-react'; import { Button, Stack } from '@carbon/react'; @@ -6,9 +7,10 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb'; import HttpService from '../services/HttpService'; import { modifyProcessIdentifierForPathParam, + setPageTitle, unModifyProcessIdentifierForPathParam, } from '../helpers'; -import { PermissionsToCheck } from '../interfaces'; +import { PermissionsToCheck, ProcessGroup } from '../interfaces'; import { useUriListForPermissions } from '../hooks/UriListForPermissions'; import { usePermissionFetcher } from '../hooks/PermissionService'; import ProcessGroupListTiles from '../components/ProcessGroupListTiles'; @@ -19,6 +21,8 @@ import useProcessGroupFetcher from '../hooks/useProcessGroupFetcher'; export default function ProcessGroupShow() { const params = useParams(); const navigate = useNavigate(); + const [processGroupForBreadcrumb, setProcessGroupForBreadcrumb] = + useState(null); const { targetUris } = useUriListForPermissions(); const permissionRequestData: PermissionsToCheck = { @@ -34,6 +38,17 @@ export default function ProcessGroupShow() { ); const { processGroup } = useProcessGroupFetcher(unModifiedProcessGroupId); + useEffect(() => { + const processResult = (result: ProcessGroup) => { + setProcessGroupForBreadcrumb(result); + setPageTitle([result.display_name]); + }; + HttpService.makeCallToBackend({ + path: `/process-groups/${params.process_group_id}`, + successCallback: processResult, + }); + }, [params.process_group_id, setProcessGroupForBreadcrumb]); + const navigateToProcessGroups = (_result: any) => { navigate(`/process-groups`); }; @@ -50,7 +65,7 @@ export default function ProcessGroupShow() { } }; - if (processGroup && permissionsLoaded) { + if (processGroup && processGroupForBreadcrumb && permissionsLoaded) { const modifiedProcessGroupId = modifyProcessIdentifierForPathParam( processGroup.id ); @@ -63,7 +78,7 @@ export default function ProcessGroupShow() { hotCrumbs={[ ['Process Groups', '/process-groups'], { - entityToExplode: processGroup, + entityToExplode: processGroupForBreadcrumb, entityType: 'process-group', }, ]}