renamed home page table headers and added filter table link to the completed instances page w/ burnettk

spiffworkflow-frontend/src/components/MyCompletedInstances.tsx

@@ -1,16 +0,0 @@
-import ProcessInstanceListTable from './ProcessInstanceListTable';
-
-const paginationQueryParamPrefix = 'my_completed_instances';
-
-export default function MyCompletedInstances() {
-  return (
-    <ProcessInstanceListTable
-      filtersEnabled={false}
-      paginationQueryParamPrefix={paginationQueryParamPrefix}
-      perPageOptions={[2, 5, 25]}
-      reportIdentifier="system_report_completed_instances_initiated_by_me"
-      showReports={false}
-      showActionsColumn
-    />
-  );
-}

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -1704,7 +1704,7 @@ export default function ProcessInstanceListTable({
     }
     return (
       <Grid fullWidth condensed>
-        <Column sm={{ span: 3 }} md={{ span: 4 }} lg={{ span: 3 }}>
+        <Column sm={{ span: 3 }} md={{ span: 7 }} lg={{ span: 15 }}>
           {headerElement}
         </Column>
         {filterButtonLink}

spiffworkflow-frontend/src/routes/CompletedInstances.tsx

@@ -19,12 +19,15 @@ export default function CompletedInstances() {
 
     return userGroups.map((userGroup: string) => {
       const titleText = `This is a list of instances with tasks that were completed by the ${userGroup} group.`;
-      return (
+      const headerElement = (
-        <>
         <h2 title={titleText} className="process-instance-table-header">
-            With tasks completed by <strong>{userGroup}</strong>
+          Instances with tasks completed by <strong>{userGroup}</strong>
         </h2>
+      );
+      return (
         <ProcessInstanceListTable
+          headerElement={headerElement}
+          showLinkToReport
           filtersEnabled={false}
           paginationQueryParamPrefix="group_completed_instances"
           paginationClassName="with-large-bottom-margin"
@@ -37,25 +40,33 @@ export default function CompletedInstances() {
           ]}
           showActionsColumn
         />
-        </>
       );
     });
   };
 
   const startedByMeTitleText =
     'This is a list of instances you started that are now complete.';
+  const startedByMeHeaderElement = (
+    <h2 title={startedByMeTitleText} className="process-instance-table-header">
+      Started by me
+    </h2>
+  );
   const withTasksCompletedByMeTitleText =
     'This is a list of instances where you have completed tasks.';
+  const withTasksHeaderElement = (
+    <h2
+      title={withTasksCompletedByMeTitleText}
+      className="process-instance-table-header"
+    >
+      Instances with tasks completed by me
+    </h2>
+  );
 
   return (
     <>
-      <h2
-        title={startedByMeTitleText}
-        className="process-instance-table-header"
-      >
-        Started by me
-      </h2>
       <ProcessInstanceListTable
+        headerElement={startedByMeHeaderElement}
+        showLinkToReport
         filtersEnabled={false}
         paginationQueryParamPrefix="my_completed_instances"
         perPageOptions={[2, 5, 25]}
@@ -66,13 +77,9 @@ export default function CompletedInstances() {
         autoReload
         showActionsColumn
       />
-      <h2
-        title={withTasksCompletedByMeTitleText}
-        className="process-instance-table-header"
-      >
-        With tasks completed by me
-      </h2>
       <ProcessInstanceListTable
+        headerElement={withTasksHeaderElement}
+        showLinkToReport
         filtersEnabled={false}
         paginationQueryParamPrefix="my_completed_tasks"
         perPageOptions={[2, 5, 25]}

spiffworkflow-frontend/src/routes/InProgressInstances.tsx

@@ -22,7 +22,7 @@ export default function InProgressInstances() {
       const titleText = `This is a list of instances with tasks that are waiting for the ${userGroup} group.`;
       const headerElement = (
         <h2 title={titleText} className="process-instance-table-header">
-          Waiting for <strong>{userGroup}</strong>
+          Instances with tasks waiting for <strong>{userGroup}</strong>
         </h2>
       );
       return (
@@ -61,7 +61,7 @@ export default function InProgressInstances() {
     'This is a list of instances that have tasks that you can complete.';
   const waitingForMeHeaderElement = (
     <h2 title={waitingForMeTitleText} className="process-instance-table-header">
-      Waiting for me
+      Instances with tasks waiting for me
     </h2>
   );