UX: Indicate user's group membership on groups page.

app/assets/javascripts/discourse/components/group-membership-button.js.es6

@@ -13,12 +13,12 @@ export default Ember.Component.extend({
     return publicExit && userIsGroupUser;
   },
 
-  @computed("model.is_group_user", "model.id", "groupUserIds")
+  @computed("model.is_group_user")
-  userIsGroupUser(isGroupUser, groupId, groupUserIds) {
+  userIsGroupUser(isGroupUser) {
     if (isGroupUser !== undefined) {
       return isGroupUser;
     } else {
-      return !!groupUserIds && groupUserIds.includes(groupId);
+      return false;
     }
   },
 

app/assets/javascripts/discourse/templates/groups.hbs

@@ -14,6 +14,7 @@
               <th></th>
               {{directory-toggle field="user_count" labelKey="groups.user_count" order=order asc=asc}}
               <th>{{i18n "groups.membership"}}</th>
+              <th></th>
             </thead>
 
             <tbody>
@@ -52,7 +53,6 @@
                   <td>
                     {{#group-membership-button model=group
                         showMembershipStatus=true
-                        groupUserIds=groups.extras.group_user_ids
                         showLogin='showLogin'}}
 
                       {{d-button icon="ban"
@@ -60,6 +60,16 @@
                           disabled=true}}
                     {{/group-membership-button}}
                   </td>
+
+                  <td class="group-user-status">
+                    {{#if group.is_group_user}}
+                      {{d-icon "user" title="groups.is_group_user"}}
+                    {{/if}}
+
+                    {{#if group.is_group_owner}}
+                      {{d-icon "shield" title="groups.is_group_owner"}}
+                    {{/if}}
+                  </td>
                 </tr>
               {{/each}}
             </tbody>

app/assets/stylesheets/common/base/groups.scss

@@ -34,6 +34,12 @@
       padding: 0.8em;
     }
 
+    td.group-user-status {
+      i {
+        color: $primary;
+      }
+    }
+
     td.groups-user-count {
       font-size: $font-up-2
     }

app/controllers/groups_controller.rb

@@ -40,13 +40,18 @@ class GroupsController < ApplicationController
       Group.preload_custom_fields(groups, Group.preloaded_custom_field_names)
     end
 
-    group_user_ids = GroupUser.where(group: groups, user: current_user).pluck(:group_id)
+    if current_user
+      group_users = GroupUser.where(group: groups, user: current_user)
+      user_group_ids = group_users.pluck(:group_id)
+      owner_group_ids = group_users.where(owner: true).pluck(:group_id)
+    end
 
     render_json_dump(
-      groups: serialize_data(groups, BasicGroupSerializer),
+      groups: serialize_data(groups,
-      extras: {
+        BasicGroupSerializer,
-        group_user_ids: group_user_ids
+        user_group_ids: user_group_ids || [],
-      },
+        owner_group_ids: owner_group_ids || []
+      ),
       total_rows_groups: count,
       load_more_groups: groups_path(page: page + 1)
     )

app/serializers/basic_group_serializer.rb

@@ -24,7 +24,9 @@ class BasicGroupSerializer < ApplicationSerializer
              :allow_membership_requests,
              :full_name,
              :default_notification_level,
-             :membership_request_template
+             :membership_request_template,
+             :is_group_user,
+             :is_group_owner
 
   def include_display_name?
     object.automatic
@@ -40,17 +42,41 @@ class BasicGroupSerializer < ApplicationSerializer
     staff?
   end
 
-  def include_has_messages
+  def include_has_messages?
     staff?
   end
 
-  def include_bio_raw
+  def include_bio_raw?
     staff?
   end
 
+  def include_is_group_user?
+    user_group_ids.present?
+  end
+
+  def is_group_user
+    user_group_ids.include?(object.id)
+  end
+
+  def include_is_group_owner?
+    owner_group_ids.present?
+  end
+
+  def is_group_owner
+    owner_group_ids.include?(object.id)
+  end
+
   private
 
     def staff?
       @staff ||= scope.is_staff?
     end
+
+    def user_group_ids
+      @options[:user_group_ids]
+    end
+
+    def owner_group_ids
+      @options[:owner_group_ids]
+    end
 end

config/locales/client.en.yml

@@ -437,6 +437,7 @@ en:
       automatic_group: Automatic Group
       closed_group: Closed Group
       is_group_user: "You are a member of this group"
+      is_group_owner: "You are an owner of this group"
       allow_membership_requests: "Allow users to send membership requests to group owners"
       membership_request_template: "Custom template to display to users when sending a membership request"
       membership_request:

spec/requests/groups_controller_spec.rb

@@ -77,7 +77,6 @@ describe GroupsController do
 
       group_ids = response_body["groups"].map { |g| g["id"] }
 
-      expect(response_body["extras"]["group_user_ids"]).to eq([])
       expect(group_ids).to include(group.id)
       expect(group_ids).to_not include(staff_group.id)
       expect(response_body["load_more_groups"]).to eq("/groups?page=1")
@@ -89,6 +88,7 @@ describe GroupsController do
         admin = Fabricate(:admin)
         sign_in(admin)
         group.add(admin)
+        group.add_owner(admin)
 
         get "/groups.json"
 
@@ -97,8 +97,10 @@ describe GroupsController do
         response_body = JSON.parse(response.body)
 
         group_ids = response_body["groups"].map { |g| g["id"] }
+        group_body = response_body["groups"].find { |g| g["id"] == group.id }
 
-        expect(response_body["extras"]["group_user_ids"]).to eq([group.id])
+        expect(group_body["is_group_user"]).to eq(true)
+        expect(group_body["is_group_owner"]).to eq(true)
         expect(group_ids).to include(group.id, staff_group.id)
         expect(response_body["load_more_groups"]).to eq("/groups?page=1")
         expect(response_body["total_rows_groups"]).to eq(10)
@@ -301,7 +303,8 @@ describe GroupsController do
 
       members = JSON.parse(response.body)["members"]
 
-      expect(members.map { |m| m["id"] }).to eq([user1.id, user2.id, user3.id])
+      expect(members.map { |m| m["id"] })
+        .to contain_exactly(user1.id, user2.id, user3.id)
     end
   end