Menu Re-Design Part 1 (#1021)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2021-09-09 16:45:37 -07:00
parent 755e0b49e9
commit 4135b27cfd
6 changed files with 94 additions and 114 deletions
--- 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={
--- 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}
--- 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>
--- 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" },
                        {
--- 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 />
--- 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:{" "}