FIX: Clicking users in Private Messages Map should show card

app/assets/javascripts/discourse/components/d-button.js.es6

@@ -1,5 +1,5 @@
 import { iconHTML } from 'discourse/helpers/fa-icon';
-import computed from 'ember-addons/ember-computed-decorators';
+import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
   tagName: 'button',
@@ -18,6 +18,11 @@ export default Ember.Component.extend({
     if (label) return I18n.t(label);
   },
 
+  @observes('icon')
+  iconChanged() {
+    this.rerender();
+  },
+
   render(buffer) {
     const label = this.get('translatedLabel'),
           icon = this.get('icon');

app/assets/javascripts/discourse/components/topic-map.js.es6

@@ -1,12 +1,3 @@
-/**
-  The topic map underneath the first post of a topic.
-
-  @class TopicMapComponent
-  @extends Ember.Component
-  @namespace Discourse
-  @module Discourse
-**/
-
 var LINKS_SHOWN = 5;
 
 export default Ember.Component.extend({
@@ -25,7 +16,7 @@ export default Ember.Component.extend({
   showPosterAvatar: Em.computed.gt('topic.posts_count', 2),
 
   toggleMapClass: function() {
-    return this.get('mapCollapsed') ? 'fa fa-chevron-down' : 'fa fa-chevron-up';
+    return this.get('mapCollapsed') ? 'chevron-down' : 'chevron-up';
   }.property('mapCollapsed'),
 
   showAllLinksControls: function() {

app/assets/javascripts/discourse/components/topic-participant.js.es6

@@ -8,8 +8,8 @@ export default Ember.Component.extend({
   }.property('postStream.userFilters.[]'),
 
   actions: {
-    toggle: function() {
-      var postStream = this.get('postStream');
+    toggle() {
+      const postStream = this.get('postStream');
       if (postStream) {
         postStream.toggleParticipant(this.get('participant.username'));
       }

app/assets/javascripts/discourse/components/who-liked.js.es6

@@ -20,6 +20,8 @@ export default Ember.Component.extend(StringBuffer, {
       });
       buffer.push(I18n.t('post.actions.people.like',{icons: iconsHtml}));
       buffer.push("</div>");
+    } else {
+      buffer.push("<span></span>");
     }
   }
 });

app/assets/javascripts/discourse/lib/url.js.es6

@@ -37,7 +37,7 @@ const DiscourseURL = Ember.Object.createWithMixins({
       const lockon = new LockOn(holderId, {offsetCalculator: offset});
       const holder = $(holderId);
 
-      if(holder.length > 0 && opts && opts.skipIfOnScreen){
+      if (holder.length > 0 && opts && opts.skipIfOnScreen){
 
         // if we are on screen skip
         const elementTop = lockon.elementTop(),

app/assets/javascripts/discourse/templates/components/private-message-map.hbs

@@ -1,20 +1,20 @@
-<h3><i class='fa fa-envelope'></i> {{i18n 'private_message_info.title'}}</h3>
+<h3>{{fa-icon "envelope"}} {{i18n 'private_message_info.title'}}</h3>
 <div class='participants clearfix'>
-  {{#each ag in details.allowed_groups}}
+  {{#each details.allowed_groups as |ag|}}
     <div class='user group'>
       #{{unbound ag.name}}
     </div>
   {{/each}}
-  {{#each au in details.allowed_users}}
+  {{#each details.allowed_users as |au|}}
     <div class='user'>
-      {{#link-to 'user' au}}
+      {{#user-link user=au}}
         {{avatar au imageSize="small"}}
-      {{/link-to}}
-      {{#link-to 'user' au}}
+      {{/user-link}}
+      {{#user-link user=au}}
         {{unbound au.username}}
-      {{/link-to}}
-      {{#if au.details.can_remove_allowed_users}}
-        <a class='remove-invited' {{action "removeAllowedUser" au}}><i class="fa fa-times"></i></a>
+      {{/user-link}}
+      {{#if details.can_remove_allowed_users}}
+        <a href class='remove-invited' {{action "removeAllowedUser" au}}>{{fa-icon "times"}}</a>
       {{/if}}
     </div>
   {{/each}}

app/assets/javascripts/discourse/templates/components/topic-map.hbs

@@ -1,10 +1,8 @@
 <nav class='buttons'>
-  <button class='btn' {{action "toggleMap"}} title="{{i18n 'topic.toggle_information'}}">
-    <i {{bind-attr class=":fa toggleMapClass"}}></i>
-  </button>
+  {{d-button action="toggleMap" title="topic.toggle_information" icon=toggleMapClass}}
 </nav>
 
-<section {{bind-attr class=":map mapCollapsed"}}>
+<section class="map {{if mapCollapsed 'map-collapsed'}}">
   <ul class="clearfix">
     <li>
       <a href='{{unbound topic.url}}'>
@@ -45,8 +43,8 @@
       </li>
     {{/if}}
     {{#if showPosterAvatar}}
-      <li {{bind-attr class=":avatars mapCollapsed::hidden"}}>
-        {{#each p in details.fewParticipants}}
+      <li class="avatars {{unless mapCollapsed 'hidden'}}">
+        {{#each details.fewParticipants as |p|}}
           {{topic-participant participant=p}}
         {{/each}}
       </li>
@@ -57,35 +55,35 @@
 {{#unless mapCollapsed}}
   <section class='avatars clearfix'>
     <h3>{{i18n 'topic_map.participants_title'}}</h3>
-    {{#each p in details.participants}}
+    {{#each details.participants as |p|}}
       {{topic-participant participant=p}}
     {{/each}}
   </section>
 
   {{#if infoLinks}}
     <section class='links'>
-        <h3>{{i18n 'topic_map.links_title'}}</h3>
-        <table class='topic-links'>
-          {{#each infoLinks as |link|}}
-            <tr>
-            <td>
-              <span class='badge badge-notification clicks' title='{{i18n 'topic_map.clicks' count=link.clicks}}'>{{link.clicks}}</span>
-            </td>
-            <td>
-              <a href="{{unbound link.url}}" target="_blank" class='topic-link track-link {{if link.attachment "attachment"}}' data-user-id="{{unbound link.user_id}}" data-ignore-post-id="true" title="{{unbound link.url}}">
-                {{#if link.title}}{{link.title}}{{else}}{{shorten-url link.url}}{{/if}}
-              </a>
-              {{link-domain link}}
-            </td>
-            </tr>
-          {{/each}}
-        </table>
+      <h3>{{i18n 'topic_map.links_title'}}</h3>
+      <table class='topic-links'>
+        {{#each infoLinks as |link|}}
+          <tr>
+          <td>
+            <span class='badge badge-notification clicks' title='{{i18n 'topic_map.clicks' count=link.clicks}}'>{{link.clicks}}</span>
+          </td>
+          <td>
+            <a href="{{unbound link.url}}" target="_blank" class='topic-link track-link {{if link.attachment "attachment"}}' data-user-id="{{unbound link.user_id}}" data-ignore-post-id="true" title="{{unbound link.url}}">
+              {{#if link.title}}{{link.title}}{{else}}{{shorten-url link.url}}{{/if}}
+            </a>
+            {{link-domain link}}
+          </td>
+          </tr>
+        {{/each}}
+      </table>
 
-        {{#if showAllLinksControls}}
-          <div class='link-summary'>
-            <a href {{action "showAllLinks"}}>{{i18n 'topic_map.links_shown' totalLinks=details.links.length}}</a>
-          </div>
-        {{/if}}
+      {{#if showAllLinksControls}}
+        <div class='link-summary'>
+          <a href {{action "showAllLinks"}}>{{i18n 'topic_map.links_shown' totalLinks=details.links.length}}</a>
+        </div>
+      {{/if}}
 
     </section>
   {{/if}}

app/assets/javascripts/discourse/templates/components/topic-participant.hbs

@@ -1,4 +1,4 @@
-<a href {{bind-attr class=":poster toggled"}} {{action "toggle"}} title="{{unbound participant.username}}">
+<a href {{bind-attr class=":poster toggled"}} {{action "toggle"}} title={{unbound participant.username}}>
   {{#if showPostCount}}
     <span class='post-count'>{{unbound participant.post_count}}</span>
   {{/if}}

app/assets/javascripts/discourse/views/topic-map-container.js.es6

@@ -1,57 +1,46 @@
-import PrivateMessageMapComponent from 'discourse/components/private-message-map';
-import TopicMapComponent from 'discourse/components/topic-map';
-import ToggleSummaryComponent from 'discourse/components/toggle-summary';
-import ToggleDeletedComponent from 'discourse/components/toggle-deleted';
-import DiscourseContainerView from 'discourse/views/container';
+import ContainerView from 'discourse/views/container';
+import { default as property, observes, on } from 'ember-addons/ember-computed-decorators';
 
-export default DiscourseContainerView.extend({
+export default ContainerView.extend({
   classNameBindings: ['hidden', ':topic-map'],
 
-  _postsChanged: function() {
+  @observes('topic.posts_count')
+  _postsChanged() {
     Ember.run.once(this, 'rerender');
-  }.observes('topic.posts_count'),
+  },
 
-  hidden: function() {
+  @property
+  hidden() {
     if (!this.get('post.firstPost')) return true;
 
-    var topic = this.get('topic');
+    const topic = this.get('topic');
     if (topic.get('archetype') === 'private_message') return false;
     if (topic.get('archetype') !== 'regular') return true;
     return topic.get('posts_count') < 2;
-  }.property(),
+  },
 
-  init: function() {
-    this._super();
+  @on('init')
+  startAppending() {
     if (this.get('hidden')) return;
 
-    this.attachViewWithArgs({ topic: this.get('topic') }, TopicMapComponent);
+    this.attachViewWithArgs({ topic: this.get('topic') }, 'topic-map');
     this.trigger('appendMapInformation', this);
   },
 
-  appendMapInformation: function(container) {
-    var topic = this.get('topic');
+  appendMapInformation(view) {
+    const topic = this.get('topic');
 
-    // If we have a summary capability
     if (topic.get('has_summary')) {
-      container.attachViewWithArgs({
-        topic: topic,
-        filterBinding: 'controller.filter'
-      }, ToggleSummaryComponent);
+      view.attachViewWithArgs({ topic, filterBinding: 'controller.filter' }, 'toggle-summary');
     }
 
-    if (Discourse.User.currentProp('staff')) {
-      // If we have deleted post filtering
-      if (topic.get('has_deleted')) {
-        container.attachViewWithArgs({
-          topic: topic,
-          filterBinding: 'controller.filter'
-        }, ToggleDeletedComponent);
-      }
+    const currentUser = this.get('controller.currentUser');
+    if (currentUser && currentUser.get('staff') && topic.get('has_deleted')) {
+      view.attachViewWithArgs({ topic, filterBinding: 'controller.filter' }, 'topic-deleted');
     }
 
-    // If we have a private message
     if (this.get('topic.isPrivateMessage')) {
-      container.attachViewWithArgs({ topic: topic, showPrivateInviteAction: 'showInvite' }, PrivateMessageMapComponent);
+      view.attachViewWithArgs({ topic, showPrivateInviteAction: 'showInvite' }, 'private-message-map');
     }
   }
 });