github.com/minio/console@v1.4.1/web-app/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.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  
    17  import React from "react";
    18  import { ActionLink, Box, HelpTip, ValuePair } from "mds";
    19  import { SecureComponent } from "../../../../../common/SecureComponent";
    20  
    21  import EditActionButton from "./EditActionButton";
    22  
    23  type EditablePropertyItemProps = {
    24    isLoading: boolean;
    25    resourceName: string;
    26    iamScopes: string[];
    27    property: any;
    28    value: any;
    29    onEdit: () => void;
    30    secureCmpProps?: Record<any, any>;
    31    disabled?: boolean;
    32    helpTip?: any;
    33  };
    34  
    35  const SecureAction = ({
    36    resourceName,
    37    iamScopes,
    38    secureCmpProps = {},
    39    children,
    40  }: {
    41    resourceName: string;
    42    iamScopes: string[];
    43    children: any;
    44    secureCmpProps?: Record<any, any>;
    45  }) => {
    46    return (
    47      <SecureComponent
    48        scopes={iamScopes}
    49        resource={resourceName}
    50        errorProps={{ disabled: true }}
    51        {...secureCmpProps}
    52      >
    53        {children}
    54      </SecureComponent>
    55    );
    56  };
    57  
    58  const EditablePropertyItem = ({
    59    isLoading = true,
    60    resourceName = "",
    61    iamScopes,
    62    secureCmpProps = {},
    63    property = null,
    64    value = null,
    65    onEdit,
    66    disabled = false,
    67    helpTip,
    68  }: EditablePropertyItemProps) => {
    69    return (
    70      <Box
    71        sx={{
    72          display: "flex",
    73          alignItems: "baseline",
    74          justifyContent: "flex-start",
    75          gap: 10,
    76        }}
    77      >
    78        <ValuePair
    79          label={property}
    80          value={
    81            helpTip ? (
    82              <SecureAction
    83                resourceName={resourceName}
    84                iamScopes={iamScopes}
    85                secureCmpProps={secureCmpProps}
    86              >
    87                <HelpTip placement="left" content={helpTip}>
    88                  <ActionLink
    89                    isLoading={isLoading}
    90                    onClick={onEdit}
    91                    label={value}
    92                    sx={{ fontWeight: "bold", textTransform: "capitalize" }}
    93                    disabled={disabled}
    94                  />
    95                </HelpTip>
    96              </SecureAction>
    97            ) : (
    98              <SecureAction
    99                resourceName={resourceName}
   100                iamScopes={iamScopes}
   101                secureCmpProps={secureCmpProps}
   102              >
   103                <ActionLink
   104                  isLoading={isLoading}
   105                  onClick={onEdit}
   106                  label={value}
   107                  sx={{ fontWeight: "bold", textTransform: "capitalize" }}
   108                  disabled={disabled}
   109                />
   110              </SecureAction>
   111            )
   112          }
   113        />
   114        <SecureAction
   115          resourceName={resourceName}
   116          iamScopes={iamScopes}
   117          secureCmpProps={secureCmpProps}
   118        >
   119          <EditActionButton
   120            onClick={onEdit}
   121            sx={{
   122              background: "#f8f8f8",
   123              marginLeft: "3px",
   124              top: 3,
   125              "& .min-icon": {
   126                width: "16px",
   127                height: "16px",
   128              },
   129            }}
   130            disabled={disabled}
   131          />
   132        </SecureAction>
   133      </Box>
   134    );
   135  };
   136  
   137  export default EditablePropertyItem;