From f7ed09a02c55b6112b70e8811aaad6026f8b4949 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Wed, 17 Aug 2022 12:39:02 +0800
Subject: [PATCH] UX: Sort categories alphabetically in Sidebar (#17958)

---
 .../javascripts/discourse/app/models/user.js  | 20 +++++++-------
 .../sidebar-categories-section-test.js        | 27 +++++++++++++++++++
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/models/user.js b/app/assets/javascripts/discourse/app/models/user.js
index 76c4d828697..0ac0c2d46ff 100644
--- a/app/assets/javascripts/discourse/app/models/user.js
+++ b/app/assets/javascripts/discourse/app/models/user.js
@@ -337,16 +337,18 @@ const User = RestModel.extend({
       return [];
     }
 
-    return Site.current().categoriesList.filter((category) => {
-      if (
-        this.siteSettings.suppress_uncategorized_badge &&
-        category.isUncategorizedCategory
-      ) {
-        return false;
-      }
+    return Site.current()
+      .categoriesList.filter((category) => {
+        if (
+          this.siteSettings.suppress_uncategorized_badge &&
+          category.isUncategorizedCategory
+        ) {
+          return false;
+        }
 
-      return sidebarCategoryIds.includes(category.id);
-    });
+        return sidebarCategoryIds.includes(category.id);
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
   },
 
   changeUsername(new_username) {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js
index 0164ed67e21..5ed73b48a26 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js
@@ -7,6 +7,7 @@ import {
   exists,
   publishToMessageBus,
   query,
+  queryAll,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
 
@@ -149,6 +150,32 @@ acceptance("Sidebar - Categories Section", function (needs) {
     );
   });
 
+  test("category section links are sorted by category name alphabetically", async function (assert) {
+    const { category1, category2, category3 } = setupUserSidebarCategories();
+
+    category3.set("name", "aBC");
+    category2.set("name", "abc");
+    category1.set("name", "efg");
+
+    await visit("/");
+
+    const categorySectionLinks = queryAll(
+      ".sidebar-section-categories .sidebar-section-link"
+    );
+
+    const categoryNames = [];
+
+    categorySectionLinks.each((_index, categorySectionLink) => {
+      categoryNames.push(categorySectionLink.textContent.trim());
+    });
+
+    assert.deepEqual(
+      categoryNames,
+      ["abc", "aBC", "efg"],
+      "category section links are displayed in the right order"
+    );
+  });
+
   test("category section links", async function (assert) {
     const { category1, category2, category3 } = setupUserSidebarCategories();