feat: added button to delete tag

Signed-off-by: Petu Eusebiu <[email protected]>

src/api.js

@@ -81,6 +81,7 @@ const endpoints = {
   authConfig: `/v2/_zot/ext/mgmt`,
   openidAuth: `/zot/auth/login`,
   logout: `/zot/auth/logout`,
+  deleteImage: (name, tag) => `/v2/${name}/manifests/${tag}`,
   repoList: ({ pageNumber = 1, pageSize = 15 } = {}) =>
     `/v2/_zot/ext/search?query={RepoListWithNewestImage(requestedPage: {limit:${pageSize} offset:${
       (pageNumber - 1) * pageSize

src/components/Repo/RepoDetails.jsx

@@ -158,7 +158,13 @@ const randomImage = () => {
   return imageArray[randomIntFromInterval(0, 3)];
 };
 
+function useRerender() {
+  const [, setToggle] = useState(false);
+  return () => setToggle((toggle) => !toggle && console.log('yeah'));
+}
+
 function RepoDetails() {
+  const rerender = useRerender();
   const [repoDetailData, setRepoDetailData] = useState({});
   const [tags, setTags] = useState([]);
   const placeholderImage = useRef(randomImage());
@@ -317,7 +323,7 @@ function RepoDetails() {
           <Grid item xs={12} md={8} className={classes.tags}>
             <Card className={classes.cardRoot}>
               <CardContent className={classes.tagsContent}>
-                <Tags tags={tags} />
+                <Tags tags={tags} repoName={name} rerender={rerender} />
               </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, rerender } = props;
   const [tagsFilter, setTagsFilter] = useState('');
   const [sortFilter, setSortFilter] = useState(tagsSortByCriteria.updateTimeDesc.value);
 
@@ -59,10 +59,12 @@ export default function Tags(props) {
         return (
           <TagCard
             key={tag.tag}
+            repoName={repoName}
             tag={tag.tag}
             lastUpdated={tag.lastUpdated}
             vendor={tag.vendor}
             manifests={tag.manifests}
+            rerender={rerender}
           />
         );
       })

src/components/Shared/ConfirmDialog.jsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+// components
+import { Button, Dialog, DialogTitle, DialogActions } from '@mui/material';
+
+export default function ConfirmDialog(props) {
+  const { onClose, open, title, onConfirm } = props;
+
+  return (
+    <Dialog onClose={onClose} open={open} color="primary">
+      <DialogTitle> {title} </DialogTitle>
+      <DialogActions>
+        <Button variant="contained" onClick={() => onClose()} color="primary">
+          No
+        </Button>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            onConfirm();
+            onClose();
+          }}
+        >
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/components/Shared/DeleteTag.jsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Button } from '@mui/material';
+
+// utility
+import { api, endpoints } from '../../api';
+
+// components
+import ConfirmDialog from 'components/Shared/ConfirmDialog';
+import { host } from '../../host';
+
+export default function DeleteTag(props) {
+  const { repo, tag, rerender } = props;
+  const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const deleteTag = (repo, tag) => {
+    api
+      .delete(`${host()}${endpoints.deleteImage(repo, tag)}`)
+      .then(() => {
+        console.log('delete successfully');
+        rerender();
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  const onConfirm = () => {
+    console.log(`repo: ${repo}, tag: ${tag}`);
+    deleteTag(repo, tag);
+  };
+
+  return (
+    <div>
+      <Button variant="outlined" onClick={handleClickOpen}>
+        Delete tag
+      </Button>
+      <ConfirmDialog onClose={handleClose} open={open} title={`Delete ${repo}:${tag} ?`} onConfirm={onConfirm} />
+    </div>
+  );
+}

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, Grid, Stack, IconButton, 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/Delete';
+import DeleteTag from 'components/Shared/DeleteTag';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -78,9 +80,10 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function TagCard(props) {
-  const { repoName, tag, lastUpdated, vendor, manifests } = props;
+  const { repoName, tag, lastUpdated, vendor, manifests, rerender } = props;
 
   const [open, setOpen] = useState(false);
+
   const classes = useStyles();
 
   const lastDate = lastUpdated
@@ -99,9 +102,16 @@ 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">
+          <Typography variant="body1" align="left" className={classes.tagHeading}>
+            Tag
+          </Typography>
+          <DeleteTag repo={repoName} tag={tag} rerender={rerender}>
+            <IconButton>
+              <DeleteIcon />
+            </IconButton>
+          </DeleteTag>
+        </Stack>
         <Typography variant="body1" align="left" className={classes.tagName} onClick={() => goToTags()}>
           {repoName && `${repoName}:`}
           {tag}

src/host.js

@@ -1,5 +1,5 @@
 const hostConfig = {
-  auto: true,
+  auto: false,
   default: 'http://localhost:5000'
 };