[OCPADVISOR-6] Reset filters resets only filters

cypress/utils/components.js

@@ -4,6 +4,7 @@ const CHIP = '[data-ouia-component-type="PF4/Chip"]';
 const ROW =
   '[data-ouia-component-type="PF4/TableRow"]:not([class~="pf-c-table__expandable-row"])';
 const PAGINATION = 'div[data-ouia-component-type="PF4/Pagination"]';
+const PAGINATION_BOTTOM = '.pf-m-bottom';
 const PAGINATION_MENU =
   'div[data-ouia-component-type="PF4/PaginationOptionsMenu"]';
 const DROPDOWN = '[data-ouia-component-type="PF4/Dropdown"]';
@@ -27,6 +28,7 @@ export {
   CHIP,
   ROW,
   PAGINATION,
+  PAGINATION_BOTTOM,
   PAGINATION_MENU,
   DROPDOWN,
   MODAL,

cypress/utils/pagination.js

@@ -1,6 +1,7 @@
 import { DEFAULT_ROW_COUNT } from './defaults';
 import {
   TOOLBAR,
+  PAGINATION,
   PAGINATION_MENU,
   DROPDOWN_TOGGLE,
   DROPDOWN_ITEM,
@@ -27,6 +28,23 @@ function checkPaginationTotal(n) {
     .should('have.text', n);
 }
 
+function checkCurrentPage(page) {
+  cy.get(PAGINATION)
+    .find('[aria-label="Current page"]')
+    .should('have.value', `${page}`);
+}
+
+function checkPaginationSelected(index) {
+  cy.get(TOOLBAR).find(PAGINATION_MENU).find(DROPDOWN_TOGGLE).click();
+  cy.get(TOOLBAR)
+    .find(PAGINATION_MENU)
+    .find('ul[class=pf-c-options-menu__menu]')
+    .children()
+    .eq(index)
+    .find('button')
+    .should('have.class', 'pf-m-selected pf-c-options-menu__menu-item');
+}
+
 function checkPaginationValues(expectedValues) {
   cy.get(TOOLBAR).find(PAGINATION_MENU).find(DROPDOWN_TOGGLE).click();
   cy.get(TOOLBAR)
@@ -52,6 +70,8 @@ function changePagination(textInItem) {
 export {
   itemsPerPage,
   checkPaginationTotal,
+  checkCurrentPage,
+  checkPaginationSelected,
   checkPaginationValues,
   changePagination,
 };

cypress/utils/table.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 
 import { ROW, TBODY, TABLE, TITLE, CHIP_GROUP, CHIP } from './components';
-import { removeAllChips, applyFilters, filter } from './filters';
+import { removeAllChips, applyFilters } from './filters';
 
 function checkTableHeaders(expectedHeaders) {
   /* patternfly/react-table-4.71.16, for some reason, renders extra empty `th` container;
@@ -131,7 +131,6 @@ function checkFiltering(
   cy.get('button').contains('Reset filters').should('exist');
 }
 
-
 /**
  * A column is sorted and then data and a reference column (which can be different than the
  * sorting one) are compared to see if order matches

src/Components/AffectedClustersTable/AffectedClustersTable.cy.js

@@ -36,8 +36,10 @@ import {
 import {
   itemsPerPage,
   checkPaginationTotal,
+  checkPaginationSelected,
   checkPaginationValues,
   changePagination,
+  checkCurrentPage,
 } from '../../../cypress/utils/pagination';
 import rule from '../../../cypress/fixtures/api/insights-results-aggregator/v2/rule/external.rules.rule|ERROR_KEY.json';
 import { AFFECTED_CLUSTERS_COLUMNS } from '../../AppConstants';
@@ -522,6 +524,26 @@ describe('non-empty successful affected clusters table', () => {
       checkRowCounts(Math.min(DEFAULT_ROW_COUNT, filterData({}).length));
     });
 
+    it('will reset filters but not pagination and sorting', () => {
+      filterApply({ name: 'a' });
+      changePagination(PAGINATION_VALUES[0]);
+      cy.get(TOOLBAR)
+        .find(PAGINATION)
+        .find('button[data-action="next"]')
+        .then(($button) => {
+          cy.wrap($button).click();
+        });
+
+      cy.get('th[data-label="Name"]').find('button').click();
+      cy.get(TOOLBAR).find('button').contains('Reset filters').click();
+      cy.get(TOOLBAR).find(CHIP_GROUP).should('not.exist');
+      checkPaginationSelected(0);
+      checkCurrentPage(2);
+      cy.get('th[data-label="Name"]')
+        .should('have.attr', 'aria-sort')
+        .and('contain', 'ascending');
+    });
+
     it('empty state is displayed when filters do not match any rule', () => {
       filterApply({ name: 'Not existing cluster' });
       checkNoMatchingClusters();

src/Components/AffectedClustersTable/AffectedClustersTable.js

@@ -29,6 +29,7 @@ import {
 import Loading from '../Loading/Loading';
 import {
   AFFECTED_CLUSTERS_INITIAL_STATE,
+  resetFilters,
   updateAffectedClustersFilters,
 } from '../../Services/Filters';
 import messages from '../../Messages';
@@ -322,7 +323,11 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
                 deleteTitle: intl.formatMessage(messages.resetFilters),
                 onDelete: (event, itemsToRemove, isAll) => {
                   if (isAll) {
-                    updateFilters(AFFECTED_CLUSTERS_INITIAL_STATE);
+                    resetFilters(
+                      filters,
+                      AFFECTED_CLUSTERS_INITIAL_STATE,
+                      updateFilters
+                    );
                   } else {
                     itemsToRemove.map((item) => {
                       const newFilter = {

src/Components/ClusterRules/ClusterRules.cy.js

@@ -251,6 +251,17 @@ describe('cluster rules table', () => {
         .should('have.length', RULES_ENABLED);
     });
 
+    it('will reset filters but not pagination and sorting', () => {
+      filterApply({ description: 'Lo' });
+
+      cy.get('th[data-label="Description"]').find('button').click();
+      cy.get(TOOLBAR).find('button').contains('Reset filters').click();
+      cy.get(TOOLBAR).find(CHIP_GROUP).should('not.exist');
+      cy.get('th[data-label="Description"]')
+        .should('have.attr', 'aria-sort')
+        .and('contain', 'ascending');
+    });
+
     it('chips can be cleared', () => {
       filterApply(filterCombos[0]);
       cy.get(CHIP_GROUP).should('exist');

src/Components/ClusterRules/ClusterRules.js

@@ -48,6 +48,7 @@ import {
 } from '../Common/Tables';
 import {
   CLUSTER_RULES_INITIAL_STATE,
+  resetFilters,
   updateClusterRulesFilters,
 } from '../../Services/Filters';
 import { getErrorKey, getPluginName } from '../../Utilities/Rule';
@@ -409,7 +410,7 @@ const ClusterRules = ({ cluster }) => {
     filters: buildFilterChips(),
     onDelete: (_event, itemsToRemove, isAll) => {
       if (isAll) {
-        updateFilters(CLUSTER_RULES_INITIAL_STATE);
+        resetFilters(filters, CLUSTER_RULES_INITIAL_STATE, updateFilters);
       } else {
         itemsToRemove.map((item) => {
           const newFilter = {

src/Components/ClustersListTable/ClustersListTable.cy.js

@@ -43,6 +43,8 @@ import { CLUSTERS_LIST_COLUMNS } from '../../AppConstants';
 import {
   itemsPerPage,
   checkPaginationTotal,
+  checkCurrentPage,
+  checkPaginationSelected,
   checkPaginationValues,
   changePagination,
 } from '../../../cypress/utils/pagination';
@@ -433,6 +435,26 @@ describe('clusters list table', () => {
       checkRowCounts(DEFAULT_DISPLAYED_SIZE);
     });
 
+    it('will reset filters but not pagination and sorting', () => {
+      filterApply({ name: '0' });
+      changePagination(PAGINATION_VALUES[0]);
+      cy.get(TOOLBAR)
+        .find(PAGINATION)
+        .find('button[data-action="next"]')
+        .then(($button) => {
+          cy.wrap($button).click();
+        });
+
+      cy.get('th[data-label="Name"]').find('button').click();
+      cy.get(TOOLBAR).find('button').contains('Reset filters').click();
+      cy.get(CHIP_GROUP).should('have.length', 1);
+      checkPaginationSelected(0);
+      checkCurrentPage(2);
+      cy.get('th[data-label="Name"]')
+        .should('have.attr', 'aria-sort')
+        .and('contain', 'ascending');
+    });
+
     it('empty state is displayed when filters do not match any rule', () => {
       removeAllChips();
       filterApply({

src/Components/ClustersListTable/ClustersListTable.js

@@ -23,6 +23,7 @@ import { conditionalFilterType } from '@redhat-cloud-services/frontend-component
 
 import {
   CLUSTERS_LIST_INITIAL_STATE,
+  resetFilters,
   updateClustersListFilters,
 } from '../../Services/Filters';
 import {
@@ -281,7 +282,7 @@ const ClustersListTable = ({
         if (isEqual(filters, CLUSTERS_LIST_INITIAL_STATE)) {
           refetch();
         } else {
-          updateFilters(CLUSTERS_LIST_INITIAL_STATE);
+          resetFilters(filters, CLUSTERS_LIST_INITIAL_STATE, updateFilters);
         }
       } else {
         itemsToRemove.map((item) => {

src/Components/RecsListTable/RecsListTable.cy.js

@@ -31,6 +31,8 @@ import {
 import { cumulativeCombinations } from '../../../cypress/utils/combine';
 import {
   checkPaginationTotal,
+  checkCurrentPage,
+  checkPaginationSelected,
   checkPaginationValues,
   changePagination,
   itemsPerPage,
@@ -621,6 +623,22 @@ describe('successful non-empty recommendations list table', () => {
         });
       cy.get(TOOLBAR_FILTER).find('.pf-c-form-control').should('be.empty');
     });
+
+    it('will reset filters but not pagination and sorting', () => {
+      filterApply({ name: '2' });
+      changePagination(PAGINATION_VALUES[0]);
+
+      cy.get('th[data-label="Name"]').find('button').click();
+      cy.get(TOOLBAR).find('button').contains('Reset filters').click();
+      cy.get(TOOLBAR)
+        .find(CHIP_GROUP)
+        .should('have.length', Object.keys(DEFAULT_FILTERS).length);
+      checkPaginationSelected(0);
+      checkCurrentPage(1);
+      cy.get('th[data-label="Name"]')
+        .should('have.attr', 'aria-sort')
+        .and('contain', 'ascending');
+    });
   });
 
   describe('enabling/disabling', () => {

src/Components/RecsListTable/RecsListTable.js

@@ -37,6 +37,7 @@ import {
 import messages from '../../Messages';
 import {
   RECS_LIST_INITIAL_STATE,
+  resetFilters,
   updateRecsListFilters,
 } from '../../Services/Filters';
 import RuleLabels from '../Labels/RuleLabels';
@@ -111,7 +112,14 @@ const RecsListTable = ({ query }) => {
   ]);
 
   useEffect(() => {
-    setFilteredRows(buildFilteredRows(recs, filters));
+    let filteredRows = buildFilteredRows(recs, filters);
+    if (filteredRows.length && filteredRows.length <= filters.offset) {
+      updateFilters({
+        ...filters,
+        offset: 0,
+      });
+    }
+    setFilteredRows(filteredRows);
   }, [
     data,
     filters.category,
@@ -481,7 +489,7 @@ const RecsListTable = ({ query }) => {
         if (isEqual(filters, RECS_LIST_INITIAL_STATE)) {
           refetch();
         } else {
-          updateFilters(RECS_LIST_INITIAL_STATE);
+          resetFilters(filters, RECS_LIST_INITIAL_STATE, updateFilters);
         }
       } else {
         itemsToRemove.map((item) => {

src/Services/Filters.js

@@ -37,8 +37,6 @@ export const CLUSTERS_LIST_INITIAL_STATE = {
 
 // single cluster page
 export const CLUSTER_RULES_INITIAL_STATE = {
-  limit: 20,
-  offset: 0,
   // default sorting by total risk
   // TODO: use a constant instead
   sortIndex: -1,
@@ -53,6 +51,17 @@ const filtersInitialState = {
   clusterRulesState: CLUSTER_RULES_INITIAL_STATE,
 };
 
+export const resetFilters = (filters, initialState, updateFilters) => {
+  const { limit, offset, sortIndex, sortDirection } = filters;
+  updateFilters({
+    ...initialState,
+    ...(limit !== undefined && { limit }),
+    ...(limit !== undefined && { offset }),
+    sortIndex,
+    sortDirection,
+  });
+};
+
 const filters = createSlice({
   name: 'filters',
   initialState: filtersInitialState,
@@ -79,8 +88,6 @@ const filters = createSlice({
 export const {
   updateAffectedClustersFilters,
   updateRecsListFilters,
-  updateRecsListSortIndex,
-  updateRecListSortDirection,
   updateClustersListFilters,
   updateClusterRulesFilters,
 } = filters.actions;