patch: updated vulnerability design, styling cleanup

Signed-off-by: Raul Kele <[email protected]>
project-zot · Apr 27, 2023 · ac9d023 · ac9d023
1 parent 6a2fc8d
commit ac9d023
Show file tree

Hide file tree

Showing 12 changed files with 347 additions and 532 deletions.
diff --git a/src/__tests__/RepoPage/Tags.test.js b/src/__tests__/RepoPage/Tags.test.js
@@ -69,7 +69,7 @@ const mockedTagsData = [
 describe('Tags component', () => {
   it('should open and close details dropdown for tags', async () => {
     render(<TagsThemeWrapper />);
-    const openBtn = screen.getAllByText(/digest/i);
+    const openBtn = screen.getAllByText(/show/i);
     fireEvent.click(openBtn[0]);
     expect(screen.getByText(/OS\/ARCH/i)).toBeInTheDocument();
     fireEvent.click(openBtn[0]);
@@ -87,7 +87,7 @@ describe('Tags component', () => {
 
   it('should navigate to specific manifest when clicking the digest', async () => {
     render(<TagsThemeWrapper />);
-    const openBtn = screen.getAllByText(/digest/i);
+    const openBtn = screen.getAllByText(/show/i);
     await fireEvent.click(openBtn[0]);
     const tagLink = await screen.findByText(/sha256:adca4/i);
     fireEvent.click(tagLink);

diff --git a/src/__tests__/TagPage/VulnerabilitiesDetails.test.js b/src/__tests__/TagPage/VulnerabilitiesDetails.test.js
@@ -1,15 +1,18 @@
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import MockThemeProvier from '__mocks__/MockThemeProvider';
 import { api } from 'api';
 import VulnerabilitiesDetails from 'components/Tag/Tabs/VulnerabilitiesDetails';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
 const StateVulnerabilitiesWrapper = () => {
   return (
-    <MemoryRouter>
-      <VulnerabilitiesDetails name="mongo" />
-    </MemoryRouter>
+    <MockThemeProvier>
+      <MemoryRouter>
+        <VulnerabilitiesDetails name="mongo" />
+      </MemoryRouter>
+    </MockThemeProvier>
   );
 };
 
@@ -500,7 +503,7 @@ describe('Vulnerabilties page', () => {
   it('sends filtered query if user types in the search bar', async () => {
     jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockCVEList } });
     render(<StateVulnerabilitiesWrapper />);
-    const cveSearchInput = screen.getByPlaceholderText(/search for/i);
+    const cveSearchInput = screen.getByPlaceholderText(/search/i);
     jest.spyOn(api, 'get').mockRejectedValueOnce({ status: 200, data: { data: mockCVEListFiltered } });
     await userEvent.type(cveSearchInput, '2022');
     expect((await screen.queryAllByText(/2023/i).length) === 0);

diff --git a/src/components/Repo/RepoDetails.jsx b/src/components/Repo/RepoDetails.jsx
@@ -77,6 +77,9 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     boxShadow: 'none!important'
   },
+  tagsContent: {
+    padding: '1.5rem'
+  },
   platformText: {
     backgroundColor: '#EDE7F6',
     color: '#220052',
@@ -290,7 +293,7 @@ function RepoDetails() {
           </Grid>
           <Grid item xs={12} md={8} className={classes.tags}>
             <Card className={classes.cardRoot}>
-              <CardContent>
+              <CardContent className={classes.tagsContent}>
                 <Tags tags={tags} />
               </CardContent>
             </Card>

diff --git a/src/components/Repo/Tabs/Tags.jsx b/src/components/Repo/Tabs/Tags.jsx
@@ -3,33 +3,13 @@ import React, { useState } from 'react';
 
 // components
 import Typography from '@mui/material/Typography';
-import { Card, CardContent, Stack, InputBase, FormControl, Select, InputLabel, MenuItem } from '@mui/material';
+import { Stack, InputBase, FormControl, Select, InputLabel, MenuItem } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { makeStyles } from '@mui/styles';
 import TagCard from '../../Shared/TagCard';
 import { tagsSortByCriteria } from 'utilities/sortCriteria';
 
 const useStyles = makeStyles(() => ({
-  tagContainer: {
-    marginBottom: 2,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    background: '#FFFFFF',
-    boxShadow: 'none!important',
-    borderRadius: '1.875rem',
-    flex: 'none',
-    alignSelf: 'stretch',
-    flexGrow: 0,
-    order: 0,
-    width: '100%'
-  },
-  content: {
-    textAlign: 'left',
-    color: '#606060',
-    padding: '2% 3% 2% 3%',
-    width: '100%'
-  },
   clickCursor: {
     cursor: 'pointer'
   },
@@ -39,8 +19,6 @@ const useStyles = makeStyles(() => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginTop: '1rem',
-    marginBottom: '1rem',
     boxShadow: 'none',
     border: '0.063rem solid #E7E7E7',
     borderRadius: '0.625rem'
@@ -49,11 +27,14 @@ const useStyles = makeStyles(() => ({
     color: '#52637A',
     paddingRight: '3%'
   },
+  searchInputBase: {
+    width: '90%',
+    paddingLeft: '1.5rem',
+    height: 40
+  },
   input: {
     color: '#464141',
     fontSize: '1rem',
-    paddingLeft: '1rem',
-    width: '90%',
     '&::placeholder': {
       opacity: '1'
     }
@@ -99,51 +80,45 @@ export default function Tags(props) {
   };
 
   return (
-    <Card className={classes.tagContainer} data-testid="tags-container">
-      <CardContent className={classes.content}>
-        <Stack direction="row" justifyContent="space-between">
-          <Typography
-            variant="h4"
-            gutterBottom
-            component="div"
-            align="left"
-            style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600' }}
+    <Stack direction="column" spacing="1rem">
+      <Stack direction="row" justifyContent="space-between">
+        <Typography
+          variant="h4"
+          gutterBottom
+          component="div"
+          align="left"
+          style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600' }}
+        >
+          Tags History
+        </Typography>
+        <FormControl sx={{ m: '1', minWidth: '4.6875rem' }} className={classes.sortForm} size="small">
+          <InputLabel>Sort</InputLabel>
+          <Select
+            label="Sort"
+            value={sortFilter}
+            onChange={handleTagsSortChange}
+            MenuProps={{ disableScrollLock: true }}
           >
-            Tags History
-          </Typography>
-          <div>
-            <FormControl sx={{ m: '1', minWidth: '4.6875rem' }} className={classes.sortForm} size="small">
-              <InputLabel>Sort</InputLabel>
-              <Select
-                label="Sort"
-                value={sortFilter}
-                onChange={handleTagsSortChange}
-                MenuProps={{ disableScrollLock: true }}
-              >
-                {Object.values(tagsSortByCriteria).map((el) => (
-                  <MenuItem key={el.value} value={el.value}>
-                    {el.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </div>
-        </Stack>
-        <Stack className={classes.search}>
-          <InputBase
-            style={{ paddingLeft: 10, height: 40, color: 'rgba(0, 0, 0, 0.6)' }}
-            placeholder={'Search tags...'}
-            // className={classes.input}
-            classes={{ input: classes.input }}
-            value={tagsFilter}
-            onChange={handleTagsFilterChange}
-          />
-          <div className={classes.searchIcon}>
-            <SearchIcon />
-          </div>
-        </Stack>
-        {renderTags(tags)}
-      </CardContent>
-    </Card>
+            {Object.values(tagsSortByCriteria).map((el) => (
+              <MenuItem key={el.value} value={el.value}>
+                {el.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Stack>
+      <Stack className={classes.search}>
+        <InputBase
+          placeholder={'Search tags...'}
+          classes={{ root: classes.searchInputBase, input: classes.input }}
+          value={tagsFilter}
+          onChange={handleTagsFilterChange}
+        />
+        <div className={classes.searchIcon}>
+          <SearchIcon />
+        </div>
+      </Stack>
+      {renderTags(tags)}
+    </Stack>
   );
 }
diff --git a/src/components/Shared/TagCard.jsx b/src/components/Shared/TagCard.jsx
@@ -32,6 +32,13 @@ const useStyles = makeStyles((theme) => ({
   clickCursor: {
     cursor: 'pointer'
   },
+  dropdownToggle: {
+    color: '#1479FF',
+    paddingTop: '1rem',
+    fontSize: '0.8125rem',
+    fontWeight: '600',
+    cursor: 'pointer'
+  },
   dropdown: {
     flexDirection: 'row',
     alignItems: 'center'
@@ -117,17 +124,7 @@ export default function TagCard(props) {
           ) : (
             <KeyboardArrowDown className={classes.dropdownText} />
           )}
-          <Typography
-            sx={{
-              color: '#1479FF',
-              paddingTop: '1rem',
-              fontSize: '0.8125rem',
-              fontWeight: '600',
-              cursor: 'pointer'
-            }}
-          >
-            DIGEST
-          </Typography>
+          <Typography className={classes.dropdownToggle}>{!open ? `Show more` : `Show less`}</Typography>
         </Stack>
         <Collapse in={open} timeout="auto" unmountOnExit>
           <Box className={classes.manifsetsTable}>