fix: Added logic to get fixed tags only on user action

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele 2022-10-14 14:00:25 +03:00
parent fe3914724b
commit 7eff4105d1
2 changed files with 32 additions and 16 deletions

View File

@ -456,7 +456,7 @@ describe('Vulnerabilties page', () => {
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockCVEList } });
render(<StateVulnerabilitiesWrapper />);
await waitFor(() => expect(screen.getAllByText('Vulnerabilities')).toHaveLength(1));
await waitFor(() => expect(screen.getAllByText(/Fixed in/i)).toHaveLength(20));
await waitFor(() => expect(screen.getAllByText(/see fix tags/i)).toHaveLength(20));
});
it('renders no vulnerabilities if there are not any', async () => {
@ -497,6 +497,7 @@ describe('Vulnerabilties page', () => {
.mockResolvedValue({ status: 200, data: { data: mockCVEFixed } });
render(<StateVulnerabilitiesWrapper />);
await waitFor(() => expect(screen.getAllByText('Vulnerabilities')).toHaveLength(1));
await waitFor(() => expect(screen.getAllByText('1.0.16')).toHaveLength(20));
fireEvent.click(screen.getAllByText(/see fix tags/i)[0]);
await waitFor(() => expect(screen.getByText('1.0.16')).toBeInTheDocument());
});
});

View File

@ -165,11 +165,15 @@ const vulnerabilityCheck = (status) => {
function VulnerabilitiyCard(props) {
const classes = useStyles();
const { cve, name } = props;
const [open, setOpen] = useState(false);
const [openDesc, setOpenDesc] = useState(false);
const [openFixed, setOpenFixed] = useState(false);
const [loadingFixed, setLoadingFixed] = useState(true);
const [fixedInfo, setFixedInfo] = useState([]);
useEffect(() => {
if (!openFixed || !isEmpty(fixedInfo)) {
return;
}
setLoadingFixed(true);
api
.get(`${host()}${endpoints.imageListWithCVEFixed(cve.Id, name)}`)
@ -183,7 +187,7 @@ function VulnerabilitiyCard(props) {
.catch((e) => {
console.error(e);
});
}, []);
}, [openFixed]);
const renderFixedVer = () => {
if (!isEmpty(fixedInfo)) {
@ -215,15 +219,6 @@ function VulnerabilitiyCard(props) {
{cve.Title}
</Typography>
</Stack>
<Stack sx={{ flexDirection: 'row' }}>
<Typography variant="body1" align="left" className={classes.title}>
Fixed In:{' '}
</Typography>
<Typography variant="body1" align="left" className={classes.values} noWrap>
{' '}
{loadingFixed ? 'Loading...' : renderFixedVer()}
</Typography>
</Stack>
<Typography
sx={{
color: '#1479FF',
@ -232,11 +227,31 @@ function VulnerabilitiyCard(props) {
fontWeight: '600',
cursor: 'pointer'
}}
onClick={() => setOpen(!open)}
onClick={() => setOpenFixed(!openFixed)}
>
{!open ? 'See description' : 'Hide description'}
{!openFixed ? 'See fix tags' : 'Hide fix tags'}
</Typography>
<Collapse in={open} timeout="auto" unmountOnExit>
<Collapse in={openFixed} timeout="auto" unmountOnExit>
<Box>
<Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
{' '}
{loadingFixed ? 'Loading...' : renderFixedVer()}{' '}
</Typography>
</Box>
</Collapse>
<Typography
sx={{
color: '#1479FF',
paddingTop: '1rem',
fontSize: '0.8125rem',
fontWeight: '600',
cursor: 'pointer'
}}
onClick={() => setOpenDesc(!openDesc)}
>
{!openDesc ? 'See description' : 'Hide description'}
</Typography>
<Collapse in={openDesc} timeout="auto" unmountOnExit>
<Box>
<Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
{' '}