From c16cb0e00b35fa6d09539276d36f2b2c6eda7d70 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 13 Oct 2022 17:00:46 +0800
Subject: [PATCH] FIX: Missing category badge for category with color stored as
 3-digit hex code (#18579)

On the server side, the only limitation for `Category#color` is a length
limit of 6. Therefore, we cannot assume on the client side that the hex
code is always 6 digits.
---
 .../app/components/sidebar/section-link.js         |  4 +++-
 .../sidebar-user-categories-section-test.js        | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
index e472e99ac7f..8dd0574aa91 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
@@ -53,11 +53,13 @@ export default class SectionLink extends Component {
 
   get prefixElementColors() {
     const prefixElementColors = this.args.prefixElementColors.filter((color) =>
-      color?.match(/^\w{6}$/)
+      color?.slice(0, 6)
     );
+
     if (prefixElementColors.length === 1) {
       prefixElementColors.push(prefixElementColors[0]);
     }
+
     return prefixElementColors.map((color) => `#${color} 50%`).join(", ");
   }
 }
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
index 96656d8cf10..20a402d5350 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
@@ -291,6 +291,20 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
   });
 
+  test("category section link for category with 3-digit hex code for color", async function (assert) {
+    const { category1 } = setupUserSidebarCategories();
+    category1.set("color", "888");
+
+    await visit("/");
+
+    assert.ok(
+      exists(
+        `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix .prefix-span[style="background: linear-gradient(90deg, #888 50%, #888 50%)"]`
+      ),
+      "category1 section link is rendered with the right solid prefix icon color"
+    );
+  });
+
   test("category section link have the right title", async function (assert) {
     const categories = Site.current().categories;