feat(custom report): Use radio buttons for sort selection in dropdown

RedHatInsights · Oct 17, 2024 · 3b56873 · 3b56873
1 parent 14e6ed2
commit 3b56873
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 96 deletions.
diff --git a/src/Components/PresentationalComponents/Filters/CustomFilters/RadioCustomFilter.js b/src/Components/PresentationalComponents/Filters/CustomFilters/RadioCustomFilter.js
@@ -16,13 +16,19 @@ const RadioCustomFilter = ({ filterData, setFilterData, selectProps, options, fi
         setFilterData({ ...filterData, [filterId]: optionValue });
     };
 
+    const selectedValue = options.find(item => item.value === filterData[filterId])?.label;
+
     return (
         <Select
             variant="single"
             aria-label="Select Input"
             onToggle={() => setOpen(!isOpen)}
             isOpen={isOpen}
-            placeholderText={`${filterName}: ${options.find(item => item.value === filterData[filterId])?.label}`}
+            placeholderText={
+                filterName
+                    ? `${filterName}: ${selectedValue}`
+                    : `${selectedValue}`
+            }
             key={filterId}
             onSelect={(event, optionName) => { handleOnRadioChange(filterId, optionName); }}
             width="auto"

diff --git a/src/Components/PresentationalComponents/Sorters/CustomSorters/SelectCustomSorter.js b/src/Components/PresentationalComponents/Sorters/CustomSorters/SelectCustomSorter.js
diff --git a/src/Components/PresentationalComponents/Sorters/CustomSorters/SelectCustomSorter.test.js b/src/Components/PresentationalComponents/Sorters/CustomSorters/SelectCustomSorter.test.js
diff --git a/src/Components/SmartComponents/Modals/ReportConfigModal.js b/src/Components/SmartComponents/Modals/ReportConfigModal.js
@@ -24,12 +24,12 @@ import messages from '../../../Messages';
 import { intl } from '../../../Utilities/IntlProvider';
 import styles from '../Reports/Common/styles';
 import { isCvssRangeValid } from '../../PresentationalComponents/Filters/CustomFilters/CvssCustomFilter';
-import SelectCustomSorter from '../../PresentationalComponents/Sorters/CustomSorters/SelectCustomSorter';
 import TagFilter from '../../PresentationalComponents/Filters/CustomFilters/TagFilter';
 import { fetchOperatingSystems } from '../../../Store/Actions/Actions';
 import buildOSGroups from '../Reports/Common/buildOSGroups';
 import { useHybridSystemFilterFlag, useFeatureFlag } from '../../../Helpers/Hooks';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import RadioCustomFilter from '../../PresentationalComponents/Filters/CustomFilters/RadioCustomFilter';
 
 const ReportConfigModal = ({
     isOpen: isModalOpen,
@@ -242,9 +242,13 @@ const ReportConfigModal = ({
                     label={intl.formatMessage(messages.customReportSortDataByLabel)}
                 >
                     <div className="custom-report-select-wrapper">
-                        <SelectCustomSorter sorterData={sorterData} setSorterData={setSorterData}
-                            selectProps={{ className: 'pf-v5-u-mr-sm pf-v5-u-mb-sm' }}
-                            options={CUSTOM_REPORT_SORT_OPTIONS} />
+                        <RadioCustomFilter
+                            filterData={sorterData}
+                            setFilterData={setSorterData}
+                            selectProps={{ direction: 'up', className: 'pf-v5-u-mr-sm pf-v5-u-mb-sm' }}
+                            options={CUSTOM_REPORT_SORT_OPTIONS}
+                            filterId="sort"
+                        />
                     </div>
                 </FormGroup>
                 <FormGroup

diff --git a/src/Components/SmartComponents/Reports/ReportsPage.js b/src/Components/SmartComponents/Reports/ReportsPage.js
@@ -9,7 +9,7 @@ import { intl } from '../../../Utilities/IntlProvider';
 import { ChartPieSolid } from '../../PresentationalComponents/CustomIcons/CustomIcons';
 import Header from '../../PresentationalComponents/Header/Header';
 import DownloadCVEsReport from '../Reports/DownloadCVEsReport';
-import { buildFilters, constructReportParameters, getDefaultFilterData } from '../../../Helpers/ReportsHelper';
+import { buildFilters, constructFilterParameters, getDefaultFilterData } from '../../../Helpers/ReportsHelper';
 import { getCveReportFilters, CUSTOM_REPORT_DEFAULT_SORT, PERMISSIONS } from '../../../Helpers/constants';
 import styles from './Common/styles';
 import { clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
@@ -32,7 +32,7 @@ const ReportsPage = () => {
     const [userNotes, setUserNotes] = useState('');
     const [columnsToInclude, setColumnsToInclude] = useState(Object.keys(CVE_REPORT_FILTERS));
     const [filterData, setFilterData] = useState(DEFAULT_FILTER_DATA);
-    const [sorterData, setSorterData] = useState(CUSTOM_REPORT_DEFAULT_SORT);
+    const [sorterData, setSorterData] = useState({ sort: CUSTOM_REPORT_DEFAULT_SORT });
     const [inheritGlobalTags, setInheritGlobalTags] = useState(true);
     const [cvesWithoutErrata, setCvesWithoutErrata] = useState(false);
 
@@ -57,7 +57,7 @@ const ReportsPage = () => {
         setUserNotes('');
         setColumnsToInclude(Object.keys(CVE_REPORT_FILTERS));
         setFilterData(DEFAULT_FILTER_DATA);
-        setSorterData(CUSTOM_REPORT_DEFAULT_SORT);
+        setSorterData({ sort: CUSTOM_REPORT_DEFAULT_SORT });
         setDownloadCVEReport(false);
         setModalOpen(false);
     };
@@ -155,10 +155,17 @@ const ReportsPage = () => {
                         }}
                         showButton={false}
                         onSuccess={handleModalClose}
-                        params={constructReportParameters({ ...filterData, tags: inheritGlobalTags
-                            ? globalFilterTags?.map(dissectTag) : filterData.tags }, sorterData)}
-                        filters={buildFilters({ ...filterData, tags: inheritGlobalTags
-                            ? globalFilterTags?.map(dissectTag) : filterData.tags }, shouldUseHybridSystemFilter)}
+                        params={{
+                            ...sorterData,
+                            ...constructFilterParameters({
+                                ...filterData,
+                                tags: inheritGlobalTags ? globalFilterTags?.map(dissectTag) : filterData.tags
+                            })
+                        }}
+                        filters={buildFilters({
+                            ...filterData,
+                            tags: inheritGlobalTags ? globalFilterTags?.map(dissectTag) : filterData.tags
+                        }, shouldUseHybridSystemFilter)}
                         isReportDynamic
                         label={messages.configModalExportReport}
                         shouldUseHybridSystemFilter={shouldUseHybridSystemFilter}

diff --git a/src/Helpers/ReportsHelper.js b/src/Helpers/ReportsHelper.js
@@ -107,12 +107,6 @@ export const buildFilters = (filterData, shouldUseHybridSystemFilter = false) =>
     return newValues;
 };
 
-export function constructReportParameters(filterParams, sorterParams) {
-    let reportParams = constructFilterParameters(filterParams);
-    reportParams.sort = sorterParams;
-    return reportParams;
-}
-
 export function constructFilterParameters(filterParams) {
     // construct publish date
     let publicEntry = PUBLIC_DATE_OPTIONS.find(item => item.value === filterParams.publish_date);

diff --git a/src/Messages.js b/src/Messages.js
@@ -358,7 +358,7 @@ export default defineMessages({
     businessRiskModalInfo: {
         id: 'businessRiskModal.info',
         description: 'Information about business risk for users',
-        defaultMessage: `Business risk can be used to identify, 
+        defaultMessage: `Business risk can be used to identify,
         track, and address CVEs that have meaningful impact to your organization.`
     },
 
@@ -401,7 +401,7 @@ export default defineMessages({
     cveStatusModalOverwriteTooltip: {
         id: 'cveStatusModal.overwriteTooltip',
         description: 'label for overwrite checkbox',
-        defaultMessage: `When checked, this setting does not change any pre-existing 
+        defaultMessage: `When checked, this setting does not change any pre-existing
         statuses set on individual systems for this CVE.`
     },
     cveStatusModalSelected: {
@@ -412,13 +412,13 @@ export default defineMessages({
     cveStatusModalInfo: {
         id: 'cveStatusModal.info',
         description: 'label for overwrite checkbox',
-        defaultMessage: `This status is applied to all existing systems affected by {count, plural, one {this CVE} other {these CVEs}}. 
+        defaultMessage: `This status is applied to all existing systems affected by {count, plural, one {this CVE} other {these CVEs}}.
         Any new affected systems will have the status "Not reviewed"`
     },
     cveStatusModalInfoTooltip: {
         id: 'cveStatusModal.infoTooltip',
         description: 'label for overwrite checkbox',
-        defaultMessage: `Example: If a new system is added and matches to this vulnerability, 
+        defaultMessage: `Example: If a new system is added and matches to this vulnerability,
         it will be given a status "Not reviewed"`
     },
     ansibleRemediationTooltip: {
@@ -959,7 +959,7 @@ export default defineMessages({
     cvssBaseScoreHighToLow: {
         id: 'cvssBaseScoreHighToLow',
         description: 'CVSS base score: High to Low sort default option',
-        defaultMessage: 'CVSS base score: High to Low (Default)'
+        defaultMessage: 'CVSS base score: High to Low'
     },
     cvssBaseScoreLowToHigh: {
         id: 'cvssBaseScoreLowToHigh',