From 576ef56ff73ba595af9e8824784ddd5561f565ae Mon Sep 17 00:00:00 2001
From: Amelia-Maria Breda <ambreda@cisco.com>
Date: Mon, 17 Oct 2022 11:20:57 +0100
Subject: [PATCH] Updated the push date format to weeks, days, hours and added
 tooltip with the timestam

Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>
---
 src/components/RepoCard.jsx            |  4 ++--
 src/components/RepoDetailsMetadata.jsx | 12 +++++++-----
 src/components/TagDetailsMetadata.jsx  | 12 +++++++-----
 src/components/Tags.jsx                | 12 +++++++-----
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/RepoCard.jsx b/src/components/RepoCard.jsx
index c3464657..7aa46605 100644
--- a/src/components/RepoCard.jsx
+++ b/src/components/RepoCard.jsx
@@ -180,7 +180,7 @@ function RepoCard(props) {
   };
   const getLast = () => {
     const lastDate = lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 });
-    return `${lastDate.toRelative({ unit: 'days' })}`;
+    return `${lastDate.toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })}`;
   };
 
   return (
@@ -227,7 +227,7 @@ function RepoCard(props) {
                     {getVersion()}
                   </Typography>
                 </Tooltip>
-                <Tooltip title={getLast()} placement="top">
+                <Tooltip title={lastUpdated?.slice(0, 16) || ' '} placement="top">
                   <Typography className={classes.versionLast} variant="body2" noWrap>
                     {getLast()}
                   </Typography>
diff --git a/src/components/RepoDetailsMetadata.jsx b/src/components/RepoDetailsMetadata.jsx
index aeb9df92..14bdd63f 100644
--- a/src/components/RepoDetailsMetadata.jsx
+++ b/src/components/RepoDetailsMetadata.jsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Grid, Typography } from '@mui/material';
+import { Card, CardContent, Grid, Typography, Tooltip } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -38,7 +38,7 @@ function RepoDetailsMetadata(props) {
   const { repoURL, totalDownloads, lastUpdated, size } = props;
   // @ts-ignore
   const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({
-    unit: 'days'
+    unit: ['weeks', 'days', 'hours', 'minutes']
   });
   return (
     <Grid container spacing={1}>
@@ -73,9 +73,11 @@ function RepoDetailsMetadata(props) {
               <Typography variant="body2" align="left" className={classes.metadataHeader}>
                 Last publish
               </Typography>
-              <Typography variant="body1" align="left" className={classes.metadataBody}>
-                {lastDate || `Timestamp N/A`}
-              </Typography>
+              <Tooltip title={lastUpdated?.slice(0, 16) || ' '} placement="top">
+                <Typography variant="body1" align="left" className={classes.metadataBody}>
+                  {lastDate || `Timestamp N/A`}
+                </Typography>
+              </Tooltip>
             </CardContent>
           </Card>
         </Grid>
diff --git a/src/components/TagDetailsMetadata.jsx b/src/components/TagDetailsMetadata.jsx
index dc03bd6a..b34c9ba8 100644
--- a/src/components/TagDetailsMetadata.jsx
+++ b/src/components/TagDetailsMetadata.jsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Grid, Typography } from '@mui/material';
+import { Card, CardContent, Grid, Typography, Tooltip } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { DateTime } from 'luxon';
 import React from 'react';
@@ -37,7 +37,7 @@ function TagDetailsMetadata(props) {
   const classes = useStyles();
   const { platform, lastUpdated, size } = props;
   const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({
-    unit: 'days'
+    unit: ['weeks', 'days', 'hours', 'minutes']
   });
   return (
     <Grid container spacing={1} data-testid="tagDetailsMetadata-container">
@@ -72,9 +72,11 @@ function TagDetailsMetadata(props) {
               <Typography variant="body2" align="left" className={classes.metadataHeader}>
                 Last Published
               </Typography>
-              <Typography variant="body1" align="left" className={classes.metadataBody}>
-                {lastDate || `----`}
-              </Typography>
+              <Tooltip title={lastUpdated?.slice(0, 16) || ' '} placement="top">
+                <Typography variant="body1" align="left" className={classes.metadataBody}>
+                  {lastDate || `----`}
+                </Typography>
+              </Tooltip>
             </CardContent>
           </Card>
         </Grid>
diff --git a/src/components/Tags.jsx b/src/components/Tags.jsx
index 122ae067..fc5a7ebd 100644
--- a/src/components/Tags.jsx
+++ b/src/components/Tags.jsx
@@ -13,7 +13,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import transform from 'utilities/transform';
-import { Card, CardContent, Divider, Stack } from '@mui/material';
+import { Card, CardContent, Divider, Stack, Tooltip } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles(() => ({
@@ -64,7 +64,7 @@ function TagCard(props) {
   const classes = useStyles();
   // @ts-ignore
   const lastDate = (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({
-    unit: 'days'
+    unit: ['weeks', 'days', 'hours', 'minutes']
   });
   const navigate = useNavigate();
 
@@ -91,9 +91,11 @@ function TagCard(props) {
           <Typography variant="caption" sx={{ fontWeight: '400', fontSize: '0.8125rem' }}>
             Last pushed
           </Typography>
-          <Typography variant="caption" sx={{ fontWeight: '600', fontSize: '0.8125rem' }}>
-            {lastDate || 'Date not available'} by {vendors || 'Vendor not available'}
-          </Typography>
+          <Tooltip title={lastUpdated?.slice(0, 16) || ' '} placement="top">
+            <Typography variant="caption" sx={{ fontWeight: '600', fontSize: '0.8125rem' }}>
+              {lastDate || 'Date not available'} by {vendors || 'Vendor not available'}
+            </Typography>
+          </Tooltip>
         </Stack>
 
         <Typography