feat: added button to delete tag

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

src/__tests__/RepoPage/Tags.test.js

@@ -22,6 +22,7 @@ const mockedTagsData = [
   {
     tag: 'latest',
     vendor: 'test1',
+    isDeletable: true,
     manifests: [
       {
         lastUpdated: '2022-07-19T18:06:18.818788283Z',
@@ -37,6 +38,7 @@ const mockedTagsData = [
   {
     tag: 'bullseye',
     vendor: 'test1',
+    isDeletable: true,
     manifests: [
       {
         digest: 'sha256:adca4815c494becc1bf053af0c4640b2d81ab1a779e6d649e1b8b92a75f1d559',
@@ -52,6 +54,7 @@ const mockedTagsData = [
   {
     tag: '1.5.2',
     vendor: 'test1',
+    isDeletable: true,
     manifests: [
       {
         lastUpdated: '2022-07-19T18:06:18.818788283Z',
@@ -76,6 +79,18 @@ describe('Tags component', () => {
     await waitFor(() => expect(screen.queryByText(/OS\/ARCH/i)).not.toBeInTheDocument());
   });
 
+  it('should see delete tag button and its dialog', async () => {
+    render(<TagsThemeWrapper />);
+    const deleteBtn = await screen.findAllByTestId('DeleteIcon');
+    fireEvent.click(deleteBtn[0]);
+    expect(await screen.findByTestId('delete-dialog')).toBeInTheDocument();
+    const confirmBtn = await screen.findByTestId('confirm-delete');
+    expect(confirmBtn).toBeInTheDocument();
+    fireEvent.click(confirmBtn);
+    expect(await screen.findByTestId('confirm-delete')).toBeInTheDocument();
+    expect(await screen.findByTestId('cancel-delete')).toBeInTheDocument();
+  });
+
   it('should navigate to tag page details when tag is clicked', async () => {
     render(<TagsThemeWrapper />);
     const tagLink = await screen.findByText('latest');

src/api.js

@@ -81,12 +81,13 @@ 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
     }}){Results {Name LastUpdated Size Platforms {Os Arch}  NewestImage { Tag Vulnerabilities {MaxSeverity Count} Description  Licenses Title Source IsSigned SignatureInfo { Tool IsTrusted Author } Documentation Vendor Labels} IsStarred IsBookmarked StarCount DownloadCount}}}`,
   detailedRepoInfo: (name) =>
-    `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Manifests {Digest Platform {Os Arch} Size} Vulnerabilities {MaxSeverity Count} Tag LastUpdated Vendor } Summary {Name LastUpdated Size Platforms {Os Arch} Vendors IsStarred IsBookmarked NewestImage {RepoName IsSigned SignatureInfo { Tool IsTrusted Author } Vulnerabilities {MaxSeverity Count} Manifests {Digest} Tag Vendor Title Documentation DownloadCount Source Description Licenses}}}}`,
+    `/v2/_zot/ext/search?query={ExpandedRepoInfo(repo:"${name}"){Images {Manifests {Digest Platform {Os Arch} Size} Vulnerabilities {MaxSeverity Count} Tag LastUpdated Vendor IsDeletable } Summary {Name LastUpdated Size Platforms {Os Arch} Vendors IsStarred IsBookmarked NewestImage {RepoName IsSigned SignatureInfo { Tool IsTrusted Author } Vulnerabilities {MaxSeverity Count} Manifests {Digest} Tag Vendor Title Documentation DownloadCount Source Description Licenses}}}}`,
   detailedImageInfo: (name, tag) =>
     `/v2/_zot/ext/search?query={Image(image: "${name}:${tag}"){RepoName IsSigned SignatureInfo { Tool IsTrusted Author } Vulnerabilities {MaxSeverity Count}  Referrers {MediaType ArtifactType Size Digest Annotations{Key Value}} Tag Manifests {History {Layer {Size Digest} HistoryDescription {CreatedBy EmptyLayer}} Digest ConfigDigest LastUpdated Size Platform {Os Arch}} Vendor Licenses }}`,
   vulnerabilitiesForRepo: (name, { pageNumber = 1, pageSize = 15 }, searchTerm = '') => {

src/components/Repo/RepoDetails.jsx

@@ -197,6 +197,11 @@ function RepoDetails() {
     };
   }, [name]);
 
+  const handleDeleteTag = (removed) => {
+    let newTags = tags.filter((tag) => tag.tag !== removed);
+    setTags(newTags);
+  };
+
   const handlePlatformChipClick = (event) => {
     const { textContent } = event.target;
     event.stopPropagation();
@@ -223,7 +228,7 @@ function RepoDetails() {
 
   const handleBookmarkClick = () => {
     api.put(`${host()}${endpoints.bookmarkToggle(name)}`, abortController.signal).then((response) => {
-      if (response.status === 200) {
+      if (response && response.status === 200) {
         setRepoDetailData((prevState) => ({
           ...prevState,
           isBookmarked: !prevState.isBookmarked
@@ -341,7 +346,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} handleDeleteTag={handleDeleteTag} />
               </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, handleDeleteTag } = props;
   const [tagsFilter, setTagsFilter] = useState('');
   const [sortFilter, setSortFilter] = useState(tagsSortByCriteria.updateTimeDesc.value);
 
@@ -63,6 +63,9 @@ export default function Tags(props) {
             lastUpdated={tag.lastUpdated}
             vendor={tag.vendor}
             manifests={tag.manifests}
+            repo={repoName}
+            handleDeleteTag={handleDeleteTag}
+            isDeletable={tag.isDeletable}
           />
         );
       })

src/components/Shared/ConfirmDialog.jsx

@@ -0,0 +1,30 @@
+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 data-testid="delete-dialog" onClose={onClose} open={open} color="primary">
+      <DialogTitle> {title} </DialogTitle>
+      <DialogActions style={{ justifyContent: 'center' }}>
+        <Button data-testid="cancel-delete" variant="contained" onClick={() => onClose()} color="primary">
+          Cancel
+        </Button>
+        <Button
+          data-testid="confirm-delete"
+          color="error"
+          variant="contained"
+          onClick={() => {
+            onConfirm();
+            onClose();
+          }}
+        >
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/components/Shared/DeleteTag.jsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+// 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, handleDeleteTag } = 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((response) => {
+        if (response && response.status == 202) {
+          handleDeleteTag(tag);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  const onConfirm = () => {
+    deleteTag(repo, tag);
+  };
+
+  return (
+    <div>
+      <IconButton onClick={handleClickOpen}>
+        <DeleteIcon />
+      </IconButton>
+      <ConfirmDialog
+        onClose={handleClose}
+        open={open}
+        title={`Permanently delete ${repo}:${tag} image`}
+        onConfirm={onConfirm}
+      />
+    </div>
+  );
+}

src/components/Shared/TagCard.jsx

@@ -6,6 +6,7 @@ import { Markdown } from 'utilities/MarkdowntojsxWrapper';
 import transform from 'utilities/transform';
 import { DateTime } from 'luxon';
 import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
+import DeleteTag from 'components/Shared/DeleteTag';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -78,9 +79,9 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function TagCard(props) {
-  const { repoName, tag, lastUpdated, vendor, manifests } = props;
-
+  const { repoName, tag, lastUpdated, vendor, manifests, repo, handleDeleteTag, isDeletable } = props;
   const [open, setOpen] = useState(false);
+
   const classes = useStyles();
 
   const lastDate = lastUpdated
@@ -99,9 +100,12 @@ 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>
+          {isDeletable && <DeleteTag repo={repo} tag={tag} handleDeleteTag={handleDeleteTag} />}
+        </Stack>
         <Typography variant="body1" align="left" className={classes.tagName} onClick={() => goToTags()}>
           {repoName && `${repoName}:`}
           {tag}

src/utilities/objectModels.js

@@ -69,6 +69,7 @@ const mapToImage = (responseImage) => {
     authors: responseImage.Authors,
     vulnerabiltySeverity: responseImage.Vulnerabilities?.MaxSeverity,
     vulnerabilityCount: responseImage.Vulnerabilities?.Count,
+    isDeletable: responseImage.IsDeletable,
     // frontend only prop to increase interop with Repo objects and code reusability
     name: `${responseImage.RepoName}:${responseImage.Tag}`
   };