Fixed title and description in tag screen (#105)

Fixed title and description in tag screen
Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>

src/__tests__/RepoPage/Tags.test.js

@@ -38,10 +38,10 @@ const mockedTagsData = {
 describe('Tags component', () => {
   it('should open and close details dropdown for tags', () => {
     render(<Tags data={mockedTagsData} />);
-    const openBtn = screen.getByText(/see digests/i);
+    const openBtn = screen.getByText(/see digest/i);
     fireEvent.click(openBtn);
-    expect(screen.queryByText(/see digests/i)).not.toBeInTheDocument();
-    expect(screen.getByText(/hide digests/i)).toBeInTheDocument();
+    expect(screen.queryByText(/see digest/i)).not.toBeInTheDocument();
+    expect(screen.getByText(/hide digest/i)).toBeInTheDocument();
   });
   it('should navigate to tag page details when tag is clicked', async () => {
     render(<Tags data={mockedTagsData} />);

src/components/RepoDetails.jsx

@@ -129,7 +129,7 @@ const randomImage = () => {
   return imageArray[randomIntFromInterval(0, 3)];
 };
 
-function RepoDetails(props) {
+function RepoDetails() {
   const [repoDetailData, setRepoDetailData] = useState({});
   // @ts-ignore
   //const [isLoading, setIsLoading] = useState(false);
@@ -138,7 +138,6 @@ function RepoDetails(props) {
   // get url param from <Route here (i.e. image name)
   const { name } = useParams();
   const classes = useStyles();
-  const { overviewTitle } = props;
 
   useEffect(() => {
     api
@@ -157,6 +156,7 @@ function RepoDetails(props) {
             vendors: repoInfo.Summary?.Vendors,
             newestTag: repoInfo.Summary?.NewestImage,
             description: repoInfo.Summary?.NewestImage.Description,
+            title: repoInfo.Summary?.NewestImage.Title,
             source: repoInfo.Summary?.NewestImage.Source,
             downloads: repoInfo.Summary?.NewestImage.DownloadCount,
             overview: repoInfo.Summary?.NewestImage.Documentation
@@ -234,7 +234,7 @@ function RepoDetails(props) {
       <Card className={classes.card} data-testid="overview-container">
         <CardContent>
           <Typography variant="h4" align="left">
-            {overviewTitle || 'Quickstart'}
+            Quickstart
           </Typography>
           <Typography
             variant="body1"
@@ -248,7 +248,7 @@ function RepoDetails(props) {
           >
             {
               // @ts-ignore
-              repoDetailData.overview || 'N/A'
+              repoDetailData.description || 'N/A'
             }
           </Typography>
         </CardContent>
@@ -303,7 +303,7 @@ function RepoDetails(props) {
               >
                 {
                   // @ts-ignore
-                  repoDetailData?.description || 'N/A'
+                  repoDetailData?.title || 'N/A'
                 }
               </Typography>
               <Stack alignItems="center" sx={{ paddingLeft: '4rem' }} direction="row" spacing={2} pt={1}>

src/components/RepoDetailsMetadata.jsx

@@ -36,6 +36,7 @@ const useStyles = makeStyles(() => ({
 function RepoDetailsMetadata(props) {
   const classes = useStyles();
   const { repoURL, weeklyDownloads, lastUpdated, size } = props;
+  // @ts-ignore
   const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({
     unit: 'days'
   });

src/components/Tags.jsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles(() => ({
     width: '100%'
   },
   card: {
-    marginBottom: 2,
+    marginBottom: '2rem',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -62,6 +62,7 @@ function TagCard(props) {
   const [digests, setDigests] = React.useState([]);
   const classes = useStyles();
   const tagRow = row;
+  // @ts-ignore
   const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({
     unit: 'days'
   });
@@ -110,7 +111,7 @@ function TagCard(props) {
           }}
           onClick={() => setOpen(!open)}
         >
-          {!open ? 'See digests' : 'Hide digests'}
+          {!open ? 'See digest' : 'Hide digest'}
         </Typography>
         <Collapse in={open} timeout="auto" unmountOnExit>
           <Box>

src/pages/RepoPage.jsx

@@ -15,8 +15,7 @@ const useStyles = makeStyles(() => ({
   },
   container: {
     paddingTop: 5,
-    paddingBottom: 5,
-    backgroundColor: '#FFFFFF'
+    paddingBottom: 5
   },
   parentWrapper: {
     height: '100vh'

src/pages/TagPage.jsx

@@ -15,8 +15,7 @@ const useStyles = makeStyles(() => ({
   },
   container: {
     paddingTop: 5,
-    paddingBottom: 5,
-    backgroundColor: '#FFFFFF'
+    paddingBottom: 5
   },
   parentWrapper: {
     height: '100vh'