fix(Tables): Reset page number on filter (#477)

On affected clusters and clusters list tables, if you change per page or reset/apply filters, you will stay on the same page. Pages should be reset to 1 if you change the per page count or apply or remove a filter. This PR fixes those issues. Co-authored-by: Michael Johnson <micjohns@newbeginnings.usersys.redhat.com>
RedHatInsights · Nov 29, 2022 · 7315589 · 7315589
1 parent aaad106
commit 7315589
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
diff --git a/src/Components/AffectedClustersTable/AffectedClustersTable.cy.js b/src/Components/AffectedClustersTable/AffectedClustersTable.cy.js
@@ -538,7 +538,7 @@ describe('non-empty successful affected clusters table', () => {
       cy.get(TOOLBAR).find('button').contains('Reset filters').click();
       cy.get(TOOLBAR).find(CHIP_GROUP).should('not.exist');
       checkPaginationSelected(0);
-      checkCurrentPage(2);
+      checkCurrentPage(1);
       cy.get('th[data-label="Name"]')
         .should('have.attr', 'aria-sort')
         .and('contain', 'ascending');

diff --git a/src/Components/AffectedClustersTable/AffectedClustersTable.js b/src/Components/AffectedClustersTable/AffectedClustersTable.js
@@ -135,7 +135,7 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
 
   const onSetPerPage = (_e, perPage) => {
     setRowsFiltered(false);
-    updateFilters({ ...filters, limit: perPage });
+    updateFilters({ ...filters, limit: perPage, offset: 0 });
   };
 
   // constructs array of rows (from the initial data) checking currently applied filters

diff --git a/src/Components/ClustersListTable/ClustersListTable.cy.js b/src/Components/ClustersListTable/ClustersListTable.cy.js
@@ -449,7 +449,7 @@ describe('clusters list table', () => {
       cy.get(TOOLBAR).find('button').contains('Reset filters').click();
       cy.get(CHIP_GROUP).should('have.length', 1);
       checkPaginationSelected(0);
-      checkCurrentPage(2);
+      checkCurrentPage(1);
       cy.get('th[data-label="Name"]')
         .should('have.attr', 'aria-sort')
         .and('contain', 'ascending');

diff --git a/src/Components/ClustersListTable/ClustersListTable.js b/src/Components/ClustersListTable/ClustersListTable.js
@@ -224,7 +224,8 @@ const ClustersListTable = ({
       label: intl.formatMessage(messages.name).toLowerCase(),
       filterValues: {
         key: 'text-filter',
-        onChange: (_event, value) => updateFilters({ ...filters, text: value }),
+        onChange: (_event, value) =>
+          updateFilters({ ...filters, offset: 0, text: value }),
         value: filters.text,
         placeholder: intl.formatMessage(messages.filterByName),
       },

diff --git a/src/Services/Filters.js b/src/Services/Filters.js
@@ -52,11 +52,10 @@ const filtersInitialState = {
 };
 
 export const resetFilters = (filters, initialState, updateFilters) => {
-  const { limit, offset, sortIndex, sortDirection } = filters;
+  const { limit, sortIndex, sortDirection } = filters;
   updateFilters({
     ...initialState,
     ...(limit !== undefined && { limit }),
-    ...(limit !== undefined && { offset }),
     sortIndex,
     sortDirection,
   });