From ab6af2e38e51288315a0c2f2c1834b92c73711f5 Mon Sep 17 00:00:00 2001 From: Michael Johnson Date: Fri, 20 Dec 2024 09:09:39 -0500 Subject: [PATCH] fix(RHINENG-13688): Convert publish date filter to select This PR removes the radios from the publish date filter dropdown on the CVEs table toolbar. It implements the custom Select filter that was created for the Create Report modal. The publish date filter on the CVEs table does not include the "All" option. In order to get all publish dates, a user must remove any applied publish date filter. The Create Report modal, on the other hand, does include the "All" option because there is no way for a user to remove a publish date filter if one is applied. --- .../CustomFilters/SelectCustomFilter.js | 19 ++++---- .../CustomFilters/SelectCustomFilter.test.js | 15 +++++- .../PublishDateFilter.js | 30 +++++------- .../PublishDateFilter.test.js | 48 ------------------- .../Reports/ReportsPage.test.js | 2 - src/Helpers/MiscHelper.test.js | 1 - src/Helpers/constants.js | 16 ++++--- 7 files changed, 47 insertions(+), 84 deletions(-) delete mode 100644 src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/PublishDateFilter.test.js diff --git a/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js b/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js index b6d23e0b8..f557ab40e 100644 --- a/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js +++ b/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js @@ -7,10 +7,10 @@ import { SelectOption } from '@patternfly/react-core'; -const SelectCustomFilter = ({ filterData, setFilterData, selectProps, options, filterId, filterName }) => { +const SelectCustomFilter = ({ filterData, filterId, filterName, options, placeholder, setFilterData, selectProps }) => { const [isOpen, setOpen] = useState(false); - const handleOnRadioChange = (filterId, optionName) => { + const handleSelectChange = (filterId, optionName) => { const optionValue = options.find(item => item.label === optionName).value; setFilterData({ ...filterData, [filterId]: optionValue }); setOpen(false); @@ -27,9 +27,11 @@ const SelectCustomFilter = ({ filterData, setFilterData, selectProps, options, f width: 'auto' }}> { - filterName - ? `${filterName}: ${selectedValue}` - : `${selectedValue}` + selectedValue + ? filterName + ? `${filterName}: ${selectedValue}` + : `${selectedValue}` + : placeholder } ; @@ -39,7 +41,7 @@ const SelectCustomFilter = ({ filterData, setFilterData, selectProps, options, f aria-label="Select Input" isOpen={isOpen} key={filterId} - onSelect={(event, optionName) => handleOnRadioChange(filterId, optionName)} + onSelect={(event, optionName) => handleSelectChange(filterId, optionName)} onOpenChange={(isOpen) => setOpen(isOpen)} selected={selectedValue} toggle={toggle} @@ -66,9 +68,10 @@ SelectCustomFilter.propTypes = { filterName: propTypes.string, filterId: propTypes.string, filterData: propTypes.object, + options: propTypes.array, + placeholder: propTypes.string, setFilterData: propTypes.func, - selectProps: propTypes.object, - options: propTypes.array + selectProps: propTypes.object }; export default SelectCustomFilter; diff --git a/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.test.js b/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.test.js index 915864205..d0d2d0d19 100644 --- a/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.test.js +++ b/src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.test.js @@ -45,7 +45,20 @@ describe('SelectCustomFilter component', () => { })).toBeFalsy(); }); - it('Should update filter data on radio change.', async () => { + it('Should show Filter by publish date default.', async () => { + let filterData = { my_filter: "op1" } + const setFilterData = newData => filterData = newData + + render( + + ); + + expect(screen.getByRole('button', { + name: /filter by publish date/i + })).toBeTruthy(); + }); + + it('Should update filter data on select change.', async () => { let filterData = { my_filter: "op1" } const setFilterData = newData => filterData = newData diff --git a/src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/PublishDateFilter.js b/src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/PublishDateFilter.js index 1c76fe4d6..e6312ca89 100644 --- a/src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/PublishDateFilter.js +++ b/src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/PublishDateFilter.js @@ -1,32 +1,26 @@ - +import React from 'react'; import { conditionalFilterType } from '@redhat-cloud-services/frontend-components/ConditionalFilter'; import { PUBLIC_DATE_OPTIONS } from '../../../../Helpers/constants'; import { intl } from '../../../../Utilities/IntlProvider'; import messages from '../../../../Messages'; +import SelectCustomFilter from '../CustomFilters/SelectCustomFilter'; const publishDateFilter = (apply, currentFilter = {}) => { - let { publish_date: currentValue } = currentFilter; - - // Empty string value is not supported by PF Radio at the moment - if (currentValue === '' || !currentValue) { - currentValue = '0'; - } - - const filterByPublishDate = value => { - apply({ publish_date: (value !== '0' && value) || '', page: 1 }); - }; - return { label: intl.formatMessage(messages.filterPublishDate), - type: conditionalFilterType.radio, + type: conditionalFilterType.custom, key: 'publish_date', urlParam: 'publish_date', filterValues: { - onChange: (event, value) => { - filterByPublishDate(value); - }, - items: PUBLIC_DATE_OPTIONS.map(item => ({ label: item.label, value: item.value })), - value: currentValue + children: ( + + ) } }; }; diff --git a/src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/PublishDateFilter.test.js b/src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/PublishDateFilter.test.js deleted file mode 100644 index 5ec80ae71..000000000 --- a/src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/PublishDateFilter.test.js +++ /dev/null @@ -1,48 +0,0 @@ -import publishDateFilter from './PublishDateFilter' - -describe('PublishDateFilter', () => { - const applyMock = jest.fn(); - - it('Should render the date option items', () => { - const options = [ - { label: 'All', value: 'all' }, - { label: 'Last 7 days', value: 'last7' }, - { label: 'Last 30 days', value: 'last30' }, - { label: 'Last 90 days', value: 'last90' }, - { label: 'Last year', value: 'lastYear' }, - { label: 'More than 1 year ago', value: 'MoreThanYear' } - ] - - const comp = publishDateFilter(applyMock, '') - expect(comp.filterValues.items).toStrictEqual(options) - }) - - it('Should use default currentValue 0', () => { - let comp = publishDateFilter(applyMock, '') - expect(comp.filterValues.value).toBe('0') - - comp = publishDateFilter(applyMock, undefined) - expect(comp.filterValues.value).toBe('0') - - comp = publishDateFilter(applyMock, '5') - expect(comp.filterValues.value).toBe('0') - - }) - - it('Should use the passed currentValue ', () => { - let currentFilter = { publish_date: 'last7' } - let comp = publishDateFilter(applyMock, currentFilter) - expect(comp.filterValues.value).toBe('last7') - }) - - it('Should call apply with params', () => { - let comp = publishDateFilter(applyMock, '1') - comp.filterValues.onChange('event', 'last7') - expect(applyMock).toBeCalledWith({ "page": 1, "publish_date": "last7" }) - - comp.filterValues.onChange('event', '') - expect(applyMock).toBeCalledWith({ "page": 1, "publish_date": "" }) - - }) - -}) diff --git a/src/Components/SmartComponents/Reports/ReportsPage.test.js b/src/Components/SmartComponents/Reports/ReportsPage.test.js index ff5854fe9..91aafcf8a 100644 --- a/src/Components/SmartComponents/Reports/ReportsPage.test.js +++ b/src/Components/SmartComponents/Reports/ReportsPage.test.js @@ -218,8 +218,6 @@ describe('Reports page component', () => { fireEvent.click(screen.getByText(/create report/i)); }); - screen.logTestingPlaygroundURL(); - expect(screen.getByText(/tags: aaanikhdbt: lorntsjort = wrtmpbyfq, bmcrfrl: kgwdqqypt = kvdlie/i)).toBeVisible(); expect(screen.queryByText(/tags: all/i)).toBeFalsy(); }); diff --git a/src/Helpers/MiscHelper.test.js b/src/Helpers/MiscHelper.test.js index 272f9fbab..278edc5e6 100644 --- a/src/Helpers/MiscHelper.test.js +++ b/src/Helpers/MiscHelper.test.js @@ -163,7 +163,6 @@ describe('MiscHelper', () => { publish_filter | expected_data ${{}} | ${{}} ${{ publish_date: 'notValid' }} | ${{ public_from: undefined, public_to: undefined, publish_date: undefined }} - ${{ publish_date: 'all' }} | ${{ public_from: undefined, public_to: undefined, publish_date: 'all' }} ${{ publish_date: 'last7' }} | ${{ public_from: formatDate(subtractDays(7)), public_to: undefined, publish_date: 'last7' }} ${{ publish_date: 'last30' }} | ${{ public_from: formatDate(subtractDays(30)), public_to: undefined, publish_date: 'last30' }} ${{ publish_date: 'last90' }} | ${{ public_from: formatDate(subtractDays(90)), public_to: undefined, publish_date: 'last90' }} diff --git a/src/Helpers/constants.js b/src/Helpers/constants.js index db49831bf..062182a13 100644 --- a/src/Helpers/constants.js +++ b/src/Helpers/constants.js @@ -214,11 +214,6 @@ export const subtractYears = (toSubtract, currDate = new Date()) => { //Public date labels to value export const PUBLIC_DATE_OPTIONS = [ - { - value: 'all', - label: intl.formatMessage(messages.optionsAll), - timespan_label: intlFormatWithBold(messages.customReportTimespanAnytime) - }, { value: 'last7', label: intl.formatMessage(messages.lastxdays, { days: 7 }), @@ -251,6 +246,15 @@ export const PUBLIC_DATE_OPTIONS = [ } ]; +const PUBLIC_DATE_OPTIONS_WITH_ALL = [ + { + value: 'all', + label: intl.formatMessage(messages.optionsAll), + timespan_label: intlFormatWithBold(messages.customReportTimespanAnytime) + }, + ...PUBLIC_DATE_OPTIONS +]; + export const CUSTOM_REPORT_SORT_OPTIONS = [ { value: '-business_risk', @@ -443,7 +447,7 @@ export const getCveReportFilters = (shouldUseHybridSystemFilter = false) => ({ }, publish_date: { title: intl.formatMessage(messages.publishDate), - items: PUBLIC_DATE_OPTIONS, + items: PUBLIC_DATE_OPTIONS_WITH_ALL, component: SelectCustomFilter }, status_id: {