github.com/minio/console@v1.4.1/web-app/src/screens/Console/Groups/AddGroupScreen.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, useEffect, useState } from "react";
    18  import { useNavigate } from "react-router-dom";
    19  import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
    20  
    21  import {
    22    BackLink,
    23    Button,
    24    CreateGroupIcon,
    25    FormLayout,
    26    Grid,
    27    InputBox,
    28    PageLayout,
    29    ProgressBar,
    30  } from "mds";
    31  import { api } from "api";
    32  import { errorToHandler } from "api/errors";
    33  import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
    34  import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
    35  import { useAppDispatch } from "../../../store";
    36  import AddGroupHelpBox from "./AddGroupHelpBox";
    37  import UsersSelectors from "./UsersSelectors";
    38  import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
    39  import HelpMenu from "../HelpMenu";
    40  
    41  const AddGroupScreen = () => {
    42    const dispatch = useAppDispatch();
    43    const navigate = useNavigate();
    44    const [groupName, setGroupName] = useState<string>("");
    45    const [saving, isSaving] = useState<boolean>(false);
    46    const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
    47    const [validGroup, setValidGroup] = useState<boolean>(false);
    48  
    49    useEffect(() => {
    50      setValidGroup(groupName.trim() !== "");
    51    }, [groupName, selectedUsers]);
    52  
    53    useEffect(() => {
    54      if (saving) {
    55        const saveRecord = () => {
    56          api.groups
    57            .addGroup({
    58              group: groupName,
    59              members: selectedUsers,
    60            })
    61            .then((res) => {
    62              isSaving(false);
    63              navigate(`${IAM_PAGES.GROUPS}`);
    64            })
    65            .catch((err) => {
    66              isSaving(false);
    67              dispatch(setErrorSnackMessage(errorToHandler(err.error)));
    68            });
    69        };
    70  
    71        saveRecord();
    72      }
    73    }, [saving, groupName, selectedUsers, dispatch, navigate]);
    74  
    75    //Fetch Actions
    76    const setSaving = (event: React.FormEvent) => {
    77      event.preventDefault();
    78  
    79      isSaving(true);
    80    };
    81  
    82    const resetForm = () => {
    83      setGroupName("");
    84      setSelectedUsers([]);
    85    };
    86  
    87    useEffect(() => {
    88      dispatch(setHelpName("add_group"));
    89      // eslint-disable-next-line react-hooks/exhaustive-deps
    90    }, []);
    91  
    92    return (
    93      <Fragment>
    94        <PageHeaderWrapper
    95          label={
    96            <BackLink
    97              label={"Groups"}
    98              onClick={() => navigate(IAM_PAGES.GROUPS)}
    99            />
   100          }
   101          actions={<HelpMenu />}
   102        />
   103        <PageLayout>
   104          <FormLayout
   105            title={"Create Group"}
   106            icon={<CreateGroupIcon />}
   107            helpBox={<AddGroupHelpBox />}
   108          >
   109            <form noValidate autoComplete="off" onSubmit={setSaving}>
   110              <InputBox
   111                id="group-name"
   112                name="group-name"
   113                label="Group Name"
   114                autoFocus={true}
   115                value={groupName}
   116                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
   117                  setGroupName(e.target.value);
   118                }}
   119              />
   120              <UsersSelectors
   121                selectedUsers={selectedUsers}
   122                setSelectedUsers={setSelectedUsers}
   123                editMode={true}
   124              />
   125              <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
   126                <Button
   127                  id={"clear-group"}
   128                  type="button"
   129                  variant="regular"
   130                  onClick={resetForm}
   131                  label={"Clear"}
   132                />
   133  
   134                <Button
   135                  id={"save-group"}
   136                  type="submit"
   137                  variant="callAction"
   138                  disabled={saving || !validGroup}
   139                  label={"Save"}
   140                />
   141              </Grid>
   142              {saving && (
   143                <Grid item xs={12}>
   144                  <ProgressBar />
   145                </Grid>
   146              )}
   147            </form>
   148          </FormLayout>
   149        </PageLayout>
   150      </Fragment>
   151    );
   152  };
   153  
   154  export default AddGroupScreen;