FIX: Make category-chooser show all parent categories (#8706)

app/assets/javascripts/discourse/helpers/category-link.js.es6

@@ -25,7 +25,9 @@ function categoryStripe(color, classes) {
     @param {String}  [opts.url] The url that we want the category badge to link to.
     @param {Boolean} [opts.allowUncategorized] If false, returns an empty string for the uncategorized category.
     @param {Boolean} [opts.link] If false, the category badge will not be a link.
-    @param {Boolean} [opts.hideParaent] If true, parent category will be hidden in the badge.
+    @param {Boolean} [opts.hideParent] If true, parent category will be hidden in the badge.
+    @param {Boolean} [opts.recursive] If true, the function will be called recursively for all parent categories
+    @param {Number}  [opts.depth] Current category depth, used for limiting recursive calls
 **/
 export function categoryBadgeHTML(category, opts) {
   opts = opts || {};
@@ -38,6 +40,13 @@ export function categoryBadgeHTML(category, opts) {
   )
     return "";
 
+  const depth = (opts.depth || 1) + 1;
+  if (opts.recursive && depth <= Discourse.SiteSettings.max_category_nesting) {
+    const parentCategory = Category.findById(category.parent_category_id);
+    opts.depth = depth;
+    return categoryBadgeHTML(parentCategory, opts) + _renderer(category, opts);
+  }
+
   return _renderer(category, opts);
 }
 

app/assets/javascripts/select-kit/components/category-chooser.js.es6

@@ -72,26 +72,12 @@ export default ComboBoxComponent.extend({
 
     if (this.hasSelection) {
       const category = Category.findById(content.value);
-      const parentCategoryId = category.get("parent_category_id");
-      const hasParentCategory = Ember.isPresent(parentCategoryId);
-
-      let badge = "";
-
-      if (hasParentCategory) {
-        const parentCategory = Category.findById(parentCategoryId);
-        badge += categoryBadgeHTML(parentCategory, {
-          link: false,
-          allowUncategorized: true
-        }).htmlSafe();
-      }
-
-      badge += categoryBadgeHTML(category, {
+      content.label = categoryBadgeHTML(category, {
         link: false,
-        hideParent: hasParentCategory ? true : false,
-        allowUncategorized: true
+        hideParent: !!category.parent_category_id,
+        allowUncategorized: true,
+        recursive: true
       }).htmlSafe();
-
-      content.label = badge;
     }
 
     return content;

app/assets/javascripts/select-kit/components/category-row.js.es6

@@ -45,7 +45,7 @@ export default SelectKitRowComponent.extend({
     return categoryBadgeHTML(category, {
       link: this.categoryLink,
       allowUncategorized: this.allowUncategorized,
-      hideParent: parentCategory ? true : false
+      hideParent: !!parentCategory
     }).htmlSafe();
   },
 
@@ -53,7 +53,8 @@ export default SelectKitRowComponent.extend({
   badgeForParentCategory(parentCategory) {
     return categoryBadgeHTML(parentCategory, {
       link: this.categoryLink,
-      allowUncategorized: this.allowUncategorized
+      allowUncategorized: this.allowUncategorized,
+      recursive: true
     }).htmlSafe();
   },
 

app/assets/javascripts/select-kit/templates/components/category-row.hbs

@@ -1,22 +1,15 @@
 {{#if category}}
-    {{#if hasParentCategory}}
-      <div class="category-status">
+    <div class="category-status">
+      {{#if hasParentCategory}}
         {{#unless hideParentCategory}}
           {{badgeForParentCategory}}
         {{/unless}}
-        {{badgeForCategory}}
-        <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
-          &times; {{topicCount}}
-        </span>
-      </div>
-    {{else}}
-      <div class="category-status">
-        {{badgeForCategory}}
-        <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
-          &times; {{topicCount}}
-        </span>
-      </div>
-    {{/if}}
+      {{/if}}
+      {{badgeForCategory}}
+      <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
+        &times; {{topicCount}}
+      </span>
+    </div>
 
     {{#if shouldDisplayDescription}}
       <div class="category-desc">{{{dir-span description}}}</div>

test/javascripts/lib/category-badge-test.js.es6

@@ -91,3 +91,42 @@ QUnit.test("category names are wrapped in dir-spans", assert => {
   dirSpan = tag.children[1].children[0];
   assert.equal(dirSpan.dir, "ltr");
 });
+
+QUnit.test("recursive", assert => {
+  const store = createStore();
+
+  const foo = store.createRecord("category", {
+    name: "foo",
+    id: 1
+  });
+
+  const bar = store.createRecord("category", {
+    name: "bar",
+    id: 2,
+    parent_category_id: foo.id
+  });
+
+  const baz = store.createRecord("category", {
+    name: "baz",
+    id: 3,
+    parent_category_id: bar.id
+  });
+
+  Discourse.set("SiteSettings.max_category_nesting", 0);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("baz") !== -1);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("bar") === -1);
+
+  Discourse.set("SiteSettings.max_category_nesting", 1);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("baz") !== -1);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("bar") === -1);
+
+  Discourse.set("SiteSettings.max_category_nesting", 2);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("baz") !== -1);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("bar") !== -1);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("foo") === -1);
+
+  Discourse.set("SiteSettings.max_category_nesting", 3);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("baz") !== -1);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("bar") !== -1);
+  assert.ok(categoryBadgeHTML(baz, { recursive: true }).indexOf("foo") !== -1);
+});