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

Signed-off-by: Andreea-Lupu <andreealupu1470@yahoo.com>

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')

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,11 +175,17 @@ 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>
+        <Collapse in={openCVE} timeout="auto" unmountOnExit>
           <Typography variant="body1" align="left" className={classes.cveSummary}>
             {cve.title}
           </Typography>
@@ -210,6 +225,7 @@ function VulnerabilitiyCard(props) {
               </Typography>
             </Box>
           </Collapse>
+        </Collapse>
       </CardContent>
     </Card>
   );

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,7 +299,8 @@ function VulnerabilitiesDetails(props) {
         <Typography variant="h4" gutterBottom component="div" align="left" className={classes.title}>
           Vulnerabilities
         </Typography>
-        <IconButton disableRipple onClick={handleClickExport} className={classes.export}>
+        <Stack direction="row" spacing="1rem" className={classes.viewModes}>
+          <IconButton disableRipple onClick={handleClickExport}>
             <DownloadIcon />
           </IconButton>
           <Snackbar
@@ -294,6 +308,27 @@ function VulnerabilitiesDetails(props) {
             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}

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);
   });