From 0d4f71e90b59b509e4c9ddd2c686cd20ad4cc27d Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Tue, 29 Nov 2016 13:42:47 +0800
Subject: [PATCH] FIX: Display group avatar flair on user page.

---
 .../discourse/controllers/group.js.es6           | 10 ++++++++++
 .../javascripts/discourse/templates/group.hbs    |  9 ++++++++-
 .../discourse/widgets/avatar-flair.js.es6        |  2 +-
 app/assets/stylesheets/common/base/groups.scss   | 16 ++++++++++++++++
 test/javascripts/acceptance/groups-test.js.es6   |  2 ++
 test/javascripts/fixtures/group-fixtures.js.es6  |  3 ++-
 6 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/common/base/groups.scss

diff --git a/app/assets/javascripts/discourse/controllers/group.js.es6 b/app/assets/javascripts/discourse/controllers/group.js.es6
index 9e8fbd83c08..2c72b5475a6 100644
--- a/app/assets/javascripts/discourse/controllers/group.js.es6
+++ b/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');
diff --git a/app/assets/javascripts/discourse/templates/group.hbs b/app/assets/javascripts/discourse/templates/group.hbs
index 997d4811833..f3f96d4efe4 100644
--- a/app/assets/javascripts/discourse/templates/group.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/widgets/avatar-flair.js.es6 b/app/assets/javascripts/discourse/widgets/avatar-flair.js.es6
index 55beefc8cd4..265d6a69b55 100644
--- a/app/assets/javascripts/discourse/widgets/avatar-flair.js.es6
+++ b/app/assets/javascripts/discourse/widgets/avatar-flair.js.es6
@@ -37,4 +37,4 @@ createWidget('avatar-flair', {
       return [];
     }
   }
-});
\ No newline at end of file
+});
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
new file mode 100644
index 00000000000..76930759f7e
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/test/javascripts/acceptance/groups-test.js.es6 b/test/javascripts/acceptance/groups-test.js.es6
index 0fcc909999d..3b01016a94b 100644
--- a/test/javascripts/acceptance/groups-test.js.es6
+++ b/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");
   });
 
diff --git a/test/javascripts/fixtures/group-fixtures.js.es6 b/test/javascripts/fixtures/group-fixtures.js.es6
index 8a2d2fa2526..d6ea20a239c 100644
--- a/test/javascripts/fixtures/group-fixtures.js.es6
+++ b/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":{