From c501df927b84f060607f984b70eccba22170e13c Mon Sep 17 00:00:00 2001 From: Javier Adriel Date: Wed, 20 Jul 2022 20:26:43 -0500 Subject: [PATCH] Split register section in tabs (#2176) --- .../src/screens/Console/Support/Register.tsx | 911 +++++++++--------- 1 file changed, 459 insertions(+), 452 deletions(-) diff --git a/portal-ui/src/screens/Console/Support/Register.tsx b/portal-ui/src/screens/Console/Support/Register.tsx index b1a4db453..4c66f21a2 100644 --- a/portal-ui/src/screens/Console/Support/Register.tsx +++ b/portal-ui/src/screens/Console/Support/Register.tsx @@ -1,5 +1,5 @@ // This file is part of MinIO Console Server -// Copyright (c) 2021 MinIO, Inc. +// 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 @@ -14,6 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . +import React, { Fragment, useCallback, useEffect, useState } from "react"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import { @@ -26,14 +27,12 @@ import withStyles from "@mui/styles/withStyles"; import { Box, Button, Grid, Link } from "@mui/material"; import PageHeader from "../Common/PageHeader/PageHeader"; import PageLayout from "../Common/Layout/PageLayout"; -import React, { Fragment, useCallback, useEffect, useState } from "react"; import { CopyIcon, UsersIcon } from "../../../icons"; import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye"; import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; import OnlineRegistrationIcon from "../../../icons/OnlineRegistrationIcon"; import OfflineRegistrationIcon from "../../../icons/OfflineRegistrationIcon"; import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; -import OfflineRegistrationBackIcon from "../../../icons/OfflineRegistrationBackIcon"; import api from "../../../common/api"; import { @@ -61,9 +60,11 @@ import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSw import RegisterHelpBox from "./RegisterHelpBox"; import RegistrationStatusBanner from "./RegistrationStatusBanner"; -import BackLink from "../../../common/BackLink"; import { selOpMode, setErrorSnackMessage } from "../../../systemSlice"; import { useAppDispatch } from "../../../store"; +import Tabs from "@mui/material/Tabs"; +import Tab from "@mui/material/Tab"; +import { TabPanel } from "../../shared/tabs"; interface IRegister { classes: any; @@ -166,11 +167,11 @@ const Register = ({ classes }: IRegister) => { SubnetOrganization[] >([]); const [showPassword, setShowPassword] = useState(false); - const [onlineActivation, setOnlineActivation] = useState(true); const [loading, setLoading] = useState(false); const [loadingLicenseInfo, setLoadingLicenseInfo] = useState(false); const [clusterRegistered, setClusterRegistered] = useState(false); const [licenseInfo, setLicenseInfo] = useState(); + const [curTab, setCurTab] = useState(0); const [initialLicenseLoading, setInitialLicenseLoading] = useState(true); @@ -180,7 +181,6 @@ const Register = ({ classes }: IRegister) => { setSelectedSubnetOrganization(""); setSubnetRegToken(""); setShowPassword(false); - setOnlineActivation(true); setSubnetOrganizations([]); setLicense(""); setSubnetPassword(""); @@ -234,7 +234,7 @@ const Register = ({ classes }: IRegister) => { } }) .catch((err: ErrorResponseHandler) => { - console.log(err); + console.error(err); dispatch(setErrorSnackMessage(err)); setLoading(false); }); @@ -344,287 +344,9 @@ const Register = ({ classes }: IRegister) => { } }, [fetchLicenseInfo, initialLicenseLoading, setInitialLicenseLoading]); - const formTitle = onlineActivation ? ( - - } - title={`Register with MinIO Subscription Network`} - /> - - ) : ( - - } - title={` Offline Activation of SUBNET License`} - /> - - ); + let clusterRegistrationForm: JSX.Element = ; - let clusterRegistrationForm: JSX.Element; - - if (onlineActivation) { - if (subnetAccessToken && subnetOrganizations.length > 0) { - clusterRegistrationForm = ( - - - - - - - - setSelectedSubnetOrganization(e.target.value as string) - } - label="Select an organization" - value={selectedSubnetOrganization} - options={subnetOrganizations.map((organization) => ({ - label: organization.company, - value: organization.accountId.toString(), - }))} - /> - - - - - - - - ); - } else if (subnetMFAToken) { - clusterRegistrationForm = ( - - - - Two-Factor Authentication - - - - Please enter the 6-digit verification code that was sent to your - email address. This code will be valid for 5 minutes. - - - - } - id="subnet-otp" - name="subnet-otp" - onChange={(event: React.ChangeEvent) => - setSubnetOTP(event.target.value) - } - placeholder="" - label="" - value={subnetOTP} - /> - - - - - - - - - ); - } else { - clusterRegistrationForm = ( - - - - Use your MinIO Subscription Network login credentials to register - this cluster. - - - ) => - setSubnetEmail(event.target.value) - } - label="Email" - value={subnetEmail} - overlayIcon={} - /> - ) => - setSubnetPassword(event.target.value) - } - label="Password" - type={showPassword ? "text" : "password"} - value={subnetPassword} - overlayIcon={ - showPassword ? : - } - overlayAction={() => setShowPassword(!showPassword)} - /> - - - - - - - - - - ); - } - } else { + if (subnetAccessToken && subnetOrganizations.length > 0) { clusterRegistrationForm = ( { display: "flex", flexFlow: "column", flex: "2", - marginTop: "15px", - "& .step-number": { - color: "#ffffff", - height: "25px", - width: "25px", - background: "#081C42", - marginRight: "10px", - textAlign: "center", - fontWeight: 600, - borderRadius: "50%", - }, - - "& .step-row": { - fontSize: "16px", - display: "flex", - marginTop: "15px", - marginBottom: "15px", - }, }} > + + + - -
1
{" "} -
- Copy the following registration token -
- - + + setSelectedSubnetOrganization(e.target.value as string) + } + label="Select an organization" + value={selectedSubnetOrganization} + options={subnetOrganizations.map((organization) => ({ + label: organization.company, + value: organization.accountId.toString(), + }))} + /> - {}} - value={subnetRegToken} - overlayIcon={} - extraInputProps={{ - readOnly: true, - }} - overlayAction={() => - navigator.clipboard.writeText(subnetRegToken) - } - /> - - - - - -
2
-
- Navigate to SUBNET and register your cluster -
- - - - subnetRegister()} + disabled={loading || subnetAccessToken.trim().length === 0} + variant="contained" > - https://subnet.min.io/cluster/register - + Register + - + + + + ); + } else if (subnetMFAToken) { + clusterRegistrationForm = ( + + - -
3
{" "} -
- Enter the API key generated by SUBNET -
- - - - ) => - setLicense(event.target.value) - } - id="api-key" - name="api-key" - placeholder="" - label="" - type="text" - /> - + Two-Factor Authentication + + Please enter the 6-digit verification code that was sent to your + email address. This code will be valid for 5 minutes. + + + + } + id="subnet-otp" + name="subnet-otp" + onChange={(event: React.ChangeEvent) => + setSubnetOTP(event.target.value) + } + placeholder="" + label="" + value={subnetOTP} + /> + + + + ); + } else { + clusterRegistrationForm = ( + + + + Use your MinIO Subscription Network login credentials to register + this cluster. + + + ) => + setSubnetEmail(event.target.value) + } + label="Email" + value={subnetEmail} + overlayIcon={} + /> + ) => + setSubnetPassword(event.target.value) + } + label="Password" + type={showPassword ? "text" : "password"} + value={subnetPassword} + overlayIcon={ + showPassword ? : + } + overlayAction={() => setShowPassword(!showPassword)} + /> + + + + + + + ); } + const offlineRegistration = ( + + + {clusterRegistered && ( + + )} + {clusterRegistered ? ( + + + Login to{" "} + + SUBNET + {" "} + to avail support for this MinIO cluster + + + ) : null} + + } + title={`Offline activation of MinIO Subscription Network License`} + /> + + + + + + +
1
{" "} +
+ Copy the following registration token +
+ + + + {}} + value={subnetRegToken} + overlayIcon={} + extraInputProps={{ + readOnly: true, + }} + overlayAction={() => + navigator.clipboard.writeText(subnetRegToken) + } + /> + + + + + +
2
+
+ Navigate to SUBNET and register your cluster +
+ + + + + https://subnet.min.io/cluster/register + + + + + + +
3
{" "} +
+ Enter the API key generated by SUBNET +
+ + + + ) => + setLicense(event.target.value) + } + id="api-key" + name="api-key" + placeholder="" + label="" + type="text" + /> + + + + + + + + + + + + ); + const proxyConfigurationCommand = "mc admin config set {alias} subnet proxy={proxy}"; @@ -801,7 +818,6 @@ const Register = ({ classes }: IRegister) => { { ) : null} - {clusterRegistered ? null : formTitle} + {clusterRegistered ? null : ( + + } + title={`Online activation of MinIO Subscription Network License`} + /> + + )} {clusterRegistered ? null : clusterRegistrationForm} - {!clusterRegistered && onlineActivation && ( - + {!clusterRegistered && ( + { /> - - - - Cluster does not have internet - access? Use{" "} - - - { - fetchSubnetRegToken(); - setOnlineActivation(!onlineActivation); - }} - > - Offline Activation. - - - - + )} ); @@ -963,26 +954,42 @@ const Register = ({ classes }: IRegister) => { return ( - {!onlineActivation ? ( - { - fetchSubnetRegToken(); - setOnlineActivation(!onlineActivation); - }} - /> - ) : ( - "Register" - )} - - } + label="Register to MinIO Subscription Network" actions={} /> - {uiToShow} + + , newValue: number) => { + setCurTab(newValue); + }} + indicatorColor="primary" + textColor="primary" + aria-label="cluster-tabs" + variant="scrollable" + scrollButtons="auto" + > + + fetchSubnetRegToken()} + /> + + + + {uiToShow} + + + {offlineRegistration} + + ); };