From 35fdaf1ddd2f6bc38eb39db81caa3d8a066cd2a4 Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Fri, 27 May 2022 23:23:36 +0000 Subject: [PATCH] UX license logo on sidebar (#2037) --- portal-ui/src/icons/ConsoleAgpl.tsx | 56 +++++++++++++++++++ portal-ui/src/icons/ConsoleEnterprise.tsx | 46 +++++++++++++++ portal-ui/src/icons/ConsoleStandard.tsx | 46 +++++++++++++++ portal-ui/src/icons/index.ts | 3 + .../Common/Components/LicensedConsoleLogo.tsx | 45 +++++++++++++++ portal-ui/src/screens/Console/Menu/Menu.tsx | 1 - .../src/screens/Console/Menu/MenuToggle.tsx | 51 +++++++++++++++-- portal-ui/src/systemSlice.ts | 7 +++ portal-ui/src/types.ts | 10 +++- 9 files changed, 257 insertions(+), 8 deletions(-) create mode 100644 portal-ui/src/icons/ConsoleAgpl.tsx create mode 100644 portal-ui/src/icons/ConsoleEnterprise.tsx create mode 100644 portal-ui/src/icons/ConsoleStandard.tsx create mode 100644 portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx diff --git a/portal-ui/src/icons/ConsoleAgpl.tsx b/portal-ui/src/icons/ConsoleAgpl.tsx new file mode 100644 index 000000000..71dc00eea --- /dev/null +++ b/portal-ui/src/icons/ConsoleAgpl.tsx @@ -0,0 +1,56 @@ +// 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, { SVGProps } from "react"; + +const ConsoleAgpl = (props: SVGProps) => { + return ( + + + + + + + + + + + + + + ); +}; + +export default ConsoleAgpl; diff --git a/portal-ui/src/icons/ConsoleEnterprise.tsx b/portal-ui/src/icons/ConsoleEnterprise.tsx new file mode 100644 index 000000000..a3faff53b --- /dev/null +++ b/portal-ui/src/icons/ConsoleEnterprise.tsx @@ -0,0 +1,46 @@ +// 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, { SVGProps } from "react"; + +const ConsoleEnterprise = (props: SVGProps) => { + return ( + + + + + + + ); +}; + +export default ConsoleEnterprise; diff --git a/portal-ui/src/icons/ConsoleStandard.tsx b/portal-ui/src/icons/ConsoleStandard.tsx new file mode 100644 index 000000000..164ca9978 --- /dev/null +++ b/portal-ui/src/icons/ConsoleStandard.tsx @@ -0,0 +1,46 @@ +// 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, { SVGProps } from "react"; + +const ConsoleStandard = (props: SVGProps) => { + return ( + + + + + + + ); +}; + +export default ConsoleStandard; diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts index a5b70e0c5..88ffef51c 100644 --- a/portal-ui/src/icons/index.ts +++ b/portal-ui/src/icons/index.ts @@ -192,3 +192,6 @@ export { default as EditTagIcon } from "./EditTagIcon"; export { default as LinkIcon } from "./LinkIcon"; export { default as AlertIcon } from "./AlertIcon"; export { default as InfoIcon } from "./InfoIcon"; +export { default as ConsoleAgpl } from "./ConsoleAgpl"; +export { default as ConsoleStandard } from "./ConsoleStandard"; +export { default as ConsoleEnterprise } from "./ConsoleEnterprise"; diff --git a/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx b/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx new file mode 100644 index 000000000..95fe0826b --- /dev/null +++ b/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx @@ -0,0 +1,45 @@ +// 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 { + ConsoleAgpl, + ConsoleEnterprise, + ConsoleStandard, +} from "../../../../icons"; + +const LicensedConsoleLogo = ({ + plan, + isLoading, +}: { + plan: string; + isLoading: boolean; +}) => { + let licenseLogo = null; + if (isLoading) { + return licenseLogo; + } else if (plan === "STANDARD") { + licenseLogo = ; + } else if (plan === "ENTERPRISE") { + licenseLogo = ; + } else { + licenseLogo = ; + } + + return licenseLogo; +}; + +export default LicensedConsoleLogo; diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx index 610b6a97d..01b07f141 100644 --- a/portal-ui/src/screens/Console/Menu/Menu.tsx +++ b/portal-ui/src/screens/Console/Menu/Menu.tsx @@ -138,7 +138,6 @@ const Menu = ({ classes }: IMenuProps) => { onToggle={(nextState) => { dispatch(menuOpen(nextState)); }} - isOperatorMode={operatorMode} isOpen={sidebarOpen} /> diff --git a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx index 6e26f683f..1ad7c8d22 100644 --- a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx @@ -14,22 +14,53 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { Suspense } from "react"; +import React, { Suspense, useEffect } from "react"; import OperatorLogo from "../../../icons/OperatorLogo"; -import ConsoleLogo from "../../../icons/ConsoleLogo"; import { 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 { useDispatch, useSelector } from "react-redux"; +import useApi from "../Common/Hooks/useApi"; +import { setLicenseInfo } from "../../../systemSlice"; +import { AppState } from "../../../store"; type MenuToggleProps = { isOpen: boolean; - isOperatorMode: boolean; onToggle: (nextState: boolean) => void; }; -const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => { +const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => { const stateClsName = isOpen ? "wide" : "mini"; + const dispatch = useDispatch(); + + const licenseInfo = useSelector( + (state: AppState) => state?.system?.licenseInfo + ); + const operatorMode = useSelector( + (state: AppState) => state.system.operatorMode + ); + + const [isLicenseLoading, invokeLicenseInfoApi] = useApi( + (res: any) => { + dispatch(setLicenseInfo(res)); + }, + () => { + dispatch(setLicenseInfo(null)); + } + ); + + //Get License info from SUBNET + useEffect(() => { + if (!operatorMode) { + invokeLicenseInfoApi("GET", `/api/v1/subnet/info`); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const { plan = "" } = licenseInfo || {}; + return ( { marginTop: "28px", marginRight: "8px", display: "flex", - minHeight: "36px", + height: "36px", "&.mini": { flexFlow: "column", @@ -69,7 +100,11 @@ const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => { > {isOpen ? (
- {isOperatorMode ? : } + {operatorMode ? ( + + ) : ( + + )}
) : (
@@ -82,6 +117,8 @@ const MenuToggle = ({ isOpen, isOperatorMode, onToggle }: MenuToggleProps) => { { }, "& svg": { fill: "#ffffff", + height: "18px", + width: "18px", }, }} onClick={() => { diff --git a/portal-ui/src/systemSlice.ts b/portal-ui/src/systemSlice.ts index 53a18b691..99da65957 100644 --- a/portal-ui/src/systemSlice.ts +++ b/portal-ui/src/systemSlice.ts @@ -17,6 +17,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { snackBarMessage, SRInfoStateType } from "./types"; import { ErrorResponseHandler } from "./common/types"; import { AppState } from "./store"; +import { SubnetInfo } from "./screens/Console/License/types"; // determine whether we have the sidebar state stored on localstorage const initSideBarOpen = localStorage.getItem("sidebarOpen") @@ -38,6 +39,7 @@ export interface SystemState { serverDiagnosticStatus: string; distributedSetup: boolean; siteReplicationInfo: SRInfoStateType; + licenseInfo: null | SubnetInfo; } const initialState: SystemState = { @@ -63,6 +65,7 @@ const initialState: SystemState = { }, serverDiagnosticStatus: "", distributedSetup: false, + licenseInfo: null, }; export const systemSlice = createSlice({ @@ -135,6 +138,9 @@ export const systemSlice = createSlice({ setSiteReplicationInfo: (state, action: PayloadAction) => { state.siteReplicationInfo = action.payload; }, + setLicenseInfo: (state, action: PayloadAction) => { + state.licenseInfo = action.payload; + }, }, }); @@ -153,6 +159,7 @@ export const { setServerDiagStat, globalSetDistributedSetup, setSiteReplicationInfo, + setLicenseInfo, } = systemSlice.actions; export const selDistSet = (state: AppState) => state.system.distributedSetup; diff --git a/portal-ui/src/types.ts b/portal-ui/src/types.ts index 50997334c..6ae282942 100644 --- a/portal-ui/src/types.ts +++ b/portal-ui/src/types.ts @@ -14,6 +14,7 @@ // You should have received a copy of the GNU Affero General Public License import { ErrorResponseHandler } from "./common/types"; +import { SubnetInfo } from "./screens/Console/License/types"; // along with this program. If not, see . export interface snackBarMessage { @@ -57,6 +58,7 @@ export const SET_SNACK_MODAL_MESSAGE = "SET_SNACK_MODAL_MESSAGE"; export const SET_MODAL_ERROR_MESSAGE = "SET_MODAL_ERROR_MESSAGE"; export const GLOBAL_SET_DISTRIBUTED_SETUP = "GLOBAL/SET_DISTRIBUTED_SETUP"; export const SET_SITE_REPLICATION_INFO = "SET_SITE_REPLICATION_INFO"; +export const SET_LICENSE_INFO = "SET_LICENSE_INFO"; interface UserLoggedAction { type: typeof USER_LOGGED; @@ -123,6 +125,11 @@ interface SetSiteReplicationInfo { siteReplicationInfo: SRInfoStateType; } +interface SetLicenseInfo { + type: typeof SET_LICENSE_INFO; + licenseInfo: SubnetInfo; +} + export type SystemActionTypes = | UserLoggedAction | OperatorModeAction @@ -136,4 +143,5 @@ export type SystemActionTypes = | SetModalSnackMessage | SetModalErrorMessage | SetDistributedSetup - | SetSiteReplicationInfo; + | SetSiteReplicationInfo + | SetLicenseInfo;