From e416abe19bf13d7cacfcc900c2d2a7730268725b Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Fri, 10 Jun 2022 20:11:33 -0700 Subject: [PATCH] Updates to License page and Menu (#2118) Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- portal-ui/src/icons/AGPLV3LightLogo.tsx | 36 +++++++++ portal-ui/src/icons/AGPLV3Logo.tsx | 49 +++++++++++++ portal-ui/src/icons/EnterpriseLightLogo.tsx | 36 +++++++++ portal-ui/src/icons/StandardLightLogo.tsx | 36 +++++++++ portal-ui/src/icons/index.ts | 4 + .../Common/Components/LicensedConsoleLogo.tsx | 12 +-- .../screens/Console/License/LicensePlans.tsx | 46 +++--------- .../src/screens/Console/License/utils.tsx | 73 ++++++------------- .../src/screens/Console/Menu/MenuToggle.tsx | 12 ++- 9 files changed, 211 insertions(+), 93 deletions(-) create mode 100644 portal-ui/src/icons/AGPLV3LightLogo.tsx create mode 100644 portal-ui/src/icons/AGPLV3Logo.tsx create mode 100644 portal-ui/src/icons/EnterpriseLightLogo.tsx create mode 100644 portal-ui/src/icons/StandardLightLogo.tsx diff --git a/portal-ui/src/icons/AGPLV3LightLogo.tsx b/portal-ui/src/icons/AGPLV3LightLogo.tsx new file mode 100644 index 000000000..e7396aebe --- /dev/null +++ b/portal-ui/src/icons/AGPLV3LightLogo.tsx @@ -0,0 +1,36 @@ +// 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 AGPLV3LightLogo = (props: SVGProps) => ( + + + +); + +export default AGPLV3LightLogo; diff --git a/portal-ui/src/icons/AGPLV3Logo.tsx b/portal-ui/src/icons/AGPLV3Logo.tsx new file mode 100644 index 000000000..ba2505ac8 --- /dev/null +++ b/portal-ui/src/icons/AGPLV3Logo.tsx @@ -0,0 +1,49 @@ +// 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 AGPLV3Logo = (props: SVGProps) => ( + + + + + +); + +export default AGPLV3Logo; diff --git a/portal-ui/src/icons/EnterpriseLightLogo.tsx b/portal-ui/src/icons/EnterpriseLightLogo.tsx new file mode 100644 index 000000000..0945e7935 --- /dev/null +++ b/portal-ui/src/icons/EnterpriseLightLogo.tsx @@ -0,0 +1,36 @@ +// 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 EnterpriseLightLogo = (props: SVGProps) => ( + + + +); + +export default EnterpriseLightLogo; diff --git a/portal-ui/src/icons/StandardLightLogo.tsx b/portal-ui/src/icons/StandardLightLogo.tsx new file mode 100644 index 000000000..f4470a126 --- /dev/null +++ b/portal-ui/src/icons/StandardLightLogo.tsx @@ -0,0 +1,36 @@ +// 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 StandardLightLogo = (props: SVGProps) => ( + + + +); + +export default StandardLightLogo; diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts index 88ffef51c..77be29410 100644 --- a/portal-ui/src/icons/index.ts +++ b/portal-ui/src/icons/index.ts @@ -195,3 +195,7 @@ export { default as InfoIcon } from "./InfoIcon"; export { default as ConsoleAgpl } from "./ConsoleAgpl"; export { default as ConsoleStandard } from "./ConsoleStandard"; export { default as ConsoleEnterprise } from "./ConsoleEnterprise"; +export { default as AGPLV3LightLogo } from "./AGPLV3LightLogo"; +export { default as AGPLV3Logo } from "./AGPLV3Logo"; +export { default as EnterpriseLightLogo } from "./EnterpriseLightLogo"; +export { default as StandardLightLogo } from "./StandardLightLogo"; diff --git a/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx b/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx index 342debc69..145a7f2b1 100644 --- a/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx +++ b/portal-ui/src/screens/Console/Common/Components/LicensedConsoleLogo.tsx @@ -16,9 +16,9 @@ import React from "react"; import { - ConsoleAgpl, - ConsoleEnterprise, - ConsoleStandard, + AGPLV3LightLogo, + EnterpriseLightLogo, + StandardLightLogo, } from "../../../../icons"; const LicensedConsoleLogo = ({ @@ -32,11 +32,11 @@ const LicensedConsoleLogo = ({ if (isLoading) { return licenseLogo; } else if (plan === "STANDARD") { - licenseLogo = ; + licenseLogo = ; } else if (plan === "ENTERPRISE") { - licenseLogo = ; + licenseLogo = ; } else { - licenseLogo = ; + licenseLogo = ; } return licenseLogo; diff --git a/portal-ui/src/screens/Console/License/LicensePlans.tsx b/portal-ui/src/screens/Console/License/LicensePlans.tsx index e0fd3f254..644374deb 100644 --- a/portal-ui/src/screens/Console/License/LicensePlans.tsx +++ b/portal-ui/src/screens/Console/License/LicensePlans.tsx @@ -25,19 +25,19 @@ import withStyles from "@mui/styles/withStyles"; import { Box } from "@mui/material"; import useMediaQuery from "@mui/material/useMediaQuery"; import { - ConsoleAgpl, + AGPLV3Logo, ConsoleEnterprise, ConsoleStandard, LicenseDocIcon, } from "../../../icons"; import { - LICENSE_PLANS, - FEATURE_ITEMS, COMMUNITY_PLAN_FEATURES, - STANDARD_PLAN_FEATURES, ENTERPRISE_PLAN_FEATURES, - PAID_PLANS, + FEATURE_ITEMS, getRenderValue, + LICENSE_PLANS, + PAID_PLANS, + STANDARD_PLAN_FEATURES, } from "./utils"; const styles = (theme: Theme) => createStyles({}); @@ -84,6 +84,7 @@ const PlanHeader = ({ justifyContent: "center", flexFlow: "column", borderLeft: "1px solid #eaeaea", + borderBottom: "0px !important", "& .plan-header": { display: "flex", alignItems: "center", @@ -244,7 +245,7 @@ const LicensePlans = ({
- +
@@ -423,6 +424,7 @@ const LicensePlans = ({ height: "25px", paddingLeft: "26px", fontSize: "14px", + background: "#E5E5E5", "@media (max-width: 600px)": { @@ -439,7 +441,6 @@ const LicensePlans = ({ alignItems: "center", paddingLeft: "26px", fontSize: "14px", - fontWeight: 600, }, "& .feature-item": { display: "flex", @@ -523,6 +524,7 @@ const LicensePlans = ({ display: "flex", alignItems: "center", justifyContent: "flex-start", + borderBottom: "0px !important", "& .link-text": { color: "#2781B0", @@ -554,11 +556,11 @@ const LicensePlans = ({ className={`plan-header`} sx={{ fontSize: "14px", - fontWeight: 600, paddingLeft: "26px", display: "flex", alignItems: "center", justifyContent: "flex-start", + borderBottom: "0px !important", }} > {fi.label} @@ -595,7 +597,7 @@ const LicensePlans = ({ > {COMMUNITY_PLAN_FEATURES.map((fi, idx) => { const featureLabel = featureList[idx].desc; - const { featureTitleRow, isHeader, isOssLicenseLink } = fi; + const { featureTitleRow, isHeader } = fi; if (isHeader) { return getCommunityPlanHeader(); @@ -609,32 +611,6 @@ const LicensePlans = ({ ); } - if (isOssLicenseLink) { - return ( - - { - e.preventDefault(); - e.stopPropagation(); - setLicenseModal && setLicenseModal(true); - }} - > - GNU AGPL v3 - - - ); - } return ( { export const FEATURE_ITEMS: FeatureItem[] = [ { - label: " ", + label: "License ", isHeader: true, }, - { - desc: "License", - isHeader: false, - }, { label: "", isHeader: false, style: { - height: "324px", + height: "360px", + verticalAlign: "top", + alignItems: "start", }, }, { @@ -123,11 +121,9 @@ export const COMMUNITY_PLAN_FEATURES = [ { label: "Community", isHeader: true, - }, - { - id: "com_license", - label: "GNU AGPL v3", - isOssLicenseLink: true, + style: { + borderBottom: 0, + }, }, { label: () => { @@ -152,7 +148,8 @@ export const COMMUNITY_PLAN_FEATURES = [ }, isHeader: false, style: { - height: "324px", + height: "360px", + borderBottom: 0, }, }, { @@ -173,7 +170,7 @@ export const COMMUNITY_PLAN_FEATURES = [ { id: "com_support", label: "Community:", - detail: "Public Slack Channel + Github Issues", + detail: "Slack + Github", }, { id: "com_security", @@ -209,21 +206,9 @@ export const STANDARD_PLAN_FEATURES = [ { label: "Standard", isHeader: true, - }, - { - label: () => { - return ( - - Commercial - - ); + style: { + borderBottom: 0, }, - isHeader: false, }, { isHeader: false, @@ -240,8 +225,8 @@ export const STANDARD_PLAN_FEATURES = [ mostly self-support but want the peace of mind that comes with the MinIO Subscription Network’s suite of operational capabilities and direct-to-engineer interaction. The Standard version is fully - featured but with SLA limitations. To learn more about the MinIO - Subscription Network click + featured but with SLA limitations.

To learn more about + the MinIO Subscription Network {" "} - here + click here . ); }, style: { - height: "324px", + height: "360px", + borderBottom: 0, }, }, { @@ -335,21 +321,9 @@ export const ENTERPRISE_PLAN_FEATURES = [ { label: "Enterprise", isHeader: true, - }, - { - label: () => { - return ( - - Commercial - - ); + style: { + borderBottom: 0, }, - isHeader: false, }, { isHeader: false, @@ -364,8 +338,8 @@ export const ENTERPRISE_PLAN_FEATURES = [ Designed for mission critical environments where both a license and strict SLAs are required. The Enterprise version is fully featured - but comes with additional capabilities. To learn more about the - MinIO Subscription Network click + but comes with additional capabilities.

To learn more + about the MinIO Subscription Network {" "} - here + click here . ); }, style: { - height: "324px", + height: "360px", + borderBottom: 0, }, }, { diff --git a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx index 38d199d97..efbf56bf1 100644 --- a/portal-ui/src/screens/Console/Menu/MenuToggle.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuToggle.tsx @@ -14,9 +14,9 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { Suspense, useEffect } from "react"; +import React, { Fragment, Suspense, useEffect } from "react"; import OperatorLogo from "../../../icons/OperatorLogo"; -import { VersionIcon } from "../../../icons"; +import { LoginMinIOLogo, VersionIcon } from "../../../icons"; import { Box, IconButton } from "@mui/material"; import { ChevronLeft } from "@mui/icons-material"; import MenuIcon from "@mui/icons-material/Menu"; @@ -103,7 +103,13 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => { {operatorMode ? ( ) : ( - + +
+ +
+ +
+ )} ) : (