split group task tables by group and created component for group tables

spiffworkflow-backend/src/spiffworkflow_backend/api.yml

@@ -1082,6 +1082,12 @@ paths:
 
   /tasks/for-my-groups:
     parameters:
+      - name: group_identifier
+        in: query
+        required: false
+        description: The identifier of the group to get the tasks for
+        schema:
+          type: string
       - name: page
         in: query
         required: false
@@ -1109,6 +1115,22 @@ paths:
                 items:
                   $ref: "#/components/schemas/Task"
 
+  /tasks/user-groups:
+    get:
+      tags:
+        - Process Instances
+      operationId: spiffworkflow_backend.routes.process_api_blueprint.task_list_user_groups
+      summary: Group identifiers for current logged in user
+      responses:
+        "200":
+          description: list of user groups
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/Task"
+
   /task-data/{modified_process_model_identifier}/{process_instance_id}:
     parameters:
       - name: modified_process_model_identifier

spiffworkflow-backend/src/spiffworkflow_backend/config/permissions/development.yml

@@ -50,6 +50,7 @@ groups:
         fin,
         fin1,
         harmeet,
+        jason,
         sasha,
         manuchehr,
         lead,

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

@@ -1301,7 +1301,6 @@ def task_list_for_my_open_processes(
 
 
 def task_list_for_me(page: int = 1, per_page: int = 100) -> flask.wrappers.Response:
-    """Task_list_for_processes_started_by_others."""
     return get_tasks(
         processes_started_by_user=False,
         has_lane_assignment_id=False,
@@ -1311,10 +1310,18 @@ def task_list_for_me(page: int = 1, per_page: int = 100) -> flask.wrappers.Respo
 
 
 def task_list_for_my_groups(
+    group_identifier: str = None,
     page: int = 1, per_page: int = 100
 ) -> flask.wrappers.Response:
-    """Task_list_for_processes_started_by_others."""
-    return get_tasks(processes_started_by_user=False, page=page, per_page=per_page)
+    return get_tasks(group_identifier=group_identifier, processes_started_by_user=False, page=page, per_page=per_page)
+
+
+def task_list_user_groups(
+) -> flask.wrappers.Response:
+    groups = g.user.groups
+    # TODO: filter out the default group and have a way to know what is the default group
+    group_identifiers = [i.identifier for i in groups if i.identifier != 'everybody']
+    return make_response(jsonify(sorted(group_identifiers)), 200)
 
 
 def get_tasks(
@@ -1322,6 +1329,7 @@ def get_tasks(
     has_lane_assignment_id: bool = True,
     page: int = 1,
     per_page: int = 100,
+    group_identifier: str = None,
 ) -> flask.wrappers.Response:
     """Get_tasks."""
     user_id = g.user.id
@@ -1358,9 +1366,14 @@ def get_tasks(
             ),
         )
         if has_lane_assignment_id:
-            active_tasks_query = active_tasks_query.filter(
-                ActiveTaskModel.lane_assignment_id.is_not(None)  # type: ignore
-            )
+            if group_identifier:
+                active_tasks_query = active_tasks_query.filter(
+                    GroupModel.identifier == group_identifier
+                )
+            else:
+                active_tasks_query = active_tasks_query.filter(
+                    ActiveTaskModel.lane_assignment_id.is_not(None)  # type: ignore
+                )
         else:
             active_tasks_query = active_tasks_query.filter(ActiveTaskModel.lane_assignment_id.is_(None))  # type: ignore
 

spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx

@@ -1,156 +1,17 @@
-import { useEffect, useState } from 'react';
-// @ts-ignore
-import { Button, Table } from '@carbon/react';
-import { Link, useSearchParams } from 'react-router-dom';
-import PaginationForTable from './PaginationForTable';
-import {
-  convertSecondsToFormattedDateTime,
-  getPageInfoFromSearchParams,
-  modifyProcessIdentifierForPathParam,
-  refreshAtInterval,
-} from '../helpers';
-import HttpService from '../services/HttpService';
-import { PaginationObject } from '../interfaces';
-import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
+import TasksTable from './TasksTable';
 
-const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 const paginationQueryParamPrefix = 'tasks_for_my_open_processes';
-const REFRESH_INTERVAL = 5;
-const REFRESH_TIMEOUT = 600;
 
 export default function MyOpenProcesses() {
-  const [searchParams] = useSearchParams();
-  const [tasks, setTasks] = useState([]);
-  const [pagination, setPagination] = useState<PaginationObject | null>(null);
-
-  useEffect(() => {
-    const getTasks = () => {
-      const { page, perPage } = getPageInfoFromSearchParams(
-        searchParams,
-        PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
-        undefined,
-        paginationQueryParamPrefix
-      );
-      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,
-      });
-    };
-    getTasks();
-    refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, getTasks);
-  }, [searchParams]);
-
-  const buildTable = () => {
-    const rows = tasks.map((row) => {
-      const rowToUse = row as any;
-      const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.task_id}`;
-      const modifiedProcessModelIdentifier =
-        modifyProcessIdentifierForPathParam(rowToUse.process_model_identifier);
-      return (
-        <tr key={rowToUse.id}>
-          <td>
-            <Link
-              data-qa="process-instance-show-link"
-              to={`/admin/process-instances/${modifiedProcessModelIdentifier}/${rowToUse.process_instance_id}`}
-              title={`View process instance ${rowToUse.process_instance_id}`}
-            >
-              {rowToUse.process_instance_id}
-            </Link>
-          </td>
-          <td>
-            <Link
-              data-qa="process-model-show-link"
-              to={`/admin/process-models/${modifiedProcessModelIdentifier}`}
-              title={rowToUse.process_model_identifier}
-            >
-              {rowToUse.process_model_display_name}
-            </Link>
-          </td>
-          <td
-            title={`task id: ${rowToUse.name}, spiffworkflow task guid: ${rowToUse.id}`}
-          >
-            {rowToUse.task_title}
-          </td>
-          <td>{rowToUse.group_identifier || '-'}</td>
-          <td>
-            {convertSecondsToFormattedDateTime(
-              rowToUse.created_at_in_seconds
-            ) || '-'}
-          </td>
-          <TableCellWithTimeAgoInWords
-            timeInSeconds={rowToUse.updated_at_in_seconds}
-          />
-          <td>
-            <Button
-              variant="primary"
-              href={taskUrl}
-              hidden={rowToUse.process_instance_status === 'suspended'}
-              disabled={!rowToUse.current_user_is_potential_owner}
-            >
-              Go
-            </Button>
-          </td>
-        </tr>
-      );
-    });
-    return (
-      <Table striped bordered>
-        <thead>
-          <tr>
-            <th>Id</th>
-            <th>Process</th>
-            <th>Task</th>
-            <th>Waiting For</th>
-            <th>Date Started</th>
-            <th>Last Updated</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>{rows}</tbody>
-      </Table>
-    );
-  };
-
-  const tasksComponent = () => {
-    if (pagination && pagination.total < 1) {
-      return (
-        <p className="no-results-message with-large-bottom-margin">
-          There are no tasks for processes you started at this time.
-        </p>
-      );
-    }
-    const { page, perPage } = getPageInfoFromSearchParams(
-      searchParams,
-      PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
-      undefined,
-      paginationQueryParamPrefix
-    );
-    return (
-      <PaginationForTable
-        page={page}
-        perPage={perPage}
-        perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
-        pagination={pagination}
-        tableToDisplay={buildTable()}
-        paginationQueryParamPrefix={paginationQueryParamPrefix}
-        paginationClassName="with-large-bottom-margin"
-      />
-    );
-  };
-
   return (
-    <>
-      <h2>My open instances</h2>
-      <p className="data-table-description">
-        These tasks are for processes you started which are not complete. You
-        may not have an action to take at this time. See below for tasks waiting
-        on you.
-      </p>
-      {tasksComponent()}
-    </>
+    <TasksTable
+      apiPath="/tasks/for-my-open-processes"
+      paginationQueryParamPrefix={paginationQueryParamPrefix}
+      tableTitle="My open instances"
+      tableDescription="These tasks are for processes you started which are not complete. You may not have an action to take at this time. See below for tasks waiting on you."
+      paginationClassName="with-large-bottom-margin"
+      autoReload
+      showStartedBy={false}
+    />
   );
 }

spiffworkflow-frontend/src/components/TasksTable.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useState } from 'react';
+// @ts-ignore
+import { Button, Table } from '@carbon/react';
+import { Link, useSearchParams } from 'react-router-dom';
+import PaginationForTable from './PaginationForTable';
+import {
+  convertSecondsToFormattedDateTime,
+  getPageInfoFromSearchParams,
+  modifyProcessIdentifierForPathParam,
+  refreshAtInterval,
+} from '../helpers';
+import HttpService from '../services/HttpService';
+import { PaginationObject, ProcessInstanceTask } from '../interfaces';
+import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
+
+const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
+const REFRESH_INTERVAL = 5;
+const REFRESH_TIMEOUT = 600;
+
+type OwnProps = {
+  apiPath: string;
+  tableTitle: string;
+  tableDescription: string;
+  additionalParams?: string;
+  paginationQueryParamPrefix?: string;
+  paginationClassName?: string;
+  autoReload?: boolean;
+  showStartedBy?: boolean;
+  showWaitingOn?: boolean;
+};
+
+export default function TasksTable({
+  apiPath,
+  tableTitle,
+  tableDescription,
+  additionalParams,
+  paginationQueryParamPrefix,
+  paginationClassName,
+  autoReload = false,
+  showStartedBy = true,
+  showWaitingOn = true,
+}: OwnProps) {
+  const [searchParams] = useSearchParams();
+  const [tasks, setTasks] = useState<ProcessInstanceTask[] | null>(null);
+  const [pagination, setPagination] = useState<PaginationObject | null>(null);
+
+  useEffect(() => {
+    const getTasks = () => {
+      const { page, perPage } = getPageInfoFromSearchParams(
+        searchParams,
+        PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
+        undefined,
+        paginationQueryParamPrefix
+      );
+      const setTasksFromResult = (result: any) => {
+        setTasks(result.results);
+        setPagination(result.pagination);
+      };
+      let params = `?per_page=${perPage}&page=${page}`;
+      if (additionalParams) {
+        params = `${params}&${additionalParams}`;
+      }
+      HttpService.makeCallToBackend({
+        path: `${apiPath}${params}`,
+        successCallback: setTasksFromResult,
+      });
+    };
+    getTasks();
+    if (autoReload) {
+      refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, getTasks);
+    }
+  }, [
+    searchParams,
+    additionalParams,
+    apiPath,
+    paginationQueryParamPrefix,
+    autoReload,
+  ]);
+
+  const buildTable = () => {
+    if (!tasks) {
+      return null;
+    }
+    const rows = tasks.map((row) => {
+      const rowToUse = row as any;
+      const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.task_id}`;
+      const modifiedProcessModelIdentifier =
+        modifyProcessIdentifierForPathParam(rowToUse.process_model_identifier);
+      return (
+        <tr key={rowToUse.id}>
+          <td>
+            <Link
+              data-qa="process-instance-show-link"
+              to={`/admin/process-instances/${modifiedProcessModelIdentifier}/${rowToUse.process_instance_id}`}
+              title={`View process instance ${rowToUse.process_instance_id}`}
+            >
+              {rowToUse.process_instance_id}
+            </Link>
+          </td>
+          <td>
+            <Link
+              data-qa="process-model-show-link"
+              to={`/admin/process-models/${modifiedProcessModelIdentifier}`}
+              title={rowToUse.process_model_identifier}
+            >
+              {rowToUse.process_model_display_name}
+            </Link>
+          </td>
+          <td
+            title={`task id: ${rowToUse.name}, spiffworkflow task guid: ${rowToUse.id}`}
+          >
+            {rowToUse.task_title}
+          </td>
+          {showStartedBy ? <td>{rowToUse.username}</td> : ''}
+          {showWaitingOn ? <td>{rowToUse.group_identifier || '-'}</td> : ''}
+          <td>
+            {convertSecondsToFormattedDateTime(
+              rowToUse.created_at_in_seconds
+            ) || '-'}
+          </td>
+          <TableCellWithTimeAgoInWords
+            timeInSeconds={rowToUse.updated_at_in_seconds}
+          />
+          <td>
+            <Button
+              variant="primary"
+              href={taskUrl}
+              hidden={rowToUse.process_instance_status === 'suspended'}
+              disabled={!rowToUse.current_user_is_potential_owner}
+            >
+              Go
+            </Button>
+          </td>
+        </tr>
+      );
+    });
+    let tableHeaders = ['Id', 'Process', 'Task'];
+    if (showStartedBy) {
+      tableHeaders.push('Started By');
+    }
+    if (showWaitingOn) {
+      tableHeaders.push('Waiting For');
+    }
+    tableHeaders = tableHeaders.concat([
+      'Date Started',
+      'Last Updated',
+      'Actions',
+    ]);
+    return (
+      <Table striped bordered>
+        <thead>
+          <tr>
+            {tableHeaders.map((tableHeader: string) => {
+              return <th>{tableHeader}</th>;
+            })}
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    );
+  };
+
+  const tasksComponent = () => {
+    if (pagination && pagination.total < 1) {
+      return (
+        <p className="no-results-message with-large-bottom-margin">
+          Your groups have no task assignments at this time.
+        </p>
+      );
+    }
+    const { page, perPage } = getPageInfoFromSearchParams(
+      searchParams,
+      PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
+      undefined,
+      paginationQueryParamPrefix
+    );
+    return (
+      <PaginationForTable
+        page={page}
+        perPage={perPage}
+        perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
+        pagination={pagination}
+        tableToDisplay={buildTable()}
+        paginationQueryParamPrefix={paginationQueryParamPrefix}
+        paginationClassName={paginationClassName}
+      />
+    );
+  };
+
+  if (tasks) {
+    return (
+      <>
+        <h2>{tableTitle}</h2>
+        <p className="data-table-description">{tableDescription}</p>
+        {tasksComponent()}
+      </>
+    );
+  }
+  return null;
+}

spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx

@@ -1,149 +1,15 @@
-import { useEffect, useState } from 'react';
-// @ts-ignore
-import { Button, Table } from '@carbon/react';
-import { Link, useSearchParams } from 'react-router-dom';
-import PaginationForTable from './PaginationForTable';
-import {
-  convertSecondsToFormattedDateTime,
-  getPageInfoFromSearchParams,
-  modifyProcessIdentifierForPathParam,
-} from '../helpers';
-import HttpService from '../services/HttpService';
-import { PaginationObject } from '../interfaces';
-import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
-
-const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
+import TasksTable from './TasksTable';
 
 export default function TasksWaitingForMe() {
-  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,
-      undefined,
-      'tasks_waiting_for_me'
-    );
-    const setTasksFromResult = (result: any) => {
-      setTasks(result.results);
-      setPagination(result.pagination);
-    };
-    HttpService.makeCallToBackend({
-      path: `/tasks/for-me?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.task_id}`;
-      const modifiedProcessModelIdentifier =
-        modifyProcessIdentifierForPathParam(rowToUse.process_model_identifier);
-      return (
-        <tr key={rowToUse.id}>
-          <td>
-            <Link
-              data-qa="process-instance-show-link"
-              to={`/admin/${modifiedProcessModelIdentifier}/${rowToUse.process_instance_id}`}
-              title={`View process instance ${rowToUse.process_instance_id}`}
-            >
-              {rowToUse.process_instance_id}
-            </Link>
-          </td>
-          <td>
-            <Link
-              data-qa="process-model-show-link"
-              to={`/admin/process-models/${modifiedProcessModelIdentifier}`}
-              title={rowToUse.process_model_identifier}
-            >
-              {rowToUse.process_model_display_name}
-            </Link>
-          </td>
-          <td
-            title={`task id: ${rowToUse.name}, spiffworkflow task guid: ${rowToUse.id}`}
-          >
-            {rowToUse.task_title}
-          </td>
-          <td>{rowToUse.username}</td>
-          <td>{rowToUse.group_identifier || '-'}</td>
-          <td>
-            {convertSecondsToFormattedDateTime(
-              rowToUse.created_at_in_seconds
-            ) || '-'}
-          </td>
-          <TableCellWithTimeAgoInWords
-            timeInSeconds={rowToUse.updated_at_in_seconds}
-          />
-          <td>
-            <Button
-              variant="primary"
-              href={taskUrl}
-              hidden={rowToUse.process_instance_status === 'suspended'}
-              disabled={!rowToUse.current_user_is_potential_owner}
-            >
-              Go
-            </Button>
-          </td>
-        </tr>
-      );
-    });
-    return (
-      <Table striped bordered>
-        <thead>
-          <tr>
-            <th>Id</th>
-            <th>Process</th>
-            <th>Task</th>
-            <th>Started By</th>
-            <th>Waiting For</th>
-            <th>Date Started</th>
-            <th>Last Updated</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>{rows}</tbody>
-      </Table>
-    );
-  };
-
-  const tasksComponent = () => {
-    if (pagination && pagination.total < 1) {
-      return (
-        <p className="no-results-message with-large-bottom-margin">
-          You have no task assignments at this time.
-        </p>
-      );
-    }
-    const { page, perPage } = getPageInfoFromSearchParams(
-      searchParams,
-      PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
-      undefined,
-      'tasks_waiting_for_me'
-    );
-    return (
-      <PaginationForTable
-        page={page}
-        perPage={perPage}
-        perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
-        pagination={pagination}
-        tableToDisplay={buildTable()}
-        paginationQueryParamPrefix="tasks_waiting_for_me"
-        paginationClassName="with-large-bottom-margin"
-      />
-    );
-  };
-
   return (
-    <>
-      <h2>Tasks waiting for me</h2>
-      <p className="data-table-description">
-        These processes are waiting on you to complete the next task. All are
-        processes created by others that are now actionable by you.
-      </p>
-      {tasksComponent()}
-    </>
+    <TasksTable
+      apiPath="/tasks/for-me"
+      paginationQueryParamPrefix="tasks_waiting_for_me"
+      tableTitle="Tasks waiting for me"
+      tableDescription="These processes are waiting on you to complete the next task. All are processes created by others that are now actionable by you."
+      paginationClassName="with-large-bottom-margin"
+      autoReload
+      showWaitingOn={false}
+    />
   );
 }

spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx

@@ -1,156 +1,39 @@
 import { useEffect, useState } from 'react';
-// @ts-ignore
-import { Button, Table } from '@carbon/react';
-import { Link, useSearchParams } from 'react-router-dom';
-import PaginationForTable from './PaginationForTable';
-import {
-  convertSecondsToFormattedDateTime,
-  getPageInfoFromSearchParams,
-  modifyProcessIdentifierForPathParam,
-  refreshAtInterval,
-} from '../helpers';
 import HttpService from '../services/HttpService';
-import { PaginationObject } from '../interfaces';
-import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
-
-const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
-const paginationQueryParamPrefix = 'tasks_waiting_for_my_groups';
-const REFRESH_INTERVAL = 5;
-const REFRESH_TIMEOUT = 600;
+import TasksTable from './TasksTable';
 
 export default function TasksWaitingForMyGroups() {
-  const [searchParams] = useSearchParams();
-  const [tasks, setTasks] = useState([]);
-  const [pagination, setPagination] = useState<PaginationObject | null>(null);
+  const [userGroups, setUserGroups] = useState<string[] | null>(null);
 
   useEffect(() => {
-    const getTasks = () => {
-      const { page, perPage } = getPageInfoFromSearchParams(
-        searchParams,
-        PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
-        undefined,
-        paginationQueryParamPrefix
-      );
-      const setTasksFromResult = (result: any) => {
-        setTasks(result.results);
-        setPagination(result.pagination);
-      };
-      HttpService.makeCallToBackend({
-        path: `/tasks/for-my-groups?per_page=${perPage}&page=${page}`,
-        successCallback: setTasksFromResult,
-      });
-    };
-    getTasks();
-    refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, getTasks);
-  }, [searchParams]);
+    HttpService.makeCallToBackend({
+      path: `/tasks/user-groups`,
+      successCallback: setUserGroups,
+    });
+  }, [setUserGroups]);
+  const tableComponents = () => {
+    if (!userGroups) {
+      return null;
+    }
 
-  const buildTable = () => {
-    const rows = tasks.map((row) => {
-      const rowToUse = row as any;
-      const taskUrl = `/tasks/${rowToUse.process_instance_id}/${rowToUse.task_id}`;
-      const modifiedProcessModelIdentifier =
-        modifyProcessIdentifierForPathParam(rowToUse.process_model_identifier);
+    return userGroups.map((userGroup: string) => {
       return (
-        <tr key={rowToUse.id}>
-          <td>
-            <Link
-              data-qa="process-instance-show-link"
-              to={`/admin/process-instances/${modifiedProcessModelIdentifier}/${rowToUse.process_instance_id}`}
-              title={`View process instance ${rowToUse.process_instance_id}`}
-            >
-              {rowToUse.process_instance_id}
-            </Link>
-          </td>
-          <td>
-            <Link
-              data-qa="process-model-show-link"
-              to={`/admin/process-models/${modifiedProcessModelIdentifier}`}
-              title={rowToUse.process_model_identifier}
-            >
-              {rowToUse.process_model_display_name}
-            </Link>
-          </td>
-          <td
-            title={`task id: ${rowToUse.name}, spiffworkflow task guid: ${rowToUse.id}`}
-          >
-            {rowToUse.task_title}
-          </td>
-          <td>{rowToUse.username}</td>
-          <td>{rowToUse.group_identifier || '-'}</td>
-          <td>
-            {convertSecondsToFormattedDateTime(
-              rowToUse.created_at_in_seconds
-            ) || '-'}
-          </td>
-          <TableCellWithTimeAgoInWords
-            timeInSeconds={rowToUse.updated_at_in_seconds}
-          />
-          <td>
-            <Button
-              variant="primary"
-              href={taskUrl}
-              hidden={rowToUse.process_instance_status === 'suspended'}
-              disabled={!rowToUse.current_user_is_potential_owner}
-            >
-              Go
-            </Button>
-          </td>
-        </tr>
+        <TasksTable
+          apiPath="/tasks/for-my-groups"
+          additionalParams={`group_identifier=${userGroup}`}
+          paginationQueryParamPrefix={`group-tasks-${userGroup}`}
+          tableTitle={`Tasks waiting for ${userGroup} group`}
+          tableDescription={`This is a list of tasks for the ${userGroup} group and can be completed by any member of the group.`}
+          paginationClassName="with-large-bottom-margin"
+          autoReload
+          showWaitingOn={false}
+        />
       );
     });
-    return (
-      <Table striped bordered>
-        <thead>
-          <tr>
-            <th>Id</th>
-            <th>Process</th>
-            <th>Task</th>
-            <th>Started By</th>
-            <th>Waiting For</th>
-            <th>Date Started</th>
-            <th>Last Updated</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>{rows}</tbody>
-      </Table>
-    );
   };
 
-  const tasksComponent = () => {
-    if (pagination && pagination.total < 1) {
-      return (
-        <p className="no-results-message">
-          Your groups have no task assignments at this time.
-        </p>
-      );
-    }
-    const { page, perPage } = getPageInfoFromSearchParams(
-      searchParams,
-      PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
-      undefined,
-      paginationQueryParamPrefix
-    );
-    return (
-      <PaginationForTable
-        page={page}
-        perPage={perPage}
-        perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
-        pagination={pagination}
-        tableToDisplay={buildTable()}
-        paginationQueryParamPrefix={paginationQueryParamPrefix}
-      />
-    );
-  };
-
-  return (
-    <>
-      <h2>Tasks waiting for my groups</h2>
-      <p className="data-table-description">
-        This is a list of tasks for groups you belong to that can be completed
-        by any member of the group.
-      </p>
-      {tasksComponent()}
-    </>
-  );
+  if (userGroups) {
+    return <>{tableComponents()}</>;
+  }
+  return null;
 }

spiffworkflow-frontend/src/helpers.tsx

@@ -203,10 +203,10 @@ export const refreshAtInterval = (
   timeout: number,
   func: Function
 ) => {
-  const intervalRef = setInterval(() => func(), interval * 1000);
-  const timeoutRef = setTimeout(
-    () => clearInterval(intervalRef),
-    timeout * 1000
-  );
-  return [intervalRef, timeoutRef];
+  // const intervalRef = setInterval(() => func(), interval * 1000);
+  // const timeoutRef = setTimeout(
+  //   () => clearInterval(intervalRef),
+  //   timeout * 1000
+  // );
+  // return [intervalRef, timeoutRef];
 };

spiffworkflow-frontend/src/interfaces.ts

@@ -11,6 +11,16 @@ export interface RecentProcessModel {
   processModelDisplayName: string;
 }
 
+export interface ProcessInstanceTask {
+  id: number;
+  process_model_display_name: string;
+  process_model_identifier: string;
+  task_title: string;
+  lane_assignment_id: string;
+  process_instance_status: number;
+  updated_at_in_seconds: number;
+}
+
 export interface ProcessReference {
   name: string; // The process or decision Display name.
   identifier: string; // The unique id of the process