FIX: Display group avatar flair on user page.

app/assets/javascripts/discourse/controllers/group.js.es6

@@ -28,6 +28,16 @@ export default Ember.Controller.extend({
     return name.capitalize();
   },
 
+  @computed('model.name', 'model.flair_url', 'model.flair_bg_color', 'model.flair_color')
+  avatarFlairAttributes(groupName, flairURL, flairBgColor, flairColor) {
+    return {
+      primary_group_flair_url: flairURL,
+      primary_group_flair_bg_color: flairBgColor,
+      primary_group_flair_color: flairColor,
+      primary_group_name: groupName
+    };
+  },
+
   @observes('counts')
   countsChanged() {
     const counts = this.get('counts');

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

@@ -17,7 +17,14 @@
     <section class='user-right groups'>
       <section class='about group'>
         <div class='details'>
-          <h1>{{groupName}}</h1>
+          <h1 class='group-header'>
+            {{#if model.flair_url}}
+              <span class='group-avatar-flair'>
+                {{mount-widget widget="avatar-flair" args=avatarFlairAttributes}}
+              </span>
+            {{/if}}
+            <span class='group-name'>{{groupName}}</span>
+          </h1>
         </div>
       </section>
       {{outlet}}

app/assets/javascripts/discourse/widgets/avatar-flair.js.es6

@@ -37,4 +37,4 @@ createWidget('avatar-flair', {
       return [];
     }
   }
-});
+});

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

@@ -0,0 +1,16 @@
+.groups {
+  .group-header {
+    display: table;
+  }
+
+  .avatar-flair {
+    background-size: 40px;
+    height: 40px;
+    width: 40px;
+  }
+
+  .group-avatar-flair, .group-name {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}

test/javascripts/acceptance/groups-test.js.es6

@@ -4,7 +4,9 @@ acceptance("Groups");
 
 test("Browsing Groups", () => {
   visit("/groups/discourse");
+
   andThen(() => {
+    ok(count('.avatar-flair .fa-adjust') === 1, "it displays the group's avatar flair");
     ok(count('.group-members tr') > 0, "it lists group members");
   });
 

test/javascripts/fixtures/group-fixtures.js.es6

@@ -6,7 +6,8 @@ export default {
       "name":"discourse",
       "user_count":8,
       "alias_level":0,
-      "visible":true
+      "visible":true,
+      "flair_url": 'fa-adjust'
     }
   },
   "/groups/discourse/counts.json":{