From 2ce98a65865e1c3b21bf4c70975cfc6a0c5d5cab Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sun, 5 Dec 2021 01:00:14 +0530
Subject: [PATCH] fix(ui) - review

---
 .../Client/ManageUsers/ManageUsers.js         |  6 ++--
 .../components/Client/ManageUsers/UserItem.js |  1 +
 .../Client/ManageUsers/userItem.css           |  4 +--
 .../Client/ProfileSettings/Licenses.js        |  4 +--
 .../Client/ProfileSettings/ProfileSettings.js |  1 +
 .../app/components/Client/Roles/Roles.tsx     | 18 +++++++---
 .../Roles/components/RoleItem/RoleItem.tsx    | 35 ++++++++++---------
 .../Roles/components/RoleItem/roleItem.css    |  4 +--
 frontend/app/duck/roles.js                    |  4 +--
 9 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/frontend/app/components/Client/ManageUsers/ManageUsers.js b/frontend/app/components/Client/ManageUsers/ManageUsers.js
index e70157cd0..c9df52d17 100644
--- a/frontend/app/components/Client/ManageUsers/ManageUsers.js
+++ b/frontend/app/components/Client/ManageUsers/ManageUsers.js
@@ -50,7 +50,7 @@ class ManageUsers extends React.PureComponent {
   }
   
   adminLabel = (user) => {
-    if (user.superAdmin) return 'Owner';
+    if (user.superAdmin) return null;
     return user.admin ? 'Admin' : '';
   };
 
