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

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2022 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  import React from "react";
    17  
    18  import {
    19    Box,
    20    ChangeAccessPolicyIcon,
    21    GroupsIcon,
    22    HelpIconFilled,
    23    UsersIcon,
    24  } from "mds";
    25  
    26  const FeatureItem = ({
    27    icon,
    28    description,
    29  }: {
    30    icon: any;
    31    description: string;
    32  }) => {
    33    return (
    34      <Box
    35        sx={{
    36          display: "flex",
    37          "& .min-icon": {
    38            marginRight: "10px",
    39            height: "23px",
    40            width: "23px",
    41            marginBottom: "10px",
    42          },
    43        }}
    44      >
    45        {icon}{" "}
    46        <div style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}>
    47          {description}
    48        </div>
    49      </Box>
    50    );
    51  };
    52  const AddUserHelpBox = () => {
    53    return (
    54      <Box
    55        sx={{
    56          flex: 1,
    57          border: "1px solid #eaeaea",
    58          borderRadius: "2px",
    59          display: "flex",
    60          flexFlow: "column",
    61          padding: "20px",
    62          marginTop: 0,
    63        }}
    64      >
    65        <Box
    66          sx={{
    67            fontSize: "16px",
    68            fontWeight: 600,
    69            display: "flex",
    70            alignItems: "center",
    71            marginBottom: "16px",
    72  
    73            "& .min-icon": {
    74              height: "21px",
    75              width: "21px",
    76              marginRight: "15px",
    77            },
    78          }}
    79        >
    80          <HelpIconFilled />
    81          <div>Learn more about the Users feature</div>
    82        </Box>
    83        <Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
    84          A MinIO user consists of a unique access key (username) and
    85          corresponding secret key (password). Clients must authenticate their
    86          identity by specifying both a valid access key (username) and the
    87          corresponding secret key (password) of an existing MinIO user.
    88          <br />
    89          <br />
    90          Each user can have one or more assigned policies that explicitly list
    91          the actions and resources to which that user has access. Users can also
    92          inherit policies from the groups in which they have membership.
    93          <br />
    94        </Box>
    95  
    96        <Box
    97          sx={{
    98            display: "flex",
    99            flexFlow: "column",
   100          }}
   101        >
   102          <FeatureItem icon={<UsersIcon />} description={`Create Users`} />
   103          <FeatureItem icon={<GroupsIcon />} description={`Manage Groups`} />
   104          <FeatureItem
   105            icon={<ChangeAccessPolicyIcon />}
   106            description={`Assign Policies`}
   107          />
   108        </Box>
   109      </Box>
   110    );
   111  };
   112  
   113  export default AddUserHelpBox;