FIX: close user card after clicking Message button

FIX: close user card after clicking Message button

This was primarily an issue on mobile, where after clicking the “Messsage” button in the user card, the composer would load behind the user card overlay.

diff --git a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
index 84e63e9..981cbb1 100644
--- a/app/assets/javascripts/discourse/components/user-card-contents.js.es6
+++ b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
@@ -184,6 +184,14 @@ export default Ember.Component.extend(
         this._close();
       },
 
+      composePM(user, post) {
+        this._close();
+
+        Ember.getOwner(this)
+          .lookup("router:main")
+          .send("composePrivateMessage", user, post);
+      },
+
       cancelFilter() {
         const postStream = this.postStream;
         postStream.cancelFilter();
diff --git a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
index 12c4011..de20717 100644
--- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
@@ -72,7 +72,7 @@
             <li class='compose-pm'>
               {{d-button
               class="btn-primary"
-              action=(route-action "composePrivateMessage" user post)
+              action=(action "composePM" user post)
               icon="envelope"
               label="user.private_message"}}
             </li>
diff --git a/test/javascripts/acceptance/user-card-test.js.es6 b/test/javascripts/acceptance/user-card-test.js.es6
index f4819f0..c721224 100644
--- a/test/javascripts/acceptance/user-card-test.js.es6
+++ b/test/javascripts/acceptance/user-card-test.js.es6
@@ -1,7 +1,7 @@
 import { acceptance } from "helpers/qunit-helpers";
 import DiscourseURL from "discourse/lib/url";
 
-acceptance("User Card");
+acceptance("User Card", { loggedIn: true });
 
 QUnit.test("user card", async assert => {
   await visit("/t/internationalization-localization/280");
@@ -16,4 +16,13 @@ QUnit.test("user card", async assert => {
     DiscourseURL.routeTo.calledWith("/u/eviltrout"),
     "it should navigate to the user profile"
   );
+
+  await click("a[data-user-card=charlie]:first");
+  assert.ok(visible("#user-card"), "card should appear");
+
+  await click(".card-content .compose-pm button");
+  assert.ok(
+    invisible("#user-card"),
+    "user card dismissed after hitting Message button"
+  );
 });
diff --git a/test/javascripts/fixtures/topic.js.es6 b/test/javascripts/fixtures/topic.js.es6
index 3ac3b33..51d9de3 100644
--- a/test/javascripts/fixtures/topic.js.es6
+++ b/test/javascripts/fixtures/topic.js.es6
@@ -2058,6 +2058,13 @@ export default {
           post_count: 4
         },
         {
+          id: 5,
+          username: "charlie",
+          uploaded_avatar_id: 5275,
+          avatar_template: "/images/avatar.png",
+          post_count: 1
+        },
+        {
           id: 3704,
           username: "mojzis",
           uploaded_avatar_id: 31201,

GitHub sha: 4d6eacac

2 Likes

This commit has been mentioned on Discourse Meta. There might be relevant details there: