diff --git a/doc/props_table.md b/doc/props_table.md index dbc0e28c3..995989f9e 100644 --- a/doc/props_table.md +++ b/doc/props_table.md @@ -100,24 +100,6 @@ Example in [Patchman UI](https://github.com/RedHatInsights/patchman-ui/blob/mast Props passed to paginations components. -## autoRefresh - -*boolean* - -When `true`, the table is refreshed when `customFilters` are changed. - -## initialLoading - -*boolean* - -When `true`, the table is in loading state on mount until `entities.loaded` is set to `false` (and from that point, `loaded` is the only determinator.). Use when users can go back to already loaded table, this prop ensures that there will be no change from `loaded` > `loading` > `loaded`. - -## ignoreRefresh - -*boolean = true* - -On the initial mount and when items/sortBy are changed, the inventoryTable ignores `onRefresh` prop. By setting the prop to false, you can control this behavior. - ## showTagModal *boolean* diff --git a/src/Routes.js b/src/Routes.js index c761e2acf..d3ff5adff 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -3,11 +3,9 @@ import React, { createContext, lazy, useEffect, - useMemo, useState, } from 'react'; import { Navigate, useRoutes } from 'react-router-dom'; -import { getSearchParams } from './constants'; import RenderWrapper from './Utilities/Wrapper'; import useFeatureFlag from './Utilities/useFeatureFlag'; import { Bullseye, Spinner } from '@patternfly/react-core'; @@ -46,7 +44,6 @@ export const AccountStatContext = createContext({ }); export const Routes = () => { - const searchParams = useMemo(() => getSearchParams(), []); const [hasConventionalSystems, setHasConventionalSystems] = useState(true); const [hasEdgeDevices, setHasEdgeDevices] = useState(true); const edgeParityInventoryListEnabled = useFeatureFlag( @@ -70,7 +67,7 @@ export const Routes = () => { let element = useRoutes([ { path: '/', - element: , + element: , }, { path: '/:inventoryId', element: }, { path: '/:inventoryId/:modalId', element: }, @@ -88,14 +85,7 @@ export const Routes = () => { }, { path: '/manage-edge-inventory', - element: ( - - ), + element: , }, { path: '*', diff --git a/src/Utilities/Wrapper.js b/src/Utilities/Wrapper.js index efd9076e6..73d9dd4ae 100644 --- a/src/Utilities/Wrapper.js +++ b/src/Utilities/Wrapper.js @@ -3,13 +3,7 @@ import PropTypes from 'prop-types'; import { usePermissionsWithContext } from '@redhat-cloud-services/frontend-components-utilities/RBACHook'; import { GENERAL_HOSTS_READ_PERMISSIONS } from '../constants'; -const RenderWrapper = ({ - cmp: Component, - isRbacEnabled, - inventoryRef, - store, - ...props -}) => { +const RenderWrapper = ({ cmp: Component, inventoryRef, store, ...props }) => { const { hasAccess } = usePermissionsWithContext( [GENERAL_HOSTS_READ_PERMISSIONS], true, @@ -22,7 +16,6 @@ const RenderWrapper = ({ {...(inventoryRef && { ref: inventoryRef, })} - isRbacEnabled={isRbacEnabled} hasAccess={hasAccess} store={store} /> @@ -34,7 +27,6 @@ RenderWrapper.propTypes = { inventoryRef: PropTypes.any, store: PropTypes.object, customRender: PropTypes.bool, - isRbacEnabled: PropTypes.bool, }; export default RenderWrapper; diff --git a/src/components/GroupSystems/GroupSystems.js b/src/components/GroupSystems/GroupSystems.js index af4614465..77eab493b 100644 --- a/src/components/GroupSystems/GroupSystems.js +++ b/src/components/GroupSystems/GroupSystems.js @@ -147,7 +147,6 @@ const GroupSystems = ({ groupName, groupId }) => { prepareColumns(columns, true)} hideFilters={{ hostGroupFilter: true }} - initialLoading getEntities={async (items, config, showTags, defaultGetEntities) => await defaultGetEntities( items, @@ -224,7 +223,6 @@ const GroupSystems = ({ groupName, groupId }) => { ref={inventory} showCentosVersions customFilters={{ globalFilter }} - autoRefresh /> )} diff --git a/src/components/ImmutableDevices/ImmutableDevices.js b/src/components/ImmutableDevices/ImmutableDevices.js index 44e6f72a0..f4e2d2754 100644 --- a/src/components/ImmutableDevices/ImmutableDevices.js +++ b/src/components/ImmutableDevices/ImmutableDevices.js @@ -38,7 +38,6 @@ const ImmutableDevices = ({ return ( mergeColumns(defaultColumns)} diff --git a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js index e45612ac1..208a0e853 100644 --- a/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js +++ b/src/components/InventoryGroups/Modals/AddSystemsToGroupModal.js @@ -157,7 +157,6 @@ const AddSystemsToGroupModal = ({ canSelectAll: false, }} bulkSelect={bulkSelectConfig} - initialLoading={true} showTags showCentosVersions showNoGroupOption diff --git a/src/components/InventoryTable/EntityTable.js b/src/components/InventoryTable/EntityTable.js index 0f69398f3..f2898d710 100644 --- a/src/components/InventoryTable/EntityTable.js +++ b/src/components/InventoryTable/EntityTable.js @@ -169,7 +169,6 @@ EntityTable.propTypes = { hasCheckbox: PropTypes.bool, showActions: PropTypes.bool, hasItems: PropTypes.bool, - showHealth: PropTypes.bool, sortBy: PropTypes.shape({ key: PropTypes.string, direction: PropTypes.oneOf(['asc', 'desc']), @@ -197,7 +196,6 @@ EntityTable.propTypes = { EntityTable.defaultProps = { loaded: false, - showHealth: false, expandable: false, hasCheckbox: true, showActions: false, diff --git a/src/components/InventoryTable/EntityTableToolbar.js b/src/components/InventoryTable/EntityTableToolbar.js index 32909a305..f79b6d2ba 100644 --- a/src/components/InventoryTable/EntityTableToolbar.js +++ b/src/components/InventoryTable/EntityTableToolbar.js @@ -237,6 +237,7 @@ const EntityTableToolbar = ({ */ const onRefreshDataInner = useCallback( (options) => { + console.log('OPSSSS', options); if (hasAccess) { onRefreshData(options); if (showTags && !hasItems) { @@ -244,28 +245,7 @@ const EntityTableToolbar = ({ } } }, - [customFilters?.tags] - ); - - /** - * Function used to update data, it either calls `onRefresh` from props or dispatches `onRefreshData`. - * `onRefresh` function takes two parameters - * * entire config with new changes. - * * callback to update data. - * @param {*} config new config to fetch data. - */ - const updateData = (config) => { - if (hasAccess) { - onRefreshDataInner(config); - } - }; - - /** - * Debounced `updateData` function. - */ - const debouncedRefresh = useCallback( - debounce((config) => updateData(config), 800), - [sortBy?.key, sortBy?.direction] + [hasAccess] ); /** @@ -284,7 +264,6 @@ const EntityTableToolbar = ({ hostGroupFilter, } = reduceFilters([...(filters || []), ...(customFilters?.filters || [])]); - debouncedRefresh(); enabledFilters.name && setTextFilter(textFilter); enabledFilters.stale && setStaleFilter(staleFilter); enabledFilters.registeredWith && @@ -303,7 +282,7 @@ const EntityTableToolbar = ({ * @param {*} value new value used for filtering. * @param {*} debounced if debounce function should be used. */ - const onSetTextFilter = (value, debounced = true) => { + const onSetTextFilter = (value) => { const trimmedValue = value?.trim(); const textualFilter = filters?.find( @@ -315,8 +294,7 @@ const EntityTableToolbar = ({ filters?.push({ value: TEXT_FILTER, filter: trimmedValue }); } - const refresh = debounced ? debouncedRefresh : updateData; - refresh({ page: 1, perPage, filters }); + onRefreshDataInner({ page: 1, perPage, filters }); }; /** @@ -352,7 +330,7 @@ const EntityTableToolbar = ({ useEffect(() => { if (shouldReload && enabledFilters.stale) { - onSetFilter(staleFilter, 'staleFilter', debouncedRefresh); + onSetFilter(staleFilter, 'staleFilter', onRefreshDataInner); } }, [staleFilter]); @@ -361,44 +339,44 @@ const EntityTableToolbar = ({ onSetFilter( registeredWithFilter, 'registeredWithFilter', - debouncedRefresh + onRefreshDataInner ); } }, [registeredWithFilter]); useEffect(() => { if (shouldReload && showTags && enabledFilters.tags) { - onSetFilter(mapGroups(selectedTags), 'tagFilters', debouncedRefresh); + onSetFilter(mapGroups(selectedTags), 'tagFilters', onRefreshDataInner); } }, [selectedTags]); useEffect(() => { if (shouldReload && enabledFilters.operatingSystem) { - onSetFilter(osFilterValue, 'osFilter', debouncedRefresh); + onSetFilter(osFilterValue, 'osFilter', onRefreshDataInner); } }, [osFilterValue]); useEffect(() => { if (shouldReload && enabledFilters.rhcdFilter) { - onSetFilter(rhcdFilterValue, 'rhcdFilter', debouncedRefresh); + onSetFilter(rhcdFilterValue, 'rhcdFilter', onRefreshDataInner); } }, [rhcdFilterValue]); useEffect(() => { if (shouldReload && enabledFilters.lastSeenFilter) { - onSetFilter(lastSeenFilterValue, 'lastSeenFilter', debouncedRefresh); + onSetFilter(lastSeenFilterValue, 'lastSeenFilter', onRefreshDataInner); } }, [lastSeenFilterValue]); useEffect(() => { if (shouldReload && enabledFilters.updateMethodFilter) { - onSetFilter(updateMethodValue, 'updateMethodFilter', debouncedRefresh); + onSetFilter(updateMethodValue, 'updateMethodFilter', onRefreshDataInner); } }, [updateMethodValue]); useEffect(() => { if (shouldReload && enabledFilters.hostGroupFilter) { - onSetFilter(hostGroupValue, 'hostGroupFilter', debouncedRefresh); + onSetFilter(hostGroupValue, 'hostGroupFilter', onRefreshDataInner); } }, [hostGroupValue]); @@ -410,7 +388,7 @@ const EntityTableToolbar = ({ [TAG_CHIP]: (deleted) => setSelectedTags( onDeleteTag(deleted, selectedTags, (selectedTags) => - onSetFilter(mapGroups(selectedTags), 'tagFilters', updateData) + onSetFilter(mapGroups(selectedTags), 'tagFilters', onRefreshDataInner) ) ), [STALE_CHIP]: (deleted) => @@ -454,7 +432,7 @@ const EntityTableToolbar = ({ setEndDate(); setStartDate(oldestDate); dispatch(setFilter([])); - updateData({ page: 1, filters: [] }); + onRefreshDataInner({ page: 1, filters: [] }); }; /** @@ -637,7 +615,6 @@ EntityTableToolbar.propTypes = { paginationProps: PropTypes.object, loaded: PropTypes.bool, onRefresh: PropTypes.func, - hasCheckbox: PropTypes.bool, isLoaded: PropTypes.bool, items: PropTypes.array, sortBy: PropTypes.object, @@ -650,7 +627,7 @@ EntityTableToolbar.propTypes = { EntityTableToolbar.defaultProps = { showTags: false, - hasAccess: true, + hasAccess: false, activeFiltersConfig: {}, hideFilters: {}, showNoGroupOption: false, diff --git a/src/components/InventoryTable/InventoryList.js b/src/components/InventoryTable/InventoryList.js index b806c6c76..87d4ae7f7 100644 --- a/src/components/InventoryTable/InventoryList.js +++ b/src/components/InventoryTable/InventoryList.js @@ -1,72 +1,13 @@ /* eslint-disable react/display-name */ -import React, { useEffect, useRef } from 'react'; -import { useSelector } from 'react-redux'; +import React from 'react'; import InventoryEntityTable from './EntityTable'; import { Grid, GridItem } from '@patternfly/react-core'; import PropTypes from 'prop-types'; import './InventoryList.scss'; -import isEqual from 'lodash/isEqual'; import AccessDenied from '../../Utilities/AccessDenied'; -const convertItem = ({ children, isOpen, ...item }) => item; - -/** - * Component that works as a side channel for consumers to notify inventory of new data changes. - */ -const ContextInventoryList = ({ - showHealth, - onRefreshData, - ignoreRefresh, - ...props -}) => { - const prevItems = useRef(props.items); - const prevSortBy = useRef(props.sortBy); - - useEffect(() => { - if (props.hasItems) { - onRefreshData({}, ignoreRefresh); - } - }, []); - - /** - * Function to calculate for new changes, this function limits re-renders by checking if previous items are - * same as new items. - * If items are not passed, it only checks for props sortBy. - * @param {*} prevProps previous props - items, hasItems, sortBy. - */ - useEffect(() => { - if ( - props.hasItems && - !isEqual(prevItems.current.map(convertItem), props.items.map(convertItem)) - ) { - prevItems.current = props.items; - onRefreshData({}, ignoreRefresh); - } - - if (!props.hasItems && !isEqual(prevSortBy.current, props.sortBy)) { - prevSortBy.current = props.sortBy; - onRefreshData({}, ignoreRefresh); - } - }); - - return ( - - - - - - ); -}; - -/** - * Component that consumes active filters and passes them down to component. - */ const InventoryList = React.forwardRef( ({ hasAccess, onRefreshData, ...props }, ref) => { - const activeFilters = useSelector( - ({ entities: { activeFilters } }) => activeFilters - ); - if (ref) { ref.current = { onRefreshData: (params, disableRefresh = true, forceRefresh) => @@ -79,31 +20,20 @@ const InventoryList = React.forwardRef( ) : ( - + + + + + ); } ); -ContextInventoryList.propTypes = { - ...InventoryList.propTypes, - setRefresh: PropTypes.func, - onRefreshData: PropTypes.func, - ignoreRefresh: PropTypes.bool, -}; -ContextInventoryList.defaultProps = { - perPage: 50, - page: 1, - ignoreRefresh: true, -}; InventoryList.propTypes = { showTags: PropTypes.bool, filterEntities: PropTypes.func, loadEntities: PropTypes.func, - showHealth: PropTypes.bool, + hasAccess: PropTypes.bool, page: PropTypes.number, perPage: PropTypes.number, sortBy: PropTypes.shape({ @@ -142,7 +72,7 @@ InventoryList.propTypes = { }; InventoryList.defaultProps = { - hasAccess: true, + hasAccess: false, }; export default InventoryList; diff --git a/src/components/InventoryTable/InventoryTable.js b/src/components/InventoryTable/InventoryTable.js index 891c61863..39c0ea53a 100644 --- a/src/components/InventoryTable/InventoryTable.js +++ b/src/components/InventoryTable/InventoryTable.js @@ -1,14 +1,8 @@ /* eslint-disable react/display-name */ -/* eslint-disable camelcase */ -import React, { - Fragment, - forwardRef, - useEffect, - useRef, - useState, -} from 'react'; +import React, { Fragment, forwardRef, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { shallowEqual, useDispatch, useSelector, useStore } from 'react-redux'; +import { shallowEqual, useDispatch, useSelector } from 'react-redux'; +import debounce from 'lodash/debounce'; import EntityTableToolbar from './EntityTableToolbar'; import { TableToolbar } from '@redhat-cloud-services/frontend-components/TableToolbar'; import { ErrorState } from '@redhat-cloud-services/frontend-components/ErrorState'; @@ -16,35 +10,10 @@ import InventoryList from './InventoryList'; import Pagination from './Pagination'; import AccessDenied from '../../Utilities/AccessDenied'; import { loadSystems } from '../../Utilities/sharedFunctions'; -import isEqual from 'lodash/isEqual'; import { clearErrors, entitiesLoading } from '../../store/actions'; -import cloneDeep from 'lodash/cloneDeep'; import { useSearchParams } from 'react-router-dom'; import { ACTION_TYPES } from '../../store/action-types'; -/** - * A helper function to store props and to always return the latest state. - * For example, EntityTableToolbar wraps OnRefreshData in a callback, so we need this - * to get the latest props and not the props at the time of when the function is - * being wrapped in callback. - */ -export const inventoryCache = () => { - let cache = {}; - - const updateProps = (props) => { - cache = cloneDeep({ ...cache, props }); - }; - - const updateParams = (params) => { - cache = cloneDeep({ ...cache, params }); - }; - - const getProps = () => cache.props; - const getParams = () => cache.params; - - return { updateProps, updateParams, getProps, getParams }; -}; - /** * This component is used to combine all essential components together: * * EntityTableToolbar - to control top toolbar. @@ -52,7 +21,6 @@ export const inventoryCache = () => { * * Pagination - bottom pagination. * It also calculates pagination and sortBy from props or from store if consumer passed items or not. */ - const InventoryTable = forwardRef( ( { @@ -66,23 +34,17 @@ const InventoryTable = forwardRef( showTags, sortBy: propsSortBy, customFilters, - hasAccess = true, + hasAccess = false, isFullView = false, getEntities, getTags, hideFilters, paginationProps, errorState = , - autoRefresh, isLoaded, - initialLoading, - ignoreRefresh, showTagModal, activeFiltersConfig, tableProps, - isRbacEnabled, - hasCheckbox, - abortOnUnmount = true, showCentosVersions = false, ...props }, @@ -117,128 +79,73 @@ const InventoryTable = forwardRef( hasItems ? propsSortBy : invSortBy, shallowEqual ); - - const reduxLoaded = useSelector(({ entities }) => + const activeFilters = useSelector( + ({ entities: { activeFilters } }) => activeFilters, + shallowEqual + ); + const loaded = useSelector(({ entities }) => hasItems && isLoaded !== undefined ? isLoaded && entities?.loaded : entities?.loaded ); const [searchParams] = useSearchParams(); - - const controller = useRef(new AbortController()); - - /** - * If initialLoading is set to true, then the component should be in loading state until - * entities.loaded is false (and then we can use the redux loading state and forget this one) - */ - const [initialLoadingActive, disableInitialLoading] = - useState(initialLoading); - useEffect(() => { - if (!reduxLoaded) { - disableInitialLoading(); - } - }, [reduxLoaded]); - const loaded = reduxLoaded && !initialLoadingActive; - const dispatch = useDispatch(); - const store = useStore(); - useEffect(() => { - return () => { - abortOnUnmount && controller.current.abort(); - }; - }, []); const hasLoadEntitiesError = error?.status === 404 && error?.type === ACTION_TYPES.LOAD_ENTITIES && parseInt(searchParams.get('page')) !== 1; - useEffect(() => { - if (error) { - if (hasLoadEntitiesError) { - onRefreshData({ page: 1 }); - dispatch(clearErrors()); - } - } - }, [error]); - - const cache = useRef(inventoryCache()); - cache.current.updateProps({ - page, - perPage, - items, - sortBy, - hideFilters, - showTags, - getEntities, - customFilters, - hasItems, - activeFiltersConfig, - }); /** * If consumer wants to change data they can call this function via component ref. * @param {*} options new options to be applied, like pagination, filters, etc. */ - const onRefreshData = ( - options = {}, - disableOnRefresh, - forceRefresh = false - ) => { - const { activeFilters } = store.getState().entities; - const cachedProps = cache.current?.getProps() || {}; - const currPerPage = - options?.per_page || options?.perPage || cachedProps.perPage; + const onRefreshData = (options = {}, disableOnRefresh) => { + const currPerPage = options?.per_page || options?.perPage || perPage; - const newParams = { + const params = { page, per_page: currPerPage, - items: cachedProps.items, - sortBy: cachedProps.sortBy, - hideFilters: cachedProps.hideFilters, + items, + sortBy, + hideFilters, filters: activeFilters, - hasItems: cachedProps.hasItems, - //RHIF-246: Compliance app depends on activeFiltersConfig to apply its filters. - activeFiltersConfig: cachedProps.activeFiltersConfig, + hasItems, + activeFiltersConfig, ...customFilters, ...options, - globalFilter: cachedProps?.customFilters?.globalFilter, + globalFilter: customFilters?.globalFilter, }; - //Check for the rbac permissions - const cachedParams = cache.current.getParams(); - if (hasAccess && (!isEqual(cachedParams, newParams) || forceRefresh)) { - cache.current.updateParams(newParams); + if (hasAccess) { if (onRefresh && !disableOnRefresh) { - dispatch(entitiesLoading()); - onRefresh(newParams, (options) => { + onRefresh(params, (options) => { dispatch( - loadSystems( - { ...newParams, ...options, controller: controller.current }, - cachedProps.showTags, - cachedProps.getEntities - ) + loadSystems({ ...params, ...options }, showTags, getEntities) ); }); } else { - dispatch( - loadSystems( - { ...newParams, controller: controller.current }, - cachedProps.showTags, - cachedProps.getEntities - ) - ); + dispatch(loadSystems(params, showTags, getEntities)); } } }; - const prevFilters = useRef(customFilters); + const debouncedRefresh = debounce((config) => onRefreshData(config), 800); + useEffect(() => { - if (autoRefresh && !isEqual(prevFilters.current, customFilters)) { - onRefreshData({ page: 1 }); - prevFilters.current = customFilters; + if (error) { + if (hasLoadEntitiesError) { + debouncedRefresh({ page: 1 }); + dispatch(clearErrors()); + } } - }); + }, [error]); + + useEffect(() => { + dispatch(entitiesLoading()); + debouncedRefresh(); + }, []); return hasAccess === false && isFullView ? ( @@ -315,7 +220,6 @@ const InventoryTable = forwardRef( ); InventoryTable.propTypes = { - autoRefresh: PropTypes.bool, onRefresh: PropTypes.func, children: PropTypes.node, inventoryRef: PropTypes.object, @@ -334,14 +238,9 @@ InventoryTable.propTypes = { paginationProps: PropTypes.object, errorState: PropTypes.node, isLoaded: PropTypes.bool, - initialLoading: PropTypes.bool, - ignoreRefresh: PropTypes.bool, showTagModal: PropTypes.bool, activeFiltersConfig: PropTypes.object, tableProps: PropTypes.object, - isRbacEnabled: PropTypes.bool, - hasCheckbox: PropTypes.bool, - abortOnUnmount: PropTypes.bool, showCentosVersions: PropTypes.bool, showNoGroupOption: PropTypes.bool, // group filter option }; diff --git a/src/components/InventoryTabs/ConventionalSystems/ConventionalSystemsTab.js b/src/components/InventoryTabs/ConventionalSystems/ConventionalSystemsTab.js index c27ab650c..1160c9d4e 100644 --- a/src/components/InventoryTabs/ConventionalSystems/ConventionalSystemsTab.js +++ b/src/components/InventoryTabs/ConventionalSystems/ConventionalSystemsTab.js @@ -61,7 +61,6 @@ const ConventionalSystemsTab = ({ lastSeenFilter, page, perPage, - initialLoading, hasAccess, hostGroupFilter, }) => { @@ -70,18 +69,16 @@ const ConventionalSystemsTab = ({ const inventory = useRef(null); const [isModalOpen, handleModalToggle] = useState(false); const [currentSystem, setCurrentSystem] = useState({}); - const [filters, onSetfilters] = useState( - generateFilter( - status, - source, - tagsFilter, - filterbyName, - operatingSystem, - rhcdFilter, - updateMethodFilter, - hostGroupFilter, - lastSeenFilter - ) + const filters = generateFilter( + status, + source, + tagsFilter, + filterbyName, + operatingSystem, + rhcdFilter, + updateMethodFilter, + hostGroupFilter, + lastSeenFilter ); const [ediOpen, onEditOpen] = useState(false); const [addHostGroupModalOpen, setAddHostGroupModalOpen] = useState(false); @@ -102,16 +99,25 @@ const ConventionalSystemsTab = ({ ); const onRefresh = (options, callback) => { - onSetfilters(options?.filters); - const searchParams = new URLSearchParams(); - calculateFilters(searchParams, options?.filters); - // eslint-disable-next-line camelcase - calculatePagination(searchParams, options?.page, options?.per_page); - const search = searchParams.toString(); - navigate({ - search, - hash: location.hash, - }); + const filterSearchParams = calculateFilters( + new URLSearchParams(), + options?.filters + ); + const searchParams = calculatePagination( + filterSearchParams, + options?.page, + options?.per_page + ); + + navigate( + { + search: searchParams.toString(), + hash: location.hash, + }, + { + replace: true, + } + ); if (callback) { callback(options); @@ -175,15 +181,11 @@ const ConventionalSystemsTab = ({ { perPage !== undefined ? perPage : currSearch.get('per_page'); !isNaN(parseInt(newPage)) && searchParams.append('page', newPage); !isNaN(parseInt(newPerPage)) && searchParams.append('per_page', newPerPage); + + return searchParams; }; diff --git a/src/components/InventoryTabs/ImmutableDevices/EdgeDevicesTab.js b/src/components/InventoryTabs/ImmutableDevices/EdgeDevicesTab.js index 1430c4230..9d4a06856 100644 --- a/src/components/InventoryTabs/ImmutableDevices/EdgeDevicesTab.js +++ b/src/components/InventoryTabs/ImmutableDevices/EdgeDevicesTab.js @@ -25,7 +25,4 @@ const ImmutableDevicesTab = () => { ); }; -ImmutableDevicesTab.defaultProps = { - initialLoading: true, -}; export default ImmutableDevicesTab; diff --git a/src/constants.js b/src/constants.js index a118b2861..6359de915 100644 --- a/src/constants.js +++ b/src/constants.js @@ -132,8 +132,9 @@ export const extraShape = PropTypes.shape({ onClick: PropTypes.func, }); -export const getSearchParams = () => { - const searchParams = new URLSearchParams(location.search); +export const getSearchParams = (rsearchParams) => { + console.log(rsearchParams); + const searchParams = rsearchParams; const status = searchParams.getAll('status'); const source = searchParams.getAll('source'); const filterbyName = searchParams.getAll('hostname_or_id'); diff --git a/src/routes/InventoryTable.js b/src/routes/InventoryTable.js index 5f963ba6d..b6c73855a 100644 --- a/src/routes/InventoryTable.js +++ b/src/routes/InventoryTable.js @@ -8,7 +8,7 @@ import { import Main from '@redhat-cloud-services/frontend-components/Main'; import HybridInventoryTabs from '../components/InventoryTabs/HybridInventoryTabs'; import { Bullseye, Spinner } from '@patternfly/react-core'; -import { useLocation } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; import { getSearchParams } from '../constants'; import useFeatureFlag from '../Utilities/useFeatureFlag'; import { AccountStatContext } from '../Routes'; @@ -34,12 +34,15 @@ const SuspenseWrapper = ({ children }) => ( ); const Inventory = (props) => { - const { search } = useLocation(); - const searchParams = useMemo(() => getSearchParams(), [search.toString()]); - const fullProps = { ...props, ...searchParams }; + const [searchParams] = useSearchParams(); + const fullProps = useMemo( + () => ({ ...props, ...getSearchParams(searchParams) }), + [searchParams] + ); const isEdgeParityEnabled = useFeatureFlag('edgeParity.inventory-list'); const { hasEdgeDevices, hasConventionalSystems } = useContext(AccountStatContext); + return ( @@ -68,7 +71,6 @@ const Inventory = (props) => { }; Inventory.defaultProps = { - initialLoading: true, notificationProp: PropTypes.object, }; Inventory.propTypes = {