github.com/minio/console@v1.4.1/web-app/src/screens/Console/IDP/LDAP/LDAPResultsBlock.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2023 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 { Box, CollapseCaret, GroupsMenuIcon, SectionTitle } from "mds";
    19  import { LdapEntities } from "api/consoleApi";
    20  
    21  interface IResultBlock {
    22    entityName: "Group" | "User" | "Policy";
    23    results: LdapEntities;
    24  }
    25  
    26  interface IEntityResultName {
    27    name: string;
    28  }
    29  
    30  interface IEntityResultItem {
    31    blockName: "Policies" | "Groups" | "Users";
    32    results: string[];
    33  }
    34  
    35  const EntityResultTitle = ({ name }: IEntityResultName) => {
    36    return (
    37      <h4>
    38        <CollapseCaret style={{ transform: "rotateZ(90deg)" }} />
    39        {name}
    40      </h4>
    41    );
    42  };
    43  
    44  const EntityResultItems = ({ blockName, results }: IEntityResultItem) => {
    45    return (
    46      <Fragment>
    47        <strong>{blockName}:</strong>
    48        <ul>
    49          {results.map((res, index) => (
    50            <li key={`policy-${blockName}-${index}`}>{res}</li>
    51          ))}
    52        </ul>
    53      </Fragment>
    54    );
    55  };
    56  
    57  const LDAPResultsBlock = ({ entityName, results }: IResultBlock) => {
    58    let entityLength = 0;
    59  
    60    switch (entityName) {
    61      case "Group":
    62        entityLength = results.groups?.length || 0;
    63        break;
    64      case "Policy":
    65        entityLength = results.policies?.length || 0;
    66        break;
    67      case "User":
    68        entityLength = results.users?.length || 0;
    69        break;
    70    }
    71  
    72    return (
    73      <Box
    74        className={"resultElement"}
    75        sx={{
    76          marginTop: 50,
    77          "&:first-of-type": {
    78            marginTop: 0,
    79          },
    80        }}
    81      >
    82        <SectionTitle
    83          separator
    84          sx={{ fontSize: 12 }}
    85          icon={<GroupsMenuIcon style={{ width: 17, height: 17 }} />}
    86          actions={
    87            <Box sx={{ fontSize: 14 }}>
    88              <strong>{entityLength}</strong> Entit
    89              {entityLength === 1 ? "y" : "ies"} Found
    90            </Box>
    91          }
    92        >
    93          {entityName} Mappings
    94        </SectionTitle>
    95        <Box
    96          className={"resultsList"}
    97          sx={{
    98            h4: {
    99              borderBottom: "#e2e2e2 1px solid",
   100              padding: "12px 0",
   101              margin: 0,
   102              marginBottom: 15,
   103              display: "flex",
   104              alignItems: "center",
   105              "& svg": {
   106                marginRight: 10,
   107                fill: "#3C77A7",
   108              },
   109            },
   110          }}
   111        >
   112          {entityName === "Group" &&
   113            results.groups?.map((groupData, index) => {
   114              return (
   115                <Fragment key={`policy-res-${index}`}>
   116                  <EntityResultTitle name={groupData.group || ""} />
   117                  {groupData.policies && (
   118                    <EntityResultItems
   119                      blockName={"Policies"}
   120                      results={groupData.policies}
   121                    />
   122                  )}
   123                </Fragment>
   124              );
   125            })}
   126          {entityName === "User" &&
   127            results.users?.map((groupData, index) => {
   128              return (
   129                <Fragment key={`users-res-${index}`}>
   130                  <EntityResultTitle name={groupData.user || ""} />
   131                  {groupData.policies && (
   132                    <EntityResultItems
   133                      blockName={"Policies"}
   134                      results={groupData.policies}
   135                    />
   136                  )}
   137                </Fragment>
   138              );
   139            })}
   140          {entityName === "Policy" &&
   141            results.policies?.map((groupData, index) => {
   142              return (
   143                <Fragment key={`policy-map-${index}`}>
   144                  <EntityResultTitle name={groupData.policy || ""} />
   145                  {groupData.groups && (
   146                    <EntityResultItems
   147                      blockName={"Groups"}
   148                      results={groupData.groups}
   149                    />
   150                  )}
   151                  {groupData.users && (
   152                    <EntityResultItems
   153                      blockName={"Users"}
   154                      results={groupData.users}
   155                    />
   156                  )}
   157                </Fragment>
   158              );
   159            })}
   160        </Box>
   161      </Box>
   162    );
   163  };
   164  
   165  export default LDAPResultsBlock;