AccountDetails: Add user's role in the profile

The user's profile wasn't diplaying the user's
role which could either be "Owner",
"Moderator", "Admin", "Member" or "Guest".
Now the role is displayed.

Fixes: zulip#5534
Co-authored-by: Chris Bobbe <[email protected]>

Author: 2 people

src/account-info/AccountDetails.js

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 
 import Emoji from '../emoji/Emoji';
 import { emojiTypeFromReactionType } from '../emoji/data';
-import type { UserOrBot } from '../types';
+import type { LocalizableText, UserOrBot } from '../types';
 import styles, { createStyleSheet } from '../styles';
 import { useSelector } from '../react-redux';
 import UserAvatar from '../common/UserAvatar';
@@ -14,6 +14,10 @@ import ZulipText from '../common/ZulipText';
 import { getUserStatus } from '../user-statuses/userStatusesModel';
 import PresenceStatusIndicator from '../common/PresenceStatusIndicator';
 import { getDisplayEmailForUser } from '../selectors';
+import { Role } from '../api/permissionsTypes';
+import ZulipTextIntl from '../common/ZulipTextIntl';
+import { getOwnUserId } from '../users/userSelectors';
+import { getOwnUserRole } from '../permissionSelectors';
 
 const componentStyles = createStyleSheet({
   componentListItem: {
@@ -42,6 +46,21 @@ type Props = $ReadOnly<{|
   showEmail: boolean,
 |}>;
 
+const getRoleText = (role: Role): LocalizableText => {
+  switch (role) {
+    case Role.Owner:
+      return 'Owner';
+    case Role.Admin:
+      return 'Admin';
+    case Role.Moderator:
+      return 'Moderator';
+    case Role.Member:
+      return 'Member';
+    case Role.Guest:
+      return 'Guest';
+  }
+};
+
 export default function AccountDetails(props: Props): Node {
   const { user, showEmail } = props;
 
@@ -51,6 +70,16 @@ export default function AccountDetails(props: Props): Node {
   );
   const realm = useSelector(state => state.realm);
   const displayEmail = getDisplayEmailForUser(realm, user);
+  const ownUserId = useSelector(getOwnUserId);
+  const ownUserRole = useSelector(getOwnUserRole);
+
+  // user.role will be missing when the server has feature level <59. For
+  // those old servers, we can use getOwnUserRole for the "own" (or "self")
+  // user's role, but nothing will give us the role of a non-"own" user, so
+  // we just won't show any role in that case.
+  // TODO(server-4.0): user.role will never be missing; use that for "own"
+  //   and non-"own" users.
+  const role = user.user_id === ownUserId ? ownUserRole : user.role;
 
   return (
     <ComponentList outerSpacing itemStyle={componentStyles.componentListItem}>
@@ -79,6 +108,14 @@ export default function AccountDetails(props: Props): Node {
           />
         </View>
       )}
+      {
+        // TODO(server-4.0): Remove conditional; we'll always know the role.
+        role != null && (
+          <View>
+            <ZulipTextIntl selectable style={styles.largerText} text={getRoleText(role)} />
+          </View>
+        )
+      }
       <View style={componentStyles.statusWrapper}>
         {userStatusEmoji && (
           <Emoji

static/translations/messages_en.json

@@ -351,5 +351,10 @@
   "Copy link to stream": "Copy link to stream",
   "Failed to copy stream link": "Failed to copy stream link",
   "A stream with this name already exists.": "A stream with this name already exists.",
-  "Streams": "Streams"
+  "Streams": "Streams",
+  "Owner": "Owner",
+  "Admin": "Admin",
+  "Moderator": "Moderator",
+  "Member": "Member",
+  "Guest": "Guest"
 }