FEATURE: add chat direct message button to user profile (#26135)

This change adds the chat direct message button to user profiles, similarly to how we use it within the user card.

app/assets/stylesheets/mobile/user.scss

@@ -203,7 +203,7 @@
       flex: 1 1 25%;
 
       .btn {
-        margin-bottom: 16px;
+        margin-bottom: 0.5rem;
       }
 
       ul {

plugins/chat/assets/javascripts/discourse/components/chat/direct-message-button.gjs

@@ -4,7 +4,7 @@ import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default class ChatUserCardButton extends Component {
+export default class ChatDirectMessageButton extends Component {
   @service chat;
   @service appEvents;
   @service router;
@@ -26,7 +26,9 @@ export default class ChatUserCardButton extends Component {
     } catch (error) {
       popupAjaxError(error);
     } finally {
-      this.appEvents.trigger("card:close");
+      if (this.args.modal) {
+        this.appEvents.trigger("card:close");
+      }
     }
   }
 
@@ -36,7 +38,7 @@ export default class ChatUserCardButton extends Component {
         @action={{this.startChatting}}
         @label="chat.title_capitalized"
         @icon="d-chat"
-        class="btn-primary chat-user-card-btn"
+        class="btn-primary chat-direct-message-btn"
       />
     {{/if}}
   </template>

plugins/chat/assets/javascripts/discourse/connectors/user-card-below-message-button/chat-button.hbs

@@ -1,3 +1,3 @@
 {{#if this.user.can_chat_user}}
-  <Chat::UserCardButton @user={{this.user}} />
+  <Chat::DirectMessageButton @user={{this.user}} @modal={{true}} />
 {{/if}}

plugins/chat/assets/javascripts/discourse/connectors/user-profile-controls/chat-button.hbs

@@ -0,0 +1,3 @@
+{{#if this.model.can_chat_user}}
+  <Chat::DirectMessageButton @user={{this.model}} />
+{{/if}}

plugins/chat/assets/stylesheets/common/core-extensions.scss

@@ -11,6 +11,19 @@
   }
 }
 
+.user-summary-page .details .controls ul {
+  display: flex;
+  flex-direction: column;
+
+  li:first-child {
+    order: -2;
+  }
+
+  li.user-profile-controls-outlet.chat-button {
+    order: -1;
+  }
+}
+
 // TODO (davidb): remove once consolidated chat notifications is complete
 .user-stream .large-notifications .item {
   &:has(.chat-message) {

plugins/chat/spec/system/user_card_spec.rb

@@ -10,13 +10,13 @@ RSpec.describe "User card", type: :system do
 
   shared_examples "not showing chat button" do
     it "doesn’t show the chat button" do
-      expect(page).to have_no_css(".chat-user-card-btn")
+      expect(page).to have_no_css(".chat-direct-message-btn")
     end
   end
 
   shared_examples "showing chat button" do
     it "shows the chat button" do
-      expect(page).to have_css(".chat-user-card-btn")
+      expect(page).to have_css(".chat-direct-message-btn")
     end
   end
 
@@ -49,7 +49,7 @@ RSpec.describe "User card", type: :system do
         include_examples "showing chat button"
 
         context "when clicking chat button" do
-          before { find(".chat-user-card-btn").click }
+          before { find(".chat-direct-message-btn").click }
 
           it "opens correct channel" do
             # at this point the ChatChannel is not created yet

plugins/chat/spec/system/user_profile_spec.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+RSpec.describe "User profile", type: :system do
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:user)
+
+  before { chat_system_bootstrap }
+
+  shared_examples "not showing chat button" do
+    it "has no chat button" do
+      expect(page).to have_no_css(".chat-direct-message-btn")
+    end
+  end
+
+  shared_examples "showing chat button" do
+    it "shows the chat button" do
+      expect(page).to have_css(".chat-direct-message-btn")
+    end
+  end
+
+  def visit_user_profile
+    visit("/u/" + user.username + "/summary")
+  end
+
+  context "when user" do
+    context "with chat disabled" do
+      before do
+        SiteSetting.chat_enabled = false
+        sign_in(current_user)
+        visit_user_profile
+      end
+
+      include_examples "not showing chat button"
+    end
+
+    context "with chat enabled" do
+      before do
+        sign_in(current_user)
+        visit_user_profile
+      end
+
+      include_examples "showing chat button"
+    end
+  end
+
+  context "when anonymous" do
+    before { visit_user_profile }
+
+    include_examples "not showing chat button"
+  end
+end

plugins/chat/test/javascripts/components/chat-user-card-button-test.js

@@ -6,7 +6,7 @@ import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 
 module(
-  "Discourse Chat | Component | <Chat::UserCardButton />",
+  "Discourse Chat | Component | <Chat::DirectMessageButton />",
   function (hooks) {
     setupRenderingTest(hooks);
 
@@ -16,9 +16,11 @@ module(
         .value(true);
       this.user = fabricators.user();
 
-      await render(hbs`<Chat::UserCardButton @user={{user}} />`);
+      await render(
+        hbs`<Chat::DirectMessageButton @user={{user}} @modal={{true}} />`
+      );
 
-      assert.dom(".chat-user-card-btn").exists("it shows the chat button");
+      assert.dom(".chat-direct-message-btn").exists("it shows the chat button");
     });
 
     test("when current user can’t send direct messages", async function (assert) {
@@ -27,10 +29,12 @@ module(
         .value(false);
       this.user = fabricators.user();
 
-      await render(hbs`<Chat::UserCardButton @user={{user}} />`);
+      await render(
+        hbs`<Chat::DirectMessageButton @user={{user}} @modal={{true}} />`
+      );
 
       assert
-        .dom(".chat-user-card-btn")
+        .dom(".chat-direct-message-btn")
         .doesNotExist("it doesn’t show the chat button");
     });
 
@@ -43,10 +47,12 @@ module(
         suspended_till: moment().add(1, "year").toDate(),
       });
 
-      await render(hbs`<Chat::UserCardButton @user={{user}}/>`);
+      await render(
+        hbs`<Chat::DirectMessageButton @user={{user}} @modal={{true}} />`
+      );
 
       assert
-        .dom(".chat-user-card-btn")
+        .dom(".chat-direct-message-btn")
         .doesNotExist("it doesn’t show the chat button");
     });
   }