fix(RHINENG-13688): Convert publish date filter to select

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