feat: add expand/collapse view list buttons for vulnerabilities (#409)

Signed-off-by: Andreea-Lupu <andreealupu1470@yahoo.com>
2024-01-17 15:38:39 +02:00 · 2024-01-17 15:38:39 +02:00 · df19fa811c
commit df19fa811c
parent 6cda89c710
4 changed files with 117 additions and 49 deletions
--- a/src/tests/TagPage/VulnerabilitiesDetails.test.js
+++ b/src/tests/TagPage/VulnerabilitiesDetails.test.js
@ -586,6 +586,22 @@ describe('Vulnerabilties page', () => {
    expect(await screen.findByTestId('export-excel-menuItem')).not.toBeInTheDocument();
  });

+  it('should expand/collapse the list of CVEs', async () => {
+    jest
+      .spyOn(api, 'get')
+      .mockResolvedValueOnce({ status: 200, data: { data: mockCVEList } })
+      .mockResolvedValueOnce({ status: 200, data: { data: mockCVEList } });
+    render(<StateVulnerabilitiesWrapper />);
+    await waitFor(() => expect(screen.getAllByText('Vulnerabilities')).toHaveLength(1));
+    await waitFor(() => expect(screen.getAllByText('Fixed in')).toHaveLength(20));
+    const collapseListBtn = await screen.findAllByTestId('ViewHeadlineIcon');
+    fireEvent.click(collapseListBtn[0]);
+    expect(await screen.findByText('Fixed in')).not.toBeVisible();
+    const expandListBtn = await screen.findAllByTestId('ViewAgendaIcon');
+    fireEvent.click(expandListBtn[0]);
+    await waitFor(() => expect(screen.getAllByText('Fixed in')).toHaveLength(20));
+  });
+
  it('should handle fixed CVE query errors', async () => {
    jest
      .spyOn(api, 'get')
--- a/src/components/Shared/VulnerabilityCard.jsx
+++ b/src/components/Shared/VulnerabilityCard.jsx
@ -66,13 +66,18 @@ const useStyles = makeStyles((theme) => ({
    cursor: 'pointer',
    textAlign: 'center'
  },
+  dropdownCVE: {
+    color: '#1479FF',
+    cursor: 'pointer'
+  },
  vulnerabilityCardDivider: {
    margin: '1rem 0'
  }
 }));
 function VulnerabilitiyCard(props) {
  const classes = useStyles();
-  const { cve, name, platform } = props;
+  const { cve, name, platform, expand } = props;
+  const [openCVE, setOpenCVE] = useState(expand);
  const [openDesc, setOpenDesc] = useState(false);
  const [openFixed, setOpenFixed] = useState(false);
  const [loadingFixed, setLoadingFixed] = useState(true);
@ -122,6 +127,10 @@ function VulnerabilitiyCard(props) {
    };
  }, [openFixed, pageNumber]);

+  useEffect(() => {
+    setOpenCVE(expand);
+  }, [expand]);
+
  const loadMore = () => {
    if (loadingFixed || isEndOfList) return;
    setPageNumber((pageNumber) => pageNumber + 1);
@ -166,49 +175,56 @@ function VulnerabilitiyCard(props) {
    <Card className={classes.card} raised>
      <CardContent className={classes.content}>
        <Stack direction="row" spacing="1.25rem">
+          {!openCVE ? (
+            <KeyboardArrowRight className={classes.dropdownCVE} onClick={() => setOpenCVE(!openCVE)} />
+          ) : (
+            <KeyboardArrowDown className={classes.dropdownCVE} onClick={() => setOpenCVE(!openCVE)} />
+          )}
          <Typography variant="body1" align="left" className={classes.cveId}>
            {cve.id}
          </Typography>
          <VulnerabilityChipCheck vulnerabilitySeverity={cve.severity} />
        </Stack>
-        <Typography variant="body1" align="left" className={classes.cveSummary}>
-          {cve.title}
-        </Typography>
-        <Divider className={classes.vulnerabilityCardDivider} />
-        <Stack className={classes.dropdown} onClick={() => setOpenFixed(!openFixed)}>
-          {!openFixed ? (
-            <KeyboardArrowRight className={classes.dropdownText} />
-          ) : (
-            <KeyboardArrowDown className={classes.dropdownText} />
-          )}
-          <Typography className={classes.dropdownText}>Fixed in</Typography>
-        </Stack>
-        <Collapse in={openFixed} timeout="auto" unmountOnExit>
-          <Box sx={{ width: '100%', padding: '0.5rem 0' }}>
-            {loadingFixed ? (
-              'Loading...'
+        <Collapse in={openCVE} timeout="auto" unmountOnExit>
+          <Typography variant="body1" align="left" className={classes.cveSummary}>
+            {cve.title}
+          </Typography>
+          <Divider className={classes.vulnerabilityCardDivider} />
+          <Stack className={classes.dropdown} onClick={() => setOpenFixed(!openFixed)}>
+            {!openFixed ? (
+              <KeyboardArrowRight className={classes.dropdownText} />
            ) : (
-              <Stack direction="row" sx={{ flexWrap: 'wrap' }}>
-                {renderFixedVer()}
-                {renderLoadMore()}
-              </Stack>
+              <KeyboardArrowDown className={classes.dropdownText} />
            )}
-          </Box>
-        </Collapse>
-        <Stack className={classes.dropdown} onClick={() => setOpenDesc(!openDesc)}>
-          {!openDesc ? (
-            <KeyboardArrowRight className={classes.dropdownText} />
-          ) : (
-            <KeyboardArrowDown className={classes.dropdownText} />
-          )}
-          <Typography className={classes.dropdownText}>Description</Typography>
-        </Stack>
-        <Collapse in={openDesc} timeout="auto" unmountOnExit>
-          <Box sx={{ padding: '0.5rem 0' }}>
-            <Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
-              {cve.description}
-            </Typography>
-          </Box>
+            <Typography className={classes.dropdownText}>Fixed in</Typography>
+          </Stack>
+          <Collapse in={openFixed} timeout="auto" unmountOnExit>
+            <Box sx={{ width: '100%', padding: '0.5rem 0' }}>
+              {loadingFixed ? (
+                'Loading...'
+              ) : (
+                <Stack direction="row" sx={{ flexWrap: 'wrap' }}>
+                  {renderFixedVer()}
+                  {renderLoadMore()}
+                </Stack>
+              )}
+            </Box>
+          </Collapse>
+          <Stack className={classes.dropdown} onClick={() => setOpenDesc(!openDesc)}>
+            {!openDesc ? (
+              <KeyboardArrowRight className={classes.dropdownText} />
+            ) : (
+              <KeyboardArrowDown className={classes.dropdownText} />
+            )}
+            <Typography className={classes.dropdownText}>Description</Typography>
+          </Stack>
+          <Collapse in={openDesc} timeout="auto" unmountOnExit>
+            <Box sx={{ padding: '0.5rem 0' }}>
+              <Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
+                {cve.description}
+              </Typography>
+            </Box>
+          </Collapse>
        </Collapse>
      </CardContent>
    </Card>
--- a/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
+++ b/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
@ -9,6 +9,7 @@ import {
  Stack,
  Typography,
  InputBase,
+  ToggleButton,
  Menu,
  MenuItem,
  Divider,
@ -26,6 +27,8 @@ import DownloadIcon from '@mui/icons-material/Download';

 import * as XLSX from 'xlsx';
 import exportFromJSON from 'export-from-json';
+import ViewHeadlineIcon from '@mui/icons-material/ViewHeadline';
+import ViewAgendaIcon from '@mui/icons-material/ViewAgenda';

 import VulnerabilitiyCard from '../../Shared/VulnerabilityCard';

@ -71,6 +74,17 @@ const useStyles = makeStyles((theme) => ({
    border: '0.063rem solid #E7E7E7',
    borderRadius: '0.625rem'
  },
+  view: {
+    alignContent: 'right',
+    variant: 'outlined'
+  },
+  viewModes: {
+    position: 'relative',
+    maxWidth: '100%',
+    flexDirection: 'row',
+    alignItems: 'right',
+    justifyContent: 'right'
+  },
  searchIcon: {
    color: '#52637A',
    paddingRight: '3%'
@ -87,9 +101,6 @@ const useStyles = makeStyles((theme) => ({
      opacity: '1'
    }
  },
-  export: {
-    alignContent: 'right'
-  },
  popper: {
    width: '100%',
    overflow: 'hidden',
@ -117,6 +128,8 @@ function VulnerabilitiesDetails(props) {
  const [anchorExport, setAnchorExport] = useState(null);
  const openExport = Boolean(anchorExport);

+  const [selectedViewMore, setSelectedViewMore] = useState(true);
+
  const getCVERequestName = () => {
    return digest !== '' ? `${name}@${digest}` : `${name}:${tag}`;
  };
@ -263,7 +276,7 @@ function VulnerabilitiesDetails(props) {
  const renderCVEs = () => {
    return !isEmpty(cveData) ? (
      cveData.map((cve, index) => {
-        return <VulnerabilitiyCard key={index} cve={cve} name={name} platform={platform} />;
+        return <VulnerabilitiyCard key={index} cve={cve} name={name} platform={platform} expand={selectedViewMore} />;
      })
    ) : (
      <div>{!isLoading && <Typography className={classes.none}> No Vulnerabilities </Typography>}</div>
@ -286,14 +299,36 @@ function VulnerabilitiesDetails(props) {
        <Typography variant="h4" gutterBottom component="div" align="left" className={classes.title}>
          Vulnerabilities
        </Typography>
-        <IconButton disableRipple onClick={handleClickExport} className={classes.export}>
-          <DownloadIcon />
-        </IconButton>
-        <Snackbar
-          open={openExport && isLoadingAllCve}
-          message="Getting your data ready for export"
-          action={<CircularProgress size="2rem" sx={{ color: '#FFFFFF' }} />}
-        />
+        <Stack direction="row" spacing="1rem" className={classes.viewModes}>
+          <IconButton disableRipple onClick={handleClickExport}>
+            <DownloadIcon />
+          </IconButton>
+          <Snackbar
+            open={openExport && isLoadingAllCve}
+            message="Getting your data ready for export"
+            action={<CircularProgress size="2rem" sx={{ color: '#FFFFFF' }} />}
+          />
+          <ToggleButton
+            value="viewLess"
+            title="Collapse list view"
+            size="small"
+            className={classes.view}
+            selected={!selectedViewMore}
+            onChange={() => setSelectedViewMore(false)}
+          >
+            <ViewHeadlineIcon />
+          </ToggleButton>
+          <ToggleButton
+            value="viewMore"
+            title="Expand list view"
+            size="small"
+            className={classes.view}
+            selected={selectedViewMore}
+            onChange={() => setSelectedViewMore(true)}
+          >
+            <ViewAgendaIcon />
+          </ToggleButton>
+        </Stack>
        <Menu
          anchorEl={anchorExport}
          open={openExport}
--- a/tests/tag.spec.js
+++ b/tests/tag.spec.js
@ -37,6 +37,7 @@ test.describe('Tag page test', () => {
    await page.goto(`${hosts.ui}/image/${tagWithVulnerabilities.title}/tag/${tagWithVulnerabilities.tag}`);
    await page.getByRole('tab', { name: 'Vulnerabilities' }).click();
    await expect(page.getByTestId('vulnerability-container').locator('div').nth(1)).toBeVisible({ timeout: 100000 });
+    await expect(page.getByText('CVE-').nth(0)).toBeVisible({ timeout: 100000 });
    await expect(await page.getByText('CVE-').count()).toBeGreaterThan(0);
    await expect(await page.getByText('CVE-').count()).toBeLessThanOrEqual(pageSizes.EXPLORE);
  });