From d83893f23f64468eca18fea588845f82d719d3fa Mon Sep 17 00:00:00 2001
From: Emily <44536222+emi-hi@users.noreply.github.com>
Date: Thu, 14 Mar 2024 10:17:36 -0700
Subject: [PATCH] chore: fixes padding on app-body, disables adding empty
 string for new 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)

---
 react/src/app/styles/App.scss           |  4 +---
 react/src/users/UsersContainer.js       | 17 ++++++++++-------
 react/src/users/components/UsersPage.js | 21 +++++++++++++++++----
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/react/src/app/styles/App.scss b/react/src/app/styles/App.scss
index 925937f8..ed163a71 100644
--- 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
index 708bd5ac..a20231b4 100644
--- 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,7 +44,7 @@ const UsersContainer = (props) => {
       })
       .catch((error) => {
         setMessageSeverity('error');
-        setPermissionMessage('new user could not be added, sorry!');
+        setMessage('new user could not be added, sorry!');
       });
   };
 
@@ -51,11 +52,11 @@ const UsersContainer = (props) => {
     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,8 +76,8 @@ 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}
@@ -84,6 +85,8 @@ const UsersContainer = (props) => {
         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
index eda019d5..1d4f4c70 100644
--- 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,6 +90,11 @@ const UsersPage = (props) => {
     </>
   );
 };
+UsersPage.defaultProps = {
+  newUser: '',
+  setMessage: '',
+};
+
 UsersPage.propTypes = {
   users: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   handleAddNewUser: PropTypes.func.isRequired,
@@ -91,5 +102,7 @@ UsersPage.propTypes = {
   handleCheckboxChange: PropTypes.func.isRequired,
   handleSubmitPermissionUpdates: PropTypes.func.isRequired,
   currentUser: PropTypes.string.isRequired,
+  newUser: PropTypes.string,
+  setMessage: PropTypes.string,
 };
 export default UsersPage;