github.com/minio/console@v1.4.1/web-app/src/screens/Console/Support/RegisterCluster.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { Fragment } from "react";
    18  import { useNavigate } from "react-router-dom";
    19  import { Box, breakPoints, Button, Grid, HelpBox, WarnIcon } from "mds";
    20  
    21  interface IRegisterCluster {
    22    compactMode?: boolean;
    23  }
    24  
    25  const RegisterCluster = ({ compactMode = false }: IRegisterCluster) => {
    26    const navigate = useNavigate();
    27  
    28    const redirectButton = (
    29      <Button
    30        id={"go-to-register"}
    31        type="submit"
    32        variant="callAction"
    33        color="primary"
    34        onClick={() => navigate("/support/register")}
    35      >
    36        Register your Cluster
    37      </Button>
    38    );
    39  
    40    const registerMessage =
    41      "Please use your MinIO Subscription Network login credentials to register this cluster and enable this feature.";
    42  
    43    if (compactMode) {
    44      return (
    45        <Fragment>
    46          <Grid
    47            sx={{
    48              "& div.leftItems": {
    49                marginBottom: 0,
    50              },
    51            }}
    52          >
    53            <HelpBox
    54              title={
    55                <div
    56                  style={{
    57                    display: "flex",
    58                    justifyContent: "space-between",
    59                    alignItems: "center",
    60                    flexGrow: 1,
    61                  }}
    62                >
    63                  <span>{registerMessage}</span> {redirectButton}
    64                </div>
    65              }
    66              iconComponent={<WarnIcon />}
    67              help={null}
    68            />
    69          </Grid>
    70          <br />
    71        </Fragment>
    72      );
    73    }
    74  
    75    return (
    76      <Box
    77        sx={{
    78          padding: "25px",
    79          border: "1px solid #eaeaea",
    80          display: "flex",
    81          alignItems: "center",
    82          justifyContent: "center",
    83          flexFlow: "row",
    84          marginBottom: "15px",
    85          [`@media (max-width: ${breakPoints.sm}px)`]: {
    86            flexFlow: "column",
    87          },
    88        }}
    89      >
    90        <Grid container>
    91          <Grid item xs={12}>
    92            <Box
    93              sx={{
    94                marginRight: "8px",
    95                fontSize: "16px",
    96                fontWeight: 600,
    97                display: "flex",
    98                alignItems: "center",
    99  
   100                "& .min-icon": {
   101                  width: "83px",
   102                  height: "14px",
   103                  marginLeft: "5px",
   104                  marginRight: "5px",
   105                },
   106              }}
   107            >
   108              Register your cluster
   109            </Box>
   110          </Grid>
   111          <Grid item xs={12}>
   112            <Box
   113              sx={{
   114                display: "flex",
   115                flexFlow: "row",
   116                [`@media (max-width: ${breakPoints.sm}px)`]: {
   117                  flexFlow: "column",
   118                },
   119              }}
   120            >
   121              <Box
   122                sx={{
   123                  display: "flex",
   124                  flexFlow: "column",
   125                  flex: "2",
   126                }}
   127              >
   128                <Box
   129                  sx={{
   130                    fontSize: "16px",
   131                    display: "flex",
   132                    flexFlow: "column",
   133                    marginTop: "15px",
   134                    marginBottom: "15px",
   135                  }}
   136                >
   137                  {registerMessage}
   138                </Box>
   139                <Box
   140                  sx={{
   141                    flex: "1",
   142                  }}
   143                >
   144                  <Box
   145                    sx={{
   146                      display: "flex",
   147                      alignItems: "center",
   148                      justifyContent: "flex-end",
   149                    }}
   150                  >
   151                    {redirectButton}
   152                  </Box>
   153                </Box>
   154              </Box>
   155            </Box>
   156          </Grid>
   157        </Grid>
   158      </Box>
   159    );
   160  };
   161  
   162  export default RegisterCluster;