FEATURE: show avatar flair on group, badges and directory pages (#6732)

app/assets/javascripts/discourse/templates/components/user-info.hbs

@@ -1,5 +1,14 @@
 <div class="user-image">
+  <div class="user-image-inner">
     <a href="{{unbound userPath}}" data-user-card="{{unbound user.username}}">{{avatar user imageSize="large"}}</a>
+    {{#if user.primary_group_name}}
+      {{avatar-flair
+        flairURL=user.primary_group_flair_url
+        flairBgColor=user.primary_group_flair_bg_color
+        flairColor=user.primary_group_flair_color
+        groupName=user.primary_group_name}}
+    {{/if}}
+  </div>
 </div>
 
 <div class="user-detail">

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

@@ -62,6 +62,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-repeat: no-repeat;
 
     .d-icon {
       height: $icon-size;

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

@@ -228,6 +228,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      background-repeat: no-repeat;
 
       .d-icon {
         height: $icon-size;

app/assets/stylesheets/common/components/user-info.scss

@@ -7,6 +7,12 @@
   .user-image {
     float: left;
     padding-right: 4px;
+    margin-right: 10px;
+  }
+
+  .user-image-inner {
+    position: relative;
+    display: inline-block;
   }
 
   .user-detail {
@@ -39,6 +45,18 @@
     }
   }
 
+  .avatar-flair {
+    background-repeat: no-repeat;
+    background-position: center;
+    position: absolute;
+    bottom: -2px;
+    right: -8px;
+    background-size: 18px 18px;
+    border-radius: 12px;
+    width: 24px;
+    height: 24px;
+  }
+
   &.small {
     width: 333px;
     @media screen and (max-width: $small-width) {

app/assets/stylesheets/desktop/components/user-info.scss

@@ -12,6 +12,7 @@
     }
     .user-image {
       width: 55px;
+      margin-right: 0;
     }
   }
 }

app/controllers/directory_items_controller.rb

@@ -7,11 +7,12 @@ class DirectoryItemsController < ApplicationController
     period = params.require(:period)
     period_type = DirectoryItem.period_types[period.to_sym]
     raise Discourse::InvalidAccess.new(:period_type) unless period_type
-
     result = DirectoryItem.where(period_type: period_type).includes(:user)
 
     if params[:group]
       result = result.includes(user: :groups).where(users: { groups: { name: params[:group] } })
+    else
+      result = result.includes(user: :primary_group)
     end
 
     if params[:exclude_usernames]

app/controllers/groups_controller.rb

@@ -241,11 +241,13 @@ class GroupsController < ApplicationController
       .order(username_lower: dir)
       .limit(limit)
       .offset(offset)
+      .includes(:primary_group)
 
     owners = users
       .order(order)
       .order(username_lower: dir)
       .where('group_users.owner')
+      .includes(:primary_group)
 
     render json: {
       members: serialize_data(members, GroupUserSerializer),

app/controllers/user_badges_controller.rb

@@ -6,7 +6,7 @@ class UserBadgesController < ApplicationController
 
     badge = fetch_badge_from_params
     user_badges = badge.user_badges.order('granted_at DESC, id DESC').limit(96)
-    user_badges = user_badges.includes(:user, :granted_by, badge: :badge_type, post: :topic)
+    user_badges = user_badges.includes(:user, :granted_by, badge: :badge_type, post: :topic, user: :primary_group)
 
     grant_count = nil
 

app/serializers/concerns/user_primary_group_mixin.rb

@@ -0,0 +1,42 @@
+module UserPrimaryGroupMixin
+
+  def self.included(klass)
+    klass.attributes :primary_group_name,
+                     :primary_group_flair_url,
+                     :primary_group_flair_bg_color,
+                     :primary_group_flair_color
+  end
+
+  def primary_group_name
+    object&.primary_group&.name
+  end
+
+  def include_primary_group_name?
+    object&.primary_group.present?
+  end
+
+  def primary_group_flair_url
+    object&.primary_group&.flair_url
+  end
+
+  def include_primary_group_flair_url?
+    object&.primary_group&.flair_url.present?
+  end
+
+  def primary_group_flair_bg_color
+    object&.primary_group&.flair_bg_color
+  end
+
+  def include_primary_group_flair_bg_color?
+    object&.primary_group&.flair_bg_color.present?
+  end
+
+  def primary_group_flair_color
+    object&.primary_group&.flair_color
+  end
+
+  def include_primary_group_flair_color?
+    object&.primary_group&.flair_color.present?
+  end
+
+end

app/serializers/directory_item_serializer.rb

@@ -1,9 +1,13 @@
 class DirectoryItemSerializer < ApplicationSerializer
 
+  class UserSerializer < UserNameSerializer
+    include UserPrimaryGroupMixin
+  end
+
   attributes :id,
              :time_read
 
-  has_one :user, embed: :objects, serializer: UserNameSerializer
+  has_one :user, embed: :objects, serializer: UserSerializer
   attributes *DirectoryItem.headings
 
   def id

app/serializers/group_user_serializer.rb

@@ -1,7 +1,14 @@
 class GroupUserSerializer < BasicUserSerializer
-  attributes :name, :title, :last_posted_at, :last_seen_at, :added_at
+  include UserPrimaryGroupMixin
+
+  attributes :name,
+             :title,
+             :last_posted_at,
+             :last_seen_at,
+             :added_at
 
   def include_added_at
     object.respond_to? :added_at
   end
+
 end

app/serializers/user_badge_serializer.rb

@@ -1,7 +1,11 @@
 class UserBadgeSerializer < ApplicationSerializer
 
   class UserSerializer < BasicUserSerializer
-    attributes :name, :moderator, :admin
+    include UserPrimaryGroupMixin
+
+    attributes :name,
+               :moderator,
+               :admin
   end
 
   attributes :id, :granted_at, :count, :post_id, :post_number