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.

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
             }
         </MenuToggle>;
 
@@ -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;

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(
+            <SelectCustomFilter filterData={filterData} setFilterData={setFilterData} selectProps={selectProps} options={options} filterName={filterName} filterId={'publish_date'} placeholder="Filter by publish date" />
+        );
+
+        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
 

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: (
+                <SelectCustomFilter
+                    filterData={currentFilter}
+                    setFilterData={apply}
+                    options={PUBLIC_DATE_OPTIONS}
+                    filterId="publish_date"
+                    placeholder="Filter by publish date"
+                />
+            )
         }
     };
 };

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();
     });

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' }}

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