From 800b61cf361e927f3c6dcd1a11bada75983ccfef Mon Sep 17 00:00:00 2001 From: jasquat <2487833+jasquat@users.noreply.github.com> Date: Mon, 10 Jul 2023 14:06:55 -0400 Subject: [PATCH] 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 --- .../cypress/e2e/process_instances.cy.js | 17 +++++---- .../cypress/e2e/tasks.cy.js | 25 ++++++------- .../cypress/support/commands.js | 35 ++++++++++++------- .../src/components/MessageInstanceList.tsx | 1 + .../src/components/PaginationForTable.tsx | 4 ++- .../components/ProcessInstanceListTable.tsx | 13 +++++++ .../src/components/ProcessInstanceLogList.tsx | 19 +++++++--- .../src/routes/ProcessInstanceShow.tsx | 6 +++- 8 files changed, 83 insertions(+), 37 deletions(-) diff --git a/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js b/spiffworkflow-frontend/cypress/e2e/process_instances.cy.js index 48a549b6..a33db84a 100644 --- 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( diff --git a/spiffworkflow-frontend/cypress/e2e/tasks.cy.js b/spiffworkflow-frontend/cypress/e2e/tasks.cy.js index fde67873..3aefc593 100644 --- 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'); + // }); }); diff --git a/spiffworkflow-frontend/cypress/support/commands.js b/spiffworkflow-frontend/cypress/support/commands.js index e7b6ca6d..7c7f8866 100644 --- 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); }); } diff --git a/spiffworkflow-frontend/src/components/MessageInstanceList.tsx b/spiffworkflow-frontend/src/components/MessageInstanceList.tsx index 90da5ed9..b2883c24 100644 --- 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" /> ); diff --git a/spiffworkflow-frontend/src/components/PaginationForTable.tsx b/spiffworkflow-frontend/src/components/PaginationForTable.tsx index 002c8b8e..1c86b703 100644 --- 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} { + 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 {currentRow} diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx index 5594f130..39098cf0 100644 --- 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

Page cleared 👍

; } + return ( <> {errorEventModal()} @@ -507,6 +516,8 @@ export default function ProcessInstanceLogList({ perPage={perPage} pagination={pagination} tableToDisplay={buildTable()} + paginationQueryParamPrefix={paginationQueryParamPrefix} + paginationDataQATag={`pagination-options-${tableType}`} /> ); diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx index 5b68e369..fc715076 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx @@ -340,7 +340,11 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
Status:
- + {processInstance.status} {statusIcon}