ui: Show "(guest)" indicator on guest users' names, when realm settin…

…g on Fixes: #5804
zulip · Jan 5, 2024 · 9171d7d · 9171d7d
1 parent ee39d54
commit 9171d7d
Show file tree

Hide file tree

Showing 23 changed files with 464 additions and 39 deletions.
diff --git a/src/__tests__/lib/exampleData.js b/src/__tests__/lib/exampleData.js
@@ -131,6 +131,7 @@ type UserOrBotPropertiesArgs = {|
   email?: string,
   full_name?: string,
   avatar_url?: AvatarURL,
+  role?: Role,
 |};
 
 /**
@@ -161,7 +162,7 @@ const userOrBotProperties = (args: UserOrBotPropertiesArgs) => {
 
     email: args.email ?? `${randName}@example.org`,
     full_name: args.full_name ?? `${randName} User`,
-    role: Role.Member,
+    role: args.role ?? Role.Member,
     timezone: 'UTC',
     user_id,
   });

diff --git a/src/account-info/AccountDetails.js b/src/account-info/AccountDetails.js
@@ -16,7 +16,7 @@ import PresenceStatusIndicator from '../common/PresenceStatusIndicator';
 import { getDisplayEmailForUser } from '../selectors';
 import { Role } from '../api/permissionsTypes';
 import ZulipTextIntl from '../common/ZulipTextIntl';
-import { getFullNameText } from '../users/userSelectors';
+import { getFullNameReactText } from '../users/userSelectors';
 
 const componentStyles = createStyleSheet({
   componentListItem: {
@@ -69,6 +69,7 @@ export default function AccountDetails(props: Props): Node {
     state => getUserStatus(state, props.user.user_id).status_emoji,
   );
   const realm = useSelector(state => state.realm);
+  const { enableGuestUserIndicator } = realm;
   const displayEmail = getDisplayEmailForUser(realm, user);
 
   return (
@@ -86,7 +87,7 @@ export default function AccountDetails(props: Props): Node {
         <ZulipTextIntl
           selectable
           style={[styles.largerText, componentStyles.boldText]}
-          text={getFullNameText({ user })}
+          text={getFullNameReactText({ user, enableGuestUserIndicator })}
         />
       </View>
       {displayEmail !== null && showEmail && (

diff --git a/src/account-info/AccountDetailsScreen.js b/src/account-info/AccountDetailsScreen.js
@@ -18,9 +18,10 @@ import AccountDetails from './AccountDetails';
 import ZulipText from '../common/ZulipText';
 import ActivityText from '../title/ActivityText';
 import { doNarrow } from '../actions';
-import { getFullNameText, getUserIsActive, tryGetUserForId } from '../users/userSelectors';
+import { getFullNameReactText, getUserIsActive, tryGetUserForId } from '../users/userSelectors';
 import { nowInTimeZone } from '../utils/date';
 import CustomProfileFields from './CustomProfileFields';
+import { getRealm } from '../directSelectors';
 
 const styles = createStyleSheet({
   errorText: {
@@ -54,6 +55,7 @@ export default function AccountDetailsScreen(props: Props): Node {
   const dispatch = useDispatch();
   const user = useSelector(state => tryGetUserForId(state, props.route.params.userId));
   const isActive = useSelector(state => getUserIsActive(state, props.route.params.userId));
+  const enableGuestUserIndicator = useSelector(state => getRealm(state).enableGuestUserIndicator);
 
   const handleChatPress = useCallback(() => {
     invariant(user, 'Callback handleChatPress is used only if user is known');
@@ -80,7 +82,7 @@ export default function AccountDetailsScreen(props: Props): Node {
   }
 
   return (
-    <Screen title={getFullNameText({ user })}>
+    <Screen title={getFullNameReactText({ user, enableGuestUserIndicator })}>
       <AccountDetails user={user} showEmail showStatus />
       <View style={styles.itemWrapper}>
         <ActivityText style={globalStyles.largerText} user={user} />

diff --git a/src/action-sheets/index.js b/src/action-sheets/index.js
@@ -999,10 +999,16 @@ export const showPmConversationActionSheet = (args: {|
     navigation: AppNavigationMethods,
     _: GetText,
   |},
-  backgroundData: $ReadOnly<{ ownUser: User, allUsersById: Map<UserId, UserOrBot>, ... }>,
+  backgroundData: $ReadOnly<{
+    ownUser: User,
+    allUsersById: Map<UserId, UserOrBot>,
+    enableGuestUserIndicator: boolean,
+    ...
+  }>,
   pmKeyRecipients: PmKeyRecipients,
 |}): void => {
   const { showActionSheetWithOptions, callbacks, backgroundData, pmKeyRecipients } = args;
+  const { enableGuestUserIndicator } = backgroundData;
   showActionSheet({
     showActionSheetWithOptions,
     // TODO(ios-14.5): Check for Intl.ListFormat support in all environments
@@ -1012,7 +1018,7 @@ export const showPmConversationActionSheet = (args: {|
       .map(userId => {
         const user = backgroundData.allUsersById.get(userId);
         invariant(user, 'allUsersById incomplete; could not show PM action sheet');
-        return callbacks._(getFullNameText({ user }));
+        return callbacks._(getFullNameText({ user, enableGuestUserIndicator }));
       })
       .sort()
       .join(', '),

diff --git a/src/compose/ComposeBox.js b/src/compose/ComposeBox.js
@@ -196,7 +196,7 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
   const stream = useSelector(state => getStreamInNarrow(state, props.narrow));
   const streamsById = useSelector(getStreamsById);
   const videoChatProvider = useSelector(getVideoChatProvider);
-  const mandatoryTopics = useSelector(state => getRealm(state).mandatoryTopics);
+  const { mandatoryTopics, enableGuestUserIndicator } = useSelector(getRealm);
 
   const mentionWarnings = React.useRef<React$ElementRef<typeof MentionWarnings> | null>(null);
 
@@ -714,7 +714,14 @@ const ComposeBox: React$AbstractComponent<Props, ImperativeHandle> = forwardRef(
     return <AnnouncementOnly />;
   }
 
-  const placeholder = getComposeInputPlaceholder(narrow, ownUserId, allUsersById, streamsById, _);
+  const placeholder = getComposeInputPlaceholder(
+    narrow,
+    ownUserId,
+    allUsersById,
+    streamsById,
+    enableGuestUserIndicator,
+    _,
+  );
 
   const SubmitButtonIcon = isEditing ? IconDone : IconSend;
 

diff --git a/src/compose/MentionWarnings.js b/src/compose/MentionWarnings.js
@@ -14,6 +14,7 @@ import { showToast } from '../utils/info';
 import MentionedUserNotSubscribed from '../message/MentionedUserNotSubscribed';
 import { makeUserId } from '../api/idTypes';
 import { getFullNameText } from '../users/userSelectors';
+import { getRealm } from '../directSelectors';
 
 type Props = $ReadOnly<{|
   narrow: Narrow,
@@ -43,6 +44,7 @@ function MentionWarningsInner(props: Props, ref): Node {
 
   const auth = useSelector(getAuth);
   const allUsersById = useSelector(getAllUsersById);
+  const enableGuestUserIndicator = useSelector(state => getRealm(state).enableGuestUserIndicator);
 
   const [unsubscribedMentions, setUnsubscribedMentions] = useState<$ReadOnlyArray<UserId>>([]);
 
@@ -87,11 +89,11 @@ function MentionWarningsInner(props: Props, ref): Node {
     (mentionedUser: UserOrBot) => {
       showToast(
         _('Couldn’t load information about {fullName}', {
-          fullName: _(getFullNameText({ user: mentionedUser })),
+          fullName: _(getFullNameText({ user: mentionedUser, enableGuestUserIndicator })),
         }),
       );
     },
-    [_],
+    [enableGuestUserIndicator, _],
   );
 
   useImperativeHandle(

diff --git a/src/compose/__tests__/getComposeInputPlaceholder-test.js b/src/compose/__tests__/getComposeInputPlaceholder-test.js
@@ -24,6 +24,7 @@ describe('getComposeInputPlaceholder', () => {
       ownUserId,
       usersById,
       streamsById,
+      false,
       mock_,
     );
     expect(placeholder).toEqual({
@@ -39,6 +40,7 @@ describe('getComposeInputPlaceholder', () => {
       ownUserId,
       usersById,
       streamsById,
+      false,
       mock_,
     );
     expect(placeholder).toEqual({ text: 'Jot down something' });
@@ -51,6 +53,7 @@ describe('getComposeInputPlaceholder', () => {
       ownUserId,
       usersById,
       streamsById,
+      false,
       mock_,
     );
     expect(placeholder).toEqual({
@@ -66,6 +69,7 @@ describe('getComposeInputPlaceholder', () => {
       ownUserId,
       usersById,
       streamsById,
+      false,
       mock_,
     );
     expect(placeholder).toEqual({ text: 'Reply' });
@@ -78,6 +82,7 @@ describe('getComposeInputPlaceholder', () => {
       ownUserId,
       usersById,
       streamsById,
+      false,
       mock_,
     );
     expect(placeholder).toEqual({ text: 'Message group' });

diff --git a/src/compose/getComposeInputPlaceholder.js b/src/compose/getComposeInputPlaceholder.js
@@ -8,6 +8,7 @@ export default (
   ownUserId: UserId,
   allUsersById: Map<UserId, UserOrBot>,
   streamsById: Map<number, Stream>,
+  enableGuestUserIndicator: boolean,
   _: GetText,
 ): LocalizableText =>
   caseNarrowDefault(
@@ -30,7 +31,7 @@ export default (
 
         return {
           text: 'Message {recipient}',
-          values: { recipient: _(getFullNameText({ user })) },
+          values: { recipient: _(getFullNameText({ user, enableGuestUserIndicator })) },
         };
       },
       stream: streamId => {

diff --git a/src/lightbox/LightboxHeader.js b/src/lightbox/LightboxHeader.js
@@ -10,7 +10,8 @@ import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import { Icon } from '../common/Icons';
 import { OfflineNoticePlaceholder } from '../boot/OfflineNoticeProvider';
 import { useSelector } from '../react-redux';
-import { getFullNameText, tryGetUserForId } from '../users/userSelectors';
+import { getFullNameReactText, tryGetUserForId } from '../users/userSelectors';
+import { getRealm } from '../directSelectors';
 import type { Message } from '../api/modelTypes';
 import ZulipText from '../common/ZulipText';
 import ZulipTextIntl from '../common/ZulipTextIntl';
@@ -58,6 +59,7 @@ export default function LightboxHeader(props: Props): Node {
   const subheader = `${displayDate} at ${time}`;
 
   const sender = useSelector(state => tryGetUserForId(state, senderId));
+  const enableGuestUserIndicator = useSelector(state => getRealm(state).enableGuestUserIndicator);
 
   return (
     <SafeAreaView mode="padding" edges={['top']}>
@@ -69,7 +71,7 @@ export default function LightboxHeader(props: Props): Node {
             <ZulipTextIntl
               style={styles.name}
               numberOfLines={1}
-              text={getFullNameText({ user: sender })}
+              text={getFullNameReactText({ user: sender, enableGuestUserIndicator })}
             />
           ) : (
             <ZulipText style={styles.name} numberOfLines={1} text={message.sender_full_name} />

diff --git a/src/message/MentionedUserNotSubscribed.js b/src/message/MentionedUserNotSubscribed.js
@@ -12,7 +12,8 @@ import ZulipButton from '../common/ZulipButton';
 import ZulipTextIntl from '../common/ZulipTextIntl';
 import { getAuth } from '../selectors';
 import { kWarningColor } from '../styles/constants';
-import { getFullNameText } from '../users/userSelectors';
+import { getFullNameReactText } from '../users/userSelectors';
+import { getRealm } from '../directSelectors';
 
 type Props = $ReadOnly<{|
   user: UserOrBot,
@@ -56,6 +57,7 @@ const styles = createStyleSheet({
 export default function MentionedUserNotSubscribed(props: Props): Node {
   const { user, stream, onDismiss } = props;
   const auth = useSelector(getAuth);
+  const enableGuestUserIndicator = useSelector(state => getRealm(state).enableGuestUserIndicator);
 
   const handleDismiss = useCallback(() => {
     onDismiss(user);
@@ -75,7 +77,11 @@ export default function MentionedUserNotSubscribed(props: Props): Node {
             text: '{username} will not be notified unless you subscribe them to this stream.',
             values: {
               username: (
-                <ZulipTextIntl inheritColor inheritFontSize text={getFullNameText({ user })} />
+                <ZulipTextIntl
+                  inheritColor
+                  inheritFontSize
+                  text={getFullNameReactText({ user, enableGuestUserIndicator })}
+                />
               ),
             },
           }}

diff --git a/src/pm-conversations/GroupPmConversationItem.js b/src/pm-conversations/GroupPmConversationItem.js
@@ -12,8 +12,12 @@ import Touchable from '../common/Touchable';
 import UnreadCount from '../common/UnreadCount';
 import { getMutedUsers } from '../selectors';
 import { TranslationContext } from '../boot/TranslationProvider';
-import { getFullNameOrMutedUserText } from '../users/userSelectors';
+import {
+  getFullNameOrMutedUserReactText,
+  getFullNameOrMutedUserText,
+} from '../users/userSelectors';
 import ZulipTextIntl from '../common/ZulipTextIntl';
+import { getRealm } from '../directSelectors';
 
 const componentStyles = createStyleSheet({
   text: {
@@ -43,7 +47,10 @@ export default function GroupPmConversationItem<U: $ReadOnlyArray<UserOrBot>>(
 
   const _ = useContext(TranslationContext);
   const mutedUsers = useSelector(getMutedUsers);
-  const names = users.map(user => _(getFullNameOrMutedUserText({ user, mutedUsers })));
+  const enableGuestUserIndicator = useSelector(state => getRealm(state).enableGuestUserIndicator);
+  const names = users.map(user =>
+    _(getFullNameOrMutedUserText({ user, mutedUsers, enableGuestUserIndicator })),
+  );
 
   const namesReact = [];
   users.forEach((user, i) => {
@@ -57,7 +64,7 @@ export default function GroupPmConversationItem<U: $ReadOnlyArray<UserOrBot>>(
         key={`${user.user_id}`}
         inheritColor
         inheritFontSize
-        text={getFullNameOrMutedUserText({ user, mutedUsers })}
+        text={getFullNameOrMutedUserReactText({ user, mutedUsers, enableGuestUserIndicator })}
       />,
     );
   });

diff --git a/src/title/TitlePrivate.js b/src/title/TitlePrivate.js
@@ -11,9 +11,10 @@ import Touchable from '../common/Touchable';
 import ViewPlaceholder from '../common/ViewPlaceholder';
 import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import ActivityText from './ActivityText';
-import { getFullNameText, tryGetUserForId } from '../users/userSelectors';
+import { getFullNameReactText, tryGetUserForId } from '../users/userSelectors';
 import { useNavigation } from '../react-navigation';
 import ZulipTextIntl from '../common/ZulipTextIntl';
+import { getRealm } from '../directSelectors';
 
 type Props = $ReadOnly<{|
   userId: UserId,
@@ -29,6 +30,7 @@ const componentStyles = createStyleSheet({
 export default function TitlePrivate(props: Props): Node {
   const { userId, color } = props;
   const user = useSelector(state => tryGetUserForId(state, userId));
+  const enableGuestUserIndicator = useSelector(state => getRealm(state).enableGuestUserIndicator);
   const navigation = useNavigation();
   if (!user) {
     return null;
@@ -52,7 +54,7 @@ export default function TitlePrivate(props: Props): Node {
             style={[styles.navTitle, { color }]}
             numberOfLines={1}
             ellipsizeMode="tail"
-            text={getFullNameText({ user })}
+            text={getFullNameReactText({ user, enableGuestUserIndicator })}
           />
           <ActivityText style={[styles.navSubtitle, { color }]} user={user} />
         </View>

diff --git a/src/user-picker/AvatarItem.js b/src/user-picker/AvatarItem.js
@@ -9,8 +9,10 @@ import ComponentWithOverlay from '../common/ComponentWithOverlay';
 import Touchable from '../common/Touchable';
 import { createStyleSheet } from '../styles';
 import { IconCancel } from '../common/Icons';
-import { getFullNameText } from '../users/userSelectors';
+import { getFullNameReactText } from '../users/userSelectors';
 import ZulipTextIntl from '../common/ZulipTextIntl';
+import { useSelector } from '../react-redux';
+import { getRealm } from '../directSelectors';
 
 const styles = createStyleSheet({
   wrapper: {
@@ -40,6 +42,9 @@ type Props = $ReadOnly<{|
  */
 export default function AvatarItem(props: Props): Node {
   const { user, onPress } = props;
+
+  const enableGuestUserIndicator = useSelector(state => getRealm(state).enableGuestUserIndicator);
+
   const handlePress = React.useCallback(() => {
     onPress(user.user_id);
   }, [onPress, user.user_id]);
@@ -57,7 +62,10 @@ export default function AvatarItem(props: Props): Node {
         </ComponentWithOverlay>
       </Touchable>
       <View style={styles.textFrame}>
-        <ZulipTextIntl style={styles.text} text={getFullNameText({ user })} />
+        <ZulipTextIntl
+          style={styles.text}
+          text={getFullNameReactText({ user, enableGuestUserIndicator })}
+        />
       </View>
     </View>
   );