Added keys & labels to compile with S3 standard

Benjamin Perez · Benjamin Perez · commit 716085ffcd75 · 2020-11-19T18:59:06.000-06:00
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx
@@ -4,12 +4,11 @@ import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/I
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
-import { tagObjectCreate } from "../utils";
 import api from "../../../../../../common/api";
 
 interface ITagModal {
   modalOpen: boolean;
-  currentTags: string[];
+  currentTags: any;
   bucketName: string;
   versionId: string;
   onCloseAndUpdate: (refresh: boolean) => void;
@@ -38,24 +37,28 @@ const AddTagModal = ({
   versionId,
   classes,
 }: ITagModal) => {
-  const [newTag, setNewTag] = useState<string>("");
+  const [newKey, setNewKey] = useState<string>("");
+  const [newLabel, setNewLabel] = useState<string>("");
   const [error, setError] = useState<string>("");
   const [isSending, setIsSending] = useState<boolean>(false);
 
   const resetForm = () => {
-    setNewTag("");
+    setNewLabel("");
+    setNewKey("");
   };
 
   const addTagProcess = () => {
     setIsSending(true);
-    const newTagList = [...currentTags, newTag];
-    const tagsToSave = tagObjectCreate(newTagList);
+    const newTag: any = {};
+
+    newTag[newKey] = newLabel;
+    const newTagList = { ...currentTags, ...newTag };
 
     api
       .invoke(
         "PUT",
         `/api/v1/buckets/${bucketName}/objects/tags?prefix=${selectedObject}&version_id=${versionId}`,
-        tagsToSave
+        { tags: newTagList }
       )
       .then((res: any) => {
         setIsSending(false);
@@ -83,13 +86,25 @@ const AddTagModal = ({
           {error !== "" && <span>{error}</span>}
           <Grid item xs={12}>
             <InputBoxWrapper
-              value={newTag}
-              label={"New Tag"}
-              id={"newTag"}
-              name={"newTag"}
-              placeholder={"Enter New Tag"}
+              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) => {
-                setNewTag(e.target.value);
+                setNewLabel(e.target.value);
               }}
             />
           </Grid>
@@ -106,7 +121,9 @@ const AddTagModal = ({
               type="submit"
               variant="contained"
               color="primary"
-              disabled={newTag.trim() === "" || isSending}
+              disabled={
+                newLabel.trim() === "" || newKey.trim() === "" || isSending
+              }
               onClick={addTagProcess}
             >
               Save
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/DeleteTagModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/DeleteTagModal.tsx
@@ -9,20 +9,17 @@ import {
   Grid,
   LinearProgress,
 } 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 { tagObjectCreate } from "../utils";
 import api from "../../../../../../common/api";
 import Typography from "@material-ui/core/Typography";
 
 interface IDeleteTagModal {
   deleteOpen: boolean;
-  currentTags: string[];
+  currentTags: any;
   bucketName: string;
   versionId: string;
-  selectedTag: string;
+  selectedTag: [string, string];
   onCloseAndUpdate: (refresh: boolean) => void;
   selectedObject: string;
   classes: any;
@@ -52,18 +49,18 @@ const DeleteTagModal = ({
 }: IDeleteTagModal) => {
   const [deleteError, setDeleteError] = useState<string>("");
   const [deleteLoading, setDeleteSending] = useState<boolean>(false);
+  const [tagKey, tagLabel] = selectedTag;
 
   const removeTagProcess = () => {
     setDeleteSending(true);
-    const updatedTagsList = currentTags.filter((tag) => tag !== selectedTag);
-
-    const tagsToSave = tagObjectCreate(updatedTagsList);
+    const cleanObject = { ...currentTags };
+    delete cleanObject[tagKey];
 
     api
       .invoke(
         "PUT",
         `/api/v1/buckets/${bucketName}/objects/tags?prefix=${selectedObject}&version_id=${versionId}`,
-        tagsToSave
+        { tags: cleanObject }
       )
       .then((res: any) => {
         setDeleteSending(false);
@@ -89,8 +86,10 @@ const DeleteTagModal = ({
         {deleteLoading && <LinearProgress />}
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to delete the tag{" "}
-          <b className={classes.wrapText}>{selectedTag}</b> from{" "}
-          {selectedObject}?
+          <b className={classes.wrapText}>
+            {tagKey} : {tagLabel}
+          </b>{" "}
+          from {selectedObject}?
           {deleteError !== "" && (
             <React.Fragment>
               <br />
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
@@ -170,7 +170,7 @@ const ObjectDetails = ({
   const [retentionModalOpen, setRetentionModalOpen] = useState<boolean>(false);
   const [tagModalOpen, setTagModalOpen] = useState<boolean>(false);
   const [deleteTagModalOpen, setDeleteTagModalOpen] = useState<boolean>(false);
-  const [selectedTag, setSelectedTag] = useState<string>("");
+  const [selectedTag, setSelectedTag] = useState<[string, string]>(["", ""]);
   const [actualInfo, setActualInfo] = useState<IFileInfo>(emptyFile);
   const [versions, setVersions] = useState<IFileInfo[]>([]);
   const [filterVersion, setFilterVersion] = useState<string>("");
@@ -205,12 +205,10 @@ const ObjectDetails = ({
     }
   }, [loadObjectData]);
 
-  let tags = [];
+  let tagKeys: string[] = [];
 
   if (actualInfo.tags) {
-    tags = Object.keys(actualInfo.tags).map((itemKey: string) => {
-      return get(actualInfo, `tags.${itemKey}`, "");
-    });
+    tagKeys = Object.keys(actualInfo.tags);
   }
 
   const openRetentionModal = () => {
@@ -233,8 +231,8 @@ const ObjectDetails = ({
     console.log("close share modal");
   };
 
-  const deleteTag = (tagToDelete: string) => {
-    setSelectedTag(tagToDelete);
+  const deleteTag = (tagKey: string, tagLabel: string) => {
+    setSelectedTag([tagKey, tagLabel]);
     setDeleteTagModalOpen(true);
   };
 
@@ -309,7 +307,7 @@ const ObjectDetails = ({
       {tagModalOpen && (
         <AddTagModal
           modalOpen={tagModalOpen}
-          currentTags={tags}
+          currentTags={actualInfo.tags}
           selectedObject={pathInBucket}
           versionId={actualInfo.version_id}
           bucketName={bucketName}
@@ -319,7 +317,7 @@ const ObjectDetails = ({
       {deleteTagModalOpen && (
         <DeleteTagModal
           deleteOpen={deleteTagModalOpen}
-          currentTags={tags}
+          currentTags={actualInfo.tags}
           selectedObject={pathInBucket}
           versionId={actualInfo.version_id}
           bucketName={bucketName}
@@ -427,18 +425,19 @@ const ObjectDetails = ({
           </Grid>
           <Grid item xs={12} className={classes.tagsContainer}>
             <div className={classes.tagText}>Tags:</div>
-            {tags.map((tag, index) => {
+            {tagKeys.map((tagKey, index) => {
+              const tag = get(actualInfo, `tags.${tagKey}`, "");
               if (tag !== "") {
                 return (
                   <Chip
                     key={`chip-${index}`}
                     className={classes.tag}
                     size="small"
-                    label={tag}
+                    label={`${tagKey} : ${tag}`}
                     color="primary"
                     deleteIcon={<CloseIcon />}
                     onDelete={() => {
-                      deleteTag(tag);
+                      deleteTag(tagKey, tag);
                     }}
                   />
                 );
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/utils.ts b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/utils.ts
@@ -46,13 +46,3 @@ export const download = (bucketName: string, objectName: string) => {
   };
   xhr.send();
 };
-
-export const tagObjectCreate = (tags: string[]) => {
-  let tagsObject: any = {};
-
-  tags.forEach((itemTag) => {
-    tagsObject[itemTag.toLowerCase().replace(" ", "_")] = itemTag;
-  });
-
-  return { tags: tagsObject };
-};
