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 = {