github.com/minio/console@v1.4.1/web-app/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 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, { useEffect, useState, Fragment } from "react";
    18  import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
    19  import {
    20    AddAccessRuleIcon,
    21    Button,
    22    FormLayout,
    23    Grid,
    24    InputBox,
    25    Select,
    26  } from "mds";
    27  import { api } from "api";
    28  import { errorToHandler } from "api/errors";
    29  import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
    30  import {
    31    setErrorSnackMessage,
    32    setSnackBarMessage,
    33  } from "../../../../systemSlice";
    34  import { useAppDispatch } from "../../../../store";
    35  
    36  interface IAddAccessRule {
    37    modalOpen: boolean;
    38    onClose: () => any;
    39    bucket: string;
    40    prefilledRoute?: string;
    41  }
    42  
    43  const AddAccessRule = ({
    44    modalOpen,
    45    onClose,
    46    bucket,
    47    prefilledRoute,
    48  }: IAddAccessRule) => {
    49    const dispatch = useAppDispatch();
    50  
    51    const [prefix, setPrefix] = useState("");
    52    const [selectedAccess, setSelectedAccess] = useState<any>("readonly");
    53  
    54    useEffect(() => {
    55      if (prefilledRoute) {
    56        setPrefix(prefilledRoute);
    57      }
    58    }, [prefilledRoute]);
    59  
    60    const accessOptions = [
    61      { label: "readonly", value: "readonly" },
    62      { label: "writeonly", value: "writeonly" },
    63      { label: "readwrite", value: "readwrite" },
    64    ];
    65  
    66    const resetForm = () => {
    67      setPrefix("");
    68      setSelectedAccess("readonly");
    69    };
    70  
    71    const createProcess = () => {
    72      api.bucket
    73        .setAccessRuleWithBucket(bucket, {
    74          prefix: prefix,
    75          access: selectedAccess,
    76        })
    77        .then((res: any) => {
    78          dispatch(setSnackBarMessage("Access Rule added successfully"));
    79          onClose();
    80        })
    81        .catch((res) => {
    82          dispatch(setErrorSnackMessage(errorToHandler(res.error)));
    83          onClose();
    84        });
    85    };
    86  
    87    return (
    88      <ModalWrapper
    89        modalOpen={modalOpen}
    90        title="Add Anonymous Access Rule"
    91        onClose={onClose}
    92        titleIcon={<AddAccessRuleIcon />}
    93      >
    94        <FormLayout withBorders={false} containerPadding={false}>
    95          <InputBox
    96            value={prefix}
    97            label={"Prefix"}
    98            id={"prefix"}
    99            name={"prefix"}
   100            placeholder={"Enter Prefix"}
   101            onChange={(e) => {
   102              setPrefix(e.target.value);
   103            }}
   104            tooltip={
   105              "Enter '/' to apply the rule to all prefixes and objects at the bucket root. Do not include the wildcard asterisk '*' as part of the prefix *unless* it is an explicit part of the prefix name. The Console automatically appends an asterisk to the appropriate sections of the resulting IAM policy."
   106            }
   107          />
   108          <Select
   109            id="access"
   110            name="Access"
   111            onChange={(value) => {
   112              setSelectedAccess(value);
   113            }}
   114            label="Access"
   115            value={selectedAccess}
   116            options={accessOptions}
   117            disabled={false}
   118            helpTip={
   119              <Fragment>
   120                Select the desired level of access available to unauthenticated
   121                Users
   122              </Fragment>
   123            }
   124            helpTipPlacement="right"
   125          />
   126          <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
   127            <Button
   128              id={"clear"}
   129              type="button"
   130              variant="regular"
   131              onClick={resetForm}
   132              label={"Clear"}
   133            />
   134  
   135            <Button
   136              id={"add-access-save"}
   137              type="submit"
   138              variant="callAction"
   139              disabled={prefix.trim() === ""}
   140              onClick={createProcess}
   141              label={"Save"}
   142            />
   143          </Grid>
   144        </FormLayout>
   145      </ModalWrapper>
   146    );
   147  };
   148  
   149  export default AddAccessRule;