FIX: Do not break the whole app if color is invalid (#48)

This ensure we only log console warnings when the configuration uses
unsupported colors.

Author: pmusaraj

javascripts/discourse/initializers/tag-icons.js

@@ -33,6 +33,7 @@ function iconTagRenderer(tag, params) {
     tagElement.prepend(iconElement);
     tagElement.classList.add("discourse-tag--tag-icons-style");
     tagElement.style.setProperty("--color1", color ?? "");
+
     tagElement.style.setProperty("--color2", color ? contrastColor(color) : "");
 
     return tagElement.outerHTML;

javascripts/discourse/lib/colors.js

@@ -13,7 +13,9 @@ const hexToRgb = (hex) => {
   }
 
   if (!/^[0-9a-fA-F]{6}$/.test(value)) {
-    throw new Error(`Invalid hex color: ${hex}`);
+    // eslint-disable-next-line no-console
+    console.warn(`Invalid hex color: ${hex}`);
+    return false;
   }
 
   const num = parseInt(value, 16);
@@ -32,5 +34,8 @@ const luminance = (rgb) => {
 
 export const contrastColor = (hexColor) => {
   const rgb = hexToRgb(hexColor);
+  if (!rgb) {
+    return "";
+  }
   return luminance(rgb) >= 0.45 ? "#000d" : "#fffd";
 };

test/acceptance/tag-icons-test.js

@@ -67,4 +67,16 @@ acceptance("Topic with tags", function (needs) {
     const el = queryAll(".discourse-tags a.discourse-tag .tag-icon .d-icon")[0];
     assert.ok(el.classList.contains("d-icon-star"), "tag matches correct icon");
   });
+
+  test("Ensure non-HEX colors do not throw an error", async function (assert) {
+    settings.tag_icon_list = "Tag2,star,rgba(0,0,0)";
+
+    await visit("/t/internationalization-localization/280");
+
+    assert.ok(queryAll(".title-wrapper .discourse-tags"), "it has tags");
+    assert.ok(
+      queryAll(".discourse-tags a.discourse-tag .tag-icon").length,
+      "it has tag icon"
+    );
+  });
 });