change(ui) - user list checking for enterprise

frontend/app/components/Client/Client.js

@@ -26,7 +26,7 @@ import Roles from './Roles';
 export default class Client extends React.PureComponent {
   constructor(props){
     super(props);
-    props.fetchMemberList();    
+    // props.fetchMemberList();    
   } 
 
   setTab = (tab) => {

frontend/app/components/Client/Users/UsersView.tsx

@@ -32,7 +32,7 @@ function UsersView(props: Props) {
     }
 
     useEffect(() => {
-        if (roles.length === 0) {
+        if (roles.length === 0 && isEnterprise) {
             roleStore.fetchRoles();
         }
     }, []);
@@ -68,7 +68,7 @@ function UsersView(props: Props) {
                     <UserSearch />
                 </div>
             </div>
-            <UserList />
+            <UserList isEnterprise={isEnterprise} />
         </div>
     );
 }
@@ -77,5 +77,4 @@ export default connect(state => ({
     account: state.getIn([ 'user', 'account' ]),
     isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
     limits: state.getIn([ 'user', 'account', 'limits', 'teamMember' ]),
-    // remaining: this.props.account.limits.teamMember.remaining
 }))(UsersView);

frontend/app/components/Client/Users/components/UserList/UserList.tsx

@@ -7,7 +7,11 @@ import { Pagination, NoContent, Loader } from 'UI';
 import { useModal } from 'App/components/Modal';
 import UserForm from '../UserForm';
 
-function UserList(props) {
+interface Props {
+    isEnterprise?: boolean;
+}
+function UserList(props: Props) {
+    const { isEnterprise  = false } = props;
     const { userStore } = useStore();
     const loading = useObserver(() => userStore.loading);
     const users = useObserver(() => userStore.list);
@@ -53,6 +57,7 @@ function UserList(props) {
                                 editHandler={() => editHandler(user)}
                                 generateInvite={() => userStore.generateInviteCode(user.userId)}
                                 copyInviteCode={() => userStore.copyInviteCode(user.userId)}
+                                // isEnterprise={isEnterprise}
                             />
                         </div>
                     ))}

frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx

@@ -4,11 +4,21 @@ import { Icon } from 'UI';
 import { checkForRecent } from 'App/date';
 import { Tooltip } from 'react-tippy';
 
+
+const AdminPrivilegeLabel = ({ user }) => {
+    return (
+        <>
+            {user.isAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Admin</span>}
+            {user.isSuperAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Owner</span>}
+        </>
+    )
+}
 interface Props {
     user: any;
     editHandler?: any;
     generateInvite?: any;
     copyInviteCode?: any;
+    isEnterprise?: boolean;
 }
 function UserListItem(props: Props) {
     const {
@@ -16,18 +26,21 @@ function UserListItem(props: Props) {
         editHandler = () => {},
         generateInvite = () => {},
         copyInviteCode = () => {},
+        isEnterprise = false,
     } = props;
     return (
         <div className="grid grid-cols-12 p-3 py-4 border-b items-center select-none hover:bg-active-blue group">
             <div className="col-span-5">
-                {user.name}
-                {user.isAdmin && <span className="ml-2 px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Admin</span>}
-                {user.isSuperAdmin && <span className="ml-2 px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Owner</span>}
+                <span className="mr-2">{user.name}</span>
+                {isEnterprise && <AdminPrivilegeLabel user={user} />}
             </div>
             <div className="col-span-3">
-                <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">
-                    {user.roleName}
-                </span>
+                {!isEnterprise && <AdminPrivilegeLabel user={user} />}
+                {isEnterprise && (
+                    <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">
+                        {user.roleName}
+                    </span>
+                )}
             </div>
             <div className="col-span-2">
                 <span>{user.createdAt && checkForRecent(user.createdAt, 'LLL dd, yyyy, hh:mm a')}</span>