FIX: Sidebar categories for anonymous not being sorted by name (#18339)

Sort it by name for now even though we have an on going conversation to
decide how categories should be sorted in sidebar

https://meta.discourse.org/t/sidebar-categories-are-out-of-order-for-anonymous-users/239679

app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.js

@@ -1,16 +1,11 @@
-import { cached } from "@glimmer/tracking";
 import { inject as service } from "@ember/service";
-import Component from "@glimmer/component";
-import CategorySectionLink from "discourse/lib/sidebar/user/categories-section/category-section-link";
 import { canDisplayCategory } from "discourse/lib/sidebar/helpers";
+import SidebarCommonCategoriesSection from "discourse/components/sidebar/common/categories-section";
 
-export default class SidebarAnonymousCategoriesSection extends Component {
-  @service topicTrackingState;
+export default class SidebarAnonymousCategoriesSection extends SidebarCommonCategoriesSection {
   @service site;
-  @service siteSettings;
 
-  @cached
-  get sectionLinks() {
+  get categories() {
     let categories = this.site.categoriesList;
 
     if (this.siteSettings.default_sidebar_categories) {
@@ -31,11 +26,6 @@ export default class SidebarAnonymousCategoriesSection extends Component {
         .slice(0, 5);
     }
 
-    return categories.map((category) => {
-      return new CategorySectionLink({
-        category,
-        topicTrackingState: this.topicTrackingState,
-      });
-    });
+    return categories;
   }
 }

app/assets/javascripts/discourse/app/components/sidebar/common/categories-section.js

@@ -0,0 +1,29 @@
+import Component from "@glimmer/component";
+import { cached } from "@glimmer/tracking";
+import { inject as service } from "@ember/service";
+
+import CategorySectionLink from "discourse/lib/sidebar/user/categories-section/category-section-link";
+
+export default class SidebarCommonCategoriesSection extends Component {
+  @service topicTrackingState;
+  @service siteSettings;
+
+  // Override in child
+  get categories() {}
+
+  @cached
+  get sectionLinks() {
+    return this.categories
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .reduce((links, category) => {
+        links.push(
+          new CategorySectionLink({
+            category,
+            topicTrackingState: this.topicTrackingState,
+          })
+        );
+
+        return links;
+      }, []);
+  }
+}

app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js

@@ -1,18 +1,14 @@
 import I18n from "I18n";
 
-import { cached } from "@glimmer/tracking";
 import { inject as service } from "@ember/service";
 import { action } from "@ember/object";
 
-import Component from "@glimmer/component";
-import CategorySectionLink from "discourse/lib/sidebar/user/categories-section/category-section-link";
 import { canDisplayCategory } from "discourse/lib/sidebar/helpers";
+import SidebarCommonCategoriesSection from "discourse/components/sidebar/common/categories-section";
 
-export default class SidebarUserCategoriesSection extends Component {
+export default class SidebarUserCategoriesSection extends SidebarCommonCategoriesSection {
   @service router;
-  @service topicTrackingState;
   @service currentUser;
-  @service siteSettings;
 
   constructor() {
     super(...arguments);
@@ -28,24 +24,10 @@ export default class SidebarUserCategoriesSection extends Component {
     this.topicTrackingState.offStateChange(this.callbackId);
   }
 
-  @cached
-  get sectionLinks() {
-    const links = [];
-
-    const categories = this.currentUser.sidebarCategories.filter((category) => {
+  get categories() {
+    return this.currentUser.sidebarCategories.filter((category) => {
       return canDisplayCategory(category, this.siteSettings);
     });
-
-    for (const category of categories) {
-      links.push(
-        new CategorySectionLink({
-          category,
-          topicTrackingState: this.topicTrackingState,
-        })
-      );
-    }
-
-    return links;
   }
 
   get noCategoriesText() {

app/assets/javascripts/discourse/app/models/user.js

@@ -333,11 +333,9 @@ const User = RestModel.extend({
       return [];
     }
 
-    return Site.current()
-      .categoriesList.filter((category) =>
-        sidebarCategoryIds.includes(category.id)
-      )
-      .sort((a, b) => a.name.localeCompare(b.name));
+    return Site.current().categoriesList.filter((category) =>
+      sidebarCategoryIds.includes(category.id)
+    );
   },
 
   changeUsername(new_username) {

app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-categories-section-test.js

@@ -20,10 +20,10 @@ acceptance("Sidebar - Anonymous Categories Section", function (needs) {
       ".sidebar-section-categories .sidebar-section-link-wrapper"
     );
     assert.strictEqual(categories.length, 6);
-    assert.strictEqual(categories[0].textContent.trim(), "support");
-    assert.strictEqual(categories[1].textContent.trim(), "bug");
+    assert.strictEqual(categories[0].textContent.trim(), "bug");
+    assert.strictEqual(categories[1].textContent.trim(), "dev");
     assert.strictEqual(categories[2].textContent.trim(), "feature");
-    assert.strictEqual(categories[3].textContent.trim(), "dev");
+    assert.strictEqual(categories[3].textContent.trim(), "support");
     assert.strictEqual(categories[4].textContent.trim(), "ux");
 
     assert.ok(
@@ -41,9 +41,9 @@ acceptance("Sidebar - Anonymous Categories Section", function (needs) {
     );
 
     assert.strictEqual(categories.length, 4);
-    assert.strictEqual(categories[0].textContent.trim(), "bug");
-    assert.strictEqual(categories[1].textContent.trim(), "meta");
-    assert.strictEqual(categories[2].textContent.trim(), "blog");
+    assert.strictEqual(categories[0].textContent.trim(), "blog");
+    assert.strictEqual(categories[1].textContent.trim(), "bug");
+    assert.strictEqual(categories[2].textContent.trim(), "meta");
 
     assert.ok(
       exists("a.sidebar-section-link-all-categories"),