Squashed 'spiffworkflow-frontend/' changes from ca2bc557f1..1df0c1a9b2

1df0c1a9b2 Change steps when viewing a process instance model (#18)
b471cbaa77 Prettier
01fc31aa27 From the logs, allow viewing a diagram in a previous state (#15)

git-subtree-dir: spiffworkflow-frontend
git-subtree-split: 1df0c1a9b2af5e22343da13f78e585096f877c65

src/routes/AdminRoutes.tsx

@@ -76,6 +76,10 @@ export default function AdminRoutes() {
           path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
           element={<ProcessInstanceShow />}
         />
+        <Route
+          path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id/:spiff_step"
+          element={<ProcessInstanceShow />}
+        />
         <Route
           path="process-models/:process_group_id/:process_model_id/process-instances/reports"
           element={<ProcessInstanceReportList />}

src/routes/ProcessInstanceLogList.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Table } from 'react-bootstrap';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams, Link } from 'react-router-dom';
 import PaginationForTable from '../components/PaginationForTable';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
@@ -39,7 +39,14 @@ export default function ProcessInstanceLogList() {
           <td>{rowToUse.bpmn_task_name}</td>
           <td>{rowToUse.bpmn_task_type}</td>
           <td>{rowToUse.username}</td>
-          <td>{convertSecondsToFormattedDate(rowToUse.timestamp)}</td>
+          <td>
+            <Link
+              data-qa="process-instance-show-link"
+              to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${rowToUse.process_instance_id}/${rowToUse.spiff_step}`}
+            >
+              {convertSecondsToFormattedDate(rowToUse.timestamp)}
+            </Link>
+          </td>
         </tr>
       );
     });

src/routes/ProcessInstanceShow.tsx

@@ -32,10 +32,16 @@ export default function ProcessInstanceShow() {
       path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`,
       successCallback: setProcessInstance,
     });
-    HttpService.makeCallToBackend({
-      path: `/process-instance/${params.process_instance_id}/tasks?all_tasks=true`,
-      successCallback: setTasks,
-    });
+    if (typeof params.spiff_step === 'undefined')
+      HttpService.makeCallToBackend({
+        path: `/process-instance/${params.process_instance_id}/tasks?all_tasks=true`,
+        successCallback: setTasks,
+      });
+    else
+      HttpService.makeCallToBackend({
+        path: `/process-instance/${params.process_instance_id}/tasks?all_tasks=true&spiff_step=${params.spiff_step}`,
+        successCallback: setTasks,
+      });
   }, [params]);
 
   const deleteProcessInstance = () => {
@@ -90,6 +96,62 @@ export default function ProcessInstanceShow() {
     return taskIds;
   };
 
+  const currentSpiffStep = (processInstanceToUse: any) => {
+    if (typeof params.spiff_step === 'undefined') {
+      return processInstanceToUse.spiff_step;
+    }
+
+    return Number(params.spiff_step);
+  };
+
+  const showingFirstSpiffStep = (processInstanceToUse: any) => {
+    return currentSpiffStep(processInstanceToUse) === 1;
+  };
+
+  const showingLastSpiffStep = (processInstanceToUse: any) => {
+    return (
+      currentSpiffStep(processInstanceToUse) === processInstanceToUse.spiff_step
+    );
+  };
+
+  const spiffStepLink = (
+    processInstanceToUse: any,
+    label: string,
+    distance: number
+  ) => {
+    return (
+      <li>
+        <Link
+          reloadDocument
+          data-qa="process-instance-step-link"
+          to={`/admin/process-models/${params.process_group_id}/${
+            params.process_model_id
+          }/process-instances/${params.process_instance_id}/${
+            currentSpiffStep(processInstanceToUse) + distance
+          }`}
+        >
+          {label}
+        </Link>
+      </li>
+    );
+  };
+
+  const previousStepLink = (processInstanceToUse: any) => {
+    if (showingFirstSpiffStep(processInstanceToUse)) {
+      return null;
+    }
+
+    return spiffStepLink(processInstanceToUse, 'Previous Step', -1);
+  };
+
+  const nextStepLink = (processInstanceToUse: any) => {
+    if (showingLastSpiffStep(processInstanceToUse)) {
+      return null;
+    }
+
+    return spiffStepLink(processInstanceToUse, 'Next Step', 1);
+  };
+
   const getInfoTag = (processInstanceToUse: any) => {
     const currentEndDate = convertSecondsToFormattedDate(
       processInstanceToUse.end_in_seconds
@@ -129,6 +191,12 @@ export default function ProcessInstanceShow() {
             Messages
           </Link>
         </li>
+        <li>
+          Step {currentSpiffStep(processInstanceToUse)} of{' '}
+          {processInstanceToUse.spiff_step}
+        </li>
+        {previousStepLink(processInstanceToUse)}
+        {nextStepLink(processInstanceToUse)}
       </ul>
     );
   };
@@ -228,7 +296,9 @@ export default function ProcessInstanceShow() {
   };
 
   const canEditTaskData = (task: any) => {
-    return task.state === 'READY';
+    return (
+      task.state === 'READY' && showingLastSpiffStep(processInstance as any)
+    );
   };
 
   const cancelEditingTaskData = () => {