Merge pull request #1578 from matrix-org/luke/groups-admin-badges

Indicate admins in the group member list with a sheriff badge

src/components/views/groups/GroupMemberTile.js

@@ -61,9 +61,9 @@ export default withMatrixClient(React.createClass({
         );
 
         return (
-            <EntityTile presenceState="online"
-                avatarJsx={av} onClick={this.onClick}
-                name={name} powerLevel={0} suppressOnHover={true}
+            <EntityTile name={name} avatarJsx={av} onClick={this.onClick}
+                suppressOnHover={true} presenceState="online"
+                powerStatus={this.props.member.isAdmin ? EntityTile.POWER_STATUS_ADMIN : null}
             />
         );
     },

src/components/views/rooms/EntityTile.js

@@ -47,7 +47,7 @@ function presenceClassForMember(presenceState, lastActiveAgo) {
     }
 }
 
-module.exports = React.createClass({
+const EntityTile = React.createClass({
     displayName: 'EntityTile',
 
     propTypes: {
@@ -140,16 +140,19 @@ module.exports = React.createClass({
         }
 
         let power;
-        const powerLevel = this.props.powerLevel;
-        if (powerLevel >= 50 && powerLevel < 99) {
-            power = <img src="img/mod.svg" className="mx_EntityTile_power" width="16" height="17" alt={_t("Moderator")} />;
-        }
-        if (powerLevel >= 99) {
-            power = <img src="img/admin.svg" className="mx_EntityTile_power" width="16" height="17" alt={_t("Admin")} />;
+        const powerStatus = this.props.powerStatus;
+        if (powerStatus) {
+            const src = {
+                [EntityTile.POWER_STATUS_MODERATOR]: "img/mod.svg",
+                [EntityTile.POWER_STATUS_ADMIN]: "img/admin.svg",
+            }[powerStatus];
+            const alt = {
+                [EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"),
+                [EntityTile.POWER_STATUS_ADMIN]: _t("Admin"),
+            }[powerStatus];
+            power = <img src={src} className="mx_EntityTile_power" width="16" height="17" alt={alt} />;
         }
 
-
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
 
         const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
@@ -168,3 +171,9 @@ module.exports = React.createClass({
         );
     },
 });
+
+EntityTile.POWER_STATUS_MODERATOR = "moderator";
+EntityTile.POWER_STATUS_ADMIN = "admin";
+
+
+export default EntityTile;

src/components/views/rooms/MemberTile.js

@@ -86,13 +86,19 @@ module.exports = React.createClass({
         }
         this.member_last_modified_time = member.getLastModifiedTime();
 
+        // We deliberately leave power levels that are not 100 or 50 undefined
+        const powerStatus = {
+            100: EntityTile.POWER_STATUS_ADMIN,
+            50: EntityTile.POWER_STATUS_MODERATOR,
+        }[this.props.member.powerLevel];
+
         return (
             <EntityTile {...this.props} presenceState={presenceState}
                 presenceLastActiveAgo={member.user ? member.user.lastActiveAgo : 0}
                 presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
                 presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
                 avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
-                name={name} powerLevel={this.props.member.powerLevel} />
+                name={name} powerStatus={powerStatus} />
         );
     },
 });

src/groups.js

@@ -36,6 +36,7 @@ export function groupMemberFromApiObject(apiObject) {
         userId: apiObject.user_id,
         displayname: apiObject.displayname,
         avatarUrl: apiObject.avatar_url,
+        isAdmin: apiObject.is_admin,
     };
 }