New contact popup when clicking on group member or avatar

js/modules/signal.js

@@ -36,6 +36,9 @@ const {
   ContactDetail,
 } = require('../../ts/components/conversation/ContactDetail');
 const { ContactListItem } = require('../../ts/components/ContactListItem');
+const {
+  ContactModal,
+} = require('../../ts/components/conversation/ContactModal');
 const { Emojify } = require('../../ts/components/conversation/Emojify');
 const { ErrorModal } = require('../../ts/components/ErrorModal');
 const { Lightbox } = require('../../ts/components/Lightbox');
@@ -63,6 +66,9 @@ const { createTimeline } = require('../../ts/state/roots/createTimeline');
 const {
   createCompositionArea,
 } = require('../../ts/state/roots/createCompositionArea');
+const {
+  createContactModal,
+} = require('../../ts/state/roots/createContactModal');
 const {
   createConversationHeader,
 } = require('../../ts/state/roots/createConversationHeader');
@@ -298,6 +304,7 @@ exports.setup = (options = {}) => {
     ConfirmationModal,
     ContactDetail,
     ContactListItem,
+    ContactModal,
     Emojify,
     ErrorModal,
     getCallingNotificationText,
@@ -317,6 +324,7 @@ exports.setup = (options = {}) => {
   const Roots = {
     createCallManager,
     createCompositionArea,
+    createContactModal,
     createConversationHeader,
     createLeftPane,
     createSafetyNumberViewer,

js/views/contact_list_view.js

@@ -18,6 +18,7 @@
         this.ourNumber = textsecure.storage.user.getNumber();
         this.listenBack = options.listenBack;
         this.loading = false;
+        this.conversation = options.conversation;
 
         this.listenTo(this.model, 'change', this.render);
       },
@@ -27,34 +28,23 @@
           this.contactView = null;
         }
 
+        const formattedContact = this.model.format();
+
         this.contactView = new Whisper.ReactWrapperView({
           className: 'contact-wrapper',
           Component: window.Signal.Components.ContactListItem,
           props: {
-            ...this.model.format(),
-            onClick: this.showIdentity.bind(this),
+            ...formattedContact,
+            onClick: () =>
+              this.conversation.trigger(
+                'show-contact-modal',
+                formattedContact.id
+              ),
           },
         });
         this.$el.append(this.contactView.el);
         return this;
       },
-      showIdentity() {
-        if (this.model.isMe() || this.loading) {
-          return;
-        }
-
-        this.loading = true;
-        this.render();
-
-        this.panelView = new Whisper.KeyVerificationPanelView({
-          model: this.model,
-          onLoad: view => {
-            this.loading = false;
-            this.listenBack(view);
-            this.render();
-          },
-        });
-      },
     }),
   });
 })();

js/views/group_member_list_view.js

@@ -21,6 +21,7 @@
         className: 'members',
         toInclude: {
           listenBack: options.listenBack,
+          conversation: options.conversation,
         },
       });
       this.member_list_view.render();