wip.

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -744,7 +744,7 @@ export default function ProcessInstanceListTable({
       undefined,
       paginationQueryParamPrefix
     );
-    page = 1; // Reset page back to 0
+    page = 1;
 
     const newReportMetadata = getNewReportMetadataBasedOnPageWidgets();
     setListHasBeenFiltered(true);

spiffworkflow-frontend/src/components/ProcessInterstitial.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 // @ts-ignore
 import { Loading, Grid, Column, Button } from '@carbon/react';
@@ -7,53 +7,59 @@ import { BACKEND_BASE_URL } from '../config';
 import { getBasicHeaders } from '../services/HttpService';
 
 // @ts-ignore
-import InstructionsForEndUser from '../components/InstructionsForEndUser';
+import InstructionsForEndUser from './InstructionsForEndUser';
-import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
+import ProcessBreadcrumb from './ProcessBreadcrumb';
 import { ProcessInstance, ProcessInstanceTask } from '../interfaces';
 import useAPIError from '../hooks/UseApiError';
 
-export default function ProcessInterstitial() {
+type OwnProps = {
+  processInstanceId: number;
+  modifiedProcessModelIdentifier: string;
+  allowRedirect: boolean;
+};
+
+export default function ProcessInterstitial({
+  processInstanceId,
+  modifiedProcessModelIdentifier,
+  allowRedirect,
+}: OwnProps) {
   const [data, setData] = useState<any[]>([]);
   const [lastTask, setLastTask] = useState<any>(null);
+  const [state, setState] = useState<string>('RUNNING');
   const [processInstance, setProcessInstance] =
     useState<ProcessInstance | null>(null);
-  const [state, setState] = useState<string>('RUNNING');
+  const processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${modifiedProcessModelIdentifier}`;
-  const params = useParams();
   const navigate = useNavigate();
   const userTasks = useMemo(() => {
     return ['User Task', 'Manual Task'];
   }, []);
   const { addError } = useAPIError();
 
-  const processInstanceShowPageBaseUrl = `/admin/process-instances/for-me/${params.modified_process_model_identifier}`;
-
   useEffect(() => {
-    fetchEventSource(
+    fetchEventSource(`${BACKEND_BASE_URL}/tasks/${processInstanceId}`, {
-      `${BACKEND_BASE_URL}/tasks/${params.process_instance_id}`,
+      headers: getBasicHeaders(),
-      {
+      onmessage(ev) {
-        headers: getBasicHeaders(),
+        const retValue = JSON.parse(ev.data);
-        onmessage(ev) {
+        if (retValue.type === 'error') {
-          const retValue = JSON.parse(ev.data);
+          addError(retValue.error);
-          if (retValue.type === 'error') {
+        } else if (retValue.type === 'task') {
-            addError(retValue.error);
+          setData((prevData) => [retValue.task, ...prevData]);
-          } else if (retValue.type === 'task') {
+          setLastTask(retValue.task);
-            setData((prevData) => [retValue.task, ...prevData]);
+        } else if (retValue.type === 'unrunnable_instance') {
-            setLastTask(retValue.task);
+          setProcessInstance(retValue.unrunnable_instance);
-          } else if (retValue.type === 'unrunnable_instance') {
+        }
-            setProcessInstance(retValue.unrunnable_instance);
+      },
-          }
+      onclose() {
-        },
+        setState('CLOSED');
-        onclose() {
+      },
-          setState('CLOSED');
+    });
-        },
-      }
-    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // it is critical to only run this once.
 
   const shouldRedirect = useCallback(
     (myTask: ProcessInstanceTask): boolean => {
       return (
+        allowRedirect &&
         !processInstance &&
         myTask &&
         myTask.can_complete &&
@@ -166,6 +172,9 @@ export default function ProcessInterstitial() {
       if (shouldRedirect(myTask)) {
         return <div>Redirecting you to the next task now ...</div>;
       }
+      if (myTask && myTask.can_complete && userTasks.includes(myTask.type)) {
+        return `The task ${myTask.title} is ready for you to complete.`;
+      }
       if (myTask.error_message) {
         return <div>{myTask.error_message}</div>;
       }
@@ -201,8 +210,8 @@ export default function ProcessInterstitial() {
               linkLastItem: true,
             },
             [
-              `Process Instance: ${params.process_instance_id}`,
+              `Process Instance: ${processInstanceId}`,
-              `${processInstanceShowPageBaseUrl}/${params.process_instance_id}`,
+              `${processInstanceShowPageBaseUrl}/${processInstanceId}`,
             ],
           ]}
         />

spiffworkflow-frontend/src/interfaces.ts

@@ -23,6 +23,7 @@ export interface RecentProcessModel {
 
 export interface TaskPropertiesJson {
   parent: string;
+  last_state_change: number;
 }
 
 export interface TaskDefinitionPropertiesJson {

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -53,6 +53,7 @@ import { usePermissionFetcher } from '../hooks/PermissionService';
 import ProcessInstanceClass from '../classes/ProcessInstanceClass';
 import TaskListTable from '../components/TaskListTable';
 import useAPIError from '../hooks/UseApiError';
+import ProcessInterstitial from "../components/ProcessInterstitial";
 
 type OwnProps = {
   variant: string;
@@ -1092,23 +1093,9 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
 
     return (
       <>
-        <ProcessBreadcrumb
+        <ProcessInterstitial processInstanceId={processInstance.id} modifiedProcessModelIdentifier={String(modifiedProcessModelId)} allowRedirect={false}/>
-          hotCrumbs={[
+        {buttonIcons()}
-            ['Process Groups', '/admin'],
+        <br />
-            {
-              entityToExplode: processModelId,
-              entityType: 'process-model-id',
-              linkLastItem: true,
-            },
-            [`Process Instance Id: ${processInstance.id}`],
-          ]}
-        />
-        <Stack orientation="horizontal" gap={1}>
-          <h1 className="with-icons">
-            Process Instance Id: {processInstance.id}
-          </h1>
-          {buttonIcons()}
-        </Stack>
         <br />
         <br />
         <Grid condensed fullWidth>

spiffworkflow-frontend/src/routes/ProcessInterstitialPage.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+// @ts-ignore
+import ProcessInterstitial from '../components/ProcessInterstitial';
+
+export default function ProcessInterstitialPage() {
+  const params = useParams();
+  // @ts-ignore
+  return (
+    <ProcessInterstitial
+      processInstanceId={Number(params.process_instance_id)}
+      modifiedProcessModelIdentifier={String(
+        params.modified_process_model_identifier
+      )}
+      allowRedirect
+    />
+  );
+}

spiffworkflow-frontend/src/routes/ProcessRoutes.tsx

@@ -1,13 +1,13 @@
 import { Route, Routes } from 'react-router-dom';
 // @ts-ignore
-import ProcessInterstitial from './ProcessInterstitial';
+import ProcessInterstitialPage from './ProcessInterstitialPage';
 
 export default function ProcessRoutes() {
   return (
     <Routes>
       <Route
         path=":modified_process_model_identifier/:process_instance_id/interstitial"
-        element={<ProcessInterstitial />}
+        element={<ProcessInterstitialPage />}
       />
     </Routes>
   );