added tasks for my open processes page w/ burnettk

spiffworkflow-backend/src/spiffworkflow_backend/routes/process_api_blueprint.py

@@ -1007,7 +1007,7 @@ def task_list_for_my_open_processes(page: int = 1, per_page: int = 100) -> flask
         # just need this add_columns to add the process_model_identifier. Then add everything back that was removed.
         .add_columns(
             ProcessInstanceModel.process_model_identifier,
-            ProcessInstanceModel.status,
+            ProcessInstanceModel.status.label("process_instance_status"),
             ProcessInstanceModel.updated_at_in_seconds,
             ProcessInstanceModel.created_at_in_seconds,
             GroupModel.identifier.label("group_identifier"),

spiffworkflow-frontend/src/routes/HomePageRoutes.tsx

@@ -5,6 +5,7 @@ import { Tabs, TabList, Tab } from '@carbon/react';
 import TaskShow from './TaskShow';
 import ErrorContext from '../contexts/ErrorContext';
 import MyTasks from './MyTasks';
+import TasksForMyOpenProcesses from './TasksForMyOpenProcesses';
 
 export default function HomePageRoutes() {
   const location = useLocation();
@@ -15,7 +16,7 @@ export default function HomePageRoutes() {
   useEffect(() => {
     setErrorMessage(null);
     let newSelectedTabIndex = 0;
-    if (location.pathname.match(/^\/tasks\/\d/)) {
+    if (location.pathname.match(/^\/tasks\/for-my-open-processes/)) {
       newSelectedTabIndex = 1;
     }
     setSelectedTabIndex(newSelectedTabIndex);
@@ -23,28 +24,23 @@ export default function HomePageRoutes() {
 
   return (
     <>
-      <Tabs
+      <Tabs selectedIndex={selectedTabIndex}>
-        selectedIndex={selectedTabIndex}
-        onChange={(event: any) => {
-          setSelectedTabIndex(event.selectedIndex);
-        }}
-      >
         <TabList aria-label="List of tabs">
           <Tab onClick={() => navigate('/tasks/my-tasks')}>My Tasks</Tab>
-          <Tab
+          <Tab onClick={() => navigate('/tasks/for-my-open-processes')}>
-            onClick={() =>
+            Tasks for My Open Processes
-              navigate('/tasks/9/4dc9f6e3-2256-47b2-9f78-6bc2f061db80')
-            }
-          >
-            One Task
           </Tab>
         </TabList>
       </Tabs>
       <br />
       <Routes>
         <Route path="/" element={<MyTasks />} />
-        <Route path="/my-tasks" element={<MyTasks />} />
+        <Route path="my-tasks" element={<MyTasks />} />
         <Route path=":process_instance_id/:task_id" element={<TaskShow />} />
+        <Route
+          path="for-my-open-processes"
+          element={<TasksForMyOpenProcesses />}
+        />
       </Routes>
     </>
   );

spiffworkflow-frontend/src/routes/TasksForMyOpenProcesses.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react';
+// @ts-ignore
+import { Button, Table } from '@carbon/react';
+import { Link, useSearchParams } from 'react-router-dom';
+import PaginationForTable from '../components/PaginationForTable';
+import {
+  convertSecondsToFormattedDateTime,
+  getPageInfoFromSearchParams,
+  modifyProcessModelPath,
+} from '../helpers';
+import HttpService from '../services/HttpService';
+import { PaginationObject } from '../interfaces';
+
+const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
+
+export default function MyOpenProcesses() {
+  const [searchParams] = useSearchParams();
+  const [tasks, setTasks] = useState([]);
+  const [pagination, setPagination] = useState<PaginationObject | null>(null);
+
+  useEffect(() => {
+    const { page, perPage } = getPageInfoFromSearchParams(
+      searchParams,
+      PER_PAGE_FOR_TASKS_ON_HOME_PAGE
+    );
+    const setTasksFromResult = (result: any) => {
+      setTasks(result.results);
+      setPagination(result.pagination);
+    };
+    HttpService.makeCallToBackend({
+      path: `/tasks/for-my-open-processes?per_page=${perPage}&page=${page}`,
+      successCallback: setTasksFromResult,
+    });
+  }, [searchParams]);
+
+  const buildTable = () => {
+    const rows = tasks.map((row) => {
+      const rowToUse = row as any;
+      const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.id}`;
+      const modifiedProcessModelIdentifier = modifyProcessModelPath(
+        rowToUse.process_model_identifier
+      );
+      return (
+        <tr key={rowToUse.id}>
+          <td>
+            <Link
+              data-qa="process-model-show-link"
+              to={`/admin/process-models/${modifiedProcessModelIdentifier}`}
+            >
+              {rowToUse.process_model_display_name}
+            </Link>
+          </td>
+          <td>
+            <Link
+              data-qa="process-instance-show-link"
+              to={`/admin/process-models/${modifiedProcessModelIdentifier}/process-instances/${rowToUse.process_instance_id}`}
+            >
+              View {rowToUse.process_instance_id}
+            </Link>
+          </td>
+          <td
+            title={`task id: ${rowToUse.name}, spiffworkflow task guid: ${rowToUse.id}`}
+          >
+            {rowToUse.task_title}
+          </td>
+          <td>{rowToUse.process_instance_status}</td>
+          <td>{rowToUse.group_identifier || '-'}</td>
+          <td>
+            {convertSecondsToFormattedDateTime(
+              rowToUse.created_at_in_seconds
+            ) || '-'}
+          </td>
+          <td>
+            {convertSecondsToFormattedDateTime(
+              rowToUse.updated_at_in_seconds
+            ) || '-'}
+          </td>
+          <td>
+            <Button
+              variant="primary"
+              href={taskUrl}
+              hidden={rowToUse.process_instance_status === 'suspended'}
+            >
+              Go
+            </Button>
+          </td>
+        </tr>
+      );
+    });
+    return (
+      <Table striped bordered>
+        <thead>
+          <tr>
+            <th>Process Model</th>
+            <th>Process Instance</th>
+            <th>Task Name</th>
+            <th>Process Instance Status</th>
+            <th>Assigned Group</th>
+            <th>Process Started</th>
+            <th>Process Updated</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    );
+  };
+
+  const tasksWaitingForMeComponent = () => {
+    if (pagination && pagination.total < 1) {
+      return null;
+    }
+    const { page, perPage } = getPageInfoFromSearchParams(
+      searchParams,
+      PER_PAGE_FOR_TASKS_ON_HOME_PAGE
+    );
+    return (
+      <>
+        <h1>Tasks for my open processes</h1>
+        <PaginationForTable
+          page={page}
+          perPage={perPage}
+          perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
+          pagination={pagination}
+          tableToDisplay={buildTable()}
+          path="/tasks/for-my-open-processes"
+        />
+      </>
+    );
+  };
+
+  const tasksWaitingForMe = tasksWaitingForMeComponent();
+
+  if (pagination) {
+    if (tasksWaitingForMe === null) {
+      return <p>No tasks are waiting for you.</p>;
+    }
+    return <>{tasksWaitingForMe}</>;
+  }
+  return null;
+}