Merge branch 'master' into snyk-upgrade-c1ec17a80d627d684bf532dadc6e4fd3

deploy/frontend.yml

@@ -48,4 +48,4 @@ parameters:
   - name: IMAGE_TAG
     required: true
   - name: IMAGE
-    value: quay.io/cloudservices/vulnerability-ui
+    value: quay.io/redhat-services-prod/insights-management-tenant/insights-vulnerability/vulnerability-ui

locales/en.json

@@ -182,7 +182,7 @@
   "justificationNote": "Justification note",
   "kebab.editBusinnesRisk": "Edit business risk",
   "kebab.editStatus": "Edit status",
-  "kebab.exportAsPDF": "Export as PDF",
+  "kebab.exportToPDF": "Export to PDF",
   "knowledgebasearticle": "Knowledgebase article",
   "knownExploit": "Known exploit",
   "knownExploitDescription": "This CVE is identified with a “Known exploit” label because Red Hat has determined this CVE has a public exploit. This CVE is unpatched on your system. CVEs with this label should be addressed with high priority due to the risks posed by them. “Known exploit” does not mean we have taken steps to determine if the CVE has been exploited in your environment.",

package.json

@@ -14,7 +14,7 @@
     "@redhat-cloud-services/frontend-components": "^4.2.14",
     "@redhat-cloud-services/frontend-components-notifications": "^4.1.0",
     "@redhat-cloud-services/frontend-components-pdf-generator": "^4.0.6",
-    "@redhat-cloud-services/frontend-components-translations": "^3.2.8",
+    "@redhat-cloud-services/frontend-components-translations": "^3.2.9",
     "@redhat-cloud-services/frontend-components-utilities": "^4.0.11",
     "@redhat-cloud-services/host-inventory-client": "^1.4.4",
     "@redhat-cloud-services/vulnerabilities-client": "^1.4.3",

renovate.json

@@ -0,0 +1,11 @@
+{
+    "extends": [
+        "github>konflux-ci/mintmaker//config/renovate/renovate.json"
+    ],
+    "schedule": [
+        "on Monday after 3am and before 10am"
+    ],
+    "ignorePaths": [
+      ".pre-commit-config.yaml"
+    ]
+}

src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import propTypes from 'prop-types';
+import {
+    MenuToggle,
+    Select,
+    SelectList,
+    SelectOption
+} from '@patternfly/react-core';
+
+const SelectCustomFilter = ({ filterData, setFilterData, selectProps, options, filterId, filterName }) => {
+    const [isOpen, setOpen] = useState(false);
+
+    const handleOnRadioChange = (filterId, optionName) => {
+        const optionValue = options.find(item => item.label === optionName).value;
+        setFilterData({ ...filterData, [filterId]: optionValue });
+        setOpen(false);
+    };
+
+    const selectedValue = options.find(item => item.value === filterData[filterId])?.label;
+
+    const toggle = toggleRef =>
+        <MenuToggle
+            ref={toggleRef}
+            onClick={() => setOpen(!isOpen)}
+            isExpanded={isOpen}
+            style={{
+                width: 'auto'
+            }}>
+            {
+                filterName
+                    ? `${filterName}: ${selectedValue}`
+                    : `${selectedValue}`
+            }
+        </MenuToggle>;
+
+    return (
+        <div className="pf-v5-c-select pf-v5-u-mr-sm pf-v5-u-mb-sm" style={{ width: 'auto' }}>
+            <Select
+                aria-label="Select Input"
+                isOpen={isOpen}
+                key={filterId}
+                onSelect={(event, optionName) => handleOnRadioChange(filterId, optionName)}
+                onOpenChange={(isOpen) => setOpen(isOpen)}
+                selected={selectedValue}
+                toggle={toggle}
+                shouldFocusToggleOnSelect
+                {... selectProps}
+            >
+                <SelectList>
+                    {options.map(item =>
+                        <SelectOption
+                            width="100%"
+                            key={filterId + item.label}
+                            value={item.label}
+                        >
+                            {item.label}
+                        </SelectOption>
+                    )}
+                </SelectList>
+            </Select>
+        </div>
+    );
+};
+
+SelectCustomFilter.propTypes = {
+    filterName: propTypes.string,
+    filterId: propTypes.string,
+    filterData: propTypes.object,
+    setFilterData: propTypes.func,
+    selectProps: propTypes.object,
+    options: propTypes.array
+};
+
+export default SelectCustomFilter;

src/Components/PresentationalComponents/Filters/CustomFilters/SelectCustomFilter.test.js

