Skip to content

Commit

Permalink
feat: added button to delete tag
Browse files Browse the repository at this point in the history
Signed-off-by: Petu Eusebiu <[email protected]>
  • Loading branch information
eusebiu-constantin-petu-dbk committed Dec 11, 2023
1 parent d9370fb commit 3a1ea9c
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 8 deletions.
1 change: 1 addition & 0 deletions src/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 7 additions & 2 deletions src/components/Repo/RepoDetails.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/components/Repo/Tabs/Tags.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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}
handleDeleteTag={handleDeleteTag}
/>
);
})
Expand Down
29 changes: 29 additions & 0 deletions src/components/Shared/ConfirmDialog.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
49 changes: 49 additions & 0 deletions src/components/Shared/DeleteTag.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
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={`Delete ${repo}:${tag} ?`} onConfirm={onConfirm} />
</div>
);
}
13 changes: 9 additions & 4 deletions src/components/Shared/TagCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -78,9 +79,10 @@ const useStyles = makeStyles((theme) => ({
}));

export default function TagCard(props) {
const { repoName, tag, lastUpdated, vendor, manifests } = props;
const { repoName, tag, lastUpdated, vendor, manifests, handleDeleteTag } = props;

const [open, setOpen] = useState(false);

const classes = useStyles();

const lastDate = lastUpdated
Expand All @@ -99,9 +101,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>
<DeleteTag repo={repoName} tag={tag} handleDeleteTag={handleDeleteTag} />
</Stack>
<Typography variant="body1" align="left" className={classes.tagName} onClick={() => goToTags()}>
{repoName && `${repoName}:`}
{tag}
Expand Down
2 changes: 1 addition & 1 deletion src/host.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const hostConfig = {
auto: true,
auto: false,
default: 'http://localhost:5000'
};

Expand Down

0 comments on commit 3a1ea9c

Please sign in to comment.