From a37474598167eb14a53fe2558bc6850de3c11793 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 --- .github/workflows/end-to-end-test.yml | 4 +- 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 + 8 files changed, 108 insertions(+), 11 deletions(-) create mode 100644 src/components/Shared/ConfirmDialog.jsx create mode 100644 src/components/Shared/DeleteTag.jsx diff --git a/.github/workflows/end-to-end-test.yml b/.github/workflows/end-to-end-test.yml index a74408be..7f266d40 100644 --- a/.github/workflows/end-to-end-test.yml +++ b/.github/workflows/end-to-end-test.yml @@ -87,8 +87,8 @@ jobs: uses: actions/checkout@v3 with: fetch-depth: 2 - repository: project-zot/zot - ref: main + repository: peusebiu/zot + ref: ui_delete_tag path: zot - name: Build zot diff --git a/src/api.js b/src/api.js index 15b7f794..8d367389 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 b3df2e9b..0365c250 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 808d55f5..a6b6bb30 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); @@ -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} /> ); }) diff --git a/src/components/Shared/ConfirmDialog.jsx b/src/components/Shared/ConfirmDialog.jsx new file mode 100644 index 00000000..7abf2c3e --- /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 00000000..32a4ec02 --- /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 f2eb7624..cdc6a4d9 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, 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 ( - - Tag - + + + Tag + + {isDeletable && } + goToTags()}> {repoName && `${repoName}:`} {tag} diff --git a/src/utilities/objectModels.js b/src/utilities/objectModels.js index 34bb880c..dc97568f 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}` };