Auto Reload the Process Lists on the home pages' in-progress, and complete tabs

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -32,7 +32,7 @@ import {
   convertSecondsToFormattedTimeHoursMinutes,
   getPageInfoFromSearchParams,
   getProcessModelFullIdentifierFromSearchParams,
-  modifyProcessIdentifierForPathParam,
+  modifyProcessIdentifierForPathParam, refreshAtInterval,
 } from '../helpers';
 
 import PaginationForTable from './PaginationForTable';
@@ -52,6 +52,9 @@ import {
 import ProcessModelSearch from './ProcessModelSearch';
 import ProcessInstanceReportSearch from './ProcessInstanceReportSearch';
 
+const REFRESH_INTERVAL = 5;
+const REFRESH_TIMEOUT = 600;
+
 type OwnProps = {
   filtersEnabled?: boolean;
   processModelFullIdentifier?: string;
@@ -61,6 +64,7 @@ type OwnProps = {
   reportIdentifier?: string;
   textToShowIfEmpty?: string;
   paginationClassName?: string;
+  autoReload?: boolean;
 };
 
 interface dateParameters {
@@ -76,6 +80,7 @@ export default function ProcessInstanceListTable({
   reportIdentifier,
   textToShowIfEmpty,
   paginationClassName,
+  autoReload = false,
 }: OwnProps) {
   const params = useParams();
   const [searchParams] = useSearchParams();
@@ -264,7 +269,8 @@ export default function ProcessInstanceListTable({
 
       getProcessInstances();
     }
-
+    const checkFiltersAndRun = () => {
+      console.log("Checking again!", filtersEnabled)
       if (filtersEnabled) {
         // populate process model selection
         HttpService.makeCallToBackend({
@@ -274,6 +280,14 @@ export default function ProcessInstanceListTable({
       } else {
         getProcessInstances();
       }
+    };
+
+    checkFiltersAndRun();
+    if (autoReload) {
+      refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, checkFiltersAndRun);
+    } else {
+    }
+
   }, [
     searchParams,
     params,
@@ -758,13 +772,13 @@ export default function ProcessInstanceListTable({
       <>
         <Grid fullWidth>
           <Column
+            className="filterIcon"
             sm={{ span: 1, offset: 3 }}
             md={{ span: 1, offset: 7 }}
             lg={{ span: 1, offset: 15 }}
           >
             <Button
               data-qa="filter-section-expand-toggle"
-              kind="ghost"
               renderIcon={Filter}
               iconDescription="Filter Options"
               hasIconOnly

spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx

@@ -6,7 +6,7 @@ import PaginationForTable from './PaginationForTable';
 import {
   convertSecondsToFormattedDateTime,
   getPageInfoFromSearchParams,
-  modifyProcessIdentifierForPathParam,
+  modifyProcessIdentifierForPathParam, refreshAtInterval,
 } from '../helpers';
 import HttpService from '../services/HttpService';
 import { PaginationObject } from '../interfaces';
@@ -14,6 +14,8 @@ import TableCellWithTimeAgoInWords from './TableCellWithTimeAgoInWords';
 
 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();
@@ -21,6 +23,7 @@ export default function MyOpenProcesses() {
   const [pagination, setPagination] = useState<PaginationObject | null>(null);
 
   useEffect(() => {
+    const getTasks = () => {
       const { page, perPage } = getPageInfoFromSearchParams(
         searchParams,
         PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
@@ -35,6 +38,9 @@ export default function MyOpenProcesses() {
         path: `/tasks/for-my-open-processes?per_page=${perPage}&page=${page}`,
         successCallback: setTasksFromResult,
       });
+    };
+    getTasks();
+    refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, getTasks);
   }, [searchParams]);
 
   const buildTable = () => {

spiffworkflow-frontend/src/routes/CompletedInstances.tsx

@@ -15,6 +15,7 @@ export default function CompletedInstances() {
         showReports={false}
         textToShowIfEmpty="You have no completed instances at this time."
         paginationClassName="with-large-bottom-margin"
+        autoReload
       />
       <h2>Tasks completed by me</h2>
       <p className="data-table-description">