FEATURE: Use new experimental plugin API for sidebar (#21)

What does this change do?

This change uses the experimental `registerCustomCategorySectionLinkLockIcon` and `registerCustomCategorySectionLinkPrefix` plugin API
added to core to add support for custom category icons in Sidebar. Note
that the plugin APIs are marked as experimental because Discourse core
may soon support first class category icons so this theme component may
eventually become redundant.

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"
+    );
+  });
+});