From c42257b47d51fac39052107026b5e649bc7d6685 Mon Sep 17 00:00:00 2001
From: Ted Johansson <ted@discourse.org>
Date: Mon, 25 Sep 2023 10:34:51 +0100
Subject: [PATCH] DEV: Prettify negative numbers in reviewable score
 explanation (#23642)

This is an aesthetic change. Currently, if one of the scores involved in the reviewable score explanation is negative, we display it as: + -value. This changes that.

I also made an attempt at converting the component into GJS format. This is done as a separate commit.
---
 .../components/modal/explain-reviewable.hbs   | 11 ++----
 .../discourse/app/components/score-value.gjs  | 34 +++++++++++++++++++
 .../discourse/app/components/score-value.hbs  | 14 --------
 .../discourse/app/components/score-value.js   |  3 --
 .../common/base/explain-reviewable.scss       |  2 +-
 5 files changed, 37 insertions(+), 27 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/score-value.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/score-value.hbs
 delete mode 100644 app/assets/javascripts/discourse/app/components/score-value.js

diff --git a/app/assets/javascripts/discourse/app/components/modal/explain-reviewable.hbs b/app/assets/javascripts/discourse/app/components/modal/explain-reviewable.hbs
index eb6a180232b..d4d751e5d3c 100644
--- a/app/assets/javascripts/discourse/app/components/modal/explain-reviewable.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/explain-reviewable.hbs
@@ -14,26 +14,19 @@
           {{#each this.reviewableExplanation.scores as |s|}}
             <tr>
               <td>
-                <ScoreValue @value="1.0" @tagName="" />
-                <ScoreValue
-                  @value={{s.type_bonus}}
-                  @label="type_bonus"
-                  @tagName=""
-                />
+                <ScoreValue @value="1.0" />
+                <ScoreValue @value={{s.type_bonus}} @label="type_bonus" />
                 <ScoreValue
                   @value={{s.take_action_bonus}}
                   @label="take_action_bonus"
-                  @tagName=""
                 />
                 <ScoreValue
                   @value={{s.trust_level_bonus}}
                   @label="trust_level_bonus"
-                  @tagName=""
                 />
                 <ScoreValue
                   @value={{s.user_accuracy_bonus}}
                   @label="user_accuracy_bonus"
-                  @tagName=""
                 />
               </td>
               <td class="sum">{{float s.score}}</td>
diff --git a/app/assets/javascripts/discourse/app/components/score-value.gjs b/app/assets/javascripts/discourse/app/components/score-value.gjs
new file mode 100644
index 00000000000..3b679b187dc
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/score-value.gjs
@@ -0,0 +1,34 @@
+import Component from "@glimmer/component";
+import I18n from "I18n";
+
+export default class ScoreValue extends Component {
+  <template>
+    {{#if @value}}
+      <span class="op">{{if this.isNegative "-" "+"}}</span>
+      <span class="score-value">
+        <span class="score-number">{{this.numericValue}}</span>
+        {{#if @label}}
+          <span title={{this.explanationTitle}} class="score-value-type">
+            {{this.explanationContent}}
+          </span>
+        {{/if}}
+      </span>
+    {{/if}}
+  </template>
+
+  get numericValue() {
+    return parseFloat(Math.abs(this.args.value)).toFixed(1);
+  }
+
+  get isNegative() {
+    return this.args.value < 0;
+  }
+
+  get explanationTitle() {
+    return I18n.t(`review.explain.${this.args.label}.title`);
+  }
+
+  get explanationContent() {
+    return I18n.t(`review.explain.${this.args.label}.name`);
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/score-value.hbs b/app/assets/javascripts/discourse/app/components/score-value.hbs
deleted file mode 100644
index d8562118c72..00000000000
--- a/app/assets/javascripts/discourse/app/components/score-value.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-{{#if this.value}}
-  <span class="score-value">
-    <span class="score-number">{{float this.value}}</span>
-    {{#if this.label}}
-      <span
-        title={{i18n (concat "review.explain." this.label ".title")}}
-        class="score-value-type"
-      >
-        {{i18n (concat "review.explain." this.label ".name")}}
-      </span>
-    {{/if}}
-  </span>
-  <span class="op">+</span>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/score-value.js b/app/assets/javascripts/discourse/app/components/score-value.js
deleted file mode 100644
index 87d5ddb040f..00000000000
--- a/app/assets/javascripts/discourse/app/components/score-value.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Component from "@ember/component";
-
-export default Component.extend({});
diff --git a/app/assets/stylesheets/common/base/explain-reviewable.scss b/app/assets/stylesheets/common/base/explain-reviewable.scss
index 9f82f808d2a..0a4bd1421a4 100644
--- a/app/assets/stylesheets/common/base/explain-reviewable.scss
+++ b/app/assets/stylesheets/common/base/explain-reviewable.scss
@@ -31,7 +31,7 @@
     color: var(--primary-medium);
   }
 
-  .op:last-of-type {
+  .op:first-of-type {
     display: none;
   }
 }