From f48e25b215f281d8dfa8b2919d5e43a09cb5531d Mon Sep 17 00:00:00 2001
From: Jan Cernik <66427541+jancernik@users.noreply.github.com>
Date: Fri, 17 Feb 2023 10:14:00 -0300
Subject: [PATCH] FIX: Chat member user card rendered out of view (#20332)

---
 .../components/chat-channel-members-view.hbs  | 12 +++-------
 .../discourse/components/chat-user-info.hbs   |  8 +++++++
 .../discourse/components/chat-user-info.js    |  8 +++++++
 .../stylesheets/common/chat-channel-info.scss |  5 ++--
 .../components/chat-user-info-test.js         | 24 +++++++++++++++++++
 5 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs
 create mode 100644 plugins/chat/assets/javascripts/discourse/components/chat-user-info.js
 create mode 100644 plugins/chat/test/javascripts/components/chat-user-info-test.js

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs
index 9ac1e3779c..ff3bb3fb71 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-members-view.hbs
@@ -29,15 +29,9 @@
 
       <div role="list" class="channel-members-view__list">
         {{#each this.members as |membership|}}
-          <a
-            class="channel-members-view__list-item"
-            href={{membership.user.userPath}}
-            data-user-card={{membership.user.username}}
-            tabindex="0"
-          >
-            <ChatUserAvatar @user={{membership.user}} @avatarSize="medium" />
-            <ChatUserDisplayName @user={{membership.user}} />
-          </a>
+          <div class="channel-members-view__list-item">
+            <ChatUserInfo @user={{membership.user}} />
+          </div>
         {{else}}
           {{#unless this.isFetchingMembers}}
             {{i18n "chat.channel.no_memberships_found"}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs
new file mode 100644
index 0000000000..e9fa4b9b44
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-user-info.hbs
@@ -0,0 +1,8 @@
+{{#if @user}}
+  <a href={{this.userPath}} data-user-card={{@user.username}}>
+    <ChatUserAvatar @user={{@user}} @avatarSize="medium" />
+  </a>
+  <a href={{this.userPath}} data-user-card={{@user.username}}>
+    <ChatUserDisplayName @user={{@user}} />
+  </a>
+{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-user-info.js b/plugins/chat/assets/javascripts/discourse/components/chat-user-info.js
new file mode 100644
index 0000000000..ccc7d150af
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-user-info.js
@@ -0,0 +1,8 @@
+import Component from "@glimmer/component";
+import { userPath } from "discourse/lib/url";
+
+export default class ChatUserInfo extends Component {
+  get userPath() {
+    return userPath(this.args.user.username);
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
index 0c9a4f9a8d..bc6d069e71 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-info.scss
@@ -112,9 +112,8 @@ input.channel-members-view__search-input {
   align-items: center;
   padding: 0.5rem 0 0.5rem 1px;
 
-  &:hover {
-    background-color: var(--tertiary-very-low);
-    border-radius: 0.25rem;
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--primary-low);
   }
 
   .chat-user-avatar {
diff --git a/plugins/chat/test/javascripts/components/chat-user-info-test.js b/plugins/chat/test/javascripts/components/chat-user-info-test.js
new file mode 100644
index 0000000000..b19ab3a7ec
--- /dev/null
+++ b/plugins/chat/test/javascripts/components/chat-user-info-test.js
@@ -0,0 +1,24 @@
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import { module, test } from "qunit";
+import { render } from "@ember/test-helpers";
+
+module("Discourse Chat | Component | chat-user-info", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("avatar and name", async function (assert) {
+    this.set("user", this.currentUser);
+
+    await render(hbs`<ChatUserInfo @user={{this.user}} />`);
+
+    assert
+      .dom(`a[data-user-card=${this.user.username}] div.chat-user-avatar`)
+      .exists();
+
+    assert
+      .dom(
+        `a[data-user-card=${this.user.username}] span.chat-user-display-name`
+      )
+      .includesText(this.user.username);
+  });
+});