Updating appearance of user names (both on User page and Users lists).

Author: Martin Krulis

src/components/Users/UsersListItem/UsersListItem.js

@@ -5,7 +5,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 import UsersName from '../../../components/Users/UsersName';
 import DateTime from '../../widgets/DateTime';
-import { BanIcon, LoadingIcon } from '../../icons';
+import { LoadingIcon } from '../../icons';
 import { UserRoleIcon } from '../../helpers/usersRoles';
 import { safeGet } from '../../../helpers/common';
 
@@ -20,20 +20,6 @@ const UsersListItem = ({ user, emailColumn = false, createdAtColumn = false, cre
     <tr>
       <td>
         {user.privateData && <UserRoleIcon showTooltip tooltipId={`role-${user.id}`} role={user.privateData.role} />}
-        {user.privateData && !user.privateData.isAllowed && (
-          <OverlayTrigger
-            placement="bottom"
-            overlay={
-              <Tooltip id={`ban-${user.id}`}>
-                <FormattedMessage
-                  id="app.userList.userDeactivated"
-                  defaultMessage="The user account was deactivated. The user may not sign in."
-                />
-              </Tooltip>
-            }>
-            <BanIcon gapLeft />
-          </OverlayTrigger>
-        )}
       </td>
       <td>
         <UsersName

src/components/Users/UsersName/UsersName.js

@@ -1,21 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { OverlayTrigger, Popover } from 'react-bootstrap';
+import { OverlayTrigger, Popover, Tooltip } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
 import { defaultMemoize } from 'reselect';
 
 import AvatarContainer from '../../../containers/AvatarContainer/AvatarContainer';
 import NotVerified from './NotVerified';
-import Icon, { MailIcon } from '../../icons';
+import Icon, { MailIcon, BanIcon } from '../../icons';
 import withLinks from '../../../helpers/withLinks';
 
 import styles from './usersName.less';
 
 const userNameStyle = defaultMemoize((size, large) => ({
   lineHeight: `${size}px`,
   fontSize: large ? size / 2 : 'inherit',
-  marginLeft: large ? 10 : 5,
 }));
 
 const UsersName = ({
@@ -40,11 +39,29 @@ const UsersName = ({
   const externalIds = privateData && privateData.externalIds;
   return (
     <span className={styles.wrapper}>
-      <span className={styles.avatar}>
-        <AvatarContainer avatarUrl={avatarUrl} fullName={fullName} firstName={firstName} size={size} />
-      </span>
+      {(!privateData || privateData.isAllowed) && (
+        <span className={styles.avatar}>
+          <AvatarContainer avatarUrl={avatarUrl} fullName={fullName} firstName={firstName} size={size} />
+        </span>
+      )}
       <span style={userNameStyle(size, large)}>
+        {privateData && !privateData.isAllowed && (
+          <OverlayTrigger
+            placement="bottom"
+            overlay={
+              <Tooltip id={`ban-${id}`}>
+                <FormattedMessage
+                  id="app.userName.userDeactivated"
+                  defaultMessage="The user account was deactivated. The user may not sign in."
+                />
+              </Tooltip>
+            }>
+            <BanIcon gapRight />
+          </OverlayTrigger>
+        )}
+
         {noLink ? <span>{fullName}</span> : <Link to={USER_URI_FACTORY(id)}>{fullName}</Link>}
+
         {showExternalIdentifiers && externalIds && Object.keys(externalIds).length > 0 && (
           <OverlayTrigger
             placement="right"

src/locales/cs.json

@@ -1300,7 +1300,7 @@
   "app.user.welcomeTitle": "Vítejte v ReCodExu",
   "app.userList.noSupervisors": "V tomto seznamu nejsou žádní vedoucí skupiny.",
   "app.userList.noUsers": "Žádní uživatelé nevyhovují zvoleným filtrům.",
-  "app.userList.userDeactivated": "Uživatelský účet byl deaktivován. Uživatel se nemůže přihlásit.",
+  "app.userName.userDeactivated": "Uživatelský účet byl deaktivován. Uživatel se nemůže přihlásit.",
   "app.userName.externalIds": "Externí identifikátory",
   "app.userSwitching.loginAs": "Přihlásit jako",
   "app.users.createUser": "Vytvořit uživatele",

src/locales/en.json

@@ -1300,7 +1300,7 @@
   "app.user.welcomeTitle": "Welcome to ReCodEx",
   "app.userList.noSupervisors": "There are no supervisors on the list.",
   "app.userList.noUsers": "No users match selected filters.",
-  "app.userList.userDeactivated": "The user account was deactivated. The user may not sign in.",
+  "app.userName.userDeactivated": "The user account was deactivated. The user may not sign in.",
   "app.userName.externalIds": "External identifiers",
   "app.userSwitching.loginAs": "Login as",
   "app.users.createUser": "Create User",

src/locales/whitelist_en.json

@@ -1300,7 +1300,7 @@
   "app.user.welcomeTitle",
   "app.userList.noSupervisors",
   "app.userList.noUsers",
-  "app.userList.userDeactivated",
+  "app.userName.userDeactivated",
   "app.userName.externalIds",
   "app.userSwitching.loginAs",
   "app.users.createUser",

src/pages/User/User.js

@@ -71,8 +71,9 @@ class User extends Component {
             Promise.all(
               [...studentOf, ...supervisorOf]
                 .filter(groupId => {
+                  // TODO this should be done better using security endpoint (unfortunatelly, permission hints are insuficient)
                   const group = groupSelector(getState(), groupId);
-                  return group && group.getIn(['data', 'permissionHints', 'viewStats']);
+                  return group && group.getIn(['data', 'permissionHints', 'viewAssignments']);
                 })
                 .map(groupId =>
                   Promise.all([
@@ -119,7 +120,7 @@ class User extends Component {
         {user => (
           <div>
             <p>
-              <UsersNameContainer userId={user.id} large noLink showEmail="full" />
+              <UsersNameContainer userId={user.id} large noLink showEmail="full" showExternalIdentifiers />
             </p>
 
             <p>