diff --git a/src/Components/SmartComponents/CVEs/CVEs.js b/src/Components/SmartComponents/CVEs/CVEs.js index 9d908bea1..9daaa449b 100644 --- a/src/Components/SmartComponents/CVEs/CVEs.js +++ b/src/Components/SmartComponents/CVEs/CVEs.js @@ -4,7 +4,9 @@ import { Alert, Stack, StackItem } from '@patternfly/react-core'; import PropTypes from 'prop-types'; import { CVES_ALLOWED_PARAMS, PATCHMAN_ADVISORY_DOCS_PATH, PERMISSIONS, SERVICE_NAME } from '../../../Helpers/constants'; import { createCveListByAccount } from '../../../Helpers/VulnerabilityHelper'; -import { constructFilterParameters, useUrlParams } from '../../../Helpers/MiscHelper'; +import { constructFilterParameters } from '../../../Helpers/MiscHelper'; +import useUrlParams from '../../../Helpers/useUrlParams'; + import BusinessRiskModal from '../Modals/BusinessRiskModal'; import StatusModal from '../Modals/CveStatusModal'; import CVEsTable from './CVEsTable'; diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #0.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #0.png index b5d231780..a0c9fd7cb 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #0.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #0.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #1.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #1.png index b5d231780..c488482c8 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #1.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #1.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #10.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #10.png deleted file mode 100644 index 86124d416..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #10.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #11.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #11.png deleted file mode 100644 index b5d231780..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #11.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #12.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #12.png deleted file mode 100644 index b5d231780..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #12.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #2.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #2.png index b5d231780..c488482c8 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #2.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #2.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #3.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #3.png deleted file mode 100644 index b5d231780..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #3.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #4.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #4.png deleted file mode 100644 index b5d231780..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #4.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #5.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #5.png deleted file mode 100644 index b5d231780..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #5.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #6.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #6.png deleted file mode 100644 index b5d231780..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #6.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #7.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #7.png deleted file mode 100644 index b5d231780..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #7.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #8.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #8.png deleted file mode 100644 index b5d231780..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #8.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #9.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #9.png deleted file mode 100644 index 86124d416..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table exists and matches screenshot #9.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #0.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #0.png index a8b53b407..0052c951a 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #0.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #0.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #1.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #1.png index f9f91e802..0052c951a 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #1.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #1.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #2.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #2.png index f9f91e802..0052c951a 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #2.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #2.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #3.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #3.png deleted file mode 100644 index f9f91e802..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #3.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #4.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #4.png deleted file mode 100644 index f9f91e802..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #4.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #5.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #5.png deleted file mode 100644 index f9f91e802..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #5.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #6.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #6.png deleted file mode 100644 index f9f91e802..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #6.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #7.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #7.png deleted file mode 100644 index f9f91e802..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table has expanded row that matches screenshot #7.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #0.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #0.png index 31422993a..24ec8f5db 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #0.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #0.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #1.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #1.png index 125022dc3..24ec8f5db 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #1.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #1.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #2.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #2.png index 125022dc3..24ec8f5db 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #2.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #2.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #3.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #3.png deleted file mode 100644 index 125022dc3..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #3.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #4.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #4.png deleted file mode 100644 index 125022dc3..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #4.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #5.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #5.png deleted file mode 100644 index 125022dc3..000000000 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table shows missing metadata empty state when CVE description is unknown #5.png and /dev/null differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without canEditStatusOrBusinessRisk permission matches screenshot #0.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without canEditStatusOrBusinessRisk permission matches screenshot #0.png index 2650364b9..f5c6347c8 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without canEditStatusOrBusinessRisk permission matches screenshot #0.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without canEditStatusOrBusinessRisk permission matches screenshot #0.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without canEditStatusOrBusinessRisk permission matches screenshot #1.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without canEditStatusOrBusinessRisk permission matches screenshot #1.png new file mode 100644 index 000000000..f5c6347c8 Binary files /dev/null and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without canEditStatusOrBusinessRisk permission matches screenshot #1.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without items exists and matches screenshot #0.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without items exists and matches screenshot #0.png index 3b85eef81..fb507129e 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without items exists and matches screenshot #0.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without items exists and matches screenshot #0.png differ diff --git a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without items exists and matches screenshot #1.png b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without items exists and matches screenshot #1.png index ef3273116..fb507129e 100644 Binary files a/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without items exists and matches screenshot #1.png and b/src/Components/SmartComponents/CVEs/__image_snapshots__/CVE list table without items exists and matches screenshot #1.png differ diff --git a/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.js b/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.js index 18258b331..b29e0a964 100644 --- a/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.js +++ b/src/Components/SmartComponents/HybridInventory/ImmutableDevicesTab/ImmutableDevices.js @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import propTypes from 'prop-types'; import { injectIntl } from 'react-intl'; -import { useUrlParams } from '../../../../Helpers/MiscHelper'; +import useUrlParams from '../../../../Helpers/useUrlParams'; import { useDispatch, useSelector } from 'react-redux'; import useInsightsNavigate from '@redhat-cloud-services/frontend-components-utilities/useInsightsNavigate'; import ReducerRegistry from '../../../../Utilities/ReducerRegistry'; @@ -47,7 +47,9 @@ const ImmutableDevices = ({ intl, cveName, filterRuleValues, inventoryRef, heade useEffect(() => apply(urlParameters), []); - useEffect(() => setUrlParams({ ...parameters, ...headerFilters }), [parameters, headerFilters]); + useEffect(() => ( + setUrlParams({ ...parameters, ...headerFilters }) + ), [JSON.stringify(parameters), JSON.stringify(headerFilters)]); const getEntities = useGetEntities( { diff --git a/src/Components/SmartComponents/SystemCves/SystemCves.js b/src/Components/SmartComponents/SystemCves/SystemCves.js index 8f0fb4640..7a72fba21 100644 --- a/src/Components/SmartComponents/SystemCves/SystemCves.js +++ b/src/Components/SmartComponents/SystemCves/SystemCves.js @@ -23,9 +23,10 @@ import { useDispatch, useSelector } from 'react-redux'; import { CVES_ALLOWED_PARAMS, SYSTEM_DETAILS_HEADER } from '../../../Helpers/constants'; import { constructFilterParameters, - useUrlParams, updateRef } from '../../../Helpers/MiscHelper'; +import useUrlParams from '../../../Helpers/useUrlParams'; + import { createCveListBySystem } from '../../../Helpers/VulnerabilityHelper'; import { Stack, diff --git a/src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTable.js b/src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTable.js index 6572513d4..1c93edab9 100644 --- a/src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTable.js +++ b/src/Components/SmartComponents/SystemsExposedTable/SystemsExposedTable.js @@ -1,7 +1,8 @@ import propTypes from 'prop-types'; import { injectIntl } from 'react-intl'; import messages from '../../../Messages'; -import { translateUrlSortParameter, useUrlParams } from '../../../Helpers/MiscHelper'; +import { translateUrlSortParameter } from '../../../Helpers/MiscHelper'; +import useUrlParams from '../../../Helpers/useUrlParams'; import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import React, { Fragment, useEffect, useState } from 'react'; import CvePairStatusModal from '../Modals/CvePairStatusModal'; diff --git a/src/Components/SmartComponents/SystemsPage/SystemsPage.js b/src/Components/SmartComponents/SystemsPage/SystemsPage.js index a07ab2d16..087d9506d 100644 --- a/src/Components/SmartComponents/SystemsPage/SystemsPage.js +++ b/src/Components/SmartComponents/SystemsPage/SystemsPage.js @@ -21,7 +21,8 @@ import { fetchSystems, fetchSystemsIds } from '../../../Store/Actions/Actions'; -import { translateUrlSortParameter, useUrlParams } from '../../../Helpers/MiscHelper'; +import { translateUrlSortParameter } from '../../../Helpers/MiscHelper'; +import useUrlParams from '../../../Helpers/useUrlParams'; import { InventoryTable } from '@redhat-cloud-services/frontend-components/Inventory'; import ErrorHandler from '../../PresentationalComponents/ErrorHandler/ErrorHandler'; import { TableVariant } from '@patternfly/react-table'; @@ -63,7 +64,6 @@ const SystemsPage = () => { const items = useSelector(({ entities }) => entities?.rows || [], shallowEqual); const totalItems = useSelector(({ entities }) => entities?.total); - const meta = useSelector(({ entities }) => entities?.meta); const selectedRows = useSelector(({ entities }) => entities?.selectedRows || []); const selectedRowsCount = useSelector(({ entities }) => entities?.selectedRowsCount ?? 0); const isLoaded = useSelector(({ entities }) => entities?.loaded || false); @@ -101,8 +101,6 @@ const SystemsPage = () => { useEffect(() => apply(urlParameters), []); - useEffect(() => setUrlParams({ ...parameters, ...meta }), [setUrlParams, parameters, meta]); - const handleSelect = (payload, selecting) => dispatch(selectRows(payload, selecting)); const onRefreshInventory = () => { @@ -114,7 +112,7 @@ const SystemsPage = () => { }; const doOptOut = useOptOutSystems(onRefreshInventory); - const getEntities = useGetEntities(APIHelper.getSystems, {}); + const getEntities = useGetEntities(APIHelper.getSystems, { setUrlParams }); const [columnCounter, setColumnCount] = useState(0); useEffect(() => setColumnCount(columnCounter + 1), [columns]); diff --git a/src/Helpers/MiscHelper.js b/src/Helpers/MiscHelper.js index 29d97bfad..5e8288c4f 100644 --- a/src/Helpers/MiscHelper.js +++ b/src/Helpers/MiscHelper.js @@ -4,7 +4,6 @@ import findIndex from 'lodash/findIndex'; import propTypes from 'prop-types'; import React from 'react'; import { impactList, PUBLIC_DATE_OPTIONS } from './constants'; -import qs from 'query-string'; import { coerce, compare, rcompare } from 'semver'; import cloneDeep from 'lodash/cloneDeep'; import { Icon } from '@patternfly/react-core'; @@ -54,24 +53,6 @@ export function constructParameters(apiProps, allowedParams, shouldUseHybridSyst return []; } -// TODO DRY:similar to constructParameters -export function constructURLParameters(urlParams, allowedParams) { - if (urlParams) { - const params = { ...urlParams }; - Object.keys(urlParams).forEach( - key => ( - params[key] === undefined - || params[key] === '' - || !allowedParams.includes(key) - || params[key] === false - ) - && delete params[key] - - ); - return params; - } -} - export function formatDate(date = new Date(), includeTime = false) { const prepend = (number) => `${`${number}`.length === 1 ? '0' : ''}${number}`; const toFormat = new Date(date); @@ -173,18 +154,6 @@ export const updateStateSet = (stateSet, names, value) => { return stateSet; }; -export const useUrlParams = (allowedParams) => { - const url = new URL(window.location); - const urlParams = qs.parse(url.search); - - const setUrlParams = (parameters) => { - const searchParams = qs.stringify(constructURLParameters(parameters, allowedParams)); - window.history.replaceState(null, null, `${url.origin}${url.pathname}?${searchParams}${url.hash}`); - }; - - return [urlParams, setUrlParams]; -}; - // TODO: Refactor export const updateRef = (meta, params, apply) => { const pages = parseInt(meta.pages); diff --git a/src/Helpers/MiscHelper.test.js b/src/Helpers/MiscHelper.test.js index 272f9fbab..0fa768c6d 100644 --- a/src/Helpers/MiscHelper.test.js +++ b/src/Helpers/MiscHelper.test.js @@ -169,26 +169,12 @@ describe('MiscHelper', () => { ${{ publish_date: 'last90' }} | ${{ public_from: formatDate(subtractDays(90)), public_to: undefined, publish_date: 'last90' }} ${{ publish_date: 'lastYear' }} | ${{ public_from: formatDate(subtractYears(1)), public_to: undefined, publish_date: 'lastYear' }} ${{ publish_date: 'MoreThanYear' }} | ${{ public_from: undefined, public_to: formatDate(subtractYears(1)), publish_date: 'MoreThanYear' }} - + `('constructFilterParameters - publish_filter', ({ publish_filter, expected_data }) => { const filter = constructFilterParameters(publish_filter); expect(filter).toEqual(expected_data); }); - it('useUrlParams', () => { - const mockLocation = new URL('https://localhost:1337/insights/vulnerability/cves?page=1&severity=3'); - window.location = mockLocation; - - const [urlParams, setUrlParams] = useUrlParams(['a', 'b']); - setUrlParams({ filter: 'testFilter' }); - - expect(urlParams).toEqual({ - page: '1', - severity: '3' - }); - expect(mockHistory.replaceState).toHaveBeenCalled(); - }); - it('Should updateRef update with the same page', () => { const testParameters = { page: 10 }; const testMeta = { page: 10, pages: 10, cvesCount: 10 }; @@ -217,20 +203,4 @@ describe('MiscHelper', () => { const result = formatDate(); expect(result).toEqual(expect.anything()); }); - - it.each` - urlParams | expected_data - ${undefined} | ${undefined} - ${{}} | ${{}} - ${{ a: 'testValue', b: undefined }} | ${{ a: 'testValue' }} - ${{ a: false, b: 'testValue' }} | ${{ b: 'testValue' }} - ${{ a: 'testValue', c: 'testValue' }} | ${{ a: 'testValue' }} - ${{ a: '', b: 'testValue' }} | ${{ b: 'testValue' }} - - - `('constructURLParameters', ({ urlParams, expected_data }) => { - const result = constructURLParameters(urlParams, ['a', 'b']); - expect(result).toEqual(expected_data); - }); - }); diff --git a/src/Helpers/useUrlParams.js b/src/Helpers/useUrlParams.js new file mode 100644 index 000000000..15c8a6463 --- /dev/null +++ b/src/Helpers/useUrlParams.js @@ -0,0 +1,34 @@ +import { useCallback } from 'react'; +import { useSearchParams } from 'react-router-dom'; + +// TODO DRY:similar to constructParameters +export function constructURLParameters(urlParams, allowedParams) { + if (urlParams) { + const params = { ...urlParams }; + Object.keys(urlParams).forEach( + key => ( + params[key] === undefined + || params[key] === '' + || !allowedParams.includes(key) + || params[key] === false + ) + && delete params[key] + + ); + return params; + } +} + +export const useUrlParams = (allowedParams) => { + const [searchParams, setSearchParams] = useSearchParams(); + + const setUrlParams = useCallback((parameters) => { + const para = constructURLParameters(parameters, allowedParams); + + setSearchParams(para); + }, [JSON.stringify(allowedParams)]); + + return [searchParams, setUrlParams]; +}; + +export default useUrlParams; diff --git a/src/Helpers/useUrlParams.test.js b/src/Helpers/useUrlParams.test.js new file mode 100644 index 000000000..8a025ed76 --- /dev/null +++ b/src/Helpers/useUrlParams.test.js @@ -0,0 +1,35 @@ +import { renderHook, act } from '@testing-library/react'; +import { createTestWrapper } from '../Utilities/TestWrapper'; +import { MemoryRouter } from 'react-router-dom'; + +import useUrlParams, { constructURLParameters } from './useUrlParams'; + +describe('MiscHelper', () => { + it('useUrlParams', async () => { + const { result } = renderHook(() => useUrlParams(['a', 'b']), { + wrapper: createTestWrapper(MemoryRouter, { initialEntries: ['/'] }) + }); + + await act(()=> { + result.current[1]({ a: 'testValue', b: 'testValue', c: 'testValue' }); + }); + + expect(result.current[0].get('a')).toEqual('testValue'); + expect(result.current[0].get('b')).toEqual('testValue'); + expect(result.current[0].get('c')).toEqual(null); + }); + + it.each` + urlParams | expected_data + ${undefined} | ${undefined} + ${{}} | ${{}} + ${{ a: 'testValue', b: undefined }} | ${{ a: 'testValue' }} + ${{ a: false, b: 'testValue' }} | ${{ b: 'testValue' }} + ${{ a: 'testValue', c: 'testValue' }} | ${{ a: 'testValue' }} + ${{ a: '', b: 'testValue' }} | ${{ b: 'testValue' }} + `('constructURLParameters', ({ urlParams, expected_data }) => { // eslint-disable-line camelcase + + const result = constructURLParameters(urlParams, ['a', 'b']); + expect(result).toEqual(expected_data); + }); +}); diff --git a/src/Utilities/TestWrapper.js b/src/Utilities/TestWrapper.js index b1fcc9d02..2629a55b3 100644 --- a/src/Utilities/TestWrapper.js +++ b/src/Utilities/TestWrapper.js @@ -22,4 +22,10 @@ TestWrapper.propTypes = { store: propTypes.object }; +export const createTestWrapper = (Wrapper = TestWrapper, props) => { + return function CreatedWrapper({ children }) { // eslint-disable-line + return {children}; + }; +}; + export default TestWrapper;