Merge pull request #942 from chaotixkilla/fix-user-management-issues

Fix styling and URL creation issues in user management page

new-lamassu-admin/src/pages/UserManagement/UserManagement.js

@@ -53,6 +53,11 @@ const reducer = (_, action) => {
   }
 }
 
+const roleMapper = {
+  user: 'Regular',
+  superuser: 'Superuser'
+}
+
 const Users = () => {
   const classes = useStyles()
   const { userData } = useContext(AppContext)
@@ -65,43 +70,30 @@ const Users = () => {
   const elements = [
     {
       header: 'Login',
-      width: 257,
+      width: 307,
       textAlign: 'left',
       size: 'sm',
       view: u => {
         if (userData.id === u.id)
           return (
-            <>
+            <div className={classes.loginWrapper}>
-              {u.username}
+              <span className={classes.username}>{u.username}</span>
               <Chip size="small" label="You" className={classes.chip} />
-            </>
+            </div>
           )
-        return u.username
+        return <span className={classes.username}>{u.username}</span>
       }
     },
     {
       header: 'Role',
-      width: 105,
+      width: 160,
-      textAlign: 'center',
+      textAlign: 'left',
-      size: 'sm',
-      view: u => {
-        switch (u.role) {
-          case 'user':
-            return 'Regular'
-          case 'superuser':
-            return 'Superuser'
-          default:
-            return u.role
-        }
-      }
-    },
-    {
-      header: '',
-      width: 80,
-      textAlign: 'center',
       size: 'sm',
       view: u => (
+        <div className={classes.loginWrapper}>
+          <span>{roleMapper[u.role]}</span>
           <Switch
+            className={classes.roleSwitch}
             disabled={userData.id === u.id}
             checked={u.role === 'superuser'}
             onClick={() => {
@@ -113,15 +105,9 @@ const Users = () => {
             }}
             value={u.role === 'superuser'}
           />
+        </div>
       )
     },
-    {
-      header: '',
-      width: 25,
-      textAlign: 'center',
-      size: 'sm',
-      view: u => {}
-    },
     {
       header: 'Actions',
       width: 565,

new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js

@@ -50,13 +50,11 @@ const styles = {
   chip: {
     backgroundColor: subheaderColor,
     fontFamily: fontPrimary,
-    marginLeft: 15,
+    marginLeft: 10
-    marginTop: -5
   },
   actionChip: {
     backgroundColor: subheaderColor,
-    marginRight: 15,
+    marginRight: 15
-    marginTop: -5
   },
   info: {
     fontFamily: fontSecondary,
@@ -105,6 +103,21 @@ const styles = {
     height: '100%',
     overflow: 'hidden',
     position: 'relative'
+  },
+  loginWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  username: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    width: '100%'
+  },
+  roleSwitch: {
+    marginLeft: 15
   }
 }
 

new-lamassu-admin/src/utils/urlResolver.js

@@ -1,5 +1,4 @@
-const url =
+const url = `https://${window.location.hostname}`
-  process.env.NODE_ENV === 'development' ? 'https://localhost:3001' : ''
 
 const urlResolver = content => `${url}${content}`