UX: Show grandchildren in categories list (#8592)

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

@@ -65,6 +65,16 @@ const Category = RestModel.extend({
     return (parentLevel || -1) + 1;
   },
 
+  @discourseComputed("subcategories")
+  isGrandParent(subcategories) {
+    return (
+      subcategories &&
+      subcategories.some(
+        cat => cat.subcategories && cat.subcategories.length > 0
+      )
+    );
+  },
+
   @discourseComputed("notification_level")
   isMuted(notificationLevel) {
     return notificationLevel === NotificationLevels.MUTED;

app/assets/javascripts/discourse/templates/components/categories-only.hbs

@@ -13,12 +13,35 @@
       {{#each categories as |c|}}
         <tr data-category-id={{c.id}} class="{{if c.description_excerpt 'has-description' 'no-description'}} {{if c.uploaded_logo.url 'has-logo' 'no-logo'}}">
           <td class="category" style={{border-color c.color}}>
-              {{category-title-link category=c}}
-              <div class="category-description">
-                {{{dir-span c.description_excerpt}}}
-            
-              </div>
-                   {{#if c.subcategories}}
+            {{category-title-link category=c}}
+            <div class="category-description">
+              {{{dir-span c.description_excerpt}}}
+            </div>
+
+            {{#if c.isGrandParent}}
+              <table class="category-list">
+                {{#each c.subcategories as |subcategory|}}
+                  <tr data-category-id={{subcategory.id}} class="no-description {{if subcategory.uploaded_logo.url 'has-logo' 'no-logo'}}">
+                    <td class="category" style={{border-color subcategory.color}}>
+                      {{category-title-link category=subcategory}}
+
+                      {{#if subcategory.subcategories}}
+                        <div class='subcategories'>
+                          {{#each subcategory.subcategories as |subsubcategory|}}
+                            {{#unless subsubcategory.isMuted}}
+                              <span class='subcategory'>
+                                {{category-title-before category=subsubcategory}}
+                                {{category-link subsubcategory hideParent="true"}}
+                              </span>
+                            {{/unless}}
+                          {{/each}}
+                        </div>
+                      {{/if}}
+                    </td>
+                  </tr>
+                {{/each}}
+              </table>
+            {{else if c.subcategories}}
               <div class='subcategories'>
                 {{#each c.subcategories as |subcategory|}}
                   {{#unless subcategory.isMuted}}
@@ -31,7 +54,6 @@
                 {{/each}}
               </div>
             {{/if}}
-           
           </td>
           <td class="topics">
             <div title={{c.statTitle}}>{{{c.stat}}}</div>