@@ -0,0 +1,68 @@
+import userEvent from '@testing-library/user-event';
+import SelectCustomFilter from './SelectCustomFilter';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+
+const selectProps = null
+const options = [
+    { value: "op1", label: "option 1" },
+    { value: "op2", label: "option 2" },
+    { value: "op3", label: "option 3" }
+]
+const filterName = "My filter"
+const filterId = "my_filter"
+
+describe('SelectCustomFilter component', () => {
+    it('Should have selected first item by 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={filterId} />
+        );
+
+        await waitFor(() => userEvent.click(screen.getByRole('button', {
+            name: /my filter: option 1/i
+        })));
+
+        const option1 = screen.getByRole('option', {
+            name: /option 1/i
+        });
+        const option2 = screen.getByRole('option', {
+            name: /option 2/i
+        });
+        const option3 = screen.getByRole('option', {
+            name: /option 3/i
+        });
+
+        expect(within(option1).getByRole('img', {
+            hidden: true
+        })).toBeTruthy();
+        expect(within(option2).queryByRole('img', {
+            hidden: true
+        })).toBeFalsy();
+        expect(within(option3).queryByRole('img', {
+            hidden: true
+        })).toBeFalsy();
+    });
+
+    it('Should update filter data on radio change.', async () => {
+        let filterData = { my_filter: "op1" }
+        const setFilterData = newData => filterData = newData
+
+        render(
+            <SelectCustomFilter filterData={filterData} setFilterData={setFilterData} selectProps={selectProps} options={options} filterName={filterName} filterId={filterId} />
+        );
+
+        await waitFor(() => userEvent.click(screen.getByRole('button', {
+            name: /my filter: option 1/i
+        })));
+
+        const option2 = screen.getByRole('option', {
+            name: /option 2/i
+        });
+
+        await waitFor(() => userEvent.click(option2));
+
+        expect(filterData).toStrictEqual({ my_filter: "op2" })
+    });
+});

src/Components/PresentationalComponents/Filters/PrimaryToolbarFilters/ImpactFilter.js

@@ -27,7 +27,7 @@ const impactFilter = (apply, currentFilter = {}) => {
                 label: (
                     <React.Fragment>
                         { item.hasIcon &&
-                            <Icon>
+                            <Icon style={{ width: '1.5rem' }}>
                                 <SecurityIcon
                                     color={item.iconColor} className="pf-v5-u-mr-xs"
                                 />

src/Components/PresentationalComponents/Kebab/KebabItems.js

@@ -10,7 +10,7 @@ export const kebabItemDownloadPDF = (loading, downloadReport, props = {}) => (
             className="pf-v5-c-dropdown__menu-item"
             onClick={() => downloadReport(true)} {...props}
         >
-            {loading ? <FormattedMessage {...messages.loading} /> : <FormattedMessage {...messages.kebabExportAsPDF} />}
+            {loading ? <FormattedMessage {...messages.loading} /> : <FormattedMessage {...messages.kebabexportToPDF} />}
         </button>
     </DropdownItem>
 );

src/Components/SmartComponents/CVEs/CVEsAssets.js

@@ -1,5 +1,5 @@
 
-import React, { useState, useCallback, useContext } from 'react';
+import React, { useState, useCallback } from 'react';
 import { classNames, expandable, sortable, nowrap, wrappable } from '@patternfly/react-table';
 import messages from '../../../Messages';
 import { intl } from '../../../Utilities/IntlProvider';
@@ -9,9 +9,7 @@ import {
     clearNotifications
 } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import { useDispatch } from 'react-redux';
-import { fetchCveListByAccount, clearCVEsStore } from '../../../Store/Actions/Actions';
-import { updateRef } from '../../../Helpers/MiscHelper';
-import { CVETableContext } from './CVEs';
+import { fetchCveListByAccount } from '../../../Store/Actions/Actions';
 
 export const VULNERABILITIES_HEADER = [
     {
@@ -87,26 +85,16 @@ export const useDownloadReport = (parameters, shouldUseHybridSystemFilter) => {
 
 export const useShowModal = (Modal, modalProps = {}) => {
     const [ModalComponent, setModalComponent] = useState(() => () => null);
-    const {
-        cves: { meta } = {},
-        params,
-        methods: { apply } = {}
-    } = useContext(CVETableContext);
-
-    const dispatch = useDispatch();
 
     const showModal = useCallback((cvesList, goToFirstPage) => {
         setModalComponent(() => () =>
             <Modal
                 cves={cvesList}
-                updateRef={() => {
-                    dispatch(clearCVEsStore());
-                    updateRef(goToFirstPage ? { ...meta, page: 1 } : meta, params, apply);
-                }}
+                goToFirstPage={goToFirstPage}
                 {...modalProps}
             />
         );
-    }, [params, apply, meta]);
+    }, [modalProps, Modal]);
 
     return [ModalComponent, showModal];
 };

src/Components/SmartComponents/LandingPage/LandingPage.js

@@ -19,7 +19,7 @@ const LandingPage = () => {
             bodyContent={<FormattedMessage {...messages.ovalPopoverBody} />}
             footerContent={<a href={PRODUCT_DOC} target="__blank" rel="noopener noreferrer">
                 <FormattedMessage {...messages.learnMore} />
-                <Icon>
+                <Icon className="pf-v5-u-ml-xs">
                     <ExternalLinkAltIcon />
                 </Icon>
             </a>}