From b07cc59b0f0618e2b47db2d07acb2fec9d1ce270 Mon Sep 17 00:00:00 2001 From: Petu Eusebiu Date: Fri, 8 Dec 2023 17:14:35 +0200 Subject: [PATCH] feat: added button to delete tag Signed-off-by: Petu Eusebiu --- src/api.js | 3 +- src/components/Repo/RepoDetails.jsx | 9 ++++- src/components/Repo/Tabs/Tags.jsx | 5 ++- src/components/Shared/ConfirmDialog.jsx | 29 +++++++++++++ src/components/Shared/DeleteTag.jsx | 54 +++++++++++++++++++++++++ src/components/Shared/TagCard.jsx | 14 ++++--- src/utilities/objectModels.js | 1 + 7 files changed, 106 insertions(+), 9 deletions(-) create mode 100644 src/components/Shared/ConfirmDialog.jsx create mode 100644 src/components/Shared/DeleteTag.jsx diff --git a/src/api.js b/src/api.js index 15b7f79..8d36738 100644 --- a/src/api.js +++ b/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 = '') => { diff --git a/src/components/Repo/RepoDetails.jsx b/src/components/Repo/RepoDetails.jsx index b3df2e9..0365c25 100644 --- a/src/components/Repo/RepoDetails.jsx +++ b/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() { - + diff --git a/src/components/Repo/Tabs/Tags.jsx b/src/components/Repo/Tabs/Tags.jsx index 808d55f..d4388ab 100644 --- a/src/components/Repo/Tabs/Tags.jsx +++ b/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); @@ -59,10 +59,13 @@ export default function Tags(props) { return ( ); }) diff --git a/src/components/Shared/ConfirmDialog.jsx b/src/components/Shared/ConfirmDialog.jsx new file mode 100644 index 0000000..7abf2c3 --- /dev/null +++ b/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 ( + + {title} + + + + + + ); +} diff --git a/src/components/Shared/DeleteTag.jsx b/src/components/Shared/DeleteTag.jsx new file mode 100644 index 0000000..32a4ec0 --- /dev/null +++ b/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 ( +
+ + + + +
+ ); +} diff --git a/src/components/Shared/TagCard.jsx b/src/components/Shared/TagCard.jsx index f2eb762..83b8608 100644 --- a/src/components/Shared/TagCard.jsx +++ b/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, handleDeleteTag, isDeletable } = props; const [open, setOpen] = useState(false); + const classes = useStyles(); const lastDate = lastUpdated @@ -99,9 +100,12 @@ export default function TagCard(props) { return ( - - Tag - + + + Tag + + {isDeletable && } + goToTags()}> {repoName && `${repoName}:`} {tag} diff --git a/src/utilities/objectModels.js b/src/utilities/objectModels.js index 34bb880..dc97568 100644 --- a/src/utilities/objectModels.js +++ b/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}` };