feat: add ability to delete specific tag

package.json

@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@mui/icons-material": "^5.2.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.13",
     "@mui/lab": "^5.0.0-alpha.89",
-    "@mui/material": "^5.8.6",
+    "@mui/material": "^5.14.13",
     "@mui/styles": "^5.8.6",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.24.0",
     "downshift": "^6.1.12",
+    "http-proxy-middleware": "^2.0.6",
     "lodash": "^4.17.21",
     "luxon": "^2.5.2",
     "markdown-to-jsx": "^7.1.7",
@@ -24,14 +25,14 @@
     "web-vitals": "^2.1.3"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
     "@playwright/test": "^1.28.1",
-    "eslint": "^8.23.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.31.8",
-    "prettier": "^2.7.1",
-    "react-scripts": "^5.0.1",
-    "@babel/plugin-proposal-private-property-in-object": "^7.16.7"
+    "prettier": "^3.0.3",
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Repo/RepoDetails.jsx

@@ -1,6 +1,6 @@
 // react global
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-
+import { Delete as DeleteIcon } from '@mui/icons-material';
 // external
 import { DateTime } from 'luxon';
 import { isEmpty, uniq } from 'lodash';
@@ -242,7 +242,29 @@
       : `Timestamp N/A`;
     return lastDate;
   };
-
+  const handleDeleteRepo = () => {
+    const confirmed = window.confirm('Are you sure you want to delete this repo?');
+    if (confirmed) {
+      const apiUrl = `http://localhost:3000/v2/${name}/manifests/`;
+      fetch(apiUrl, {
+        method: 'DELETE'
+      })
+        .then((response) => {
+          if (response.status === 202) {
+            // Repo deleted successfully
+            console.log('Repo deleted successfully');
+            // You may want to navigate to another page or perform other actions as needed
+          } else {
+            console.log('Failed to delete the repo');
+            // Handle the failure case here
+          }
+        })
+        .catch((error) => {
+          console.error('An error occurred:', error);
+          // Handle any network or request error
+        });
+    }
+  };
   return (
     <>
       {isLoading ? (
@@ -285,6 +307,11 @@
                           )}
                         </IconButton>
                       )}
+                      {isAuthenticated() && (
+                        <IconButton component="span" onClick={handleDeleteRepo} data-testid="delete-repo-button">
+                          <DeleteIcon data-testid="delete-icon" />
+                        </IconButton>
+                      )}
                     </Stack>
                     <Typography gutterBottom className={classes.repoTitle}>
                       {repoDetailData?.title || 'Title not available'}
@@ -317,7 +344,7 @@
           <Grid item xs={12} md={8} className={classes.tags}>
             <Card className={classes.cardRoot}>
               <CardContent className={classes.tagsContent}>
-                <Tags tags={tags} />
+                <Tags tags={tags} repoName={repoDetailData?.name} />
               </CardContent>
             </Card>
           </Grid>

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, repoName } = 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}
+            repoName={repoName} //adding this
             tag={tag.tag}
             lastUpdated={tag.lastUpdated}
             vendor={tag.vendor}

src/components/Shared/TagCard.jsx

@@ -1,11 +1,11 @@
 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, Grid, Stack, Tooltip, Typography, Divider, IconButton } 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 { KeyboardArrowDown, KeyboardArrowRight, Delete as DeleteIcon } from '@mui/icons-material';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -79,7 +79,7 @@
 
 export default function TagCard(props) {
   const { repoName, tag, lastUpdated, vendor, manifests } = props;
-
+  console.log(props);
   const [open, setOpen] = useState(false);
   const classes = useStyles();
 
@@ -99,14 +99,53 @@
   return (
     <Card className={classes.card} raised>
       <CardContent className={classes.content}>
-        <Typography variant="body1" align="left" className={classes.tagHeading}>
-          Tag
-        </Typography>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Typography variant="body1" align="left" className={classes.tagHeading}>
+            Tag
+          </Typography>
+          <IconButton
+            color="primary"
+            style={{ marginLeft: 'auto' }}
+            onClick={() => {
+              const confirmed = window.confirm('Are you sure you want to perform this action?');
+              if (confirmed) {
+                console.log('Button clicked and confirmed!');
+                console.log(props);
+                console.log('REPONAME: ', repoName);
+                const apiUrl = `http://localhost:3000/v2/${repoName}/manifests/${tag}`;
+                fetch(apiUrl, {
+                  method: 'DELETE'
+                })
+                  .then((response) => {
+                    if (response.status === 202) {
+                      // Tag deleted successfully
+                      console.log('Tag deleted successfully');
+                      // You may want to refresh the UI or perform other actions as needed
+                    } else {
+                      console.log('Failed to delete the tag');
+                      // Handle the failure case here
+                    }
+                  })
+                  .catch((error) => {
+                    console.error('An error occurred:', error);
+                    // Handle any network or request error
+                  });
+                window.location.reload();
+              } else {
+                // User canceled the action
+                console.log('Button click canceled.');
+              }
+              console.log('Button clicked!');
+              //should hold repo name and tag [line 119 and 120]
+            }}
+          >
+            <DeleteIcon />
+          </IconButton>
+        </div>
         <Typography variant="body1" align="left" className={classes.tagName} onClick={() => goToTags()}>
           {repoName && `${repoName}:`}
           {tag}
         </Typography>
-
         <Stack sx={{ display: 'inline' }} direction="row" spacing={0.5}>
           <Typography variant="caption" sx={{ fontWeight: '400', fontSize: '0.8125rem' }}>
             Created

src/components/Tag/TagDetails.jsx

@@ -148,7 +148,6 @@ function TagDetails() {
 
   // get url param from <Route here (i.e. image name)
   const { reponame, tag } = useParams();
-
   const classes = useStyles();
 
   useEffect(() => {

src/host.js

@@ -1,6 +1,6 @@
 const hostConfig = {
-  auto: true,
-  default: 'http://localhost:5000'
+  auto: false,
+  default: 'http://localhost:8080'
 };
 
 const host = (manualHost = null) => {

src/setupProxy.js

@@ -0,0 +1,11 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/v2',
+    createProxyMiddleware({
+      target: 'http://localhost:8080',
+      changeOrigin: true,
+    })
+  );
+};