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,16 +269,25 @@ export default function ProcessInstanceListTable({
 
       getProcessInstances();
     }
+    const checkFiltersAndRun = () => {
+      console.log("Checking again!", filtersEnabled)
+      if (filtersEnabled) {
+        // populate process model selection
+        HttpService.makeCallToBackend({
+          path: `/process-models?per_page=1000&recursive=true`,
+          successCallback: processResultForProcessModels,
+        });
+      } else {
+        getProcessInstances();
+      }
+    };
 
-    if (filtersEnabled) {
-      // populate process model selection
-      HttpService.makeCallToBackend({
-        path: `/process-models?per_page=1000&recursive=true`,
-        successCallback: processResultForProcessModels,
-      });
+    checkFiltersAndRun();
+    if (autoReload) {
+      refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, checkFiltersAndRun);
     } else {
-      getProcessInstances();
     }
+
   }, [
     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,20 +23,24 @@ export default function MyOpenProcesses() {
   const [pagination, setPagination] = useState<PaginationObject | null>(null);
 
   useEffect(() => {
-    const { page, perPage } = getPageInfoFromSearchParams(
-      searchParams,
-      PER_PAGE_FOR_TASKS_ON_HOME_PAGE,
-      undefined,
-      paginationQueryParamPrefix
-    );
-    const setTasksFromResult = (result: any) => {
-      setTasks(result.results);
-      setPagination(result.pagination);
+    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,
+      });
     };
-    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 = () => {

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">