UX menu toggle and license badge icon (#2127)

Author: prakashsvmx

portal-ui/src/icons/MenuToggleIcon.tsx

@@ -0,0 +1,38 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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 MenuToggleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 10 14"
+    {...props}
+  >
+    <g transform="translate(19825 -11601) rotate(-90)">
+      <path
+        d="M-21-212v-2H-7v2Zm0-4v-2H-7v2Zm0-4v-2H-7v2Z"
+        transform="translate(-11594 -19603)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default MenuToggleIcon;

portal-ui/src/screens/Console/Menu/LicenseBadge.tsx

@@ -0,0 +1,67 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 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 React from "react";
+import { useSelector } from "react-redux";
+import { AppState } from "../../../store";
+import { Box } from "@mui/material";
+import { CircleIcon } from "../../../icons";
+
+const LicenseBadge = () => {
+  const licenseInfo = useSelector(
+    (state: AppState) => state?.system?.licenseInfo
+  );
+
+  const { plan = "" } = licenseInfo || {};
+
+  if (plan) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        border: 0,
+      }}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          right: -19,
+          top: -29,
+          zIndex: 400,
+          border: 0,
+        }}
+        style={{
+          border: 0,
+        }}
+      >
+        <CircleIcon
+          style={{
+            fill: "#c83b51",
+            border: "1px solid #002148",
+            borderRadius: "100%",
+            width: 12,
+            height: 12,
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default LicenseBadge;

portal-ui/src/screens/Console/Menu/MenuItem.tsx

@@ -150,6 +150,7 @@ const MenuItem = ({
               <Suspense fallback={<div>...</div>}>
                 <page.icon />
               </Suspense>
+              {page.badge ? <page.badge /> : null}
             </ListItemIcon>
           </Tooltip>
         )}

portal-ui/src/screens/Console/Menu/MenuToggle.tsx

@@ -18,13 +18,13 @@ import React, { Fragment, Suspense, useEffect } from "react";
 import OperatorLogo from "../../../icons/OperatorLogo";
 import { LoginMinIOLogo, VersionIcon } from "../../../icons";
 import { Box, IconButton } from "@mui/material";
-import { ChevronLeft } from "@mui/icons-material";
 import MenuIcon from "@mui/icons-material/Menu";
 import LicensedConsoleLogo from "../Common/Components/LicensedConsoleLogo";
 import { useSelector } from "react-redux";
 import useApi from "../Common/Hooks/useApi";
 import { setLicenseInfo } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
+import MenuToggleIcon from "../../../icons/MenuToggleIcon";
 
 type MenuToggleProps = {
   isOpen: boolean;
@@ -151,7 +151,7 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
         }}
         size="small"
       >
-        {isOpen ? <ChevronLeft /> : <MenuIcon />}
+        {isOpen ? <MenuToggleIcon /> : <MenuIcon />}
       </IconButton>
     </Box>
   );

portal-ui/src/screens/Console/Menu/types.ts

@@ -28,6 +28,7 @@ export interface IMenuItem {
   fsHidden?: boolean;
   customPermissionFnc?: any;
   children?: IMenuItem[];
+  badge?: any;
 }
 
 export interface IRouteRule {

portal-ui/src/screens/Console/valid-routes.ts

@@ -55,6 +55,7 @@ import {
 } from "../../icons";
 import SettingsIcon from "../../icons/SettingsIcon";
 import React from "react";
+import LicenseBadge from "./Menu/LicenseBadge";
 
 export const validRoutes = (
   features: string[] | null | undefined,
@@ -247,6 +248,7 @@ export const validRoutes = (
       name: "License",
       id: "license",
       icon: LicenseIcon,
+      badge: LicenseBadge,
       forceDisplay: true,
     },
     {