Connected object tags API (#421)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

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

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import { Button, Grid } from "@material-ui/core";
+import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
+import api from "../../../../../../common/api";
+
+interface ITagModal {
+  modalOpen: boolean;
+  currentTags: any;
+  bucketName: string;
+  versionId: string;
+  onCloseAndUpdate: (refresh: boolean) => void;
+  selectedObject: string;
+  classes: any;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    buttonContainer: {
+      textAlign: "right",
+    },
+    pathLabel: {
+      marginTop: 0,
+      marginBottom: 32,
+    },
+    ...modalBasic,
+  });
+
+const AddTagModal = ({
+  modalOpen,
+  currentTags,
+  selectedObject,
+  onCloseAndUpdate,
+  bucketName,
+  versionId,
+  classes,
+}: ITagModal) => {
+  const [newKey, setNewKey] = useState<string>("");
+  const [newLabel, setNewLabel] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [isSending, setIsSending] = useState<boolean>(false);
+
+  const resetForm = () => {
+    setNewLabel("");
+    setNewKey("");
+  };
+
+  const addTagProcess = () => {
+    setIsSending(true);
+    const newTag: any = {};
+
+    newTag[newKey] = newLabel;
+    const newTagList = { ...currentTags, ...newTag };
+
+    api
+      .invoke(
+        "PUT",
+        `/api/v1/buckets/${bucketName}/objects/tags?prefix=${selectedObject}&version_id=${versionId}`,
+        { tags: newTagList }
+      )
+      .then((res: any) => {
+        setIsSending(false);
+        onCloseAndUpdate(true);
+      })
+      .catch((error) => {
+        setError(error);
+        setIsSending(false);
+      });
+  };
+
+  return (
+    <React.Fragment>
+      <ModalWrapper
+        modalOpen={modalOpen}
+        title="Add New Tag"
+        onClose={() => {
+          onCloseAndUpdate(false);
+        }}
+      >
+        <Grid container>
+          <h3 className={classes.pathLabel}>
+            Selected Object: {selectedObject}
+          </h3>
+          {error !== "" && <span>{error}</span>}
+          <Grid item xs={12}>
+            <InputBoxWrapper
+              value={newKey}
+              label={"New Tag Key"}
+              id={"newTagKey"}
+              name={"newTagKey"}
+              placeholder={"Enter New Tag Key"}
+              onChange={(e) => {
+                setNewKey(e.target.value);
+              }}
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <InputBoxWrapper
+              value={newLabel}
+              label={"New Tag Label"}
+              id={"newTagLabel"}
+              name={"newTagLabel"}
+              placeholder={"Enter New Tag Label"}
+              onChange={(e) => {
+                setNewLabel(e.target.value);
+              }}
+            />
+          </Grid>
+          <Grid item xs={12} className={classes.buttonContainer}>
+            <button
+              type="button"
+              color="primary"
+              className={classes.clearButton}
+              onClick={resetForm}
+            >
+              Clear
+            </button>
+            <Button
+              type="submit"
+              variant="contained"
+              color="primary"
+              disabled={
+                newLabel.trim() === "" || newKey.trim() === "" || isSending
+              }
+              onClick={addTagProcess}
+            >
+              Save
+            </Button>
+          </Grid>
+        </Grid>
+      </ModalWrapper>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(AddTagModal);

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

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Grid,
+  LinearProgress,
+} from "@material-ui/core";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
+import api from "../../../../../../common/api";
+import Typography from "@material-ui/core/Typography";
+
+interface IDeleteTagModal {
+  deleteOpen: boolean;
+  currentTags: any;
+  bucketName: string;
+  versionId: string;
+  selectedTag: [string, string];
+  onCloseAndUpdate: (refresh: boolean) => void;
+  selectedObject: string;
+  classes: any;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    buttonContainer: {
+      textAlign: "right",
+    },
+    pathLabel: {
+      marginTop: 0,
+      marginBottom: 32,
+    },
+    ...modalBasic,
+  });
+
+const DeleteTagModal = ({
+  deleteOpen,
+  currentTags,
+  selectedObject,
+  selectedTag,
+  onCloseAndUpdate,
+  bucketName,
+  versionId,
+  classes,
+}: IDeleteTagModal) => {
+  const [deleteError, setDeleteError] = useState<string>("");
+  const [deleteLoading, setDeleteSending] = useState<boolean>(false);
+  const [tagKey, tagLabel] = selectedTag;
+
+  const removeTagProcess = () => {
+    setDeleteSending(true);
+    const cleanObject = { ...currentTags };
+    delete cleanObject[tagKey];
+
+    api
+      .invoke(
+        "PUT",
+        `/api/v1/buckets/${bucketName}/objects/tags?prefix=${selectedObject}&version_id=${versionId}`,
+        { tags: cleanObject }
+      )
+      .then((res: any) => {
+        setDeleteSending(false);
+        onCloseAndUpdate(true);
+      })
+      .catch((error) => {
+        setDeleteError(error);
+        setDeleteSending(false);
+      });
+  };
+
+  return (
+    <Dialog
+      open={deleteOpen}
+      onClose={() => {
+        onCloseAndUpdate(false);
+      }}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">Delete Tag</DialogTitle>
+      <DialogContent>
+        {deleteLoading && <LinearProgress />}
+        <DialogContentText id="alert-dialog-description">
+          Are you sure you want to delete the tag{" "}
+          <b className={classes.wrapText}>
+            {tagKey} : {tagLabel}
+          </b>{" "}
+          from {selectedObject}?
+          {deleteError !== "" && (
+            <React.Fragment>
+              <br />
+              <Typography
+                component="p"
+                variant="body1"
+                className={classes.errorBlock}
+              >
+                {deleteError}
+              </Typography>
+            </React.Fragment>
+          )}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            onCloseAndUpdate(false);
+          }}
+          color="primary"
+          disabled={deleteLoading}
+        >
+          Cancel
+        </Button>
+        <Button onClick={removeTagProcess} color="secondary" autoFocus>
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default withStyles(styles)(DeleteTagModal);