github.com/minio/console@v1.4.1/web-app/src/screens/Console/Users/BulkAddToGroup.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 } from "react";
    18  import {
    19    AddMembersToGroupIcon,
    20    Button,
    21    FormLayout,
    22    Grid,
    23    ProgressBar,
    24    ReadBox,
    25  } from "mds";
    26  
    27  import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
    28  import { ErrorResponseHandler } from "../../../common/types";
    29  import api from "../../../common/api";
    30  import GroupsSelectors from "./GroupsSelectors";
    31  import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
    32  import { setModalErrorSnackMessage } from "../../../systemSlice";
    33  import { useAppDispatch } from "../../../store";
    34  
    35  interface IAddToGroup {
    36    open: boolean;
    37    checkedUsers: any;
    38    closeModalAndRefresh: any;
    39  }
    40  
    41  const BulkAddToGroup = ({
    42    open,
    43    checkedUsers,
    44    closeModalAndRefresh,
    45  }: IAddToGroup) => {
    46    const dispatch = useAppDispatch();
    47    //Local States
    48    const [saving, isSaving] = useState<boolean>(false);
    49    const [accepted, setAccepted] = useState<boolean>(false);
    50    const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
    51  
    52    //Effects
    53    useEffect(() => {
    54      if (saving) {
    55        if (selectedGroups.length > 0) {
    56          api
    57            .invoke("PUT", "/api/v1/users-groups-bulk", {
    58              groups: selectedGroups,
    59              users: checkedUsers,
    60            })
    61            .then(() => {
    62              isSaving(false);
    63              setAccepted(true);
    64            })
    65            .catch((err: ErrorResponseHandler) => {
    66              isSaving(false);
    67              dispatch(setModalErrorSnackMessage(err));
    68            });
    69        } else {
    70          isSaving(false);
    71          dispatch(
    72            setModalErrorSnackMessage({
    73              errorMessage: "You need to select at least one group to assign",
    74              detailedError: "",
    75            }),
    76          );
    77        }
    78      }
    79    }, [
    80      saving,
    81      isSaving,
    82      closeModalAndRefresh,
    83      selectedGroups,
    84      checkedUsers,
    85      dispatch,
    86    ]);
    87  
    88    //Fetch Actions
    89    const setSaving = (event: React.FormEvent) => {
    90      event.preventDefault();
    91  
    92      isSaving(true);
    93    };
    94  
    95    const resetForm = () => {
    96      setSelectedGroups([]);
    97    };
    98  
    99    return (
   100      <ModalWrapper
   101        modalOpen={open}
   102        onClose={() => {
   103          closeModalAndRefresh(accepted);
   104        }}
   105        title={
   106          accepted
   107            ? "The selected users were added to the following groups."
   108            : "Add Users to Group"
   109        }
   110        titleIcon={<AddMembersToGroupIcon />}
   111      >
   112        {accepted ? (
   113          <React.Fragment>
   114            <FormLayout
   115              withBorders={false}
   116              containerPadding={false}
   117              sx={{ margin: "30px 0" }}
   118            >
   119              <ReadBox label={"Groups"} sx={{ width: "100%" }}>
   120                {selectedGroups.join(", ")}
   121              </ReadBox>
   122              <ReadBox label={"Users"} sx={{ width: "100%" }}>
   123                {" "}
   124                {checkedUsers.join(", ")}{" "}
   125              </ReadBox>
   126            </FormLayout>
   127          </React.Fragment>
   128        ) : (
   129          <form noValidate autoComplete="off" onSubmit={setSaving}>
   130            <FormLayout withBorders={false} containerPadding={false}>
   131              <ReadBox label={"Selected Users"} sx={{ width: "100%" }}>
   132                {checkedUsers.join(", ")}
   133              </ReadBox>
   134              <GroupsSelectors
   135                selectedGroups={selectedGroups}
   136                setSelectedGroups={setSelectedGroups}
   137              />
   138            </FormLayout>
   139            <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
   140              <Button
   141                id={"clear-bulk-add-group"}
   142                type="button"
   143                variant="regular"
   144                color="primary"
   145                onClick={resetForm}
   146                label={"Clear"}
   147              />
   148              <Button
   149                id={"save-add-group"}
   150                type="submit"
   151                variant="callAction"
   152                disabled={saving || selectedGroups.length < 1}
   153                label={"Save"}
   154              />
   155            </Grid>
   156            {saving && (
   157              <Grid item xs={12}>
   158                <ProgressBar />
   159              </Grid>
   160            )}
   161          </form>
   162        )}
   163      </ModalWrapper>
   164    );
   165  };
   166  
   167  export default BulkAddToGroup;