Updated UI in conversation to support user blocking behaviour.

_locales/en/messages.json

@@ -1619,5 +1619,11 @@
         "example": "Bob"
       }
     }
+  },
+  "blockUser": {
+    "message": "Block user"
+  },
+  "unblockUser": {
+    "message": "Unblock user"
   }
 }

js/models/blockedNumbers.js

@@ -86,7 +86,7 @@
       return m.get('number');
     },
     getNumber(number) {
-      return this.model.find(m => m.number === number);
+      return this.models.find(m => m.number === number);
     },
   });
   

js/models/conversations.js

@@ -1,6 +1,6 @@
 /* global _: false */
 /* global Backbone: false */
-/* global libphonenumber: false */
+/* global BlockedNumberController: false */
 
 /* global ConversationController: false */
 /* global libsignal: false */
@@ -147,7 +147,17 @@
     isMe() {
       return this.id === this.ourNumber;
     },
-
+    isBlocked() {
+      return BlockedNumberController.isBlocked(this.id);
+    },
+    block() {
+      BlockedNumberController.block(this.id);
+      this.trigger('change');
+    },
+    unblock() {
+      BlockedNumberController.unblock(this.id);
+      this.trigger('change');
+    },
     async cleanup() {
       await window.Signal.Types.Conversation.deleteExternalFiles(
         this.attributes,
@@ -280,6 +290,7 @@
         unreadCount: this.get('unreadCount') || 0,
         isSelected: this.isSelected,
         showFriendRequestIndicator: this.pendingFriendRequest,
+        isBlocked: this.isBlocked(),
         lastMessage: {
           status: this.lastMessageStatus,
           text: this.lastMessage,

js/views/conversation_view.js

@@ -7,6 +7,7 @@
 /* global Signal: false */
 /* global storage: false */
 /* global Whisper: false */
+/* global BlockNumberConversation: false */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -170,6 +171,7 @@
           isVerified: this.model.isVerified(),
           isKeysPending: this.model.isKeyExchangeCompleted() === false,
           isMe: this.model.isMe(),
+          isBlocked: this.model.isBlocked(),
           isGroup: !this.model.isPrivate(),
           expirationSettingName,
           showBackButton: Boolean(this.panels && this.panels.length),
@@ -200,6 +202,13 @@
             this.resetPanel();
             this.updateHeader();
           },
+
+          onBlockUser: () => {
+            this.model.block();
+          },
+          onUnblockUser:  () => {
+            this.model.unblock();
+          },
         };
       };
       this.titleView = new Whisper.ReactWrapperView({

stylesheets/_modules.scss

@@ -1831,6 +1831,11 @@
   border-left: 4px solid $color-conversation-indigo;
 }
 
+.module-conversation-list-item--is-blocked {
+  padding-left: 12px;
+  border-left: 4px solid $color-conversation-red;
+}
+
 .module-conversation-list-item--is-selected {
   background-color: $color-gray-05;
 }

stylesheets/_theme_dark.scss

@@ -1269,6 +1269,10 @@ body.dark-theme {
     border-left: 4px solid $color-conversation-indigo;
   }
 
+  .module-conversation-list-item--is-blocked {
+    border-left: 4px solid $color-conversation-red;
+  }
+
   .module-conversation-list-item--is-selected {
     background-color: $color-dark-70;
   }

ts/components/ConversationListItem.tsx

@@ -24,6 +24,7 @@ interface Props {
     text: string;
   };
   showFriendRequestIndicator?: boolean;
+  isBlocked: boolean;
 
   i18n: Localizer;
   onClick?: () => void;
@@ -157,7 +158,7 @@ export class ConversationListItem extends React.Component<Props> {
   }
 
   public render() {
-    const { unreadCount, onClick, isSelected, showFriendRequestIndicator } = this.props;
+    const { unreadCount, onClick, isSelected, showFriendRequestIndicator, isBlocked } = this.props;
 
     return (
       <div
@@ -167,7 +168,8 @@ export class ConversationListItem extends React.Component<Props> {
           'module-conversation-list-item',
           unreadCount > 0 ? 'module-conversation-list-item--has-unread' : null,
           isSelected ? 'module-conversation-list-item--is-selected' : null,
-          showFriendRequestIndicator ? 'module-conversation-list-item--has-friend-request' : null
+          showFriendRequestIndicator ? 'module-conversation-list-item--has-friend-request' : null,
+          isBlocked ? 'module-conversation-list-item--is-blocked' : null,
         )}
       >
         {this.renderAvatar()}

ts/components/conversation/ConversationHeader.tsx

@@ -30,6 +30,7 @@ interface Props {
   color: string;
 
   avatarPath?: string;
+  isBlocked: boolean;
   isMe: boolean;
   isGroup: boolean;
   expirationSettingName?: string;
@@ -44,6 +45,9 @@ interface Props {
   onShowAllMedia: () => void;
   onShowGroupMembers: () => void;
   onGoBack: () => void;
+
+  onBlockUser: () => void;
+  onUnblockUser: () => void;
 }
 
 export class ConversationHeader extends React.Component<Props> {
@@ -182,6 +186,7 @@ export class ConversationHeader extends React.Component<Props> {
   public renderMenu(triggerId: string) {
     const {
       i18n,
+      isBlocked,
       isMe,
       isGroup,
       onDeleteMessages,
@@ -191,10 +196,15 @@ export class ConversationHeader extends React.Component<Props> {
       onShowGroupMembers,
       onShowSafetyNumber,
       timerOptions,
+      onBlockUser,
+      onUnblockUser,
     } = this.props;
 
     const disappearingTitle = i18n('disappearingMessages') as any;
 
+    const blockTitle = isBlocked ? i18n('unblockUser') : i18n('blockUser');
+    const blockHandler = isBlocked ? onUnblockUser : onBlockUser;
+
     return (
       <ContextMenu id={triggerId}>
         <SubMenu title={disappearingTitle}>
@@ -223,6 +233,10 @@ export class ConversationHeader extends React.Component<Props> {
         {!isGroup ? (
           <MenuItem onClick={onResetSession}>{i18n('resetSession')}</MenuItem>
         ) : null}
+        {/* Only show the block on other conversations */}
+        {!isMe ? (
+          <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>
+        ) : null}
         <MenuItem onClick={onDeleteMessages}>{i18n('deleteMessages')}</MenuItem>
       </ContextMenu>
     );