Merge pull request #1332 from Bilb/message-detail-view-fixes

js/models/messages.js

@@ -836,7 +836,7 @@
 
       return Boolean(lookup[contactId]);
     },
-    getPropsForMessageDetail() {
+    async getPropsForMessageDetail() {
       const newIdentity = i18n('newIdentity');
       const OUTGOING_KEY_ERROR = 'OutgoingIdentityKeyError';
 
@@ -872,8 +872,8 @@
       //   that contact. Otherwise, it will be a standalone entry.
       const errors = _.reject(allErrors, error => Boolean(error.number));
       const errorsGroupedById = _.groupBy(allErrors, 'number');
-      const primaryDevicePubKey = this.get('conversationId');
+      const finalContacts = await Promise.all(
-      const finalContacts = (phoneNumbers || []).map(id => {
+        (phoneNumbers || []).map(async id => {
           const errorsForContact = errorsGroupedById[id];
           const isOutgoingKeyError = Boolean(
             _.find(errorsForContact, error => error.name === OUTGOING_KEY_ERROR)
@@ -881,8 +881,11 @@
           const isUnidentifiedDelivery =
             storage.get('unidentifiedDeliveryIndicators') &&
             this.isUnidentifiedDelivery(id, unidentifiedLookup);
+          const primary = await window.libsession.Protocols.MultiDeviceProtocol.getPrimaryDevice(
+            id
+          );
 
-        const isPrimaryDevice = id === primaryDevicePubKey;
+          const isPrimaryDevice = id === primary.key;
 
           const contact = this.findAndFormatContact(id);
           const profileName = isPrimaryDevice
@@ -904,7 +907,8 @@
             onShowSafetyNumber: () =>
               this.trigger('show-identity', this.findContact(id)),
           };
-      });
+        })
+      );
 
       // The prefix created here ensures that contacts with errors are listed
       //   first; otherwise it's alphabetical

js/views/conversation_view.js

@@ -1496,14 +1496,14 @@
       Signal.Backbone.Views.Lightbox.show(this.lightboxGalleryView.el);
     },
 
-    showMessageDetail(message) {
+    async showMessageDetail(message) {
       const onClose = () => {
         this.stopListening(message, 'change', update);
         this.resetPanel();
         this.updateHeader();
       };
 
-      const props = message.getPropsForMessageDetail();
+      const props = await message.getPropsForMessageDetail();
       const view = new Whisper.ReactWrapperView({
         className: 'message-detail-wrapper',
         Component: Signal.Components.MessageDetail,
@@ -1511,7 +1511,8 @@
         onClose,
       });
 
-      const update = () => view.update(message.getPropsForMessageDetail());
+      const update = async () =>
+        view.update(await message.getPropsForMessageDetail());
       this.listenTo(message, 'change', update);
       this.listenTo(message, 'expired', onClose);
       // We could listen to all involved contacts, but we'll call that overkill

stylesheets/_modules.scss

@@ -1224,7 +1224,7 @@
 }
 
 .module-message-detail__contact-container {
-  margin: 20px;
+  margin: 20px 0 20px 0;
 }
 
 .module-message-detail__contact {