add page titles for most routes (#468)

spiffworkflow-frontend/src/helpers.tsx

@@ -347,6 +347,10 @@ export const getBpmnProcessIdentifiers = (rootBpmnElement: any) => {
   return childProcesses;
 };
 
+export const setPageTitle = (items: Array<string>) => {
+  document.title = ['SpiffWorkflow'].concat(items).join(' - ');
+};
+
 export const isInteger = (str: string | number) => {
   return /^\d+$/.test(str.toString());
 };

spiffworkflow-frontend/src/routes/Configuration.tsx

@@ -11,6 +11,7 @@ import AuthenticationList from './AuthenticationList';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { PermissionsToCheck } from '../interfaces';
 import { usePermissionFetcher } from '../hooks/PermissionService';
+import { setPageTitle } from '../helpers';
 
 export default function Configuration() {
   const location = useLocation();
@@ -29,6 +30,7 @@ export default function Configuration() {
 
   useEffect(() => {
     removeError();
+    setPageTitle(['Configuration']);
     let newSelectedTabIndex = 0;
     if (location.pathname.match(/^\/admin\/configuration\/authentications\b/)) {
       newSelectedTabIndex = 1;

spiffworkflow-frontend/src/routes/DataStorePage.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import DataStoreList from '../components/DataStoreList';
+import { setPageTitle } from '../helpers';
 
 export default function DataStorePage() {
+  setPageTitle(['Data Stores']);
   return (
     <>
       <h1>Data Stores</h1>

spiffworkflow-frontend/src/routes/MessageListPage.tsx

@@ -1,6 +1,8 @@
 import MessageInstanceList from '../components/MessageInstanceList';
+import { setPageTitle } from '../helpers';
 
 export default function MessageListPage() {
+  setPageTitle(['Messages']);
   return (
     <>
       <h1>Messages</h1>

spiffworkflow-frontend/src/routes/ProcessGroupEdit.tsx

@@ -5,6 +5,7 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ProcessGroupForm from '../components/ProcessGroupForm';
 import { ProcessGroup } from '../interfaces';
+import { setPageTitle } from '../helpers';
 
 export default function ProcessGroupEdit() {
   const params = useParams();
@@ -22,6 +23,7 @@ export default function ProcessGroupEdit() {
   }, [params]);
 
   if (processGroup) {
+    setPageTitle([`Editing ${processGroup.display_name}`]);
     return (
       <>
         <ProcessBreadcrumb

spiffworkflow-frontend/src/routes/ProcessGroupList.tsx

@@ -7,7 +7,7 @@ import {
 import { Can } from '@casl/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
-import { modifyProcessIdentifierForPathParam } from '../helpers';
+import { modifyProcessIdentifierForPathParam, setPageTitle } from '../helpers';
 import { CarbonComboBoxSelection, PermissionsToCheck } from '../interfaces';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { usePermissionFetcher } from '../hooks/PermissionService';
@@ -42,6 +42,7 @@ export default function ProcessGroupList() {
       path: `/process-models?per_page=1000&recursive=true&include_parent_groups=true`,
       successCallback: processResultForProcessModels,
     });
+    setPageTitle(['Process Groups']);
   }, [searchParams]);
 
   const processModelSearchArea = () => {

spiffworkflow-frontend/src/routes/ProcessGroupNew.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import ProcessGroupForm from '../components/ProcessGroupForm';
 import { ProcessGroup, HotCrumbItem } from '../interfaces';
+import { setPageTitle } from '../helpers';
 
 export default function ProcessGroupNew() {
   const searchParams = new URLSearchParams(document.location.search);
@@ -11,6 +12,7 @@ export default function ProcessGroupNew() {
     display_name: '',
     description: '',
   });
+  setPageTitle(['New Process Group']);
 
   const hotCrumbs: HotCrumbItem[] = [['Process Groups', '/admin']];
   if (parentGroupId) {

spiffworkflow-frontend/src/routes/ProcessGroupShow.tsx

@@ -19,6 +19,7 @@ import {
   getPageInfoFromSearchParams,
   modifyProcessIdentifierForPathParam,
   unModifyProcessIdentifierForPathParam,
+  setPageTitle,
 } from '../helpers';
 import {
   PaginationObject,
@@ -59,6 +60,7 @@ export default function ProcessGroupShow() {
     };
     const processResult = (result: any) => {
       setProcessGroup(result);
+      setPageTitle([result.display_name]);
       const unmodifiedProcessGroupId = unModifyProcessIdentifierForPathParam(
         (params as any).process_group_id
       );

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx

@@ -4,7 +4,10 @@ import 'react-datepicker/dist/react-datepicker.css';
 
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
-import { getProcessModelFullIdentifierFromSearchParams } from '../helpers';
+import {
+  getProcessModelFullIdentifierFromSearchParams,
+  setPageTitle,
+} from '../helpers';
 import ProcessInstanceListTabs from '../components/ProcessInstanceListTabs';
 
 type OwnProps = {
@@ -13,6 +16,7 @@ type OwnProps = {
 
 export default function ProcessInstanceList({ variant }: OwnProps) {
   const [searchParams] = useSearchParams();
+  setPageTitle(['Process Instances']);
 
   const processInstanceBreadcrumbElement = () => {
     const processModelFullIdentifier =

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -47,6 +47,7 @@ import {
   modifyProcessIdentifierForPathParam,
   truncateString,
   unModifyProcessIdentifierForPathParam,
+  setPageTitle,
 } from '../helpers';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
@@ -162,6 +163,16 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (processInstance) {
+      setPageTitle([
+        processInstance.process_model_display_name,
+        `Process Instance ${processInstance.id}`,
+      ]);
+    }
+    return undefined;
+  }, [processInstance]);
+
   useEffect(() => {
     if (!permissionsLoaded) {
       return undefined;

spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx

@@ -5,6 +5,7 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ProcessModelForm from '../components/ProcessModelForm';
 import { ProcessModel } from '../interfaces';
+import { setPageTitle } from '../helpers';
 
 export default function ProcessModelEdit() {
   const params = useParams();
@@ -19,6 +20,7 @@ export default function ProcessModelEdit() {
   }, [processModelPath]);
 
   if (processModel) {
+    setPageTitle([`Editing ${processModel.display_name}`]);
     return (
       <>
         <ProcessBreadcrumb

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -33,7 +33,11 @@ import HttpService from '../services/HttpService';
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import useAPIError from '../hooks/UseApiError';
-import { makeid, modifyProcessIdentifierForPathParam } from '../helpers';
+import {
+  makeid,
+  modifyProcessIdentifierForPathParam,
+  setPageTitle,
+} from '../helpers';
 import {
   CarbonComboBoxProcessSelection,
   ProcessFile,
@@ -178,6 +182,9 @@ export default function ProcessModelEditDiagram() {
         successCallback: setCallers,
       });
     }
+    if (processModel && processModelFile) {
+      setPageTitle([processModel.display_name, processModelFile.name]);
+    }
   }, [processModel, processModelFile]);
 
   const handleFileNameCancel = () => {

spiffworkflow-frontend/src/routes/ProcessModelNew.tsx

@@ -3,7 +3,10 @@ import { useParams } from 'react-router-dom';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import { ProcessModel } from '../interfaces';
 import ProcessModelForm from '../components/ProcessModelForm';
-import { unModifyProcessIdentifierForPathParam } from '../helpers';
+import {
+  unModifyProcessIdentifierForPathParam,
+  setPageTitle,
+} from '../helpers';
 
 export default function ProcessModelNew() {
   const params = useParams();
@@ -15,6 +18,7 @@ export default function ProcessModelNew() {
     primary_process_id: '',
     files: [],
   });
+  setPageTitle(['Add New Process Model']);
 
   return (
     <>

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -33,6 +33,7 @@ import useAPIError from '../hooks/UseApiError';
 import {
   getGroupFromModifiedModelId,
   modifyProcessIdentifierForPathParam,
+  setPageTitle,
 } from '../helpers';
 import {
   PermissionsToCheck,
@@ -96,6 +97,7 @@ export default function ProcessModelShow() {
     const processResult = (result: ProcessModel) => {
       setProcessModel(result);
       setReloadModel(false);
+      setPageTitle([result.display_name]);
     };
     HttpService.makeCallToBackend({
       path: `/process-models/${modifiedProcessModelId}`,

spiffworkflow-frontend/src/routes/ReactFormEditor.tsx

@@ -9,8 +9,8 @@ import { Can } from '@casl/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
-import { modifyProcessIdentifierForPathParam } from '../helpers';
+import { modifyProcessIdentifierForPathParam, setPageTitle } from '../helpers';
-import { ProcessFile, PermissionsToCheck } from '../interfaces';
+import { ProcessFile, PermissionsToCheck, ProcessModel } from '../interfaces';
 import { Notification } from '../components/Notification';
 import useAPIError from '../hooks/UseApiError';
 import { usePermissionFetcher } from '../hooks/PermissionService';
@@ -38,6 +38,7 @@ export default function ReactFormEditor() {
   const [displaySaveFileMessage, setDisplaySaveFileMessage] =
     useState<boolean>(false);
 
+  const [processModel, setProcessModel] = useState<ProcessModel | null>(null);
   const [processModelFile, setProcessModelFile] = useState<ProcessFile | null>(
     null
   );
@@ -80,6 +81,11 @@ export default function ReactFormEditor() {
       setProcessModelFileContents(result.file_contents);
     };
 
+    HttpService.makeCallToBackend({
+      path: `/process-models/${modifiedProcessModelId}?include_file_references=true`,
+      successCallback: setProcessModel,
+    });
+
     if (params.file_name) {
       HttpService.makeCallToBackend({
         path: `/process-models/${modifiedProcessModelId}/files/${params.file_name}`,
@@ -88,6 +94,12 @@ export default function ReactFormEditor() {
     }
   }, [params, modifiedProcessModelId]);
 
+  useEffect(() => {
+    if (processModelFile && processModel) {
+      setPageTitle([processModel.display_name, processModelFile.name]);
+    }
+  }, [processModel, processModelFile]);
+
   const navigateToProcessModelFile = (file: ProcessFile) => {
     setDisplaySaveFileMessage(true);
     if (file.file_contents_hash) {

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -11,6 +11,7 @@ import {
   doNothing,
   modifyProcessIdentifierForPathParam,
   recursivelyChangeNullAndUndefined,
+  setPageTitle,
 } from '../helpers';
 import {
   BasicTask,
@@ -63,6 +64,7 @@ export default function TaskShow() {
   useEffect(() => {
     const processBasicTaskResult = (result: BasicTask) => {
       setBasicTask(result);
+      setPageTitle([result.name_for_display]);
       if (!result.can_complete) {
         navigateToInterstitial(result);
       }