feat: add delete tag support

src/components/Repo/RepoDetails.jsx

@@ -11,10 +11,11 @@ import { host } from '../../host';
 import { useParams, useNavigate, createSearchParams } from 'react-router-dom';
 
 // components
-import { Card, CardContent, CardMedia, Chip, Grid, Stack, Tooltip, Typography, IconButton } from '@mui/material';
+import { Button, Card, CardContent, CardMedia, Chip, Dialog, DialogTitle, DialogContent, DialogActions, Grid, Stack, Tooltip, Typography, IconButton } from '@mui/material';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import makeStyles from '@mui/styles/makeStyles';
+import DeleteIcon from '@mui/icons-material';
 
 // placeholder images
 import repocube1 from '../../assets/repocube-1.png';
@@ -338,3 +339,34 @@ function RepoDetails() {
   );
 }
 export default RepoDetails;
+
+function DeleteTagConfirmDialog(props) {
+  const { title, children, open, setOpen, onConfirm } = props;
+
+  const handleClose = () => {
+    onClose(selectedValue);
+  };
+
+  const handleListItemClick = (value) => {
+    onClose(value);
+  };
+
+  return (
+    <Dialog onClose={handleClose} open={open}>
+    <DialogTitle>
+      Delete {repo}:{tag}?
+    </DialogTitle>
+    <DialogContent>
+      {children}
+    </DialogContent>
+    <DialogActions>
+      <Button variant="contained" onClick={() => setOpen(false)} color="secondary">
+        No
+      </Button>
+      <Button variant="contained" onClick={() => { setOpen(false); onConfirm(); }} color="default">
+        Yes
+      </Button>
+    </DialogActions>
+    </Dialog>
+  );
+}

src/components/Repo/Tabs/Tags.jsx

@@ -43,7 +43,7 @@ const useStyles = makeStyles(() => ({
 
 export default function Tags(props) {
   const classes = useStyles();
-  const { tags } = props;
+  const { tags, repo } = props;
   const [tagsFilter, setTagsFilter] = useState('');
   const [sortFilter, setSortFilter] = useState(tagsSortByCriteria.updateTimeDesc.value);
 
@@ -59,6 +59,7 @@ export default function Tags(props) {
         return (
           <TagCard
             key={tag.tag}
+            repo={repo}
             tag={tag.tag}
             lastUpdated={tag.lastUpdated}
             vendor={tag.vendor}

src/components/Shared/TagCard.jsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import { makeStyles } from '@mui/styles';
 import { useNavigate } from 'react-router-dom';
-import { Box, Card, CardContent, Collapse, Grid, Stack, Tooltip, Typography, Divider } from '@mui/material';
+import { Box, Card, CardContent, Collapse, IconButton, Item, Grid, Stack, Tooltip, Typography, Divider } from '@mui/material';
 import { Markdown } from 'utilities/MarkdowntojsxWrapper';
 import transform from 'utilities/transform';
 import { DateTime } from 'luxon';
 import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
+import DeleteIcon from '@mui/icons-material';
+import DeleteTagConfirmDialog from 'components/Repo/RepoDetails';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -99,9 +101,20 @@ export default function TagCard(props) {
   return (
     <Card className={classes.card} raised>
       <CardContent className={classes.content}>
-        <Typography variant="body1" align="left" className={classes.tagHeading}>
-          Tag
-        </Typography>
+        <Stack direction="row" spacing={2} justifyContent="space-between">
+          <Item>
+            <Typography variant="body1" align="left" className={classes.tagHeading}>
+              Tag
+            </Typography>
+          </Item>
+          <Item>
+            <DeleteTagConfirmDialog>
+              <IconButton title="{repoName}:{tag}">
+                <DeleteIcon/>
+              </IconButton>
+            </DeleteTagConfirmDialog>
+          </Item>
+        </Stack>
         <Typography variant="body1" align="left" className={classes.tagName} onClick={() => goToTags()}>
           {repoName && `${repoName}:`}
           {tag}