chore: fixes padding on app-body, disables adding empty string for ne…

…w users, adds tooltip to disabled add user button, clears response message from adding uses/updating permissions if user box is typed into or checkbox clicked (#225)
bcgov · Mar 14, 2024 · d83893f · d83893f
1 parent 3ea275e
commit d83893f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/react/src/app/styles/App.scss b/react/src/app/styles/App.scss
@@ -46,9 +46,7 @@ $button-background-blue: #003366;
   }
 
   .App-body {
-    margin: 1rem auto 0;
-    // max-width: 1280px;
-    padding: 0 1rem;
+    padding: 1rem;
   }
 }
 

diff --git a/react/src/users/UsersContainer.js b/react/src/users/UsersContainer.js
@@ -12,11 +12,12 @@ const UsersContainer = (props) => {
   const [loading, setLoading] = useState(false);
   const [users, setUsers] = useState([]);
   const [newUser, setNewUser] = useState('');
-  const [permissionMessage, setPermissionMessage] = useState('');
+  const [message, setMessage] = useState('');
   const [messageSeverity, setMessageSeverity] = useState('');
   const axios = useAxios();
 
   const handleCheckboxChange = useCallback((event) => {
+    setMessage('');
     const idir = event.target.name;
     const permissionType = event.target.id;
     const { checked } = event.target;
@@ -33,7 +34,7 @@ const UsersContainer = (props) => {
       .then((response) => {
         const userAdded = response.data.idir;
         setMessageSeverity('success');
-        setPermissionMessage(`${userAdded} was added to the user list`);
+        setMessage(`${userAdded} was added to the user list`);
         const userObject = { idir: userAdded, user_permissions: { admin: false, uploader: false } };
         setUsers(
           produce((draft) => {
@@ -43,19 +44,19 @@ const UsersContainer = (props) => {
       })
       .catch((error) => {
         setMessageSeverity('error');
-        setPermissionMessage('new user could not be added, sorry!');
+        setMessage('new user could not be added, sorry!');
       });
   };
 
   const handleSubmitPermissionUpdates = () => {
     axios.put(ROUTES_USERS.UPDATE, users)
       .then((response) => {
         setMessageSeverity('success');
-        setPermissionMessage(response.data);
+        setMessage(response.data);
       })
       .catch((error) => {
         setMessageSeverity('error');
-        setPermissionMessage(error.data);
+        setMessage(error.data);
       });
   };
 
@@ -75,15 +76,17 @@ const UsersContainer = (props) => {
     );
   }
   return (
-    <div className="row">
-      {permissionMessage && <Alert severity={messageSeverity}>{permissionMessage}</Alert>}
+    <div className="users-container">
+      {message && <Alert severity={messageSeverity}>{message}</Alert>}
       <UsersPage
         currentUser={currentUser}
         users={users}
         setNewUser={setNewUser}
         handleAddNewUser={handleAddNewUser}
         handleCheckboxChange={handleCheckboxChange}
         handleSubmitPermissionUpdates={handleSubmitPermissionUpdates}
+        setMessage={setMessage}
+        newUser={newUser}
       />
     </div>
   );

diff --git a/react/src/users/components/UsersPage.js b/react/src/users/components/UsersPage.js
@@ -14,6 +14,8 @@ const UsersPage = (props) => {
     setNewUser,
     handleCheckboxChange,
     handleSubmitPermissionUpdates,
+    newUser,
+    setMessage,
   } = props;
   const userRow = (user) => {
     const disableAdmin = currentUser === user.idir;
@@ -52,12 +54,16 @@ const UsersPage = (props) => {
                 </h3>
               </Grid>
               <Grid item>
-                <TextField className="user-input" type="text" onChange={(event) => { setNewUser(event.target.value); }} />
+                <TextField className="user-input" type="text" onChange={(event) => { setNewUser(event.target.value); setMessage(''); }} />
               </Grid>
               <Grid item>
-                <Button variant="contained" className="button-dark-blue" onClick={handleAddNewUser}>
-                  Add User
-                </Button>
+                <Tooltip disableHoverListener={newUser} title="Please type in the IDIR you would like to add.">
+                  <span>
+                    <Button disabled={!newUser} variant="contained" className="button-dark-blue" onClick={handleAddNewUser}>
+                      Add User
+                    </Button>
+                  </span>
+                </Tooltip>
               </Grid>
             </Grid>
           </Box>
@@ -84,12 +90,19 @@ const UsersPage = (props) => {
     </>
   );
 };
+UsersPage.defaultProps = {
+  newUser: '',
+  setMessage: '',
+};
+
 UsersPage.propTypes = {
   users: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   handleAddNewUser: PropTypes.func.isRequired,
   setNewUser: PropTypes.func.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
   handleSubmitPermissionUpdates: PropTypes.func.isRequired,
   currentUser: PropTypes.string.isRequired,
+  newUser: PropTypes.string,
+  setMessage: PropTypes.string,
 };
 export default UsersPage;