added descriptions to task tables w/ burnettk

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -23,7 +23,6 @@ import {
   TimePicker,
   // @ts-ignore
 } from '@carbon/react';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
 import {
   convertDateAndTimeStringsToSeconds,
@@ -59,7 +58,7 @@ type OwnProps = {
   perPageOptions?: number[];
   showReports?: boolean;
   reportIdentifier?: string;
-  textToShowIfEmpty?: ReactElement;
+  textToShowIfEmpty?: string;
 };
 
 interface dateParameters {
@@ -784,7 +783,7 @@ export default function ProcessInstanceListTable({
     );
   }
   if (textToShowIfEmpty) {
-    return textToShowIfEmpty;
+    return <p className="no-results-message">{textToShowIfEmpty}</p>;
   }
 
   return null;

spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx

@@ -111,7 +111,11 @@ export default function MyOpenProcesses() {
 
   const tasksComponent = () => {
     if (pagination && pagination.total < 1) {
-      return <p>No tasks waiting for you</p>;
+      return (
+        <p className="no-results-message">
+          There are no tasks for processes you started at this time.
+        </p>
+      );
     }
     const { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
@@ -120,23 +124,25 @@ export default function MyOpenProcesses() {
       paginationQueryParamPrefix
     );
     return (
-      <>
+      <PaginationForTable
-        <h1>Tasks for my open processes</h1>
+        page={page}
-        <PaginationForTable
+        perPage={perPage}
-          page={page}
+        perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
-          perPage={perPage}
+        pagination={pagination}
-          perPageOptions={[2, PER_PAGE_FOR_TASKS_ON_HOME_PAGE, 25]}
+        tableToDisplay={buildTable()}
-          pagination={pagination}
+        paginationQueryParamPrefix={paginationQueryParamPrefix}
-          tableToDisplay={buildTable()}
+      />
-          paginationQueryParamPrefix={paginationQueryParamPrefix}
-        />
-      </>
     );
   };
 
   return (
     <>
-      <h1>Tasks for my open processes</h1>
+      <h2>Tasks for my open processes</h2>
+      <p className="data-table-description">
+        These tasks are for processes you started which are not complete. You
+        may not have an action to take at this time. See below for tasks waiting
+        on you.
+      </p>
       {tasksComponent()}
     </>
   );

spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx

@@ -112,7 +112,11 @@ export default function TasksWaitingForMe() {
 
   const tasksComponent = () => {
     if (pagination && pagination.total < 1) {
-      return <p>No tasks waiting for you</p>;
+      return (
+        <p className="no-results-message">
+          You have no task assignments at this time.
+        </p>
+      );
     }
     const { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
@@ -134,7 +138,11 @@ export default function TasksWaitingForMe() {
 
   return (
     <>
-      <h1>Tasks waiting for me</h1>
+      <h2>Tasks waiting for me</h2>
+      <p className="data-table-description">
+        These processes are waiting on you to complete the next task. All are
+        processes created by others that are now actionable by you.
+      </p>
       {tasksComponent()}
     </>
   );

spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx

@@ -113,7 +113,11 @@ export default function TasksWaitingForMyGroups() {
 
   const tasksComponent = () => {
     if (pagination && pagination.total < 1) {
-      return <p>No tasks waiting for you</p>;
+      return (
+        <p className="no-results-message">
+          Your groups have no task assignments at this time.
+        </p>
+      );
     }
     const { page, perPage } = getPageInfoFromSearchParams(
       searchParams,
@@ -135,7 +139,11 @@ export default function TasksWaitingForMyGroups() {
 
   return (
     <>
-      <h1>Tasks waiting for my groups</h1>
+      <h2>Tasks waiting for my groups</h2>
+      <p className="data-table-description">
+        This is a list of tasks for groups you belong to that can be completed
+        by any member of the group.
+      </p>
       {tasksComponent()}
     </>
   );

spiffworkflow-frontend/src/index.css

@@ -260,3 +260,17 @@ in on this with the react-jsonschema-form repo. This is just a patch fix to allo
 td.actions-cell {
   width: 1em;
 }
+
+.no-results-message {
+  font-style: italic;
+  margin-left: 2em;
+  margin-top: 1em;
+  font-size: 14px;
+}
+
+.data-table-description {
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  color: #525252;
+}

spiffworkflow-frontend/src/routes/CompletedInstances.tsx

@@ -3,32 +3,37 @@ import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
 export default function CompletedInstances() {
   return (
     <>
-      <h1>Initiated By Me</h1>
+      <h2>My completed instances</h2>
+      <p className="data-table-description">
+        This is a list of instances you started that are now complete.
+      </p>
       <ProcessInstanceListTable
         filtersEnabled={false}
         paginationQueryParamPrefix="my_completed_instances"
         perPageOptions={[2, 5, 25]}
         reportIdentifier="system_report_instances_initiated_by_me"
         showReports={false}
-        textToShowIfEmpty={<p>No completed instances</p>}
+        textToShowIfEmpty="No completed instances"
       />
-      <h1 style={{ marginTop: '1em' }}>With Tasks Completed By Me</h1>
+      <h2 style={{ marginTop: '1em' }}>Tasks actions by me</h2>
+      <p className="data-table-description" />
       <ProcessInstanceListTable
         filtersEnabled={false}
         paginationQueryParamPrefix="my_completed_tasks"
         perPageOptions={[2, 5, 25]}
         reportIdentifier="system_report_instances_with_tasks_completed_by_me"
         showReports={false}
-        textToShowIfEmpty={<p>No completed instances</p>}
+        textToShowIfEmpty="No completed instances"
       />
-      <h1 style={{ marginTop: '1em' }}>With Tasks Completed By My Group</h1>
+      <h2 style={{ marginTop: '1em' }}>With Tasks Completed By My Group</h2>
+      <p className="data-table-description" />
       <ProcessInstanceListTable
         filtersEnabled={false}
         paginationQueryParamPrefix="group_completed_tasks"
         perPageOptions={[2, 5, 25]}
         reportIdentifier="system_report_instances_with_tasks_completed_by_my_groups"
         showReports={false}
-        textToShowIfEmpty={<p>No completed instances</p>}
+        textToShowIfEmpty="No completed instances"
       />
     </>
   );