From efa9ba497575107aad9daa2711f7dd18db90b8f6 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 12 Feb 2020 14:34:16 -0500
Subject: [PATCH] UX: Prevent category-drop topic count from wrapping to new
 line (#8943)

---
 .../discourse/helpers/category-link.js.es6        |  7 +++++++
 .../select-kit/components/category-row.js.es6     |  3 ++-
 .../templates/components/category-row.hbs         |  3 ---
 test/javascripts/lib/category-badge-test.js.es6   | 15 +++++++++++++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/helpers/category-link.js.es6 b/app/assets/javascripts/discourse/helpers/category-link.js.es6
index a9867dac2a4..f2ec739038d 100644
--- a/app/assets/javascripts/discourse/helpers/category-link.js.es6
+++ b/app/assets/javascripts/discourse/helpers/category-link.js.es6
@@ -151,6 +151,13 @@ function defaultCategoryLinkRenderer(category, opts) {
   }
   html += "</span>";
 
+  if (opts.topicCount) {
+    html += `<span class="topic-count" aria-label="${I18n.t(
+      "category_row.topic_count",
+      { count: opts.topicCount }
+    )}">&times; ${opts.topicCount}</span>`;
+  }
+
   if (href) {
     href = ` href="${href}" `;
   }
diff --git a/app/assets/javascripts/select-kit/components/category-row.js.es6 b/app/assets/javascripts/select-kit/components/category-row.js.es6
index fe3639e20e7..e861debd27b 100644
--- a/app/assets/javascripts/select-kit/components/category-row.js.es6
+++ b/app/assets/javascripts/select-kit/components/category-row.js.es6
@@ -53,7 +53,8 @@ export default SelectKitRowComponent.extend({
       link: this.categoryLink,
       allowUncategorized:
         this.allowUncategorizedTopics || this.allowUncategorized,
-      hideParent: !!this.parentCategory
+      hideParent: !!this.parentCategory,
+      topicCount: this.topicCount
     }).htmlSafe();
   }),
 
diff --git a/app/assets/javascripts/select-kit/templates/components/category-row.hbs b/app/assets/javascripts/select-kit/templates/components/category-row.hbs
index e9356359dca..db51a397f80 100644
--- a/app/assets/javascripts/select-kit/templates/components/category-row.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/category-row.hbs
@@ -6,9 +6,6 @@
       {{/unless}}
     {{/if}}
     {{badgeForCategory}}
-    <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
-      &times; {{topicCount}}
-    </span>
   </div>
 
   {{#if shouldDisplayDescription}}
diff --git a/test/javascripts/lib/category-badge-test.js.es6 b/test/javascripts/lib/category-badge-test.js.es6
index 965899eb11b..2feb0a2f5a1 100644
--- a/test/javascripts/lib/category-badge-test.js.es6
+++ b/test/javascripts/lib/category-badge-test.js.es6
@@ -46,6 +46,21 @@ QUnit.test("undefined color", assert => {
   );
 });
 
+QUnit.test("topic count", assert => {
+  const store = createStore();
+  const category = store.createRecord("category", { name: "hello", id: 123 });
+
+  assert.equal(
+    categoryBadgeHTML(category).indexOf("topic-count"),
+    -1,
+    "it does not include topic count by default"
+  );
+  assert.ok(
+    categoryBadgeHTML(category, { topicCount: 20 }).indexOf("topic-count") > 20,
+    "is included when specified"
+  );
+});
+
 QUnit.test("allowUncategorized", assert => {
   const store = createStore();
   const uncategorized = store.createRecord("category", {