UX: Show user fields when reviewing a user

app/assets/javascripts/admin/controllers/admin-user-index.js.es6

@@ -66,16 +66,7 @@ export default Ember.Controller.extend(CanCheckEmails, {
 
   @computed("model.user_fields.[]")
   userFields(userFields) {
-    const siteUserFields = this.site.get("user_fields");
+    return this.site.collectUserFields(userFields);
-
-    if (!Ember.isEmpty(siteUserFields)) {
-      return siteUserFields.map(uf => {
-        const value = userFields ? userFields[uf.get("id").toString()] : null;
-        return { name: uf.get("name"), value };
-      });
-    }
-
-    return [];
   },
 
   preferencesPath: fmt("model.username_lower", userPath("%@/preferences")),

app/assets/javascripts/discourse/components/reviewable-user.js.es6

@@ -0,0 +1,8 @@
+import { default as computed } from "ember-addons/ember-computed-decorators";
+
+export default Ember.Component.extend({
+  @computed("reviewable.user_fields")
+  userFields(fields) {
+    return this.site.collectUserFields(fields);
+  }
+});

app/assets/javascripts/discourse/models/site.js.es6

@@ -27,6 +27,21 @@ const Site = RestModel.extend({
   topicCountDesc: ["topic_count:desc"],
   categoriesByCount: Ember.computed.sort("categories", "topicCountDesc"),
 
+  collectUserFields(fields) {
+    fields = fields || {};
+
+    let siteFields = this.get("user_fields");
+
+    if (!Ember.isEmpty(siteFields)) {
+      return siteFields.map(f => {
+        let value = fields ? fields[f.id.toString()] : null;
+        value = value || "—".htmlSafe();
+        return { name: f.name, value };
+      });
+    }
+    return [];
+  },
+
   // Sort subcategories under parents
   @computed("categoriesByCount", "categories.[]")
   sortedCategories(cats) {

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

@@ -1,25 +1,33 @@
 <div class='reviewable-user-info'>
-  <div class='reviewable-user-details username'>
+  <div class='reviewable-user-fields'>
-    <div class='name'>{{i18n "review.user.username"}}</div>
+    <div class='reviewable-user-details username'>
-    <div class='value'>
+      <div class='name'>{{i18n "review.user.username"}}</div>
-      {{#if reviewable.link_admin}}
+      <div class='value'>
-        <a href={{get-url (concat "/admin/users/" reviewable.user_id "/" reviewable.payload.username)}}>
+        {{#if reviewable.link_admin}}
+          <a href={{get-url (concat "/admin/users/" reviewable.user_id "/" reviewable.payload.username)}}>
+            {{reviewable.payload.username}}
+          </a>
+        {{else}}
           {{reviewable.payload.username}}
-        </a>
+        {{/if}}
-      {{else}}
+      </div>
-        {{reviewable.payload.username}}
-      {{/if}}
     </div>
-  </div>
+    {{#if reviewable.payload.name}}
-  {{#if reviewable.payload.name}}
+      <div class='reviewable-user-details name'>
-    <div class='reviewable-user-details name'>
+        <div class='name'>{{i18n "review.user.name"}}</div>
-      <div class='name'>{{i18n "review.user.name"}}</div>
+        <div class='value'>{{reviewable.payload.name}}</div>
-      <div class='value'>{{reviewable.payload.name}}</div>
+      </div>
+    {{/if}}
+    <div class='reviewable-user-details email'>
+      <div class='name'>{{i18n "review.user.email"}}</div>
+      <div class='value'>{{reviewable.payload.email}}</div>
     </div>
-  {{/if}}
+    {{#each userFields as |f|}}
-  <div class='reviewable-user-details email'>
+      <div class='reviewable-user-details user-field'>
-    <div class='name'>{{i18n "review.user.email"}}</div>
+        <div class='name'>{{f.name}}</div>
-    <div class='value'>{{reviewable.payload.email}}</div>
+        <div class='value'>{{f.value}}</div>
+      </div>
+    {{/each}}
   </div>
 
   {{yield}}

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

@@ -46,8 +46,14 @@
 
 .reviewable-user-info {
   margin: 0.5em 0;
+  .reviewable-user-fields {
+    margin-bottom: 2em;
+  }
 
   .reviewable-user-details {
+    border-bottom: 1px solid $primary-low;
+    padding-bottom: 0.25em;
+
     display: flex;
     .name {
       width: 8em;

app/serializers/reviewable_user_serializer.rb

@@ -1,6 +1,6 @@
 class ReviewableUserSerializer < ReviewableSerializer
 
-  attributes :link_admin
+  attributes :link_admin, :user_fields
 
   payload_attributes(
     :username,
@@ -12,4 +12,12 @@ class ReviewableUserSerializer < ReviewableSerializer
     scope.is_staff? && object.target.present?
   end
 
+  def user_fields
+    object.target.user_fields
+  end
+
+  def include_user_fields?
+    object.target.present? && object.target.user_fields.present?
+  end
+
 end

config/locales/client.en.yml

@@ -385,6 +385,7 @@ en:
         username: "Username"
         email: "Email"
         name: "Name"
+        fields: "Fields"
 
       user_percentage:
         summary: