From 1311b171f95e9c918c07737388b042803d3c9983 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Wed, 15 Jun 2022 23:54:13 +0000 Subject: [PATCH] UX menu toggle and license badge icon (#2127) --- portal-ui/src/icons/MenuToggleIcon.tsx | 38 +++++++++++ .../src/screens/Console/Menu/LicenseBadge.tsx | 67 +++++++++++++++++++ .../src/screens/Console/Menu/MenuItem.tsx | 1 + .../src/screens/Console/Menu/MenuToggle.tsx | 4 +- portal-ui/src/screens/Console/Menu/types.ts | 1 + portal-ui/src/screens/Console/valid-routes.ts | 2 + 6 files changed, 111 insertions(+), 2 deletions(-) create mode 100644 portal-ui/src/icons/MenuToggleIcon.tsx create mode 100644 portal-ui/src/screens/Console/Menu/LicenseBadge.tsx diff --git a/portal-ui/src/icons/MenuToggleIcon.tsx b/portal-ui/src/icons/MenuToggleIcon.tsx new file mode 100644 index 0000000000..f695d28f52 --- /dev/null +++ b/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 . + +import * as React from "react"; +import { SVGProps } from "react"; + +const MenuToggleIcon = (props: SVGProps) => ( + + + + + +); + +export default MenuToggleIcon; diff --git a/portal-ui/src/screens/Console/Menu/LicenseBadge.tsx b/portal-ui/src/screens/Console/Menu/LicenseBadge.tsx new file mode 100644 index 0000000000..d0511b9384 --- /dev/null +++ b/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 . + +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 ( + + + + + + ); +}; + +export default LicenseBadge; diff --git a/portal-ui/src/screens/Console/Menu/MenuItem.tsx b/portal-ui/src/screens/Console/Menu/MenuItem.tsx index 3af3f4c287..48a1dbcbc0 100644 --- a/portal-ui/src/screens/Console/Menu/MenuItem.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuItem.tsx @@ -150,6 +150,7 @@ const MenuItem = ({ ...}> + {page.badge ? : null} )} diff --git a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx index efbf56bf12..730bb4b525 100644 --- a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx +++ b/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 ? : } + {isOpen ? : } ); diff --git a/portal-ui/src/screens/Console/Menu/types.ts b/portal-ui/src/screens/Console/Menu/types.ts index 5353fb591b..07179d4eaf 100644 --- a/portal-ui/src/screens/Console/Menu/types.ts +++ b/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 { diff --git a/portal-ui/src/screens/Console/valid-routes.ts b/portal-ui/src/screens/Console/valid-routes.ts index 1c8f374992..23027bcd65 100644 --- a/portal-ui/src/screens/Console/valid-routes.ts +++ b/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, }, {