fixed pagination of log tables and broken cypress tests w/ burnettk (#382)

* fixed pagination of log tables and broken cypress tests w/ burnettk

* wait before clicking the profile button instead of after w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/cypress/e2e/process_instances.cy.js

@@ -159,20 +159,22 @@ describe('process-instances', () => {
     cy.runPrimaryBpmnFile();
     cy.getBySel('process-instance-list-link').click();
     cy.getBySel('process-instance-show-link-id').first().click();
-    cy.getBySel('process-instance-log-list-link').click();
+    cy.contains('Events').click();
-    cy.getBySel('process-instance-log-events').click();
     cy.contains('process_model_one');
     cy.contains('task_completed');
-    cy.basicPaginationTest();
+    cy.basicPaginationTest(undefined, 'pagination-options-events');
   });
 
   it('can filter', () => {
     cy.getBySel('process-instance-list-link').click();
-    cy.getBySel('process-instance-list-all').click();
+    cy.contains('My Process Instances');
-    cy.contains('All Process Instances');
+    cy.get('.process-instance-list-row-variant-for-me');
     cy.assertAtLeastOneItemInPaginatedResults();
 
-    cy.getBySel('filter-section-expand-toggle').click();
+    cy.getBySel('process-instance-list-all').click();
+    cy.contains('All Process Instances');
+    cy.get('.process-instance-list-row-variant-all');
+    cy.assertAtLeastOneItemInPaginatedResults();
 
     const statusSelect = '#process-instance-status-select';
     PROCESS_STATUSES.forEach((processStatus) => {
@@ -188,8 +190,9 @@ describe('process-instances', () => {
         cy.assertAtLeastOneItemInPaginatedResults();
         cy.getBySel(`process-instance-status-${processStatus}`);
 
-        // maybe waiting a bit before trying to click makes this work consistently?
+        // we tried 500 as well to try to make this work consistently
         cy.wait(1000);
+
         // there should really only be one, but in CI there are sometimes more
         cy.get('div[aria-label="Clear all selected items"]:first').click();
         cy.get('div[aria-label="Clear all selected items"]').should(

spiffworkflow-frontend/cypress/e2e/tasks.cy.js

@@ -96,18 +96,19 @@ describe('tasks', () => {
     // This should get the first one which should be the one we just completed
     cy.getBySel('process-instance-show-link-id').first().click();
     cy.contains('Process Instance Id: ');
-    cy.contains('Status: complete');
+    cy.get('.process-instance-status').contains('complete');
   });
 
-  it('can paginate items', () => {
+  // we no longer have a tasks table so these are actually covered in the process_instances test
-    // make sure we have some tasks
+  // it('can paginate items', () => {
-    kickOffModelWithForm();
+  //   // make sure we have some tasks
-    kickOffModelWithForm();
+  //   kickOffModelWithForm();
-    kickOffModelWithForm();
+  //   kickOffModelWithForm();
-    kickOffModelWithForm();
+  //   kickOffModelWithForm();
-    kickOffModelWithForm();
+  //   kickOffModelWithForm();
-
+  //   kickOffModelWithForm();
-    cy.navigateToHome();
+  //
-    cy.basicPaginationTest('process-instance-show-link-id');
+  //   cy.navigateToHome();
-  });
+  //   cy.basicPaginationTest('process-instance-show-link-id');
+  // });
 });

spiffworkflow-frontend/cypress/support/commands.js

@@ -61,8 +61,10 @@ Cypress.Commands.add('login', (username, password) => {
 });
 
 Cypress.Commands.add('logout', (_selector, ..._args) => {
-  cy.get('#user-profile-toggletip').click();
   cy.wait(2000);
+  // click the profile thingy in the top right
+  cy.get('.user-profile-toggletip-button').click();
+
   cy.getBySel('logout-button').click();
   if (Cypress.env('SPIFFWORKFLOW_FRONTEND_AUTH_WITH_KEYCLOAK') === true) {
     // otherwise we can click logout, quickly load the next page, and the javascript
@@ -142,9 +144,15 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   'basicPaginationTest',
-  (dataQaTagToUseToEnsureTableHasLoaded = 'paginated-entity-id') => {
+  (
-    cy.getBySel('pagination-options').scrollIntoView();
+    dataQaTagToUseToEnsureTableHasLoaded = 'paginated-entity-id',
-    cy.get('.cds--select__item-count').find('.cds--select-input').select('2');
+    paginationOptionsDataQa = 'pagination-options'
+  ) => {
+    cy.getBySel(paginationOptionsDataQa).scrollIntoView();
+    cy.getBySel(paginationOptionsDataQa)
+      .find('.cds--select__item-count')
+      .find('.cds--select-input')
+      .select('2');
 
     // NOTE: this is a em dash instead of en dash
     cy.contains(/\b1–2 of \d+/);
@@ -159,14 +167,17 @@ Cypress.Commands.add(
       .first()
       .then(($element) => {
         const oldId = $element.text().trim();
-        cy.get('.cds--pagination__button--forward').click();
+        cy.getBySel(paginationOptionsDataQa)
-        cy.contains(
+          .find('.cds--pagination__button--forward')
-          `[data-qa=${dataQaTagToUseToEnsureTableHasLoaded}]`,
+          .click();
-          oldId
+        cy.getBySel(paginationOptionsDataQa)
-        ).should('not.exist');
+          .contains(`[data-qa=${dataQaTagToUseToEnsureTableHasLoaded}]`, oldId)
-        cy.contains(/\b3–4 of \d+/);
+          .should('not.exist');
-        cy.get('.cds--pagination__button--backward').click();
+        cy.getBySel(paginationOptionsDataQa).contains(/\b3–4 of \d+/);
-        cy.contains(/\b1–2 of \d+/);
+        cy.getBySel(paginationOptionsDataQa)
+          .find('.cds--pagination__button--backward')
+          .click();
+        cy.getBySel(paginationOptionsDataQa).contains(/\b1–2 of \d+/);
         cy.contains(`[data-qa=${dataQaTagToUseToEnsureTableHasLoaded}]`, oldId);
       });
   }

spiffworkflow-frontend/src/components/MessageInstanceList.tsx

@@ -185,6 +185,7 @@ export default function MessageInstanceList({ processInstanceId }: OwnProps) {
           perPage={perPage}
           pagination={pagination}
           tableToDisplay={buildTable()}
+          paginationQueryParamPrefix="message-list"
         />
       </>
     );

spiffworkflow-frontend/src/components/PaginationForTable.tsx

@@ -15,6 +15,7 @@ type OwnProps = {
   tableToDisplay: any;
   paginationQueryParamPrefix?: string;
   paginationClassName?: string;
+  paginationDataQATag?: string;
 };
 
 export default function PaginationForTable({
@@ -25,6 +26,7 @@ export default function PaginationForTable({
   tableToDisplay,
   paginationQueryParamPrefix,
   paginationClassName,
+  paginationDataQATag = 'pagination-options',
 }: OwnProps) {
   const PER_PAGE_OPTIONS = [2, 10, 50, 100];
   const [searchParams, setSearchParams] = useSearchParams();
@@ -47,7 +49,7 @@ export default function PaginationForTable({
         {tableToDisplay}
         <Pagination
           className={paginationClassName}
-          data-qa="pagination-options"
+          data-qa={paginationDataQATag}
           backwardText="Previous page"
           forwardText="Next page"
           itemsPerPageText="Items per page:"

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -1648,6 +1648,18 @@ export default function ProcessInstanceListTable({
           `${processInstanceShowPathPrefix}/${modifiedModelId}/${processInstance.id}`
         );
       };
+      let variantFromMetadata = 'all';
+      if (reportMetadata) {
+        reportMetadata.filter_by.forEach((filter: any) => {
+          if (
+            filter.field_name === 'with_relation_to_me' &&
+            filter.field_value
+          ) {
+            variantFromMetadata = 'for-me';
+          }
+        });
+      }
+
       return (
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
         <tr
@@ -1655,6 +1667,7 @@ export default function ProcessInstanceListTable({
           key={processInstance.id}
           onClick={navigateToProcessInstance}
           onKeyDown={navigateToProcessInstance}
+          className={`process-instance-list-row-variant-${variantFromMetadata}`}
         >
           {currentRow}
         </tr>

spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx

@@ -82,6 +82,8 @@ export default function ProcessInstanceLogList({
     processInstanceShowPageBaseUrl = `/admin/process-instances/${processModelId}`;
   }
   const taskNameHeader = isEventsView ? 'Task Name' : 'Milestone';
+  const tableType = isEventsView ? 'events' : 'milestones';
+  const paginationQueryParamPrefix = `log-list-${tableType}`;
 
   const updateSearchParams = (value: string, key: string) => {
     if (value) {
@@ -96,7 +98,7 @@ export default function ProcessInstanceLogList({
     // Clear out any previous results to avoid a "flicker" effect where columns
     // are updated above the incorrect data.
     setProcessInstanceLogs([]);
-    setPagination(null);
+    // setPagination(null);
 
     const setProcessInstanceLogListFromResult = (result: any) => {
       setProcessInstanceLogs(result.results);
@@ -105,8 +107,6 @@ export default function ProcessInstanceLogList({
 
     const searchParamsToInclude = [
       'events',
-      'page',
-      'per_page',
       'bpmn_name',
       'bpmn_identifier',
       'task_type',
@@ -117,10 +117,17 @@ export default function ProcessInstanceLogList({
       searchParamsToInclude
     );
 
+    const { page, perPage } = getPageInfoFromSearchParams(
+      searchParams,
+      undefined,
+      undefined,
+      paginationQueryParamPrefix
+    );
+
     HttpService.makeCallToBackend({
       path: `${targetUris.processInstanceLogListPath}?${createSearchParams(
         pickedSearchParams
-      )}`,
+      )}&page=${page}&per_page=${perPage}`,
       successCallback: setProcessInstanceLogListFromResult,
     });
 
@@ -143,6 +150,7 @@ export default function ProcessInstanceLogList({
     processModelId,
     targetUris.processInstanceLogListPath,
     isEventsView,
+    paginationQueryParamPrefix,
   ]);
 
   const handleErrorEventModalClose = () => {
@@ -492,6 +500,7 @@ export default function ProcessInstanceLogList({
   if (clearAll) {
     return <p>Page cleared 👍</p>;
   }
+
   return (
     <>
       {errorEventModal()}
@@ -507,6 +516,8 @@ export default function ProcessInstanceLogList({
         perPage={perPage}
         pagination={pagination}
         tableToDisplay={buildTable()}
+        paginationQueryParamPrefix={paginationQueryParamPrefix}
+        paginationDataQATag={`pagination-options-${tableType}`}
       />
     </>
   );

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -340,7 +340,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
           <dl>
             <dt>Status:</dt>
             <dd>
-              <Tag type={statusColor} size="sm" className="span-tag">
+              <Tag
+                type={statusColor}
+                size="sm"
+                className="span-tag process-instance-status"
+              >
                 {processInstance.status} {statusIcon}
               </Tag>
             </dd>