Fix incorrectly showing friend request as pending

_locales/en/messages.json

@@ -2067,5 +2067,13 @@
   "friendsTab": {
     "message": "Friends",
     "description": "friend tab title"
+  },
+  "pending": {
+    "message": "pending",
+    "description": "Indicates that a friend request is pending"
+  },
+  "notFriends": {
+    "message": "not friends",
+    "description": "Indicates that a conversation is not friends with us"
   }
 }

js/views/conversation_view.js

@@ -203,9 +203,9 @@
           profileName: this.model.getProfileName(),
           color: this.model.getColor(),
           avatarPath: this.model.getAvatarPath(),
-
           isVerified: this.model.isVerified(),
-          isKeysPending: !this.model.isFriend(),
+          isFriendRequestPending: this.model.isPendingFriendRequest(),
+          isFriend: this.model.isFriend(),
           isMe: this.model.isMe(),
           isClosable: this.model.isClosable(),
           isBlocked: this.model.isBlocked(),

stylesheets/_modules.scss

@@ -1432,6 +1432,11 @@
   height: 48px;
 }
 
+.module-conversation-header__title-text {
+  color: darkgrey;
+  margin-left: 1em;
+}
+
 .module-conversation-header__title-flex {
   margin-left: auto;
   margin-right: auto;

ts/components/conversation/ConversationHeader.tsx

@@ -37,7 +37,8 @@ interface Props {
   hasNickname?: boolean;
 
   isBlocked: boolean;
-  isKeysPending: boolean;
+  isFriend: boolean;
+  isFriendRequestPending: boolean;
   isOnline?: boolean;
 
   onSetDisappearingMessages: (seconds: number) => void;
@@ -102,7 +103,9 @@ export class ConversationHeader extends React.Component<Props> {
       phoneNumber,
       i18n,
       profileName,
-      isKeysPending,
+      isFriend,
+      isGroup,
+      isFriendRequestPending,
       isMe,
       name,
     } = this.props;
@@ -115,6 +118,18 @@ export class ConversationHeader extends React.Component<Props> {
       );
     }
 
+    let text = '';
+    if (isFriendRequestPending) {
+      text = `(${i18n('pending')})`;
+    } else if (!isFriend && !isGroup) {
+      text = `(${i18n('notFriends')})`;
+    }
+
+    const textEl =
+      text === '' ? null : (
+        <span className="module-conversation-header__title-text">{text}</span>
+      );
+
     return (
       <div className="module-conversation-header__title">
         <ContactName
@@ -123,7 +138,7 @@ export class ConversationHeader extends React.Component<Props> {
           name={name}
           i18n={i18n}
         />
-        {isKeysPending ? '(pending)' : null}
+        {textEl}
       </div>
     );
   }