github.com/minio/console@v1.4.1/web-app/src/screens/Console/Configurations/SiteReplication/SRSiteInputRow.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, { Fragment } from "react";
    18  import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
    19  import { AddIcon, Box, Button, Grid, InputBox, RemoveIcon } from "mds";
    20  import { SiteInputRow } from "./Types";
    21  
    22  interface ISRSiteInputRowProps {
    23    rowData: SiteInputRow;
    24    rowId: number;
    25    onFieldChange: (e: any, fieldName: string, index: number) => void;
    26    onAddClick?: (index: number) => void;
    27    onRemoveClick?: (index: number) => void;
    28    canAdd?: boolean;
    29    canRemove?: boolean;
    30    showRowActions?: boolean;
    31    disabledFields?: string[];
    32    fieldErrors?: Record<string, string>;
    33  }
    34  
    35  const SRSiteInputRow = ({
    36    rowData,
    37    rowId: index,
    38    onFieldChange,
    39    onAddClick,
    40    onRemoveClick,
    41    canAdd = true,
    42    canRemove = true,
    43    showRowActions = true,
    44    disabledFields = [],
    45    fieldErrors = {},
    46  }: ISRSiteInputRowProps) => {
    47    const { endpoint = "", accessKey = "", secretKey = "", name = "" } = rowData;
    48    return (
    49      <Fragment key={`${index}`}>
    50        <Box>
    51          <InputBox
    52            id={`add-rep-peer-site-${index}`}
    53            name={`add-rep-peer-site-${index}`}
    54            placeholder={`site-name`}
    55            label=""
    56            readOnly={disabledFields.includes("name")}
    57            value={name}
    58            onChange={(e) => {
    59              onFieldChange(e, "name", index);
    60            }}
    61            data-test-id={`add-site-rep-peer-site-${index}`}
    62          />
    63        </Box>
    64        <Box>
    65          <InputBox
    66            id={`add-rep-peer-site-ep-${index}`}
    67            name={`add-rep-peer-site-ep-${index}`}
    68            placeholder={`https://dr.minio-storage:900${index}`}
    69            label=""
    70            readOnly={disabledFields.includes("endpoint")}
    71            error={fieldErrors["endpoint"]}
    72            value={endpoint}
    73            onChange={(e) => {
    74              onFieldChange(e, "endpoint", index);
    75            }}
    76            data-test-id={`add-site-rep-peer-ep-${index}`}
    77          />
    78        </Box>
    79  
    80        <Box>
    81          <InputBox
    82            id={`add-rep-peer-site-ac-${index}`}
    83            name={`add-rep-peer-site-ac-${index}`}
    84            label=""
    85            required={true}
    86            disabled={disabledFields.includes("accessKey")}
    87            value={accessKey}
    88            error={fieldErrors["accessKey"]}
    89            onChange={(e) => {
    90              onFieldChange(e, "accessKey", index);
    91            }}
    92            data-test-id={`add-rep-peer-site-ac-${index}`}
    93          />
    94        </Box>
    95        <Box>
    96          <InputBox
    97            id={`add-rep-peer-site-sk-${index}`}
    98            name={`add-rep-peer-site-sk-${index}`}
    99            label=""
   100            required={true}
   101            type={"password"}
   102            value={secretKey}
   103            error={fieldErrors["secretKey"]}
   104            disabled={disabledFields.includes("secretKey")}
   105            onChange={(e) => {
   106              onFieldChange(e, "secretKey", index);
   107            }}
   108            data-test-id={`add-rep-peer-site-sk-${index}`}
   109          />
   110        </Box>
   111        <Grid item xs={12} sx={{ alignItems: "center", display: "flex" }}>
   112          <Box
   113            sx={{
   114              display: "flex",
   115              alignItems: "center",
   116              justifyContent: "center",
   117              alignSelf: "baseline",
   118              marginTop: "4px",
   119  
   120              "& button": {
   121                borderColor: "#696969",
   122                color: "#696969",
   123                borderRadius: "50%",
   124              },
   125            }}
   126          >
   127            {showRowActions ? (
   128              <React.Fragment>
   129                <TooltipWrapper tooltip={"Add a Row"}>
   130                  <Button
   131                    id={`add-row-${index}`}
   132                    variant="regular"
   133                    disabled={!canAdd}
   134                    icon={<AddIcon />}
   135                    onClick={(e) => {
   136                      e.preventDefault();
   137                      onAddClick?.(index);
   138                    }}
   139                    style={{
   140                      width: 25,
   141                      height: 25,
   142                      padding: 0,
   143                    }}
   144                  />
   145                </TooltipWrapper>
   146                <TooltipWrapper tooltip={"Remove Row"}>
   147                  <Button
   148                    id={`remove-row-${index}`}
   149                    variant="regular"
   150                    disabled={!canRemove}
   151                    icon={<RemoveIcon />}
   152                    onClick={(e) => {
   153                      e.preventDefault();
   154                      onRemoveClick?.(index);
   155                    }}
   156                    style={{
   157                      width: 25,
   158                      height: 25,
   159                      padding: 0,
   160                      marginLeft: 8,
   161                    }}
   162                  />
   163                </TooltipWrapper>
   164              </React.Fragment>
   165            ) : null}
   166          </Box>
   167        </Grid>
   168      </Fragment>
   169    );
   170  };
   171  
   172  export default SRSiteInputRow;