fix: When all OS versions are selected show 'Any' instead of 'All' (#…

…1405)
RedHatInsights · Dec 7, 2021 · 8b85895 · 8b85895
1 parent 16c3d8c
commit 8b85895
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 18 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -211,6 +211,7 @@
   "numberOfCves.cve": "Number of CVEs",
   "onHold": "On-hold",
   "options.all": "All",
+  "options.any": "Any",
   "osFilterLabel": "Operating system",
   "osFilterLabel.reports": "Applies to OS",
   "osFilterPlaceholder": "Filter by OS",

diff --git a/src/Components/PresentationalComponents/Filters/CustomFilters/CheckboxCustomFilter.js b/src/Components/PresentationalComponents/Filters/CustomFilters/CheckboxCustomFilter.js
@@ -4,7 +4,7 @@ import { Select, SelectOption } from '@patternfly/react-core';
 import { intl } from '../../../../Utilities/IntlProvider';
 import messages from '../../../../Messages';
 
-const CheckboxCustomFilter = ({ filterData, setFilterData, selectProps, options, filterName, filterId }) => {
+const CheckboxCustomFilter = ({ filterData, setFilterData, selectProps, options, filterName, filterId, allSelectedText }) => {
     const [isOpen, setOpen] = useState(false);
 
     const handleOnCheckboxChange = (filterId, optionName) => {
@@ -25,7 +25,7 @@ const CheckboxCustomFilter = ({ filterData, setFilterData, selectProps, options,
         const itemsString = filterData[filterId].map(id => options.find(item => item.value === id).label).join(', ');
 
         return `${filterName}: ${filterData[filterId].length === 0 || filterData[filterId].length === options.length
-            ? intl.formatMessage(messages.optionsAll) : itemsString}`;
+            ? allSelectedText ?? intl.formatMessage(messages.optionsAll) : itemsString}`;
     };
 
     return (
@@ -59,7 +59,8 @@ CheckboxCustomFilter.propTypes = {
     filterData: propTypes.object,
     setFilterData: propTypes.func,
     selectProps: propTypes.object,
-    options: propTypes.array
+    options: propTypes.array,
+    allSelectedText: propTypes.string
 };
 
 export default CheckboxCustomFilter;
diff --git a/src/Components/SmartComponents/Modals/ReportConfigModal.js b/src/Components/SmartComponents/Modals/ReportConfigModal.js
@@ -37,7 +37,7 @@ const ReportConfigModal = ({
     reportTitle,
     setReportTitle
 }) => {
-    const [toggleSwitch, setToggleSwitch] = useState('all');
+    const [includeAllColumns, setIncludeAllColumns] = useState(true);
 
     const activeFilters = [
         'rule_presence',
@@ -61,17 +61,17 @@ const ReportConfigModal = ({
     };
 
     useEffect(() => {
-        if (toggleSwitch === 'all') {
+        if (includeAllColumns) {
             setColumnsToInclude(Object.keys(CVE_REPORT_FILTERS));
         }
 
-    }, [toggleSwitch, setColumnsToInclude]);
+    }, [includeAllColumns, setColumnsToInclude]);
 
     return (
         <Modal
             width="50rem"
             title={intl.formatMessage(messages.configModalTitle)}
-            ouiaId={'custom-report-modal'}
+            ouiaId="custom-report-modal"
             isOpen={isModalOpen}
             onClose={handleModalClose}
             actions={[
@@ -113,6 +113,7 @@ const ReportConfigModal = ({
                             activeFilters.map((filterId) => {
                                 return (
                                     CVE_REPORT_FILTERS[filterId]?.component({
+                                        ...CVE_REPORT_FILTERS[filterId],
                                         filterData,
                                         setFilterData,
                                         selectProps: { className: 'pf-u-mr-sm pf-u-mb-sm',
@@ -132,15 +133,15 @@ const ReportConfigModal = ({
                     <ToggleGroup aria-label="Default with single selectable">
                         <ToggleGroupItem
                             text={intl.formatMessage(messages.customReportDataToggleAll)}
-                            isSelected={toggleSwitch === 'all'}
-                            onChange={() => setToggleSwitch('all')} />
+                            isSelected={includeAllColumns}
+                            onChange={() => setIncludeAllColumns(true)} />
                         <ToggleGroupItem
                             text={intl.formatMessage(messages.customReportDataToggleCustom)}
-                            isSelected={toggleSwitch === 'custom'}
-                            onChange={() => setToggleSwitch('custom')} />
+                            isSelected={!includeAllColumns}
+                            onChange={() => setIncludeAllColumns(false)} />
                     </ToggleGroup>
 
-                    {toggleSwitch === 'custom' &&
+                    {includeAllColumns ||
                         <div style={styles.collumns}>
                             <Checkbox
                                 id="cve_id"

diff --git a/src/Components/SmartComponents/Modals/__snapshots__/ReportConfigModal.test.js.snap b/src/Components/SmartComponents/Modals/__snapshots__/ReportConfigModal.test.js.snap
@@ -552,7 +552,7 @@ exports[`Report config modal component Should match snapshots 1`] = `
                                       <span
                                         class="pf-c-select__toggle-text"
                                       >
-                                        Applies to OS: All
+                                        Applies to OS: Any
                                       </span>
                                     </div>
                                     <span
@@ -2446,7 +2446,7 @@ exports[`Report config modal component Should match snapshots 1`] = `
                                             onToggle={[Function]}
                                             onTypeaheadInputChanged={null}
                                             ouiaSafe={true}
-                                            placeholderText="Applies to OS: All"
+                                            placeholderText="Applies to OS: Any"
                                             position="left"
                                             removeSelectionAriaLabel="Remove"
                                             selections={Array []}
@@ -2523,7 +2523,7 @@ exports[`Report config modal component Should match snapshots 1`] = `
                                                             <span
                                                               class="pf-c-select__toggle-text"
                                                             >
-                                                              Applies to OS: All
+                                                              Applies to OS: Any
                                                             </span>
                                                           </div>
                                                           <span
@@ -2568,7 +2568,7 @@ exports[`Report config modal component Should match snapshots 1`] = `
                                                       <span
                                                         className="pf-c-select__toggle-text"
                                                       >
-                                                        Applies to OS: All
+                                                        Applies to OS: Any
                                                       </span>
                                                     </div>
                                                     <span

diff --git a/src/Helpers/constants.js b/src/Helpers/constants.js
@@ -497,7 +497,8 @@ export const CVE_REPORT_FILTERS = {
         title: intl.formatMessage(messages.osFilterLabelReport),
         items: RHEL_VERSIONS,
         component: CheckboxCustomFilter,
-        selectProps: { style: { maxHeight: '200px', overflow: 'auto' } }
+        selectProps: { style: { maxHeight: '200px', overflow: 'auto' } },
+        allSelectedText: intl.formatMessage(messages.optionsAny)
     }
 };
 

diff --git a/src/Messages.js b/src/Messages.js
@@ -925,9 +925,14 @@ export default defineMessages({
     },
     optionsAll: {
         id: 'options.all',
-        description: 'option "all" for general usage',
+        description: 'Indicates all options are selected; for general usage',
         defaultMessage: 'All'
     },
+    optionsAny: {
+        id: 'options.any',
+        description: 'Indicates any option is selected; for general usage',
+        defaultMessage: 'Any'
+    },
     lastxdays: {
         id: 'lastxdays',
         description: 'Last x days label where x is a predefined value',