updated text on home page w/ burnettk

spiffworkflow-backend/src/spiffworkflow_backend/services/process_instance_report_service.py

@@ -422,7 +422,7 @@ class ProcessInstanceReportService:
         for process_instance_dict in process_instance_dicts:
             assigned_user = aliased(UserModel)
             human_task_query = (
-                HumanTaskModel.query.filter_by(process_instance_id=process_instance_dict['id'])
+                HumanTaskModel.query.filter_by(process_instance_id=process_instance_dict['id'], completed=False)
                 .group_by(HumanTaskModel.id)
                 .outerjoin(
                     HumanTaskUserModel,

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -1303,6 +1303,111 @@ export default function ProcessInstanceListTable({
     );
   };
 
+  const getWaitingForTableCellComponent = (processInstanceTask: any) => {
+    let fullUsernameString = '';
+    let shortUsernameString = '';
+    if (processInstanceTask.potential_owner_usernames) {
+      fullUsernameString = processInstanceTask.potential_owner_usernames;
+      const usernames =
+        processInstanceTask.potential_owner_usernames.split(',');
+      const firstTwoUsernames = usernames.slice(0, 2);
+      if (usernames.length > 2) {
+        firstTwoUsernames.push('...');
+      }
+      shortUsernameString = firstTwoUsernames.join(',');
+    }
+    if (processInstanceTask.assigned_user_group_identifier) {
+      fullUsernameString = processInstanceTask.assigned_user_group_identifier;
+      shortUsernameString = processInstanceTask.assigned_user_group_identifier;
+    }
+    return <span title={fullUsernameString}>{shortUsernameString}</span>;
+  };
+  const formatProcessInstanceId = (row: ProcessInstance, id: number) => {
+    return <span data-qa="paginated-entity-id">{id}</span>;
+  };
+  const formatProcessModelIdentifier = (_row: any, identifier: any) => {
+    return <span>{identifier}</span>;
+  };
+  const formatProcessModelDisplayName = (_row: any, identifier: any) => {
+    return <span>{identifier}</span>;
+  };
+
+  const formatSecondsForDisplay = (_row: any, seconds: any) => {
+    return convertSecondsToFormattedDateTime(seconds) || '-';
+  };
+  const defaultFormatter = (_row: any, value: any) => {
+    return value;
+  };
+
+  const formattedColumn = (row: any, column: any) => {
+    const reportColumnFormatters: Record<string, any> = {
+      id: formatProcessInstanceId,
+      process_model_identifier: formatProcessModelIdentifier,
+      process_model_display_name: formatProcessModelDisplayName,
+      start_in_seconds: formatSecondsForDisplay,
+      end_in_seconds: formatSecondsForDisplay,
+      updated_at_in_seconds: formatSecondsForDisplay,
+    };
+    const formatter =
+      reportColumnFormatters[column.accessor] ?? defaultFormatter;
+    const value = row[column.accessor];
+    const modifiedModelId = modifyProcessIdentifierForPathParam(
+      row.process_model_identifier
+    );
+    const navigateToProcessInstance = () => {
+      navigate(`${processInstanceShowPathPrefix}/${modifiedModelId}/${row.id}`);
+    };
+    const navigateToProcessModel = () => {
+      navigate(`/admin/process-models/${modifiedModelId}`);
+    };
+
+    if (column.accessor === 'status') {
+      return (
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <td
+          onClick={navigateToProcessInstance}
+          onKeyDown={navigateToProcessInstance}
+          data-qa={`process-instance-status-${value}`}
+        >
+          {formatter(row, value)}
+        </td>
+      );
+    }
+    if (column.accessor === 'process_model_display_name') {
+      const pmStyle = { background: 'rgba(0, 0, 0, .02)' };
+      return (
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <td
+          style={pmStyle}
+          onClick={navigateToProcessModel}
+          onKeyDown={navigateToProcessModel}
+        >
+          {formatter(row, value)}
+        </td>
+      );
+    }
+    if (column.accessor === 'waiting_for') {
+      return <td>{getWaitingForTableCellComponent(row)}</td>;
+    }
+    if (column.accessor === 'updated_at_in_seconds') {
+      return (
+        <TableCellWithTimeAgoInWords
+          timeInSeconds={row.updated_at_in_seconds}
+        />
+      );
+    }
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      <td
+        data-qa={`process-instance-show-link-${column.accessor}`}
+        onKeyDown={navigateToProcessModel}
+        onClick={navigateToProcessInstance}
+      >
+        {formatter(row, value)}
+      </td>
+    );
+  };
+
   const buildTable = () => {
     const headerLabels: Record<string, string> = {
       id: 'Id',
@@ -1323,115 +1428,6 @@ export default function ProcessInstanceListTable({
       headers.push('Actions');
     }
 
-    const formatProcessInstanceId = (row: ProcessInstance, id: number) => {
-      return <span data-qa="paginated-entity-id">{id}</span>;
-    };
-    const formatProcessModelIdentifier = (_row: any, identifier: any) => {
-      return <span>{identifier}</span>;
-    };
-    const formatProcessModelDisplayName = (_row: any, identifier: any) => {
-      return <span>{identifier}</span>;
-    };
-
-    const formatSecondsForDisplay = (_row: any, seconds: any) => {
-      return convertSecondsToFormattedDateTime(seconds) || '-';
-    };
-    const defaultFormatter = (_row: any, value: any) => {
-      return value;
-    };
-
-    const getWaitingForTableCellComponent = (processInstanceTask: any) => {
-      let fullUsernameString = '';
-      let shortUsernameString = '';
-      if (processInstanceTask.potential_owner_usernames) {
-        fullUsernameString = processInstanceTask.potential_owner_usernames;
-        const usernames =
-          processInstanceTask.potential_owner_usernames.split(',');
-        const firstTwoUsernames = usernames.slice(0, 2);
-        if (usernames.length > 2) {
-          firstTwoUsernames.push('...');
-        }
-        shortUsernameString = firstTwoUsernames.join(',');
-      }
-      if (processInstanceTask.assigned_user_group_identifier) {
-        fullUsernameString = processInstanceTask.assigned_user_group_identifier;
-        shortUsernameString =
-          processInstanceTask.assigned_user_group_identifier;
-      }
-      return <span title={fullUsernameString}>{shortUsernameString}</span>;
-    };
-
-    const reportColumnFormatters: Record<string, any> = {
-      id: formatProcessInstanceId,
-      process_model_identifier: formatProcessModelIdentifier,
-      process_model_display_name: formatProcessModelDisplayName,
-      start_in_seconds: formatSecondsForDisplay,
-      end_in_seconds: formatSecondsForDisplay,
-      updated_at_in_seconds: formatSecondsForDisplay,
-    };
-    const formattedColumn = (row: any, column: any) => {
-      const formatter =
-        reportColumnFormatters[column.accessor] ?? defaultFormatter;
-      const value = row[column.accessor];
-      const modifiedModelId = modifyProcessIdentifierForPathParam(
-        row.process_model_identifier
-      );
-      const navigateToProcessInstance = () => {
-        navigate(
-          `${processInstanceShowPathPrefix}/${modifiedModelId}/${row.id}`
-        );
-      };
-      const navigateToProcessModel = () => {
-        navigate(`/admin/process-models/${modifiedModelId}`);
-      };
-
-      if (column.accessor === 'status') {
-        return (
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-          <td
-            onClick={navigateToProcessInstance}
-            onKeyDown={navigateToProcessInstance}
-            data-qa={`process-instance-status-${value}`}
-          >
-            {formatter(row, value)}
-          </td>
-        );
-      }
-      if (column.accessor === 'process_model_display_name') {
-        const pmStyle = { background: 'rgba(0, 0, 0, .02)' };
-        return (
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-          <td
-            style={pmStyle}
-            onClick={navigateToProcessModel}
-            onKeyDown={navigateToProcessModel}
-          >
-            {formatter(row, value)}
-          </td>
-        );
-      }
-      if (column.accessor === 'waiting_for') {
-        return <td>{getWaitingForTableCellComponent(row)}</td>;
-      }
-      if (column.accessor === 'updated_at_in_seconds') {
-        return (
-          <TableCellWithTimeAgoInWords
-            timeInSeconds={row.updated_at_in_seconds}
-          />
-        );
-      }
-      return (
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        <td
-          data-qa={`process-instance-show-link-${column.accessor}`}
-          onKeyDown={navigateToProcessModel}
-          onClick={navigateToProcessInstance}
-        >
-          {formatter(row, value)}
-        </td>
-      );
-    };
-
     const rows = processInstances.map((row: any) => {
       const currentRow = reportColumns().map((column: any) => {
         return formattedColumn(row, column);

spiffworkflow-frontend/src/index.css

@@ -332,10 +332,13 @@ td.actions-cell {
   width: 1em;
 }
 
+.process-instance-table-header {
+  margin-bottom: 1em;
+}
+
 .no-results-message {
   font-style: italic;
   margin-left: 2em;
-  margin-top: 1em;
   font-size: 14px;
 }
 

spiffworkflow-frontend/src/routes/CompletedInstances.tsx

@@ -18,13 +18,12 @@ 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 (
         <>
-          <h2>With tasks completed by group: {userGroup}</h2>
+          <h2 title={titleText} className="process-instance-table-header">
-          <p className="data-table-description">
+            With tasks completed by <strong>{userGroup}</strong>
-            This is a list of instances with tasks that were completed by the{' '}
+          </h2>
-            {userGroup} group.
-          </p>
           <ProcessInstanceListTable
             filtersEnabled={false}
             paginationQueryParamPrefix="group_completed_instances"
@@ -40,12 +39,19 @@ export default function CompletedInstances() {
     });
   };
 
+  const startedByMeTitleText =
+    'This is a list of instances you started that are now complete.';
+  const withTasksCompletedByMeTitleText =
+    'This is a list of instances where you have completed tasks.';
+
   return (
     <>
-      <h2>My completed instances</h2>
+      <h2
-      <p className="data-table-description">
+        title={startedByMeTitleText}
-        This is a list of instances you started that are now complete.
+        className="process-instance-table-header"
-      </p>
+      >
+        Started by me
+      </h2>
       <ProcessInstanceListTable
         filtersEnabled={false}
         paginationQueryParamPrefix="my_completed_instances"
@@ -56,10 +62,12 @@ export default function CompletedInstances() {
         paginationClassName="with-large-bottom-margin"
         autoReload
       />
-      <h2>With tasks completed by me</h2>
+      <h2
-      <p className="data-table-description">
+        title={withTasksCompletedByMeTitleText}
-        This is a list of instances where you have completed tasks.
+        className="process-instance-table-header"
-      </p>
+      >
+        With tasks completed by me
+      </h2>
       <ProcessInstanceListTable
         filtersEnabled={false}
         paginationQueryParamPrefix="my_completed_tasks"

spiffworkflow-frontend/src/routes/HomePageRoutes.tsx

@@ -4,7 +4,6 @@ import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { Tabs, TabList, Tab } from '@carbon/react';
 import TaskShow from './TaskShow';
 import MyTasks from './MyTasks';
-import GroupedTasks from './GroupedTasks';
 import CompletedInstances from './CompletedInstances';
 import CreateNewInstance from './CreateNewInstance';
 import InProgressInstances from './InProgressInstances';

spiffworkflow-frontend/src/routes/InProgressInstances.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
+import { slugifyString } from '../helpers';
 import HttpService from '../services/HttpService';
 
 export default function InProgressInstances() {
@@ -18,21 +19,22 @@ export default function InProgressInstances() {
     }
 
     return userGroups.map((userGroup: string) => {
+      const titleText = `This is a list of instances with tasks that are waiting for the ${userGroup} group.`;
       return (
         <>
-          <h2>With tasks completed by group: {userGroup}</h2>
+          <h2 title={titleText} className="process-instance-table-header">
-          <p className="data-table-description">
+            Waiting for <strong>{userGroup}</strong>
-            This is a list of instances with tasks that were completed by the{' '}
+          </h2>
-            {userGroup} group.
-          </p>
           <ProcessInstanceListTable
             filtersEnabled={false}
-            paginationQueryParamPrefix="group_completed_instances"
+            paginationQueryParamPrefix={`waiting_for_${slugifyString(
+              userGroup
+            ).replace('-', '_')}`}
             paginationClassName="with-large-bottom-margin"
             perPageOptions={[2, 5, 25]}
             reportIdentifier="system_report_in_progress_instances_with_tasks_for_my_group"
             showReports={false}
-            textToShowIfEmpty="This group has no completed instances at this time."
+            textToShowIfEmpty="This group has no instances waiting on it at this time."
             additionalParams={`user_group_identifier=${userGroup}`}
             canCompleteAllTasks
             showActionsColumn
@@ -43,15 +45,21 @@ export default function InProgressInstances() {
     });
   };
 
+  const startedByMeTitleText =
+    'This is a list of open instances that you started.';
+  const waitingForMeTitleText =
+    'This is a list of instances that have tasks that you can complete.';
   return (
     <>
-      <h2>My open instances</h2>
+      <h2
-      <p className="data-table-description">
+        title={startedByMeTitleText}
-        This is a list of instances you started that are now complete.
+        className="process-instance-table-header"
-      </p>
+      >
+        Started by me
+      </h2>
       <ProcessInstanceListTable
         filtersEnabled={false}
-        paginationQueryParamPrefix="my_completed_instances"
+        paginationQueryParamPrefix="open_instances_started_by_me"
         perPageOptions={[2, 5, 25]}
         reportIdentifier="system_report_in_progress_instances_initiated_by_me"
         showReports={false}
@@ -60,17 +68,19 @@ export default function InProgressInstances() {
         showActionsColumn
         autoReload={false}
       />
-      <h2>With tasks I can complete</h2>
+      <h2
-      <p className="data-table-description">
+        title={waitingForMeTitleText}
-        This is a list of instances that have tasks that you can complete.
+        className="process-instance-table-header"
-      </p>
+      >
+        Waiting for me
+      </h2>
       <ProcessInstanceListTable
         filtersEnabled={false}
-        paginationQueryParamPrefix="my_completed_tasks"
+        paginationQueryParamPrefix="waiting_for_me"
         perPageOptions={[2, 5, 25]}
         reportIdentifier="system_report_in_progress_instances_with_tasks_for_me"
         showReports={false}
-        textToShowIfEmpty="You have no completed instances at this time."
+        textToShowIfEmpty="There are no instances waiting on you at this time."
         paginationClassName="with-large-bottom-margin"
         canCompleteAllTasks
         showActionsColumn

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -19,10 +19,7 @@ import MDEditor from '@uiw/react-md-editor';
 import Form from '../themes/carbon';
 import HttpService from '../services/HttpService';
 import useAPIError from '../hooks/UseApiError';
-import {
+import { modifyProcessIdentifierForPathParam } from '../helpers';
-  dateStringToYMDFormat,
-  modifyProcessIdentifierForPathParam,
-} from '../helpers';
 import { ProcessInstanceTask } from '../interfaces';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';