From 0eeebc497bf0a6a2183dde28d0399cc419203069 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Wed, 23 Nov 2022 10:23:26 -0500
Subject: [PATCH] some updates to ui homepage to align more with notion doc

---
 .../components/ProcessInstanceListTable.tsx   |  7 ++++-
 .../components/TasksForMyOpenProcesses.tsx    | 12 ++++---
 .../src/components/TasksWaitingForMe.tsx      | 31 +++++++++----------
 .../components/TasksWaitingForMyGroups.tsx    | 31 +++++++++----------
 .../src/routes/CompletedInstances.tsx         |  3 ++
 .../src/routes/HomePageRoutes.tsx             | 12 +++----
 6 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
index 20a2b2bb4..621d64beb 100644
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@@ -58,6 +58,7 @@ type OwnProps = {
   perPageOptions?: number[];
   showReports?: boolean;
   reportIdentifier?: string;
+  textToShowIfEmpty?: string;
 };
 
 interface dateParameters {
@@ -71,6 +72,7 @@ export default function ProcessInstanceListTable({
   perPageOptions,
   showReports = true,
   reportIdentifier,
+  textToShowIfEmpty,
 }: OwnProps) {
   const params = useParams();
   const [searchParams] = useSearchParams();
@@ -753,7 +755,7 @@ export default function ProcessInstanceListTable({
     );
   };
 
-  if (pagination) {
+  if (pagination && (!textToShowIfEmpty || pagination.total > 0)) {
     // eslint-disable-next-line prefer-const
     let { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
@@ -780,6 +782,9 @@ export default function ProcessInstanceListTable({
       </>
     );
   }
+  if (textToShowIfEmpty) {
+    return <>{textToShowIfEmpty}</>;
+  }
 
   return null;
 }
diff --git a/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx b/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
index a79bc95bf..a60f7d833 100644
--- a/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
+++ b/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
@@ -111,7 +111,7 @@ export default function MyOpenProcesses() {
 
   const tasksComponent = () => {
     if (pagination && pagination.total < 1) {
-      return null;
+      return <p>No tasks waiting for you</p>;
     }
     const { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
@@ -134,8 +134,10 @@ export default function MyOpenProcesses() {
     );
   };
 
-  if (pagination) {
-    return tasksComponent();
-  }
-  return null;
+  return (
+    <>
+      <h1>Tasks for my open processes</h1>
+      {tasksComponent()}
+    </>
+  );
 }
diff --git a/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx b/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
index 157398a25..d4765ef93 100644
--- a/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
+++ b/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
@@ -112,7 +112,7 @@ export default function TasksWaitingForMe() {
 
   const tasksComponent = () => {
     if (pagination && pagination.total < 1) {
-      return null;
+      return <p>No tasks waiting for you</p>;
     }
     const { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
@@ -121,22 +121,21 @@ export default function TasksWaitingForMe() {
       'tasks_waiting_for_me'
     );
     return (
-      <>
-        <h1>Tasks waiting for me</h1>
-        <PaginationForTable
-          page={page}
-          perPage={perPage}
-          perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
-          pagination={pagination}
-          tableToDisplay={buildTable()}
-          paginationQueryParamPrefix="tasks_waiting_for_me"
-        />
-      </>
+      <PaginationForTable
+        page={page}
+        perPage={perPage}
+        perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
+        pagination={pagination}
+        tableToDisplay={buildTable()}
+        paginationQueryParamPrefix="tasks_waiting_for_me"
+      />
     );
   };
 
-  if (pagination) {
-    return tasksComponent();
-  }
-  return null;
+  return (
+    <>
+      <h1>Tasks waiting for me</h1>
+      {tasksComponent()}
+    </>
+  );
 }
diff --git a/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx b/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
index 233e3d1df..993ad8001 100644
--- a/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
+++ b/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
@@ -113,7 +113,7 @@ export default function TasksWaitingForMyGroups() {
 
   const tasksComponent = () => {
     if (pagination && pagination.total < 1) {
-      return null;
+      return <p>No tasks waiting for you</p>;
     }
     const { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
@@ -122,22 +122,21 @@ export default function TasksWaitingForMyGroups() {
       paginationQueryParamPrefix
     );
     return (
-      <>
-        <h1>Tasks waiting for my groups</h1>
-        <PaginationForTable
-          page={page}
-          perPage={perPage}
-          perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
-          pagination={pagination}
-          tableToDisplay={buildTable()}
-          paginationQueryParamPrefix={paginationQueryParamPrefix}
-        />
-      </>
+      <PaginationForTable
+        page={page}
+        perPage={perPage}
+        perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
+        pagination={pagination}
+        tableToDisplay={buildTable()}
+        paginationQueryParamPrefix={paginationQueryParamPrefix}
+      />
     );
   };
 
-  if (pagination) {
-    return tasksComponent();
-  }
-  return null;
+  return (
+    <>
+      <h1>Tasks waiting for my groups</h1>
+      {tasksComponent()}
+    </>
+  );
 }
diff --git a/spiffworkflow-frontend/src/routes/CompletedInstances.tsx b/spiffworkflow-frontend/src/routes/CompletedInstances.tsx
index de5036776..2073bc60d 100644
--- a/spiffworkflow-frontend/src/routes/CompletedInstances.tsx
+++ b/spiffworkflow-frontend/src/routes/CompletedInstances.tsx
@@ -10,6 +10,7 @@ export default function CompletedInstances() {
         perPageOptions={[2, 5, 25]}
         reportIdentifier="system_report_instances_initiated_by_me"
         showReports={false}
+        textToShowIfEmpty="No completed instances"
       />
       <h1 style={{ marginTop: '1em' }}>With Tasks Completed By Me</h1>
       <ProcessInstanceListTable
@@ -18,6 +19,7 @@ export default function CompletedInstances() {
         perPageOptions={[2, 5, 25]}
         reportIdentifier="system_report_instances_with_tasks_completed_by_me"
         showReports={false}
+        textToShowIfEmpty="No completed instances"
       />
       <h1 style={{ marginTop: '1em' }}>With Tasks Completed By My Group</h1>
       <ProcessInstanceListTable
@@ -26,6 +28,7 @@ export default function CompletedInstances() {
         perPageOptions={[2, 5, 25]}
         reportIdentifier="system_report_instances_with_tasks_completed_by_my_groups"
         showReports={false}
+        textToShowIfEmpty="No completed instances"
       />
     </>
   );
diff --git a/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx b/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
index 420484515..10d98f956 100644
--- a/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
@@ -18,12 +18,10 @@ export default function HomePageRoutes() {
   useEffect(() => {
     setErrorMessage(null);
     let newSelectedTabIndex = 0;
-    if (location.pathname.match(/^\/tasks\/grouped\b/)) {
+    if (location.pathname.match(/^\/tasks\/completed-instances\b/)) {
       newSelectedTabIndex = 1;
-    } else if (location.pathname.match(/^\/tasks\/completed-instances\b/)) {
-      newSelectedTabIndex = 2;
     } else if (location.pathname.match(/^\/tasks\/create-new-instance\b/)) {
-      newSelectedTabIndex = 3;
+      newSelectedTabIndex = 2;
     }
     setSelectedTabIndex(newSelectedTabIndex);
   }, [location, setErrorMessage]);
@@ -36,8 +34,8 @@ export default function HomePageRoutes() {
       <>
         <Tabs selectedIndex={selectedTabIndex}>
           <TabList aria-label="List of tabs">
-            <Tab onClick={() => navigate('/tasks/my-tasks')}>My Tasks</Tab>
-            <Tab onClick={() => navigate('/tasks/grouped')}>Grouped Tasks</Tab>
+            {/* <Tab onClick={() => navigate('/tasks/my-tasks')}>My Tasks</Tab> */}
+            <Tab onClick={() => navigate('/tasks/grouped')}>Tasks</Tab>
             <Tab onClick={() => navigate('/tasks/completed-instances')}>
               Completed Instances
             </Tab>
@@ -55,7 +53,7 @@ export default function HomePageRoutes() {
     <>
       {renderTabs()}
       <Routes>
-        <Route path="/" element={<MyTasks />} />
+        <Route path="/" element={<GroupedTasks />} />
         <Route path="my-tasks" element={<MyTasks />} />
         <Route path=":process_instance_id/:task_id" element={<TaskShow />} />
         <Route path="grouped" element={<GroupedTasks />} />