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