From 4135b27cfd271694e1336988c85fcaf4074a0df5 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Thu, 9 Sep 2021 16:45:37 -0700
Subject: [PATCH] Menu Re-Design Part 1 (#1021)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../Buckets/BucketDetails/BrowserHandler.tsx  |   5 +-
 .../Objects/ListObjects/CreateFolderModal.tsx |   8 +-
 .../Objects/ListObjects/ListObjects.tsx       |   6 +-
 .../Objects/ObjectDetails/ObjectDetails.tsx   |   6 +-
 portal-ui/src/screens/Console/Menu/Menu.tsx   | 176 ++++++++----------
 .../ObjectBrowser/BrowserBreadcrumbs.tsx      |   7 +-
 6 files changed, 94 insertions(+), 114 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
index e4821beb6..0bd4bb114 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
@@ -68,7 +68,10 @@ const BrowserHandler = ({
       <PageHeader
         label={
           <Fragment>
-            <Link to={"/buckets"} className={classes.breadcrumLink}>Buckets</Link> &gt; {bucketName}
+            <Link to={"/buckets"} className={classes.breadcrumLink}>
+              Buckets
+            </Link>{" "}
+            &gt; {bucketName}
           </Fragment>
         }
         actions={
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx
index 1bb136c74..985970320 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreateFolderModal.tsx
@@ -62,7 +62,9 @@ const CreateFolderModal = ({
   };
 
   const createProcess = () => {
-    const newPath = `/buckets/${bucketName}/browse/${folderName !== "" ? `${folderName}/` : ""}${pathUrl}`;
+    const newPath = `/buckets/${bucketName}/browse/${
+      folderName !== "" ? `${folderName}/` : ""
+    }${pathUrl}`;
 
     history.push(newPath);
 
@@ -78,9 +80,7 @@ const CreateFolderModal = ({
         onClose={onClose}
       >
         <Grid container>
-          <h3 className={classes.pathLabel}>
-            Current Path: {currentPath}
-          </h3>
+          <h3 className={classes.pathLabel}>Current Path: {currentPath}</h3>
           <Grid item xs={12}>
             <InputBoxWrapper
               value={pathUrl}
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index a509e79a9..75ee0f63e 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -423,7 +423,7 @@ const ListObjects = ({
                     ) {
                       setFileModeEnabled(false);
                     } else {
-                      setFileModeEnabled(true);  
+                      setFileModeEnabled(true);
                     }
 
                     setLoading(false);
@@ -951,7 +951,9 @@ const ListObjects = ({
             customPaperHeight={classes.browsePaper}
             selectedItems={selectedObjects}
             onSelect={selectListObjects}
-            customEmptyMessage={`This location is empty${!rewindEnabled ? ", please try uploading a new file" : ""}`}
+            customEmptyMessage={`This location is empty${
+              !rewindEnabled ? ", please try uploading a new file" : ""
+            }`}
           />
         </Grid>
       </Grid>
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
index d87512200..5cb41c79d 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
@@ -416,7 +416,9 @@ const ObjectDetails = ({
 
     if (redirectBack) {
       const newPath = allPathData.join("/");
-      history.push(`/buckets/${bucketName}/browse${newPath === "" ? "" : `/${newPath}`}`);
+      history.push(
+        `/buckets/${bucketName}/browse${newPath === "" ? "" : `/${newPath}`}`
+      );
     }
   };
 
@@ -788,7 +790,7 @@ const ObjectDetails = ({
                               versions.length - versions.indexOf(r);
                             return `v${versOrd}`;
                           },
-                          elementKey: "version_id"
+                          elementKey: "version_id",
                         },
                         { label: "Version ID", elementKey: "version_id" },
                         {
diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx
index 5029758c5..5ca0e1628 100644
--- a/portal-ui/src/screens/Console/Menu/Menu.tsx
+++ b/portal-ui/src/screens/Console/Menu/Menu.tsx
@@ -21,7 +21,6 @@ import { Divider, withStyles } from "@material-ui/core";
 import { createStyles, Theme } from "@material-ui/core/styles";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
-import Collapse from "@material-ui/core/Collapse";
 import ListItemText from "@material-ui/core/ListItemText";
 import List from "@material-ui/core/List";
 import { AppState } from "../../../store";
@@ -66,28 +65,28 @@ const styles = (theme: Theme) =>
     },
     menuList: {
       "& .active": {
-        borderTopLeftRadius: 2,
-        borderBottomLeftRadius: 2,
         color: "#fff",
-        backgroundColor: "rgba(255, 255, 255, .18)",
+        backgroundBlendMode: "multiply",
+        background:
+          "transparent linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0%, #00000000 100%) 0% 0% no-repeat padding-box",
         "& .MuiSvgIcon-root": {
           color: "white",
         },
         "& .MuiTypography-root": {
           color: "#fff",
-          fontWeight: 700,
+          fontWeight: "bold",
         },
       },
       "& .MuiSvgIcon-root": {
         fontSize: 16,
         color: "rgba(255, 255, 255, 0.8)",
-        maxWidth: 14,
+        maxWidth: 16,
       },
       "& .MuiListItemIcon-root": {
-        minWidth: 25,
+        minWidth: 36,
       },
       "& .MuiTypography-root": {
-        fontSize: 12,
+        fontSize: 15,
         color: "rgba(255, 255, 255, 0.8)",
       },
       "& .MuiListItem-gutters": {
@@ -96,16 +95,17 @@ const styles = (theme: Theme) =>
       },
       "& .MuiListItem-root": {
         padding: "2px 0 2px 16px",
-        marginBottom: 8,
-        marginLeft: 30,
+        marginLeft: 36,
+        height: 50,
         width: "calc(100% - 30px)",
       },
-      "& .MuiCollapse-container .MuiCollapse-wrapper .MuiCollapse-wrapperInner .MuiDivider-root":
-        {
-          backgroundColor: "rgba(112,112,112,0.5)",
-          marginBottom: 12,
-          height: 1,
-        },
+    },
+    menuDivider: {
+      backgroundColor: "#1C3B64",
+      marginRight: 36,
+      marginLeft: 36,
+      marginBottom: 0,
+      height: 1,
     },
     extraMargin: {
       "&.MuiListItem-gutters": {
@@ -199,23 +199,16 @@ const Menu = ({
       icon: <DashboardIcon />,
     },
     {
-      group: "User",
-      type: "item",
-      component: NavLink,
-      to: "/account",
-      name: "Service Accounts",
-      icon: <AccountIcon />,
-    },
-    {
-      group: "Admin",
+      group: "common",
       type: "item",
       component: NavLink,
       to: "/buckets",
       name: "Buckets",
       icon: <BucketsIcon />,
     },
+
     {
-      group: "Admin",
+      group: "common",
       type: "item",
       component: NavLink,
       to: "/users",
@@ -223,7 +216,7 @@ const Menu = ({
       icon: <UsersIcon />,
     },
     {
-      group: "Admin",
+      group: "common",
       type: "item",
       component: NavLink,
       to: "/groups",
@@ -231,13 +224,29 @@ const Menu = ({
       icon: <GroupsIcon />,
     },
     {
-      group: "Admin",
+      group: "common",
+      type: "item",
+      component: NavLink,
+      to: "/account",
+      name: "Service Accounts",
+      icon: <AccountIcon />,
+    },
+    {
+      group: "common",
       type: "item",
       component: NavLink,
       to: "/policies",
       name: "IAM Policies",
       icon: <IAMPoliciesIcon />,
     },
+    {
+      group: "common",
+      type: "item",
+      component: NavLink,
+      to: "/settings",
+      name: "Settings",
+      icon: <SettingsIcon />,
+    },
     {
       group: "Tools",
       type: "item",
@@ -279,14 +288,7 @@ const Menu = ({
       name: "Diagnostic",
       icon: <DiagnosticsIcon />,
     },
-    {
-      group: "Admin",
-      type: "item",
-      component: NavLink,
-      to: "/settings",
-      name: "Settings",
-      icon: <SettingsIcon />,
-    },
+
     {
       group: "Operator",
       type: "item",
@@ -412,77 +414,45 @@ const Menu = ({
 
           return (
             <React.Fragment key={`menuElem-${index.toString()}`}>
-              {groupMember.label !== "" && (
-                <ListItem
-                  className={classes.groupTitle}
-                  onClick={() => {
-                    if (groupMember.collapsible) {
-                      setMenuCollapse(groupMember.group);
-                    }
-                  }}
-                >
-                  <span>{groupMember.label}</span>
-                  {groupMember.collapsible && (
-                    <span
-                      className={`${classes.selectorArrow} ${
-                        menuOpen[groupMember.group]
-                          ? classes.selectorArrowOpen
-                          : ""
-                      }`}
-                    />
-                  )}
-                </ListItem>
-              )}
-              <Collapse
-                in={
-                  groupMember.collapsible ? menuOpen[groupMember.group] : true
-                }
-                timeout="auto"
-                unmountOnExit
-                key={`menuGroup-${groupMember.group}`}
-              >
-                {filterByGroup.map((page: IMenuItem) => {
-                  switch (page.type) {
-                    case "item": {
-                      return (
-                        <ListItem
-                          key={page.to}
-                          button
-                          onClick={page.onClick}
-                          component={page.component}
-                          to={page.to}
-                          className={
-                            page.extraMargin ? classes.extraMargin : null
-                          }
-                        >
-                          {page.icon && (
-                            <ListItemIcon>{page.icon}</ListItemIcon>
-                          )}
-                          {page.name && <ListItemText primary={page.name} />}
-                        </ListItem>
-                      );
-                    }
-                    case "title": {
-                      return (
-                        <ListItem
-                          key={page.name}
-                          component={page.component}
-                          className={classes.subTitleMenu}
-                        >
-                          {page.name}
-                        </ListItem>
-                      );
-                    }
-                    default:
-                      return null;
+              <Divider className={classes.menuDivider} />
+              {filterByGroup.map((page: IMenuItem) => {
+                switch (page.type) {
+                  case "item": {
+                    return (
+                      <ListItem
+                        key={page.to}
+                        button
+                        onClick={page.onClick}
+                        component={page.component}
+                        to={page.to}
+                        className={
+                          page.extraMargin ? classes.extraMargin : null
+                        }
+                      >
+                        {page.icon && <ListItemIcon>{page.icon}</ListItemIcon>}
+                        {page.name && <ListItemText primary={page.name} />}
+                      </ListItem>
+                    );
                   }
-                })}
-                <Divider />
-              </Collapse>
+                  case "title": {
+                    return (
+                      <ListItem
+                        key={page.name}
+                        component={page.component}
+                        className={classes.subTitleMenu}
+                      >
+                        {page.name}
+                      </ListItem>
+                    );
+                  }
+                  default:
+                    return null;
+                }
+              })}
             </React.Fragment>
           );
         })}
-
+        <Divider className={classes.menuDivider} />
         <ListItem button onClick={logout}>
           <ListItemIcon>
             <LogoutIcon />
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx b/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
index 4c9049585..1246ceda0 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
@@ -62,7 +62,8 @@ const BrowserBreadcrumbs = ({
       const subSplit = splitPaths.slice(1, index + 1).join("/");
 
       const route = `/buckets/${bucketName}/browse${
-        objectItem !== "" ? `/${subSplit}` : ""}`;
+        objectItem !== "" ? `/${subSplit}` : ""
+      }`;
       const label = objectItem === "" ? bucketName : objectItem;
 
       return (
@@ -80,7 +81,9 @@ const BrowserBreadcrumbs = ({
       {title && (
         <Grid item xs={12}>
           <div className={classes.sectionTitle}>
-            {splitPaths && splitPaths.length > 0 ? splitPaths[splitPaths.length - 1] : ""}
+            {splitPaths && splitPaths.length > 0
+              ? splitPaths[splitPaths.length - 1]
+              : ""}
             {rewindEnabled && splitPaths.length > 1 && (
               <small className={classes.smallLabel}>
                 &nbsp;(Rewind:{" "}