fix: dropdown text and overflow fix for CVE Card

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/__tests__/TagPage/VulnerabilitiesDetails.test.js

@@ -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(/see fix tags/i)).toHaveLength(20));
+    await waitFor(() => expect(screen.getAllByText(/fixed in/i)).toHaveLength(20));
   });
 
   it('renders no vulnerabilities if there are not any', async () => {
@@ -473,11 +473,16 @@ describe('Vulnerabilties page', () => {
     // @ts-ignore
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockCVEList } });
     render(<StateVulnerabilitiesWrapper />);
-    await waitFor(() => expect(screen.getAllByText(/see description/i)).toHaveLength(20));
-    const openText = screen.getAllByText(/see description/i);
+    await waitFor(() => expect(screen.getAllByText(/description/i)).toHaveLength(20));
+    const openText = screen.getAllByText(/description/i);
     fireEvent.click(openText[0]);
-    await waitFor(() => expect(screen.getAllByText(/hide description/i)).toHaveLength(1));
-    await waitFor(() => expect(screen.getAllByText(/see description/i)).toHaveLength(19));
+    await waitFor(() =>
+      expect(screen.getAllByText(/CPAN 2.28 allows Signature Verification Bypass./i)).toHaveLength(1)
+    );
+    fireEvent.click(openText[0]);
+    await waitFor(() =>
+      expect(screen.queryByText(/CPAN 2.28 allows Signature Verification Bypass./i)).not.toBeInTheDocument()
+    );
   });
 
   it("should log an error when data can't be fetched", async () => {
@@ -497,7 +502,7 @@ describe('Vulnerabilties page', () => {
       .mockResolvedValue({ status: 200, data: { data: mockCVEFixed } });
     render(<StateVulnerabilitiesWrapper />);
     await waitFor(() => expect(screen.getAllByText('Vulnerabilities')).toHaveLength(1));
-    fireEvent.click(screen.getAllByText(/see fix tags/i)[0]);
+    fireEvent.click(screen.getAllByText(/fixed in/i)[0]);
     await waitFor(() => expect(screen.getByText('1.0.16')).toBeInTheDocument());
   });
 });

src/components/HistoryLayers.jsx

@@ -175,7 +175,7 @@ function HistoryLayers(props) {
   };
 
   return (
-    <div>
+    <>
       <Typography
         variant="h4"
         gutterBottom
@@ -214,7 +214,7 @@ function HistoryLayers(props) {
       )}
 
       {!isLoaded ? <Loading /> : renderHistoryData()}
-    </div>
+    </>
   );
 }
 

src/components/VulnerabilitiesDetails.jsx

@@ -13,6 +13,7 @@ import PestControlIcon from '@mui/icons-material/PestControl';
 import { isEmpty } from 'lodash';
 import { Link } from 'react-router-dom';
 import Loading from './Loading';
+import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
 
 const useStyles = makeStyles(() => ({
   card: {
@@ -67,6 +68,18 @@ const useStyles = makeStyles(() => ({
     color: '#52637A',
     fontSize: '1.4rem',
     fontWeight: '600'
+  },
+  dropdown: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  dropdownText: {
+    color: '#1479FF',
+    paddingTop: '1rem',
+    fontSize: '1rem',
+    fontWeight: '600',
+    cursor: 'pointer',
+    textAlign: 'center'
   }
 }));
 
@@ -219,38 +232,30 @@ function VulnerabilitiyCard(props) {
             {cve.Title}
           </Typography>
         </Stack>
-        <Typography
-          sx={{
-            color: '#1479FF',
-            paddingTop: '1rem',
-            fontSize: '0.8125rem',
-            fontWeight: '600',
-            cursor: 'pointer'
-          }}
-          onClick={() => setOpenFixed(!openFixed)}
-        >
-          {!openFixed ? 'See fix tags' : 'Hide fix tags'}
-        </Typography>
+        <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>
-            <Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
+            <Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem', width: '100%' }}>
               {' '}
               {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>
+        <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>
             <Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
@@ -312,7 +317,7 @@ function VulnerabilitiesDetails(props) {
   };
 
   return (
-    <div>
+    <>
       <Typography
         variant="h4"
         gutterBottom
@@ -344,7 +349,7 @@ function VulnerabilitiesDetails(props) {
           cveData?.cveList
         )
       )}
-    </div>
+    </>
   );
 }