Adjusted edit / delete tags modal styles (#1939)

bexsoft · web-flow · commit fef7863810ac · 2022-05-02T17:01:34.000-07:00
diff --git a/portal-ui/src/icons/AddNewTagIcon.tsx b/portal-ui/src/icons/AddNewTagIcon.tsx
@@ -20,57 +20,23 @@ import { SVGProps } from "react";
 const AddNewTagIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="284.616"
-    height="49.568"
     className={"min-icon"}
     viewBox="0 0 256 256"
     {...props}
   >
-    <defs>
-      <clipPath id="clip-path">
-        <rect
-          id="Rectángulo_1041"
-          data-name="Rectángulo 1041"
-          width="256"
-          height="242.667"
-          fill="none"
-        />
-      </clipPath>
-      <clipPath id="clip-Add_New_Tag">
-        <rect width="256" height="256" />
-      </clipPath>
-    </defs>
-    <g
-      id="Add_New_Tag"
-      data-name="Add New Tag"
-      clipPath="url(#clip-Add_New_Tag)"
-    >
-      <rect width="256" height="256" fill="#fff" />
-      <g id="Add_New_Tag_Icon" data-name="Add New Tag Icon">
-        <g id="Add_New_" data-name="Add New " transform="translate(0 7.836)">
-          <g id="Grupo_2429" data-name="Grupo 2429" clipPath="url(#clip-path)">
-            <path
-              id="Trazado_7190"
-              data-name="Trazado 7190"
-              d="M227.22,126.576A53.114,53.114,0,1,0,155.674,55.03L109.365,8.722A29.86,29.86,0,0,0,88.94,0L29.97.032A30.021,30.021,0,0,0,0,29.99l0,59.2a29.8,29.8,0,0,0,8.7,20.186L133.237,233.909a29.806,29.806,0,0,0,21.266,8.758v0a29.813,29.813,0,0,0,21.25-8.743l58.162-58.157a30.211,30.211,0,0,0-.018-42.511ZM60.958,76.033A15.072,15.072,0,1,1,76.031,60.96,15.091,15.091,0,0,1,60.958,76.033m100.274,3.334A41.967,41.967,0,1,1,203.2,121.334a41.967,41.967,0,0,1-41.967-41.967"
-              fill="#4ccb92"
-            />
-            <path
-              id="Trazado_7191"
-              data-name="Trazado 7191"
-              d="M316.362,94.258H303.2v13.164H290.033v13.165H303.2v13.165h13.164V120.587h13.164V107.422H316.362Z"
-              transform="translate(-106.58 -34.638)"
-              fill="#4ccb92"
-            />
-          </g>
+    <g>
+      <g transform="translate(0 7.836)">
+        <g>
+          <path
+            d="M227.22,126.576A53.114,53.114,0,1,0,155.674,55.03L109.365,8.722A29.86,29.86,0,0,0,88.94,0L29.97.032A30.021,30.021,0,0,0,0,29.99l0,59.2a29.8,29.8,0,0,0,8.7,20.186L133.237,233.909a29.806,29.806,0,0,0,21.266,8.758v0a29.813,29.813,0,0,0,21.25-8.743l58.162-58.157a30.211,30.211,0,0,0-.018-42.511ZM60.958,76.033A15.072,15.072,0,1,1,76.031,60.96,15.091,15.091,0,0,1,60.958,76.033m100.274,3.334A41.967,41.967,0,1,1,203.2,121.334a41.967,41.967,0,0,1-41.967-41.967"
+            fill="#4ccb92"
+          />
+          <path
+            d="M316.362,94.258H303.2v13.164H290.033v13.165H303.2v13.165h13.164V120.587h13.164V107.422H316.362Z"
+            transform="translate(-106.58 -34.638)"
+            fill="#4ccb92"
+          />
         </g>
-        <rect
-          id="Rectángulo_1042"
-          data-name="Rectángulo 1042"
-          width="256"
-          height="256"
-          fill="none"
-        />
       </g>
     </g>
   </svg>
diff --git a/portal-ui/src/icons/EditTagIcon.tsx b/portal-ui/src/icons/EditTagIcon.tsx
@@ -0,0 +1,42 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const EditTagIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={"min-icon"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <g transform="translate(0 0)">
+      <g transform="translate(0 0)">
+        <path
+          d="M224.54,131.96c26.08-14.98,35.99-47.67,22.62-74.61-11.77-25.71-42.15-37.02-67.87-25.25-.96,.44-1.9,.91-2.83,1.4-9.84,5.4-17.74,13.74-22.62,23.85L108.09,9.09C102.84,3.49,95.57,.22,87.9,0H29.63C12.83,.49-.41,14.46,0,31.25v61.73c.19,7.83,3.25,15.33,8.6,21.05l123.12,129.87c10.78,11.6,28.92,12.27,40.52,1.49,.52-.48,1.01-.98,1.49-1.49l57.48-60.63c11.52-12.53,11.52-31.8,0-44.32l-6.68-6.98ZM60.25,79.27c-8.45-.23-15.12-7.27-14.89-15.72-.23-8.45,6.44-15.49,14.89-15.72,8.45,.24,15.11,7.27,14.89,15.72,.22,8.45-6.44,15.48-14.89,15.72m99.09,3.47h0c-.61-23.53,17.95-43.11,41.47-43.75,23.53,.64,42.09,20.22,41.47,43.75,.61,23.53-17.95,43.11-41.47,43.75-23.53-.64-42.09-20.22-41.47-43.75"
+          fill="#4ccb92"
+        />
+        <path
+          d="M217.93,64.76c-1.49-1.66-3.62-2.61-5.85-2.61-2.24,.02-4.37,.94-5.92,2.55l-21.93,23.19c-.31,.32-.52,.72-.59,1.16l-2.28,11.67c-.15,.73,.07,1.48,.59,2.01,.41,.4,.96,.62,1.53,.61,.14,.04,.29,.04,.44,0l10.98-2.24c.42-.08,.81-.3,1.1-.62l21.93-23.19c3.22-3.52,3.22-8.92,0-12.45v-.07Z"
+          fill="#4ccb92"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default EditTagIcon;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
@@ -188,3 +188,4 @@ export { default as NetworkGetIcon } from "./NetworkGetIcon";
 export { default as NetworkPutIcon } from "./NetworkPutIcon";
 export { default as RemoveAllIcon } from "./RemoveAllIcon";
 export { default as CancelledIcon } from "./CancelledIcon";
+export { default as EditTagIcon } from "./EditTagIcon";
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/TagsModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/TagsModal.tsx
@@ -33,7 +33,11 @@ import {
   modalStyleUtils,
   spacingUtils,
 } from "../../../../Common/FormComponents/common/styleLibrary";
-import { TagsIcon } from "../../../../../../icons";
+import {
+  AddNewTagIcon,
+  DisabledIcon,
+  EditTagIcon,
+} from "../../../../../../icons";
 import { IFileInfo } from "./types";
 import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../../../../common/SecureComponent";
@@ -56,9 +60,32 @@ const styles = (theme: Theme) =>
       fontSize: 18,
       fontWeight: "bold",
       color: "#000",
-      margin: "20px 0",
+      margin: "35px 0",
       paddingBottom: 15,
-      borderBottom: "#E2E2E2 2px solid",
+      display: "flex",
+      alignItems: "center",
+      "& > svg": {
+        marginRight: 10,
+      },
+    },
+    tagsForLabel: {
+      fontSize: 16,
+      margin: "20px 0 30px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      width: "100%",
+    },
+    currentTagsContainer: {
+      fontSize: 14,
+      fontWeight: "normal",
+    },
+    noTagsForObject: {
+      color: "#858585",
+    },
+    deleteTag: {
+      color: "#C83B51",
+      marginLeft: 5,
     },
     ...formFieldStyles,
     ...modalStyleUtils,
@@ -152,40 +179,59 @@ const AddTagModal = ({
     setDeleteEnabled(false);
   };
 
+  const tagsFor = (plural: boolean) => (
+    <div className={classes.tagsForLabel}>
+      Tag{plural ? "s" : ""} for: <strong>{currentItem}</strong>
+    </div>
+  );
+
   return (
     <Fragment>
       <ModalWrapper
         modalOpen={modalOpen}
-        title={deleteEnabled ? `Delete Tag` : `Edit Tags for ${currentItem}`}
+        title={
+          deleteEnabled ? (
+            <span style={{ color: "#C83B51" }}>Delete Tag</span>
+          ) : (
+            `Edit Tags`
+          )
+        }
         onClose={() => {
           onCloseAndUpdate(true);
         }}
-        titleIcon={<TagsIcon />}
+        titleIcon={
+          deleteEnabled ? (
+            <DisabledIcon style={{ fill: "#C83B51" }} />
+          ) : (
+            <EditTagIcon />
+          )
+        }
       >
         {deleteEnabled ? (
           <Fragment>
             <Grid container>
+              {tagsFor(false)}
               Are you sure you want to delete the tag{" "}
-              <b className={classes.wrapText}>
+              <b className={classes.deleteTag}>
                 {deleteKey} : {deleteLabel}
-              </b>{" "}
-              from {currentItem}?
+              </b>{" "}?
               <Grid item xs={12} className={classes.modalButtonBar}>
                 <Button
                   type="button"
                   variant="outlined"
                   color="primary"
                   onClick={cancelDelete}
                 >
-                  No
+                  Cancel
                 </Button>
                 <Button
                   type="submit"
                   variant="outlined"
                   color="secondary"
                   onClick={deleteTagProcess}
+                  id={"deleteTag"}
                 >
-                  Yes
+                  Delete Tag
                 </Button>
               </Grid>
             </Grid>
@@ -200,44 +246,56 @@ const AddTagModal = ({
                 sx={{
                   display: "flex",
                   flexFlow: "column",
+                  width: "100%",
                 }}
               >
-                <strong>Current Tags:</strong>
-                {currTagKeys.length === 0 ? "No Tags for this object" : ""}
-                <Box>
-                  {currTagKeys.map((tagKey: string, index: number) => {
-                    const tag = get(currentTags, `${tagKey}`, "");
-                    if (tag !== "") {
-                      return (
-                        <SecureComponent
-                          key={`chip-${index}`}
-                          scopes={[IAM_SCOPES.S3_DELETE_OBJECT_TAGGING]}
-                          resource={bucketName}
-                          matchAll
-                          errorProps={{
-                            deleteIcon: null,
-                            onDelete: null,
-                          }}
-                        >
-                          <Chip
-                            style={{
-                              textTransform: "none",
-                              marginRight: "5px",
+                {tagsFor(true)}
+                <div className={classes.currentTagsContainer}>
+                  Current Tags:
+                  <br />
+                  {currTagKeys.length === 0 ? (
+                    <span className={classes.noTagsForObject}>
+                      There are no tags for this object
+                    </span>
+                  ) : (
+                    <Fragment />
+                  )}
+                  <Box sx={{ marginTop: "5px", marginBottom: "15px" }}>
+                    {currTagKeys.map((tagKey: string, index: number) => {
+                      const tag = get(currentTags, `${tagKey}`, "");
+                      if (tag !== "") {
+                        return (
+                          <SecureComponent
+                            key={`chip-${index}`}
+                            scopes={[IAM_SCOPES.S3_DELETE_OBJECT_TAGGING]}
+                            resource={bucketName}
+                            matchAll
+                            errorProps={{
+                              deleteIcon: null,
+                              onDelete: null,
                             }}
-                            size="small"
-                            label={`${tagKey} : ${tag}`}
-                            color="primary"
-                            deleteIcon={<CloseIcon />}
-                            onDelete={() => {
-                              onDeleteTag(tagKey, tag);
-                            }}
-                          />
-                        </SecureComponent>
-                      );
-                    }
-                    return null;
-                  })}
-                </Box>
+                          >
+                            <Chip
+                              style={{
+                                textTransform: "none",
+                                marginRight: "5px",
+                                marginBottom: "5px",
+                              }}
+                              size="small"
+                              label={`${tagKey} : ${tag}`}
+                              color="primary"
+                              deleteIcon={<CloseIcon />}
+                              onDelete={() => {
+                                onDeleteTag(tagKey, tag);
+                              }}
+                            />
+                          </SecureComponent>
+                        );
+                      }
+                      return null;
+                    })}
+                  </Box>
+                </div>
               </Box>
             </SecureComponent>
             <SecureComponent
@@ -247,7 +305,7 @@ const AddTagModal = ({
             >
               <Grid container>
                 <Grid item xs={12} className={classes.newTileHeader}>
-                  Add New Tag
+                  <AddNewTagIcon /> Add New Tag
                 </Grid>
                 <Grid item xs={12} className={classes.formFieldRow}>
                   <InputBoxWrapper
@@ -292,8 +350,9 @@ const AddTagModal = ({
                       isSending
                     }
                     onClick={addTagProcess}
+                    id="saveTag"
                   >
-                    Save new Tag
+                    Save
                   </Button>
                 </Grid>
               </Grid>
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -1205,7 +1205,7 @@ export const deleteDialogStyles = {
     justifyContent: "space-between",
   },
   titleText: {
-    fontSize: "1rem",
+    fontSize: 20,
     fontWeight: 600,
     display: "flex",
     alignItems: "center",
diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
@@ -409,6 +409,12 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
           EditIcon
         </Grid>
 
+        <Grid item xs={3} sm={2} md={1}>
+          <cicons.EditTagIcon />
+          <br />
+          EditTagIcon
+        </Grid>
+
         <Grid item xs={3} sm={2} md={1}>
           <cicons.EditTenantIcon />
           <br />
diff --git a/portal-ui/tests/permissions-3/bucketObjectTags.ts b/portal-ui/tests/permissions-3/bucketObjectTags.ts
@@ -47,12 +47,12 @@ test
       .click(Selector("button").withText("Tags"))
       .typeText("#newTagKey", "tag1")
       .typeText("#newTagLabel", "test")
-      .click(Selector("button:enabled").withText("Save New Tag"))
+      .click(Selector("#saveTag:enabled"))
       .click(Selector("button").withText("Tags"))
       .expect(Selector(".MuiChip-label").withText("tag1 : test").exists)
       .ok()
       .click(Selector(".MuiChip-deleteIcon"))
-      .click(Selector("button").withText("Yes"))
+      .click(Selector("#deleteTag"))
       .click(Selector("button").withText("Tags"))
       .expect(Selector(".MuiChip-label").withText("tag1 : test").exists)
       .notOk();
@@ -85,7 +85,7 @@ test
       .click(Selector("button").withText("Tags"))
       .typeText("#newTagKey", "tag1")
       .typeText("#newTagLabel", "test")
-      .click(Selector("button:enabled").withText("Save New Tag"))
+      .click(Selector("#saveTag:enabled"))
       .click(Selector("button").withText("Tags"))
       .expect(Selector(".MuiChip-label").withText("tag1 : test").exists)
       .notOk();
