github.com/minio/console@v1.4.1/web-app/src/screens/Console/Groups/AddGroupHelpBox.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 { Box, GroupsIcon, HelpIconFilled, IAMPoliciesIcon } from "mds";
    19  
    20  const FeatureItem = ({
    21    icon,
    22    description,
    23  }: {
    24    icon: any;
    25    description: string;
    26  }) => {
    27    return (
    28      <Box
    29        sx={{
    30          display: "flex",
    31          "& .min-icon": {
    32            marginRight: "10px",
    33            height: "23px",
    34            width: "23px",
    35            marginBottom: "10px",
    36          },
    37        }}
    38      >
    39        {icon}{" "}
    40        <div style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}>
    41          {description}
    42        </div>
    43      </Box>
    44    );
    45  };
    46  const AddGroupHelpBox = () => {
    47    return (
    48      <Box
    49        sx={{
    50          flex: 1,
    51          border: "1px solid #eaeaea",
    52          borderRadius: "2px",
    53          display: "flex",
    54          flexFlow: "column",
    55          padding: "20px",
    56          marginTop: 0,
    57        }}
    58      >
    59        <Box
    60          sx={{
    61            fontSize: "16px",
    62            fontWeight: 600,
    63            display: "flex",
    64            alignItems: "center",
    65            marginBottom: "16px",
    66  
    67            "& .min-icon": {
    68              height: "21px",
    69              width: "21px",
    70              marginRight: "15px",
    71            },
    72          }}
    73        >
    74          <HelpIconFilled />
    75          <div>Learn more about Groups</div>
    76        </Box>
    77        <Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
    78          Adding groups lets you assign IAM policies to multiple users at once.
    79          <Box sx={{ paddingTop: "20px", paddingBottom: "10px" }}>
    80            Users inherit access permissions to data and resources through the
    81            groups they belong to.
    82          </Box>
    83          <Box sx={{ paddingTop: "10px", paddingBottom: "10px" }}>
    84            A user can be a member of multiple groups.
    85          </Box>
    86          <Box sx={{ paddingTop: "10px", paddingBottom: "10px" }}>
    87            Groups provide a simplified method for managing shared permissions
    88            among users with common access patterns and workloads. Client’s cannot
    89            authenticate to a MinIO deployment using a group as an identity.
    90          </Box>
    91        </Box>
    92  
    93        <Box
    94          sx={{
    95            display: "flex",
    96            flexFlow: "column",
    97          }}
    98        >
    99          <FeatureItem icon={<GroupsIcon />} description={`Add Users to Group`} />
   100          <Box sx={{ paddingTop: "10px", paddingBottom: "10px" }}>
   101            Select from the list of displayed users to assign users to the new
   102            group at creation. These users inherit the policies assigned to the
   103            group.
   104          </Box>
   105          <FeatureItem
   106            icon={<IAMPoliciesIcon />}
   107            description={`Assign Custom IAM Policies for Group`}
   108          />
   109          <Box sx={{ paddingTop: "10px", paddingBottom: "10px" }}>
   110            You can add policies to the group by selecting it from the Groups view
   111            after creation. The Policy view lets you manage the assigned policies
   112            for the group.
   113          </Box>
   114        </Box>
   115      </Box>
   116    );
   117  };
   118  
   119  export default AddGroupHelpBox;