FIX: Member Highlights on Group Cards (#22828)

By default, only 10 members are highlighted on group cards. However,
joining/leaving a big group via the buttons on the group card results in
up to 50 members being highlighted. For large groups, this causes the card
to move off-screen.

This happens because, while the initial render explicitly fetches only 10
members, we don't seem to apply the same limit as part of the member
reload performed when a user leaves/joins via the buttons on the card.

This PR fixes that by only making the first 10 users available for
highlight regardless of the number of members loaded in the store.

app/assets/javascripts/discourse/app/components/group-card-contents.hbs

@@ -75,7 +75,7 @@
       {{#if this.group.members}}
         <div class="card-row third-row">
           <div class="members metadata">
-            {{#each this.group.members as |user|}}
+            {{#each this.highlightedMembers as |user|}}
               <a
                 {{on "click" this.close}}
                 href={{user.path}}

app/assets/javascripts/discourse/app/components/group-card-contents.js

@@ -30,9 +30,15 @@ export default Component.extend(CardContentsBase, CleansUp, {
 
   group: null,
 
-  @discourseComputed("group.user_count", "group.members.length")
-  moreMembersCount: (memberCount, maxMemberDisplay) =>
-    memberCount - maxMemberDisplay,
+  @discourseComputed("group.members.[]")
+  highlightedMembers(members) {
+    return members.slice(0, maxMembersToDisplay);
+  },
+
+  @discourseComputed("group.user_count", "group.members.[]")
+  moreMembersCount(memberCount) {
+    return Math.max(memberCount - maxMembersToDisplay, 0);
+  },
 
   @discourseComputed("group.name")
   groupClass: (name) => (name ? `group-card-${name}` : ""),

spec/system/group_card_spec.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+describe "Group Card", type: :system do
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:members) { Fabricate.times(12, :user) }
+  fab!(:topic) { Fabricate(:topic) }
+  fab!(:group) { Fabricate(:public_group, users: members) }
+  let(:mention) { "@#{group.name}" }
+  let(:post_with_mention) do
+    PostCreator.create!(current_user, topic_id: topic.id, raw: "Hello #{mention}")
+  end
+  let(:topic_page) { PageObjects::Pages::Topic.new }
+  let(:group_card) { PageObjects::Components::GroupCard.new }
+
+  before do
+    Jobs.run_immediately!
+    sign_in(current_user)
+  end
+
+  context "when joining/leaving a group" do
+    it "shows only highlighted members" do
+      topic_page.visit_topic(topic, post_number: post_with_mention.post_number)
+      topic_page.click_mention(post_with_mention, mention)
+
+      expect(group_card).to have_highlighted_member_count_of(
+        PageObjects::Components::GroupCard::MAX_MEMBER_HIGHLIGHT_COUNT,
+      )
+
+      group_card.click_join_button
+
+      expect(group_card).to have_leave_button
+
+      group.reload
+
+      expect(group.users).to include(current_user)
+      expect(group_card).to have_highlighted_member_count_of(
+        PageObjects::Components::GroupCard::MAX_MEMBER_HIGHLIGHT_COUNT,
+      )
+
+      group_card.click_leave_button
+
+      expect(group_card).to have_join_button
+
+      group.reload
+
+      expect(group.users).not_to include(current_user)
+      expect(group_card).to have_highlighted_member_count_of(
+        PageObjects::Components::GroupCard::MAX_MEMBER_HIGHLIGHT_COUNT,
+      )
+    end
+  end
+end

spec/system/page_objects/components/group-card.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class GroupCard < PageObjects::Components::Base
+      MAX_MEMBER_HIGHLIGHT_COUNT = 10
+      JOIN_BUTTON_SELECTOR = ".group-details-button .group-index-join"
+      LEAVE_BUTTON_SELECTOR = ".group-details-button .group-index-leave"
+
+      def click_join_button
+        find(JOIN_BUTTON_SELECTOR).click
+      end
+
+      def click_leave_button
+        find(LEAVE_BUTTON_SELECTOR).click
+      end
+
+      def has_highlighted_member_count_of?(expected_count)
+        all(".card-content .members.metadata a.card-tiny-avatar", count: expected_count)
+      end
+
+      def has_join_button?
+        has_css?(JOIN_BUTTON_SELECTOR)
+      end
+
+      def has_leave_button?
+        has_css?(LEAVE_BUTTON_SELECTOR)
+      end
+    end
+  end
+end

spec/system/page_objects/pages/topic.rb

@@ -146,6 +146,12 @@ module PageObjects
         @fast_edit_component.fast_edit_input
       end
 
+      def click_mention(post, mention)
+        within post_by_number(post) do
+          find("a.mention-group", text: mention).click
+        end
+      end
+
       private
 
       def topic_footer_button_id(button)