Compacting admin lists in group tree view where there are more than 2 admins per group.

Author: krulis-martin

src/components/Groups/GroupsTree/GroupsTreeNode.js

@@ -11,6 +11,7 @@ import Icon, { GroupIcon, GroupExamsIcon, LoadingIcon } from '../../icons';
 import withLinks from '../../../helpers/withLinks.js';
 import { isRegularObject } from '../../../helpers/common.js';
 import { isExam } from '../../../helpers/groups.js';
+import { OverlayTrigger, Popover } from 'react-bootstrap';
 
 /**
  * Assemble the right CSS classes for the list item.
@@ -30,7 +31,22 @@ const prepareClassList = lruMemoize((clickable, archived) => {
 
 const DEFAULT_ICON = ['far', 'square'];
 
-const clickEventDisipator = ev => ev.stopPropagation();
+const clickEventDissipator = ev => ev.stopPropagation();
+
+const adminsList = (primaryAdmins, autoloadAuthors, simpleClassName = '') =>
+  primaryAdmins.map(admin => (
+    <React.Fragment key={isRegularObject(admin) ? admin.id : admin}>
+      {isRegularObject(admin) ? (
+        <span className={`${simpleClassName} simpleName text-nowrap`}>
+          {admin.firstName} {admin.lastName}
+        </span>
+      ) : autoloadAuthors ? (
+        <UsersNameContainer userId={admin} isSimple simpleClassName={simpleClassName} />
+      ) : (
+        <LoadingIcon />
+      )}
+    </React.Fragment>
+  ));
 
 const GroupsTreeNode = React.memo(
   ({ group, selectedGroupId = null, autoloadAuthors = false, isExpanded = false, buttonsCreator, links }) => {
@@ -69,21 +85,32 @@ const GroupsTreeNode = React.memo(
           {primaryAdmins && primaryAdmins.length > 0 && (
             <span className="ps-2">
               (
-              <em className="small">
-                {primaryAdmins.map(admin => (
-                  <React.Fragment key={isRegularObject(admin) ? admin.id : admin}>
-                    {isRegularObject(admin) ? (
-                      <span className="simpleName text-nowrap">
-                        {admin.firstName} {admin.lastName}
-                      </span>
-                    ) : autoloadAuthors ? (
-                      <UsersNameContainer userId={admin} isSimple />
-                    ) : (
-                      <LoadingIcon />
-                    )}
-                  </React.Fragment>
-                ))}
-              </em>
+              {primaryAdmins.length > 2 ? (
+                <OverlayTrigger
+                  placement="bottom"
+                  overlay={
+                    <Popover id={`admins-${id}`}>
+                      <Popover.Header>
+                        <FormattedMessage
+                          id="app.groupTree.treeViewLeaf.adminPopover.title"
+                          defaultMessage="Group administrators"
+                        />
+                        :
+                      </Popover.Header>
+                      <Popover.Body>{adminsList(primaryAdmins, autoloadAuthors, 'd-block')}</Popover.Body>
+                    </Popover>
+                  }>
+                  <em className="small">
+                    <FormattedMessage
+                      id="app.groupTree.treeViewLeaf.adminsCount"
+                      defaultMessage="{count} {count, plural, one {admin} other {admins}}"
+                      values={{ count: primaryAdmins.length }}
+                    />
+                  </em>
+                </OverlayTrigger>
+              ) : (
+                <em className="small">{adminsList(primaryAdmins, autoloadAuthors)}</em>
+              )}
               )
             </span>
           )}
@@ -156,7 +183,7 @@ const GroupsTreeNode = React.memo(
           )}
 
           {buttonsCreator && (
-            <span className="float-end" onClick={clickEventDisipator}>
+            <span className="float-end" onClick={clickEventDissipator}>
               {buttonsCreator(group, selectedGroupId, links)}
             </span>
           )}

src/containers/GroupsTreeContainer/GroupsTreeContainer.js

@@ -68,7 +68,7 @@ const prepareGroupObject = (
 };
 
 /**
- * Prepares plain-js datastructure that could be fed to GroupsTree component.
+ * Prepares plain-js data structure that could be fed to GroupsTree component.
  * With memoization, this is basically a higher-level selector that creates hiarchial augmented group objects.
  */
 const prepareGroupsTree = lruMemoize(

src/containers/UsersNameContainer/UsersNameContainer.js

@@ -32,6 +32,7 @@ class UsersNameContainer extends Component {
       noAvatar = false,
       currentUser,
       isSimple = false,
+      simpleClassName = '',
       showEmail = null,
       showExternalIdentifiers = false,
       showRoleIcon = false,
@@ -45,7 +46,7 @@ class UsersNameContainer extends Component {
         failed={isSimple ? <FailureIcon /> : <FailedUsersName size={size} />}>
         {(user, currentUser) =>
           isSimple ? (
-            <span className="simpleName text-nowrap">
+            <span className={`${simpleClassName} simpleName text-nowrap`}>
               {user.name.firstName} {user.name.lastName}
             </span>
           ) : (
@@ -76,6 +77,7 @@ UsersNameContainer.propTypes = {
   link: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.bool]),
   noAvatar: PropTypes.bool,
   isSimple: PropTypes.bool,
+  simpleClassName: PropTypes.string,
   showEmail: PropTypes.string,
   showExternalIdentifiers: PropTypes.bool,
   showRoleIcon: PropTypes.bool,

src/locales/cs.json

@@ -1128,6 +1128,8 @@
   "app.groupStudents.privateStats": "Administrátor skupiny omezil přístup k výsledkům studentů. Z toho důvodu můžete vidět pouze vlastní výsledky, nikoli výsledky ostatních studentů.",
   "app.groupStudents.studentsResultsTable": "Studenti a jejich výsledky",
   "app.groupStudents.title": "Studenti ve skupině",
+  "app.groupTree.treeViewLeaf.adminPopover.title": "Administrátoři skupiny",
+  "app.groupTree.treeViewLeaf.adminsCount": "{count} {count, plural, one {administrátor} =2 {administrátoři} =3 {administrátoři} =4 {administrátoři} other {administrátorů}}",
   "app.groupTree.treeViewLeaf.archivedTooltip": "Tato skupina byla odsunuta do archivu",
   "app.groupTree.treeViewLeaf.examTooltip": "Zkoušková skupina",
   "app.groupTree.treeViewLeaf.organizationalTooltip": "Skupina je organizační (nemá žádné studenty ani zadané úlohy)",
@@ -2126,4 +2128,4 @@
   "recodex-judge-shuffle-all": "Sudí neuspořádaných tokenů a řádků",
   "recodex-judge-shuffle-newline": "Sudí neuspořádaných tokenů (ignorující konce řádků)",
   "recodex-judge-shuffle-rows": "Sudí neuspořádaných řádků"
-}
+}

src/locales/en.json

@@ -1128,6 +1128,8 @@
   "app.groupStudents.privateStats": "The admin of the group has restricted the access to the results of students. Therefore, you can see only your own results, not the results of other students.",
   "app.groupStudents.studentsResultsTable": "Students and Their Results",
   "app.groupStudents.title": "Group Students",
+  "app.groupTree.treeViewLeaf.adminPopover.title": "Group administrators",
+  "app.groupTree.treeViewLeaf.adminsCount": "{count} {count, plural, one {admin} other {admins}}",
   "app.groupTree.treeViewLeaf.archivedTooltip": "The group is archived",
   "app.groupTree.treeViewLeaf.examTooltip": "Exam group",
   "app.groupTree.treeViewLeaf.organizationalTooltip": "The group is organizational (it does not have any students or assignments)",
@@ -2126,4 +2128,4 @@
   "recodex-judge-shuffle-all": "Unordered-tokens-and-rows judge",
   "recodex-judge-shuffle-newline": "Unordered-tokens judge (ignoring ends of lines)",
   "recodex-judge-shuffle-rows": "Unordered-rows judge"
-}
+}