Reduce renders in password when adding a user (#2120)

portal-ui/src/screens/Console/Users/AddUserScreen.tsx

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import UserSelector from "./UserSelector";
+import PasswordSelector from "./PasswordSelector";
 import React, { Fragment } from "react";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -30,14 +31,11 @@ import { CreateUserIcon } from "../../../icons";
 
 import PageHeader from "../Common/PageHeader/PageHeader";
 import PageLayout from "../Common/Layout/PageLayout";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 
 import PolicySelectors from "../Policies/PolicySelectors";
 import BackLink from "../../../common/BackLink";
 import GroupsSelectors from "./GroupsSelectors";
 
-import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { useNavigate } from "react-router-dom";
 import FormLayout from "../Common/FormLayout";
@@ -49,8 +47,6 @@ import {AppState} from "../../../store";
 import {
     setSelectedGroups,
     setAddLoading,
-    setShowPassword,
-    setSecretKey,
     setSendEnabled,
 } from "./AddUsersSlice";
 interface IAddUserProps {
@@ -78,29 +74,28 @@ const styles = (theme: Theme) =>
 
 const AddUser = ({ classes }: IAddUserProps) => {
     const dispatch = useAppDispatch();
-    const showPassword = useSelector(
-        (state: AppState) => state.createUser.showPassword
-    )
     const selectedPolicies = useSelector(
         (state: AppState) => state.createUser.selectedPolicies
     )
     const selectedGroups = useSelector(
         (state: AppState) => state.createUser.selectedGroups
     )
-    const secretKey = useSelector(
-        (state: AppState) => state.createUser.secretKey
-    )
     const addLoading = useSelector(
         (state: AppState) => state.createUser.addLoading
     )
     const sendEnabled = useSelector(
         (state: AppState) => state.createUser.sendEnabled
     )
+    const secretKeylength = useSelector(
+        (state: AppState) => state.createUser.secretKeylength
+    )
     const navigate = useNavigate();
     dispatch(setSendEnabled());
+
+
     const saveRecord = (event: React.FormEvent) => {
         event.preventDefault();
-        if (secretKey.length < 8) {
+        if (secretKeylength < 8) {
             dispatch(
                 setErrorSnackMessage({
                     errorMessage: "Passwords must be at least 8 characters long",
@@ -141,29 +136,7 @@ const AddUser = ({ classes }: IAddUserProps) => {
                                     <UserSelector classes={classes} />
                                 </div>
                                 <div className={classes.formFieldRow}>
-                                    <InputBoxWrapper
-                                        className={classes.spacerBottom}
-                                        classes={{
-                                            inputLabel: classes.sizedLabel,
-                                        }}
-                                        id="standard-multiline-static"
-                                        name="standard-multiline-static"
-                                        label="Password"
-                                        type={showPassword ? "text" : "password"}
-                                        value={secretKey}
-                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                                            dispatch(setSecretKey(e.target.value));
-                                        }}
-                                        autoComplete="current-password"
-                                        overlayIcon={
-                                            showPassword ? (
-                                                <VisibilityOffIcon />
-                                            ) : (
-                                                <RemoveRedEyeIcon />
-                                            )
-                                        }
-                                        overlayAction={() => dispatch(setShowPassword(!showPassword))}
-                                    />
+                                    <PasswordSelector classes={classes} />
                                 </div>
                                 <Grid container item spacing="20">
                                     <Grid item xs={12}>

portal-ui/src/screens/Console/Users/AddUsersSlice.tsx

@@ -28,6 +28,7 @@ export interface ICreateUser {
     sendEnabled: boolean;
     addLoading: boolean;
     apinoerror: boolean;
+    secretKeylength: number;
 }
 
 const initialState: ICreateUser = {
@@ -39,6 +40,7 @@ const initialState: ICreateUser = {
     secretKey: "",
     selectedGroups: [],
     selectedPolicies: [],
+    secretKeylength: 0,
 };
 
 export const createUserSlice = createSlice({
@@ -56,6 +58,7 @@ export const createUserSlice = createSlice({
         },
         setSecretKey: (state, action: PayloadAction<string>) => {
             state.secretKey = action.payload;
+            state.secretKeylength = state.secretKey.length;
         },
         setSelectedPolicies: (state, action: PayloadAction<string[]>) => {
             state.selectedPolicies = action.payload;

portal-ui/src/screens/Console/Users/PasswordSelector.tsx

@@ -0,0 +1,63 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import {setSecretKey, setShowPassword} from "./AddUsersSlice";
+import { useSelector } from "react-redux";
+import {AppState, useAppDispatch} from "../../../store";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+
+interface IAddUserProps2 {
+    classes: any;
+}
+
+const PasswordSelector = ({ classes }: IAddUserProps2 ) => {
+    const dispatch = useAppDispatch();
+    const showPassword = useSelector(
+        (state: AppState) => state.createUser.showPassword
+    )
+    const secretKey = useSelector(
+        (state: AppState) => state.createUser.secretKey
+    )
+    return (
+        <InputBoxWrapper
+            className={classes.spacerBottom}
+            classes={{
+                inputLabel: classes.sizedLabel,
+            }}
+            id="standard-multiline-static"
+            name="standard-multiline-static"
+            label="Password"
+            type={showPassword ? "text" : "password"}
+            value={secretKey}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                dispatch(setSecretKey(e.target.value));
+            }}
+            autoComplete="current-password"
+            overlayIcon={
+                showPassword ? (
+                    <VisibilityOffIcon />
+                ) : (
+                    <RemoveRedEyeIcon />
+                )
+            }
+            overlayAction={() => dispatch(setShowPassword(!showPassword))}
+        />
+    );
+};
+export default PasswordSelector;