FEATURE: Use new experimental plugin API for sidebar

javascripts/discourse/initializers/category-icons.js

@@ -47,6 +47,7 @@ export default {
             ? categorySlug.indexOf(str.substr(0, str.indexOf(","))) > -1
             : ""
         );
+
         if (categoryThemeItem) {
           let iconItem = categoryThemeItem.split(",");
           // Test partial/exact match
@@ -118,6 +119,7 @@ export default {
 
         /// Add custom category icon from theme settings
         let iconItem = getIconItem(category.slug);
+
         if (iconItem) {
           let itemColor = iconItem[2]
             ? iconItem[2].match(/categoryColo(u*)r/)
@@ -176,6 +178,42 @@ export default {
           }
         },
       });
+
+      if (api.registerCustomCategorySectionLinkLockIcon) {
+        api.registerCustomCategorySectionLinkLockIcon(lockIcon);
+      }
+
+      if (api.registerCustomCategorySectionLinkPrefix) {
+        const site = api.container.lookup("service:site");
+
+        categoryThemeList.forEach((str) => {
+          const [slug, icon, color, match] = str.split(",");
+
+          if (slug && icon && color) {
+            const category = site.categories.find((cat) => {
+              if (match === "partial") {
+                return cat.slug.toLowerCase().includes(slug.toLowerCase());
+              } else {
+                return cat.slug.toLowerCase() === slug.toLowerCase();
+              }
+            });
+
+            if (category) {
+              const opts = {
+                categoryId: category.id,
+                prefixType: "icon",
+                prefixValue: icon,
+              };
+
+              if (!color.match(/categoryColo(u*)r/g)) {
+                opts.prefixColor = color.replace(/^#/, "");
+              }
+
+              api.registerCustomCategorySectionLinkPrefix(opts);
+            }
+          }
+        });
+      }
     });
   },
 };

test/acceptance/sidebar-category-icons-test.js

@@ -0,0 +1,82 @@
+import { test } from "qunit";
+import {
+  acceptance,
+  exists,
+  query,
+  updateCurrentUser,
+} from "discourse/tests/helpers/qunit-helpers";
+import { visit } from "@ember/test-helpers";
+import Site from "discourse/models/site";
+
+acceptance("Sidebar - Category icons", function (needs) {
+  needs.user();
+
+  let category1;
+  let category2;
+
+  needs.hooks.beforeEach(() => {
+    const categories = Site.current().categories;
+    category1 = categories[0];
+    category2 = categories[1];
+
+    settings.category_lock_icon = "wrench";
+    settings.category_icon_list = `${category1.slug},wrench,#FF0000|${category2.slug},question-circle,categoryColor`;
+  });
+
+  test("Icon for category when `category_icon_list` theme setting has been configured", async function (assert) {
+    category2.color = "000000";
+
+    updateCurrentUser({
+      sidebar_category_ids: [category1.id, category2.id],
+    });
+
+    await visit("/");
+
+    assert.ok(
+      exists(
+        `.sidebar-section-link-wrapper[data-category-id="${category1.id}"] .prefix-icon.d-icon-wrench`
+      ),
+      `wrench icon is displayed for ${category1.slug} section link's prefix icon`
+    );
+
+    assert.strictEqual(
+      query(
+        `.sidebar-section-link-wrapper[data-category-id="${category1.id}"] .sidebar-section-link-prefix`
+      ).style.color,
+      "rgb(255, 0, 0)",
+      `${category1.slug} section link's prefix icon has the right color`
+    );
+
+    assert.ok(
+      exists(
+        `.sidebar-section-link-wrapper[data-category-id="${category2.id}"] .prefix-icon.d-icon-question-circle`
+      ),
+      `question-circle icon is displayed for ${category2.slug} section link's prefix icon`
+    );
+
+    assert.strictEqual(
+      query(
+        `.sidebar-section-link-wrapper[data-category-id="${category2.id}"] .sidebar-section-link-prefix`
+      ).style.color,
+      "rgb(0, 0, 0)",
+      `${category2.slug} section link's prefix icon has the right color`
+    );
+  });
+
+  test("Prefix badge icon for read restricted categories when `category_lock_icon` theme setting is set", async function (assert) {
+    category1.read_restricted = true;
+
+    updateCurrentUser({
+      sidebar_category_ids: [category1.id],
+    });
+
+    await visit("/");
+
+    assert.ok(
+      exists(
+        `.sidebar-section-link-wrapper[data-category-id="${category1.id}"] .prefix-badge.d-icon-wrench`
+      ),
+      "wrench icon is displayed for the section link's prefix badge"
+    );
+  });
+});