finished process instance list filter w/ burnettk

spiffworkflow-frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@babel/core": "^7.18.10",
         "@babel/plugin-transform-react-jsx": "^7.18.6",
         "@babel/preset-react": "^7.18.6",
+        "@carbon/icons-react": "^11.10.0",
         "@carbon/react": "^1.16.0",
         "@carbon/styles": "^1.16.0",
         "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",

spiffworkflow-frontend/package.json

@@ -6,6 +6,7 @@
     "@babel/core": "^7.18.10",
     "@babel/plugin-transform-react-jsx": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
+    "@carbon/icons-react": "^11.10.0",
     "@carbon/react": "^1.16.0",
     "@carbon/styles": "^1.16.0",
     "@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",

spiffworkflow-frontend/src/routes/HomePage.tsx

@@ -5,14 +5,14 @@ import { Link, useSearchParams } from 'react-router-dom';
 import PaginationForTable from '../components/PaginationForTable';
 import { getPageInfoFromSearchParams } from '../helpers';
 import HttpService from '../services/HttpService';
-import { RecentProcessModel } from '../interfaces';
+import { PaginationObject, RecentProcessModel } from '../interfaces';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 
 export default function HomePage() {
   const [searchParams] = useSearchParams();
   const [tasks, setTasks] = useState([]);
-  const [pagination, setPagination] = useState(null);
+  const [pagination, setPagination] = useState<PaginationObject | null>(null);
 
   useEffect(() => {
     const { page, perPage } = getPageInfoFromSearchParams(
@@ -126,10 +126,10 @@ export default function HomePage() {
     );
   };
 
-  const relevantProcessModelSection =
+  const tasksWaitingForMeComponent = () => {
-    recentProcessModels.length > 0 && buildRecentProcessModelSection();
+    if (pagination && pagination.total < 1) {
-
+      return null;
-  if (pagination) {
+    }
     const { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
       PER_PAGE_FOR_TASKS_ON_HOME_PAGE
@@ -145,6 +145,17 @@ export default function HomePage() {
           tableToDisplay={buildTable()}
           path="/tasks"
         />
+      </>
+    );
+  };
+
+  const relevantProcessModelSection =
+    recentProcessModels.length > 0 && buildRecentProcessModelSection();
+
+  if (pagination) {
+    return (
+      <>
+        {tasksWaitingForMeComponent()}
         {relevantProcessModelSection}
       </>
     );

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx

@@ -6,6 +6,8 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 
+// @ts-ignore
+import { Filter } from '@carbon/icons-react';
 import {
   Button,
   ButtonSet,
@@ -57,6 +59,7 @@ export default function ProcessInstanceList() {
   const [startTo, setStartTo] = useState<string>('');
   const [endFrom, setEndFrom] = useState<string>('');
   const [endTo, setEndTo] = useState<string>('');
+  const [showFilterOptions, setShowFilterOptions] = useState<boolean>(false);
 
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
 
@@ -352,7 +355,9 @@ export default function ProcessInstanceList() {
   };
 
   const filterOptions = () => {
-    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
+    if (!showFilterOptions) {
+      return null;
+    }
     return (
       <>
         <Grid fullWidth className="with-bottom-margin">
@@ -394,18 +399,6 @@ export default function ProcessInstanceList() {
             </ButtonSet>
           </Column>
         </Grid>
-        <Grid fullWidth>
-          <Column lg={16}>
-            <PaginationForTable
-              page={page}
-              perPage={perPage}
-              pagination={pagination}
-              tableToDisplay={buildTable()}
-              queryParamString={getSearchParamsAsQueryString()}
-              path="/admin/process-instances"
-            />
-          </Column>
-        </Grid>
       </>
     );
   };
@@ -480,12 +473,42 @@ export default function ProcessInstanceList() {
     );
   };
 
+  const toggleShowFilterOptions = () => {
+    setShowFilterOptions(!showFilterOptions);
+  };
+
   if (pagination) {
     const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <>
         {processInstanceTitleElement()}
+        <Grid fullWidth>
+          <Column lg={15} />
+          <Column lg={1}>
+            <Button
+              kind="ghost"
+              renderIcon={Filter}
+              iconDescription="Filter Options"
+              hasIconOnly
+              size="lg"
+              onClick={toggleShowFilterOptions}
+            />
+          </Column>
+        </Grid>
         {filterOptions()}
+        <br />
+        <Grid fullWidth>
+          <Column lg={16}>
+            <PaginationForTable
+              page={page}
+              perPage={perPage}
+              pagination={pagination}
+              tableToDisplay={buildTable()}
+              queryParamString={getSearchParamsAsQueryString()}
+              path="/admin/process-instances"
+            />
+          </Column>
+        </Grid>
       </>
     );
   }