Skip to content

Commit 8a6a75b

Browse files
bexsoftBenjamin Perez
bexsoft
and
Benjamin Perez
authored
Connected object tags API (#421)
Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
1 parent 8cf678f commit 8a6a75b

File tree

3 files changed

+357
-36
lines changed

3 files changed

+357
-36
lines changed

‎portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React, { useState } from "react";
2+
import { Button, Grid } from "@material-ui/core";
3+
import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
4+
import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
5+
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
6+
import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
7+
import api from "../../../../../../common/api";
8+
9+
interface ITagModal {
10+
modalOpen: boolean;
11+
currentTags: any;
12+
bucketName: string;
13+
versionId: string;
14+
onCloseAndUpdate: (refresh: boolean) => void;
15+
selectedObject: string;
16+
classes: any;
17+
}
18+
19+
const styles = (theme: Theme) =>
20+
createStyles({
21+
buttonContainer: {
22+
textAlign: "right",
23+
},
24+
pathLabel: {
25+
marginTop: 0,
26+
marginBottom: 32,
27+
},
28+
...modalBasic,
29+
});
30+
31+
const AddTagModal = ({
32+
modalOpen,
33+
currentTags,
34+
selectedObject,
35+
onCloseAndUpdate,
36+
bucketName,
37+
versionId,
38+
classes,
39+
}: ITagModal) => {
40+
const [newKey, setNewKey] = useState<string>("");
41+
const [newLabel, setNewLabel] = useState<string>("");
42+
const [error, setError] = useState<string>("");
43+
const [isSending, setIsSending] = useState<boolean>(false);
44+
45+
const resetForm = () => {
46+
setNewLabel("");
47+
setNewKey("");
48+
};
49+
50+
const addTagProcess = () => {
51+
setIsSending(true);
52+
const newTag: any = {};
53+
54+
newTag[newKey] = newLabel;
55+
const newTagList = { ...currentTags, ...newTag };
56+
57+
api
58+
.invoke(
59+
"PUT",
60+
`/api/v1/buckets/${bucketName}/objects/tags?prefix=${selectedObject}&version_id=${versionId}`,
61+
{ tags: newTagList }
62+
)
63+
.then((res: any) => {
64+
setIsSending(false);
65+
onCloseAndUpdate(true);
66+
})
67+
.catch((error) => {
68+
setError(error);
69+
setIsSending(false);
70+
});
71+
};
72+
73+
return (
74+
<React.Fragment>
75+
<ModalWrapper
76+
modalOpen={modalOpen}
77+
title="Add New Tag"
78+
onClose={() => {
79+
onCloseAndUpdate(false);
80+
}}
81+
>
82+
<Grid container>
83+
<h3 className={classes.pathLabel}>
84+
Selected Object: {selectedObject}
85+
</h3>
86+
{error !== "" && <span>{error}</span>}
87+
<Grid item xs={12}>
88+
<InputBoxWrapper
89+
value={newKey}
90+
label={"New Tag Key"}
91+
id={"newTagKey"}
92+
name={"newTagKey"}
93+
placeholder={"Enter New Tag Key"}
94+
onChange={(e) => {
95+
setNewKey(e.target.value);
96+
}}
97+
/>
98+
</Grid>
99+
<Grid item xs={12}>
100+
<InputBoxWrapper
101+
value={newLabel}
102+
label={"New Tag Label"}
103+
id={"newTagLabel"}
104+
name={"newTagLabel"}
105+
placeholder={"Enter New Tag Label"}
106+
onChange={(e) => {
107+
setNewLabel(e.target.value);
108+
}}
109+
/>
110+
</Grid>
111+
<Grid item xs={12} className={classes.buttonContainer}>
112+
<button
113+
type="button"
114+
color="primary"
115+
className={classes.clearButton}
116+
onClick={resetForm}
117+
>
118+
Clear
119+
</button>
120+
<Button
121+
type="submit"
122+
variant="contained"
123+
color="primary"
124+
disabled={
125+
newLabel.trim() === "" || newKey.trim() === "" || isSending
126+
}
127+
onClick={addTagProcess}
128+
>
129+
Save
130+
</Button>
131+
</Grid>
132+
</Grid>
133+
</ModalWrapper>
134+
</React.Fragment>
135+
);
136+
};
137+
138+
export default withStyles(styles)(AddTagModal);

‎portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/DeleteTagModal.tsx

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import React, { useState } from "react";
2+
import {
3+
Button,
4+
Dialog,
5+
DialogActions,
6+
DialogContent,
7+
DialogContentText,
8+
DialogTitle,
9+
Grid,
10+
LinearProgress,
11+
} from "@material-ui/core";
12+
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
13+
import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
14+
import api from "../../../../../../common/api";
15+
import Typography from "@material-ui/core/Typography";
16+
17+
interface IDeleteTagModal {
18+
deleteOpen: boolean;
19+
currentTags: any;
20+
bucketName: string;
21+
versionId: string;
22+
selectedTag: [string, string];
23+
onCloseAndUpdate: (refresh: boolean) => void;
24+
selectedObject: string;
25+
classes: any;
26+
}
27+
28+
const styles = (theme: Theme) =>
29+
createStyles({
30+
buttonContainer: {
31+
textAlign: "right",
32+
},
33+
pathLabel: {
34+
marginTop: 0,
35+
marginBottom: 32,
36+
},
37+
...modalBasic,
38+
});
39+
40+
const DeleteTagModal = ({
41+
deleteOpen,
42+
currentTags,
43+
selectedObject,
44+
selectedTag,
45+
onCloseAndUpdate,
46+
bucketName,
47+
versionId,
48+
classes,
49+
}: IDeleteTagModal) => {
50+
const [deleteError, setDeleteError] = useState<string>("");
51+
const [deleteLoading, setDeleteSending] = useState<boolean>(false);
52+
const [tagKey, tagLabel] = selectedTag;
53+
54+
const removeTagProcess = () => {
55+
setDeleteSending(true);
56+
const cleanObject = { ...currentTags };
57+
delete cleanObject[tagKey];
58+
59+
api
60+
.invoke(
61+
"PUT",
62+
`/api/v1/buckets/${bucketName}/objects/tags?prefix=${selectedObject}&version_id=${versionId}`,
63+
{ tags: cleanObject }
64+
)
65+
.then((res: any) => {
66+
setDeleteSending(false);
67+
onCloseAndUpdate(true);
68+
})
69+
.catch((error) => {
70+
setDeleteError(error);
71+
setDeleteSending(false);
72+
});
73+
};
74+
75+
return (
76+
<Dialog
77+
open={deleteOpen}
78+
onClose={() => {
79+
onCloseAndUpdate(false);
80+
}}
81+
aria-labelledby="alert-dialog-title"
82+
aria-describedby="alert-dialog-description"
83+
>
84+
<DialogTitle id="alert-dialog-title">Delete Tag</DialogTitle>
85+
<DialogContent>
86+
{deleteLoading && <LinearProgress />}
87+
<DialogContentText id="alert-dialog-description">
88+
Are you sure you want to delete the tag{" "}
89+
<b className={classes.wrapText}>
90+
{tagKey} : {tagLabel}
91+
</b>{" "}
92+
from {selectedObject}?
93+
{deleteError !== "" && (
94+
<React.Fragment>
95+
<br />
96+
<Typography
97+
component="p"
98+
variant="body1"
99+
className={classes.errorBlock}
100+
>
101+
{deleteError}
102+
</Typography>
103+
</React.Fragment>
104+
)}
105+
</DialogContentText>
106+
</DialogContent>
107+
<DialogActions>
108+
<Button
109+
onClick={() => {
110+
onCloseAndUpdate(false);
111+
}}
112+
color="primary"
113+
disabled={deleteLoading}
114+
>
115+
Cancel
116+
</Button>
117+
<Button onClick={removeTagProcess} color="secondary" autoFocus>
118+
Delete
119+
</Button>
120+
</DialogActions>
121+
</Dialog>
122+
);
123+
};
124+
125+
export default withStyles(styles)(DeleteTagModal);

0 commit comments

Comments
 (0)