feat(RHINENG-4604): Update URL on group details

Implements https://issues.redhat.com/browse/RHINENG-4606.

This enables URL updates on filter change on the group details page.

src/components/GroupSystems/GroupSystems.cy.js

@@ -58,10 +58,10 @@ const TEST_ID = hostsAllInGroupFixtures.results[0].groups[0].id;
 const checkSelectedNumber = (number) =>
   checkSelectedNumber_(number, '#bulk-select-systems-toggle-checkbox-text');
 
-const mountTable = () =>
+const mountTable = (initialEntries) =>
   cy.mountWithContext(
     GroupSystems,
-    {},
+    initialEntries ? { routerProps: { initialEntries } } : undefined,
     { groupName: GROUP_NAME, groupId: TEST_ID }
   );
 
@@ -224,27 +224,33 @@ describe('filtering', () => {
     featureFlagsInterceptors.successful();
     systemProfileInterceptors['operating system, successful empty']();
     groupsInterceptors['successful with some items']();
-    mountTable();
-
-    waitForTable(true);
   });
 
   const applyNameFilter = () =>
     cy.get('.ins-c-primary-toolbar__filter').find('input').type('lorem');
   it('renders filter chip', () => {
+    mountTable();
+    waitForTable(true);
+
     applyNameFilter();
     hasChip('Display name', 'lorem');
     cy.wait('@getHosts');
   });
 
   it('sends correct request', () => {
+    mountTable();
+    waitForTable(true);
+
     applyNameFilter();
     cy.wait('@getHosts')
       .its('request.url')
       .should('include', 'hostname_or_id=lorem');
   });
 
   it('can remove the chip or reset filters', () => {
+    mountTable();
+    waitForTable(true);
+
     applyNameFilter();
     cy.wait('@getHosts')
       .its('request.url')
@@ -266,10 +272,27 @@ describe('filtering', () => {
   });
 
   it('should not contain group filter', () => {
+    mountTable();
+    waitForTable(true);
+
     cy.get('button[data-ouia-component-id="ConditionalFilter"]').click();
     cy.get(DROPDOWN_ITEM).should('not.contain', 'Group');
   });
-  // TODO: add more filter cases
+
+  it('should read url pagination', () => {
+    mountTable(['/?per_page=10&page=2']);
+    waitForTable(true);
+
+    cy.ouiaId('CompactPagination').should('contain.text', '11 - 20');
+    cy.get('[aria-label="Current page"]').should('have.value', '2');
+  });
+
+  it('should read url filter', () => {
+    mountTable(['/?hostname_or_id=test']);
+    waitForTable(true);
+
+    hasChip('Display name', 'test');
+  });
 });
 
 describe('selection and bulk selection', () => {

src/components/GroupSystems/GroupSystems.js

@@ -1,26 +1,29 @@
 import { TableVariant, fitContent } from '@patternfly/react-table';
 import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import AddSystemsToGroupModal from '../InventoryGroups/Modals/AddSystemsToGroupModal';
 import InventoryTable from '../InventoryTable/InventoryTable';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import RemoveHostsFromGroupModal from '../InventoryGroups/Modals/RemoveHostsFromGroupModal';
 import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook';
 import {
   NO_MODIFY_GROUP_TOOLTIP_MESSAGE,
   REQUIRED_PERMISSIONS_TO_MODIFY_GROUP,
+  getSearchParams,
 } from '../../constants';
 import {
   ActionButton,
   ActionDropdownItem,
 } from '../InventoryTable/ActionWithRBAC';
-import { clearEntitiesAction } from '../../store/actions';
+import { clearEntitiesAction, setPagination } from '../../store/actions';
 import { useBulkSelectConfig } from '../../Utilities/hooks/useBulkSelectConfig';
 import difference from 'lodash/difference';
 import map from 'lodash/map';
 import useGlobalFilter from '../filters/useGlobalFilter';
 import { hybridInventoryTabKeys } from '../../Utilities/constants';
+import useOnRefresh from '../filters/useOnRefresh';
+import { generateFilter } from '../../Utilities/constants';
 
 export const prepareColumns = (
   initialColumns,
@@ -97,14 +100,49 @@ const GroupSystems = ({ groupName, groupId }) => {
     REQUIRED_PERMISSIONS_TO_MODIFY_GROUP(groupId)
   );
 
+  const [searchParams] = useSearchParams();
+
   useEffect(() => {
+    const { page, perPage } = getSearchParams(searchParams);
+
+    if (perPage !== null || page !== null) {
+      dispatch(setPagination(page, perPage));
+    }
+
     return () => {
       dispatch(clearEntitiesAction());
     };
   }, []);
 
   const calculateSelected = () => (selected ? selected.size : 0);
 
+  const onRefresh = useOnRefresh();
+  const initialFilters = useMemo(() => {
+    const {
+      status,
+      source,
+      tagsFilter,
+      filterbyName,
+      operatingSystem,
+      rhcdFilter,
+      updateMethodFilter,
+      hostGroupFilter,
+      lastSeenFilter,
+    } = getSearchParams(searchParams);
+
+    return generateFilter(
+      status,
+      source,
+      tagsFilter,
+      filterbyName,
+      operatingSystem,
+      rhcdFilter,
+      updateMethodFilter,
+      hostGroupFilter,
+      lastSeenFilter
+    );
+  }, []);
+
   const bulkSelectConfig = useBulkSelectConfig(
     selected,
     globalFilter,
@@ -217,8 +255,10 @@ const GroupSystems = ({ groupName, groupId }) => {
           showTags
           ref={inventory}
           showCentosVersions
-          customFilters={{ globalFilter }}
+          customFilters={{ filters: initialFilters, globalFilter }}
           autoRefresh
+          onRefresh={onRefresh}
+          ignoreRefresh
         />
       )}
     </div>

src/constants.js

@@ -155,8 +155,8 @@ export const getSearchParams = (searchParams) => {
   const rhcdFilter = searchParams.getAll(RHCD_FILTER_KEY);
   const updateMethodFilter = searchParams.getAll(UPDATE_METHOD_KEY);
   const hostGroupFilter = searchParams.getAll(HOST_GROUP_CHIP);
-  const page = searchParams.getAll('page');
-  const perPage = searchParams.getAll('per_page');
+  const page = searchParams.get('page');
+  const perPage = searchParams.get('per_page');
   const lastSeenFilter = searchParams.getAll('last_seen');
   return {
     status,