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>
2023-07-10 14:06:55 -04:00 · 2023-07-10 14:06:55 -04:00 · e5159ccd0b
parent 1e87092e49
commit e5159ccd0b
8 changed files with 83 additions and 37 deletions
--- a/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js
+++ b/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.getBySel('process-instance-log-events').click();
+    cy.contains('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('All Process Instances');
+    cy.contains('My 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(
--- a/spiffworkflow-frontend/cypress/e2e/tasks.cy.js
+++ b/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', () => {
-    // make sure we have some tasks
-    kickOffModelWithForm();
-    kickOffModelWithForm();
-    kickOffModelWithForm();
-    kickOffModelWithForm();
-    kickOffModelWithForm();
-
-    cy.navigateToHome();
-    cy.basicPaginationTest('process-instance-show-link-id');
-  });
+  // we no longer have a tasks table so these are actually covered in the process_instances test
+  // it('can paginate items', () => {
+  //   // make sure we have some tasks
+  //   kickOffModelWithForm();
+  //   kickOffModelWithForm();
+  //   kickOffModelWithForm();
+  //   kickOffModelWithForm();
+  //   kickOffModelWithForm();
+  //
+  //   cy.navigateToHome();
+  //   cy.basicPaginationTest('process-instance-show-link-id');
+  // });
 });
--- a/spiffworkflow-frontend/cypress/support/commands.js
+++ b/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();
-    cy.get('.cds--select__item-count').find('.cds--select-input').select('2');
+  (
+    dataQaTagToUseToEnsureTableHasLoaded = 'paginated-entity-id',
+    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.contains(
-          `[data-qa=${dataQaTagToUseToEnsureTableHasLoaded}]`,
-          oldId
-        ).should('not.exist');
-        cy.contains(/\b3–4 of \d+/);
-        cy.get('.cds--pagination__button--backward').click();
-        cy.contains(/\b1–2 of \d+/);
+        cy.getBySel(paginationOptionsDataQa)
+          .find('.cds--pagination__button--forward')
+          .click();
+        cy.getBySel(paginationOptionsDataQa)
+          .contains(`[data-qa=${dataQaTagToUseToEnsureTableHasLoaded}]`, oldId)
+          .should('not.exist');
+        cy.getBySel(paginationOptionsDataQa).contains(/\b3–4 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);
      });
  }
--- a/spiffworkflow-frontend/src/components/MessageInstanceList.tsx
+++ b/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"
        />
      </>
    );
--- a/spiffworkflow-frontend/src/components/PaginationForTable.tsx
+++ b/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:"
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/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>
--- a/spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx
+++ b/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}`}
      />
    </>
  );
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
+++ b/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>