FIX: Member Highlights on Group Cards

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 @@ def fast_edit_input
         @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)