UX: Show the score status

If a review review score has been Approved/Rejected/Ignored then show it

app/assets/javascripts/discourse/helpers/reviewable-status.js.es6

@@ -9,23 +9,39 @@ import {
   DELETED
 } from "discourse/models/reviewable";
 
-export function htmlStatus(status) {
+function dataFor(status) {
   switch (status) {
     case PENDING:
-      return I18n.t("review.statuses.pending.title");
+      return { name: "pending" };
     case APPROVED:
-      return `${iconHTML("check")} ${I18n.t("review.statuses.approved.title")}`;
+      return { icon: "check", name: "approved" };
     case REJECTED:
-      return `${iconHTML("times")} ${I18n.t("review.statuses.rejected.title")}`;
+      return { icon: "times", name: "rejected" };
     case IGNORED:
-      return `${iconHTML("external-link-alt")} ${I18n.t(
+      return { icon: "external-link-alt", name: "ignored" };
-        "review.statuses.ignored.title"
-      )}`;
     case DELETED:
-      return `${iconHTML("trash")} ${I18n.t("review.statuses.deleted.title")}`;
+      return { icon: "trash", name: "review.statuses.deleted.title" };
   }
 }
 
+export function htmlStatus(status) {
+  let data = dataFor(status);
+  if (!data) {
+    return;
+  }
+
+  let icon = data.icon ? iconHTML(data.icon) : "";
+
+  return `
+    <span class='status'>
+      <span class="${data.name}">
+        ${icon}
+        ${I18n.t("review.statuses." + data.name + ".title")}
+      </span>
+    </span>
+  `;
+}
+
 export default htmlHelper(status => {
   return htmlStatus(status);
 });

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

@@ -10,11 +10,6 @@ export const IGNORED = 3;
 export const DELETED = 4;
 
 export default RestModel.extend({
-  pending: Ember.computed.equal("status", PENDING),
-  approved: Ember.computed.equal("status", APPROVED),
-  rejected: Ember.computed.equal("status", REJECTED),
-  ignored: Ember.computed.equal("status", IGNORED),
-
   @computed("type")
   humanType(type) {
     return I18n.t(`review.types.${type.underscore()}.title`, {

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

@@ -9,13 +9,7 @@
       {{#link-to 'review.show' reviewable.id}}{{age-with-tooltip reviewable.created_at}}{{/link-to}}
     </span>
     <span class='status'>
-      {{#if reviewable.approved}}
+      {{reviewable-status reviewable.status}}
-        <span class="approved"> {{d-icon "check"}} {{i18n "review.statuses.approved.title"}} </span>
-      {{else if reviewable.rejected}}
-        <span class="rejected"> {{d-icon "times"}} {{i18n "review.statuses.rejected.title"}} </span>
-      {{else if reviewable.ignored}}
-        <span class="ignored"> {{d-icon "external-link-alt"}} {{i18n "review.statuses.ignored.title"}} </span>
-      {{/if}}
     </span>
   </div>
 

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

@@ -0,0 +1,36 @@
+<tr class='reviewable-score'>
+  <td>
+    {{d-icon rs.score_type.icon}} {{rs.score_type.title}} <span class="badge-notification new-posts score">{{format-score rs.score}}</span>
+  </td>
+  <td class='user'>
+    {{#user-link user=rs.user}}
+      {{avatar rs.user imageSize="tiny"}}
+      {{rs.user.username}}
+    {{/user-link}}
+  </td>
+  <td>
+    {{user-flag-percentage
+      agreed=rs.agree_stats.agreed
+      disagreed=rs.agree_stats.disagreed
+      ignored=rs.agree_stats.ignored}}
+  </td>
+  <td>
+    {{reviewable-status rs.status}}
+  </td>
+</tr>
+{{#if rs.reviewable_conversation}}
+  <tr>
+    <td colspan='3'>
+      <div class='reviewable-conversation'>
+        {{#each rs.reviewable_conversation.conversation_posts as |p|}}
+          {{reviewable-conversation-post post=p}}
+        {{/each}}
+        <div class='controls'>
+          <a href={{rs.reviewable_conversation.permalink}} class='btn btn-small'>
+            {{i18n "review.conversation.view_full"}}
+          </a>
+        </div>
+      </div>
+    </td>
+  </tr>
+{{/if}}

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

@@ -2,39 +2,7 @@
   <table class='reviewable-scores'>
     <tbody>
     {{#each scores as |rs|}}
-      <tr class='reviewable-score'>
+      {{reviewable-score rs=rs tagName=''}}
-
-        <td>{{d-icon "flag"}} {{rs.score_type.title}} <span class="badge-notification new-posts score">{{format-score rs.score}}</span></td>
-        <td class='user'>
-          {{#user-link user=rs.user}}
-            {{avatar rs.user imageSize="tiny"}}
-            {{rs.user.username}}
-          {{/user-link}}
-
-        </td>
-        <td>
-          {{user-flag-percentage
-            agreed=rs.agree_stats.agreed
-            disagreed=rs.agree_stats.disagreed
-            ignored=rs.agree_stats.ignored}}
-        </td>
-      </tr>
-      {{#if rs.reviewable_conversation}}
-        <tr>
-          <td colspan='3'>
-            <div class='reviewable-conversation'>
-              {{#each rs.reviewable_conversation.conversation_posts as |p|}}
-                {{reviewable-conversation-post post=p}}
-              {{/each}}
-              <div class='controls'>
-                <a href={{rs.reviewable_conversation.permalink}} class='btn btn-small'>
-                  {{i18n "review.conversation.view_full"}}
-                </a>
-              </div>
-            </div>
-          </td>
-        </tr>
-      {{/if}}
     {{/each}}
   </tbody>
   </table>

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

@@ -1,4 +1,14 @@
 .reviewable {
+  .status {
+    color: $primary-medium;
+    span.approved {
+      color: $success;
+    }
+    span.rejected {
+      color: $danger;
+    }
+  }
+
   .nav-pills {
     margin-bottom: 1em;
   }
@@ -182,15 +192,6 @@
     .score {
       font-size: $font-down-1;
     }
-    .status {
-      color: $primary-medium;
-      span.approved {
-        color: $success;
-      }
-      span.rejected {
-        color: $danger;
-      }
-    }
   }
 
   .reviewable-contents {
@@ -244,7 +245,6 @@
 
   .d-icon {
     font-size: $font-down-1;
-    color: $primary-high;
   }
 
   .badge-notification {

app/serializers/reviewable_score_serializer.rb

@@ -2,7 +2,7 @@ require_dependency 'reviewable_score_type_serializer'
 
 class ReviewableScoreSerializer < ApplicationSerializer
 
-  attributes :id, :score, :agree_stats
+  attributes :id, :score, :agree_stats, :status
   has_one :user, serializer: BasicUserSerializer, root: 'users'
   has_one :score_type, serializer: ReviewableScoreTypeSerializer
   has_one :reviewable_conversation, serializer: ReviewableConversationSerializer

app/serializers/reviewable_score_type_serializer.rb

@@ -1,5 +1,5 @@
 class ReviewableScoreTypeSerializer < ApplicationSerializer
-  attributes :id, :title, :score_bonus
+  attributes :id, :title, :score_bonus, :icon
 
   # Allow us to share post action type translations for backwards compatibility
   def title
@@ -15,4 +15,8 @@ class ReviewableScoreTypeSerializer < ApplicationSerializer
     object.respond_to?(:score_bonus)
   end
 
+  def icon
+    "flag"
+  end
+
 end