added tags detail

src/components/repositoryInfo/RepositoryInfo.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import { useLocation, Link } from "react-router-dom";
-import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert, Tooltip } from "@mui/material";
+import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert, Tooltip, Collapse } from "@mui/material";
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import useRepositories from "../../hooks/useRepositories";
 import Tag from "../../interfaces/Tag";
 import Repository from "../../interfaces/Repositoriy";
 import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst, printMonth } from "../../utils";
 import RepoNotFound from "./RepoNotFound"
 import Loading from "../Loading";
+import { digestDisplay } from "../../interfaces/Utils";
 
 const RepositoryInfo: React.FC = () => {
     const location = useLocation();
@@ -15,15 +18,26 @@ const RepositoryInfo: React.FC = () => {
     const  { isFetched, repositories } = useRepositories();
     const [hideTags, setHideTags] = React.useState(true);
     const [snackbarOpen, setSnackbarOpen] = React.useState(false);
+    const [showDetails, setShowDetails] = React.useState(false);
     const repository = repositories.find((element) => (element.name === path.slice(12,path.length)));
 
-    const generatePushCommand = (hostName: string) => {
+    const generatePushCommand = (hostName: string, tagName: string) => {
-        return "docker push " + hostName + "/" + (repository?.name ? repository?.name : "") + ":tagname";
+        return "docker push " + hostName + "/" + (repository?.name ? repository?.name : "") + ":" + tagName;
     }
 
-    const handleClick = () => {
+    const generatePullCommand = (hostName: string, tagName: string) => {
+        return "docker pull " + hostName + "/" + (repository?.name ? repository?.name : "") + ":" + tagName;
+    }
+
+    const handlePushClick = () => {
         const hostName = getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : "");
-        navigator.clipboard.writeText(generatePushCommand(hostName));
+        navigator.clipboard.writeText(generatePushCommand(hostName,"tagname"));
+        setSnackbarOpen(true);
+    };
+
+    const handlePullClick = (tagName: string) => {
+        const hostName = getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : "");
+        navigator.clipboard.writeText(generatePullCommand(hostName,tagName));
         setSnackbarOpen(true);
     };
 
@@ -35,6 +49,10 @@ const RepositoryInfo: React.FC = () => {
         setHideTags(!hideTags);
     }
 
+    const toggleCollapse = () => {
+        setShowDetails((prev) => !prev);
+    };
+    
     return (isFetched ? (
         repository ? (
             <div className="repositoryInfo">
@@ -61,7 +79,7 @@ const RepositoryInfo: React.FC = () => {
                                     <Typography className="lines" variant="body2">
                                         To push a new tag to this repository,
                                     </Typography>
-                                    <Box className="commandDisplay" onClick={handleClick} component="span" sx={{ display: 'block', bgcolor: '#445d6e', color: 'white', borderColor: '#445d6e' }}>{generatePushCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""))}</Box>
+                                    <Box className="commandDisplay" onClick={handlePushClick} component="span" sx={{ display: 'block', bgcolor: '#445d6e', color: 'white', borderColor: '#445d6e' }}>{generatePushCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""),"tagname")}</Box>
                                 </Box>
                             </Grid>
                         </Grid>
@@ -70,7 +88,7 @@ const RepositoryInfo: React.FC = () => {
                         <Button size="small">Learn More</Button>
                     </CardActions> */}
                 </Card>
-                <Card className="tagsDetail" variant="outlined">
+                <Card className="tagsOverview" variant="outlined">
                     <CardContent>
                         <Typography className="lines" variant="h6">
                             Tags
@@ -107,7 +125,7 @@ const RepositoryInfo: React.FC = () => {
                                     return result;
                                 }
                             }).slice(0,((hideTags && repository.tags.length > 4) ? 3 : repository.tags.length)).map((tag) => (
-                                <Grid container>
+                                <Grid className="lines" container>
                                     <Grid item sm={5}>
                                         <ListItemText primary={tag.label} />
                                     </Grid>
@@ -159,11 +177,75 @@ const RepositoryInfo: React.FC = () => {
                             )}
                         </List>
                     </CardContent>
+                </Card>
+                <Card className="detailsCard" variant="outlined">
                     <CardActions>
-                        <Button size="small">Details</Button>
+                        <Button startIcon={showDetails ? <ExpandLessIcon /> : <ExpandMoreIcon />} onClick={toggleCollapse} size="small">Tag Details</Button>
                     </CardActions>
                 </Card>
-                <Snackbar open={snackbarOpen} autoHideDuration={6000} onClose={handleClose}>
+                <Collapse className="tagsDetail" in={showDetails}>
+                    {repository.tags.map((tag) => (
+                        <Card className="tagCard" variant="outlined">
+                            <CardContent>
+                                <Grid container>
+                                    <Grid item lg={6} md={12}>
+                                        <Typography className="lines" variant="h5" component="div" color="#94a1aa">
+                                            TAG
+                                        </Typography>
+                                        <Typography className="lines" variant="h5" component="div" color="#007bff">
+                                            {tag.label}
+                                        </Typography>
+                                        <Typography className="lines" sx={{ mb: 1.5 }}>
+                                            Last updated: <b>{(tag.created ? printTimePassed(tag.created) : "")}</b>
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item lg={6} md={12}>
+                                        <Box sx={{ display: "flex", flexDirection: "column" }}>
+                                            <Typography className="lines" variant="h6">
+                                            To pull this image,
+                                            </Typography>
+                                            <Box className="commandDisplay" onClick={() => (handlePullClick(tag.label))} component="span" sx={{ display: 'block', bgcolor: '#445d6e', color: 'white', borderColor: '#445d6e' }}>{generatePullCommand(getHostNameFromURL(process.env.REGISTRY_URL ? process.env.REGISTRY_URL : ""),tag.label)}</Box>
+                                        </Box>
+                                    </Grid>
+                                    <Grid item lg={12} md={12}>
+                                        <Grid className="lines" container>
+                                            <Grid item sm={5}>
+                                                <ListItemText primary="DIGEST" />
+                                            </Grid>
+                                            <Grid item sm={4}>
+                                                <ListItemText primary="OS/ARCH" />
+                                            </Grid>
+                                            <Grid item sm={3}>
+                                                <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary="SIZE" />
+                                            </Grid>
+                                        </Grid>
+                                        
+                                        <List>
+                                            <ListItemButton 
+                                                className="lines"
+                                                component={Link}
+                                                to={"/repository/" + repository.name + "/" + tag.label}
+                                            >
+                                                <Grid container>
+                                                    <Grid item sm={5}>
+                                                        <ListItemText style={{color: '#007bff'}} primary={digestDisplay(tag.digest)} />
+                                                    </Grid>
+                                                    <Grid item sm={4}>
+                                                        <ListItemText primary={tag.os + "/" +tag.architecture} />
+                                                    </Grid>
+                                                    <Grid item sm={3}>
+                                                        <ListItemText style={{display:'flex', justifyContent:'flex-end'}} primary={tag.size ? printSize(tag.size) : "---"} />
+                                                    </Grid>
+                                                </Grid>
+                                            </ListItemButton>
+                                        </List>
+                                    </Grid>
+                                </Grid>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </Collapse>
+                <Snackbar open={snackbarOpen} autoHideDuration={1500} onClose={handleClose}>
                     <Alert onClose={handleClose} severity="success" sx={{ width: '100%' }}>
                         Copied!
                     </Alert>

src/style/modules/_repositoryInfo.sass

@@ -14,9 +14,10 @@
             border-radius: 5px
             padding: 0 15px
             margin-top: 5px
-    .tagsDetail
+            cursor: pointer
+    .tagsOverview
         margin: 5%
-        padding: 15px
+        padding: 0 15px
         .iconWrapper
             height: 24px
             width: 24px
@@ -24,12 +25,29 @@
             height: 24px
             width: 24px
         .lines
-            margin-bottom: 10px
+            margin-top: 10px
         .moreBtn
+            margin-top: 10px
             color: #1976d2
             cursor: pointer
         .moreBtn:focus
             color: purple
+    .detailsCard
+        margin: 0 5%
+        padding: 0 15px
+    .tagCard
+        margin: 5%
+        padding: 15px
+        .commandDisplay
+            line-height: 200%
+            border-radius: 5px
+            padding: 0 15px
+            margin-top: 5px
+            cursor: pointer
+        .lines
+            margin-top: 10px
+            padding-left: 0
+            padding-right: 0
 
 @media (max-width: 1199px)
     .repositoryInfo

src/style/style.css

@@ -48,36 +48,62 @@ a {
   border-radius: 5px;
   padding: 0 15px;
   margin-top: 5px;
+  cursor: pointer;
 }
 
-.repositoryInfo .tagsDetail {
+.repositoryInfo .tagsOverview {
   margin: 5%;
-  padding: 15px;
+  padding: 0 15px;
 }
 
-.repositoryInfo .tagsDetail .iconWrapper {
+.repositoryInfo .tagsOverview .iconWrapper {
   height: 24px;
   width: 24px;
 }
 
-.repositoryInfo .tagsDetail .icon {
+.repositoryInfo .tagsOverview .icon {
   height: 24px;
   width: 24px;
 }
 
-.repositoryInfo .tagsDetail .lines {
+.repositoryInfo .tagsOverview .lines {
-  margin-bottom: 10px;
+  margin-top: 10px;
 }
 
-.repositoryInfo .tagsDetail .moreBtn {
+.repositoryInfo .tagsOverview .moreBtn {
+  margin-top: 10px;
   color: #1976d2;
   cursor: pointer;
 }
 
-.repositoryInfo .tagsDetail .moreBtn:focus {
+.repositoryInfo .tagsOverview .moreBtn:focus {
   color: purple;
 }
 
+.repositoryInfo .detailsCard {
+  margin: 0 5%;
+  padding: 0 15px;
+}
+
+.repositoryInfo .tagCard {
+  margin: 5%;
+  padding: 15px;
+}
+
+.repositoryInfo .tagCard .commandDisplay {
+  line-height: 200%;
+  border-radius: 5px;
+  padding: 0 15px;
+  margin-top: 5px;
+  cursor: pointer;
+}
+
+.repositoryInfo .tagCard .lines {
+  margin-top: 10px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 @media (max-width: 1199px) {
   .repositoryInfo {
     max-width: 90%;

src/style/style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "style.sass",
         "_variables.sass",