display name instead of id, margin under table sections, Download xml to Download

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

@@ -76,8 +76,8 @@ class ProcessInstanceReportService:
                 "columns": [
                     {"Header": "id", "accessor": "id"},
                     {
-                        "Header": "process_model_identifier",
+                        "Header": "process_model_display_name",
-                        "accessor": "process_model_identifier",
+                        "accessor": "process_model_display_name",
                     },
                     {"Header": "start_in_seconds", "accessor": "start_in_seconds"},
                     {"Header": "end_in_seconds", "accessor": "end_in_seconds"},

spiffworkflow-frontend/src/components/PaginationForTable.tsx

@@ -14,6 +14,7 @@ type OwnProps = {
   pagination: PaginationObject | null;
   tableToDisplay: any;
   paginationQueryParamPrefix?: string;
+  paginationClassName?: string;
 };
 
 export default function PaginationForTable({
@@ -23,6 +24,7 @@ export default function PaginationForTable({
   pagination,
   tableToDisplay,
   paginationQueryParamPrefix,
+  paginationClassName,
 }: OwnProps) {
   const PER_PAGE_OPTIONS = [2, 10, 50, 100];
   const [searchParams, setSearchParams] = useSearchParams();
@@ -44,6 +46,7 @@ export default function PaginationForTable({
       <>
         {tableToDisplay}
         <Pagination
+          className={paginationClassName}
           data-qa="pagination-options"
           backwardText="Previous page"
           forwardText="Next page"

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -60,6 +60,7 @@ type OwnProps = {
   showReports?: boolean;
   reportIdentifier?: string;
   textToShowIfEmpty?: string;
+  paginationClassName?: string;
 };
 
 interface dateParameters {
@@ -74,6 +75,7 @@ export default function ProcessInstanceListTable({
   showReports = true,
   reportIdentifier,
   textToShowIfEmpty,
+  paginationClassName,
 }: OwnProps) {
   const params = useParams();
   const [searchParams] = useSearchParams();
@@ -799,12 +801,17 @@ export default function ProcessInstanceListTable({
           tableToDisplay={buildTable()}
           paginationQueryParamPrefix={paginationQueryParamPrefix}
           perPageOptions={perPageOptions}
+          paginationClassName={paginationClassName}
         />
       </>
     );
   }
   if (textToShowIfEmpty) {
-    return <p className="no-results-message">{textToShowIfEmpty}</p>;
+    return (
+      <p className="no-results-message with-large-bottom-margin">
+        {textToShowIfEmpty}
+      </p>
+    );
   }
 
   return null;

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx

@@ -569,7 +569,7 @@ export default function ReactDiagramEditor({
             a={targetUris.processModelFileShowPath}
             ability={ability}
           >
-            <Button onClick={downloadXmlFile}>Download xml</Button>
+            <Button onClick={downloadXmlFile}>Download</Button>
           </Can>
         </>
       );

spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx

@@ -111,7 +111,7 @@ export default function MyOpenProcesses() {
   const tasksComponent = () => {
     if (pagination && pagination.total < 1) {
       return (
-        <p className="no-results-message">
+        <p className="no-results-message with-large-bottom-margin">
           There are no tasks for processes you started at this time.
         </p>
       );
@@ -130,6 +130,7 @@ export default function MyOpenProcesses() {
         pagination={pagination}
         tableToDisplay={buildTable()}
         paginationQueryParamPrefix={paginationQueryParamPrefix}
+        paginationClassName="with-large-bottom-margin"
       />
     );
   };

spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx

@@ -112,7 +112,7 @@ export default function TasksWaitingForMe() {
   const tasksComponent = () => {
     if (pagination && pagination.total < 1) {
       return (
-        <p className="no-results-message">
+        <p className="no-results-message with-large-bottom-margin">
           You have no task assignments at this time.
         </p>
       );
@@ -131,6 +131,7 @@ export default function TasksWaitingForMe() {
         pagination={pagination}
         tableToDisplay={buildTable()}
         paginationQueryParamPrefix="tasks_waiting_for_me"
+        paginationClassName="with-large-bottom-margin"
       />
     );
   };

spiffworkflow-frontend/src/index.css

@@ -147,6 +147,10 @@ h1.with-icons {
   margin-bottom: 1em;
 }
 
+.with-large-bottom-margin {
+  margin-bottom: 3em;
+}
+
 .diagram-viewer-canvas {
   border:1px solid #000000;
   height:70vh;

spiffworkflow-frontend/src/routes/CompletedInstances.tsx

@@ -14,8 +14,9 @@ export default function CompletedInstances() {
         reportIdentifier="system_report_instances_initiated_by_me"
         showReports={false}
         textToShowIfEmpty="You have no completed instances at this time."
+        paginationClassName="with-large-bottom-margin"
       />
-      <h2 style={{ marginTop: '1em' }}>Tasks completed by me</h2>
+      <h2>Tasks completed by me</h2>
       <p className="data-table-description">
         This is a list of instances where you have completed tasks.
       </p>
@@ -26,8 +27,9 @@ export default function CompletedInstances() {
         reportIdentifier="system_report_instances_with_tasks_completed_by_me"
         showReports={false}
         textToShowIfEmpty="You have no completed tasks at this time."
+        paginationClassName="with-large-bottom-margin"
       />
-      <h2 style={{ marginTop: '1em' }}>Tasks completed by my groups</h2>
+      <h2>Tasks completed by my groups</h2>
       <p className="data-table-description">
         This is a list of instances with tasks that were completed by groups you
         belong to.

spiffworkflow-frontend/src/routes/GroupedTasks.tsx

@@ -5,10 +5,9 @@ import TasksWaitingForMyGroups from '../components/TasksWaitingForMyGroups';
 export default function GroupedTasks() {
   return (
     <>
+      {/* be careful moving these around since the first two have with-large-bottom-margin in order to get some space between the three table sections */}
       <TasksForMyOpenProcesses />
-      <br />
       <TasksWaitingForMe />
-      <br />
       <TasksWaitingForMyGroups />
     </>
   );