@@ -207,8 +207,8 @@ class ManageUsers extends React.PureComponent {
           <div className={ styles.wrapper }>
             <div className={ cn(styles.tabHeader, 'flex items-center') }>
               <div className="flex items-center mr-auto">
-                { !hideHeader && <h3 className={ cn(styles.tabTitle, "text-2xl") }>{ (isAdmin ? 'Manage ' : '') + 'Users' }</h3> }
-                { hideHeader && <h3 className={ cn(styles.tabTitle, "text-xl") }>{ `Team Size ${members.size}` }</h3>}
+                { !hideHeader && <h3 className={ cn(styles.tabTitle, "text-2xl") }>{ (isAdmin ? 'Manage ' : '') + `Users (${members.size})` }</h3> }
+                { hideHeader && <h3 className={ cn(styles.tabTitle, "text-xl") }>{ `Users (${members.size})` }</h3>}
                 <Popup
                   trigger={
                     <div>
diff --git a/frontend/app/components/Client/ManageUsers/UserItem.js b/frontend/app/components/Client/ManageUsers/UserItem.js
index b40b5182a..757f709a9 100644
--- a/frontend/app/components/Client/ManageUsers/UserItem.js
+++ b/frontend/app/components/Client/ManageUsers/UserItem.js
@@ -6,6 +6,7 @@ const UserItem = ({ user, adminLabel, deleteHandler, editHandler, generateInvite
   <div className={ styles.wrapper } id="user-row">
     <Icon name="user-alt" size="16" marginRight="10" />
     <div id="user-name">{ user.name || user.email }</div>
+    <div className="px-2"/>
     { adminLabel && <div className={ styles.adminLabel }>{ adminLabel }</div>}
     { user.roleName && <div className={ styles.adminLabel }>{ user.roleName }</div>}
     <div className={ styles.actions }>
diff --git a/frontend/app/components/Client/ManageUsers/userItem.css b/frontend/app/components/Client/ManageUsers/userItem.css
index 6de747561..e11592408 100644
--- a/frontend/app/components/Client/ManageUsers/userItem.css
+++ b/frontend/app/components/Client/ManageUsers/userItem.css
@@ -16,11 +16,11 @@
   }
 
   & .adminLabel {
-    margin-left: 10px;
+    margin-left: 5px;
     padding: 0 10px;
     border-radius: 3px;
     background-color: $gray-lightest;
-    font-size: 12px;
+    font-size: 10px;
     border: solid thin $gray-light;
   }
 }
diff --git a/frontend/app/components/Client/ProfileSettings/Licenses.js b/frontend/app/components/Client/ProfileSettings/Licenses.js
index 4e487120c..748d5bb80 100644
--- a/frontend/app/components/Client/ProfileSettings/Licenses.js
+++ b/frontend/app/components/Client/ProfileSettings/Licenses.js
@@ -6,8 +6,8 @@ function Licenses({ account }) {
     <div>
       <div>{account.license}</div>
       {account.expirationDate && (
-        <div className="font-medium text-sm">
-          Expires At: {account.expirationDate.toFormat('LLL dd, yyyy')}
+        <div className="">
+          (Expires on {account.expirationDate.toFormat('LLL dd, yyyy')})
         </div>
       )}
     </div>
diff --git a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
index 5df0d1aec..b12b2cf8c 100644
--- a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
+++ b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
@@ -76,6 +76,7 @@ export default class ProfileSettings extends React.PureComponent {
             <div className="flex items-center">
               <div className={ styles.left }>
                 <h4 className="text-lg mb-4">{ 'License' }</h4>
+                <div className={ styles.info }>{ 'License key and expiration date.' }</div>
               </div>
               <div><Licenses /></div>
             </div>
diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 28382a4a6..91ab2fda5 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -7,6 +7,7 @@ import RoleForm from './components/RoleForm'
 import { init, edit, fetchList, remove as deleteRole } from 'Duck/roles';
 import RoleItem from './components/RoleItem'
 import { confirm } from 'UI/Confirmation';
+import { toast } from 'react-toastify';
 
 interface Props {
   loading: boolean
@@ -14,14 +15,15 @@ interface Props {
   edit: (role: any) => void,
   instance: any,
   roles: any[],
-  deleteRole: (id: any) => void,
+  deleteRole: (id: any) => Promise<void>,
   fetchList: () => Promise<void>,
   account: any,
-  permissionsMap: any
+  permissionsMap: any,
+  removeErrors: any
 }
 
 function Roles(props: Props) {
-  const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap } = props
+  const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap, removeErrors } = props
   const [showModal, setShowmModal] = useState(false)
   const isAdmin = account.admin || account.superAdmin;
 
@@ -46,7 +48,13 @@ function Roles(props: Props) {
       header: 'Roles',
       confirmation: `Are you sure you want to remove this role?`
     })) {
-      deleteRole(role.roleId)
+      deleteRole(role.roleId).then(() => {
+        if (removeErrors && removeErrors.size > 0) {
+          removeErrors.forEach(e => {
+            toast.error(e)
+          })
+        }
+      })
     }
   }
 
@@ -96,6 +104,7 @@ function Roles(props: Props) {
               {roles.map(role => (
                 <RoleItem
                   role={role}
+                  isAdmin={isAdmin}
                   permissions={permissionsMap}
                   editHandler={editHandler}
                   deleteHandler={deleteHandler}
@@ -119,6 +128,7 @@ export default connect(state => {
     instance: state.getIn(['roles', 'instance']) || null,
     permissionsMap: permissionsMap,
     roles: state.getIn(['roles', 'list']),
+    removeErrors: state.getIn(['roles', 'removeRequest', 'errors']),
     loading: state.getIn(['roles', 'fetchRequest', 'loading']),
     account: state.getIn([ 'user', 'account' ])
   }
diff --git a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
index c4cdb7a25..2ef271a46 100644
--- a/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
@@ -13,34 +13,37 @@ interface Props {
   role: any,
   deleteHandler?: (role: any) => void,
   editHandler?: (role: any) => void,
-  permissions: any
+  permissions: any,
+  isAdmin: boolean
 }
-function RoleItem({ role, deleteHandler, editHandler, permissions }: Props) {
+function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions }: Props) {
   return (
     <div className={cn(stl.wrapper)}>
       <Icon name="user-alt" size="16" marginRight="10" />
       <div className="flex items-center">
-        <span>{ role.name }</span>
-        <div className="grid grid-flow-col auto-cols-max gap-2">
+        <div className="mr-4">{ role.name }</div>
+        <div className="grid grid-flow-col auto-cols-max">
           {role.permissions.map((permission: any) => (
             <PermisionLabel permission={permissions[permission]} key={permission.id} />
             // <span key={permission.id} className={cn(stl.permission)}>{ permissions[permission].name }</span>
           ))}
         </div>
       </div>
+      { isAdmin && (
+        <div className={ stl.actions }>
+          { !!deleteHandler &&
+            <div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => deleteHandler(role) } id="trash">
+              <Icon name="trash" size="16" color="teal"/>
+            </div>
+          }
+          { !!editHandler && 
+            <div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => editHandler(role) }>
+              <Icon name="edit" size="16" color="teal"/>
+            </div>
+          }
+        </div>
+      )}
 
-      <div className={ stl.actions }>
-        { !!deleteHandler &&
-          <div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => deleteHandler(role) } id="trash">
-            <Icon name="trash" size="16" color="teal"/>
-          </div>
-        }
-        { !!editHandler && 
-          <div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => editHandler(role) }>
-            <Icon name="edit" size="16" color="teal"/>
-          </div>
-        }
-      </div>
     </div>
   );
 }
diff --git a/frontend/app/components/Client/Roles/components/RoleItem/roleItem.css b/frontend/app/components/Client/Roles/components/RoleItem/roleItem.css
index 7173d1c33..af0aab35d 100644
--- a/frontend/app/components/Client/Roles/components/RoleItem/roleItem.css
+++ b/frontend/app/components/Client/Roles/components/RoleItem/roleItem.css
@@ -38,10 +38,10 @@
 
 .label {
   margin-left: 10px;
-  padding: 0 10px;
+  padding: 0 5px;
   border-radius: 3px;
   background-color: $gray-lightest;
-  font-size: 12px;
+  font-size: 10px;
   border: solid thin $gray-light;
   width: fit-content;
 }
\ No newline at end of file
diff --git a/frontend/app/duck/roles.js b/frontend/app/duck/roles.js
index f1dd1ecec..67c9a79df 100644
--- a/frontend/app/duck/roles.js
+++ b/frontend/app/duck/roles.js
@@ -13,8 +13,8 @@ const initialState = Map({
     { name: 'Developer Tools', value: 'DEV_TOOLS' },
     { name: 'Errors', value: 'ERRORS' },
     { name: 'Metrics', value: 'METRICS' },
-    { name: 'Assist Live', value: 'ASSIST_LIVE' },
-    { name: 'Assist Call', value: 'ASSIST_CALL' },
+    { name: 'Assist (Live)', value: 'ASSIST_LIVE' },
+    { name: 'Assist (Call)', value: 'ASSIST_CALL' },
   ])
 });