feat: add expand/collapse view list buttons for vulnerabilities

Signed-off-by: Andreea-Lupu <[email protected]>
project-zot · Jan 16, 2024 · e79e856 · e79e856
1 parent 12b474e
commit e79e856
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 51 deletions.
diff --git a/playwright.config.js b/playwright.config.js
@@ -42,7 +42,8 @@ const config = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
-    ignoreHTTPSErrors: true
+    ignoreHTTPSErrors: true,
+    screenshot: 'only-on-failure'
   },
 
   /* Configure projects for major browsers */
@@ -101,7 +102,7 @@ const config = {
   ],
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
+  outputDir: 'test-results/',
 
   /* Run your local dev server before starting the tests */
   // webServer: {

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

diff --git 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>

diff --git 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}

diff --git 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(1)).toBeVisible({ timeout: 150000 });
     await expect(await page.getByText('CVE-').count()).toBeGreaterThan(0);
     await expect(await page.getByText('CVE-').count()).toBeLessThanOrEqual(pageSizes.EXPLORE);
   });