FIX: IconPicker option to display only available icons (#20226)

Not all icons are shipped by default. Sidebar section icon picker should only display available icons.

app/assets/javascripts/discourse/app/templates/modal/sidebar-section-form.hbs

@@ -26,6 +26,7 @@
             @value={{link.icon}}
             @options={{hash maximum=1}}
             class={{link.iconCssClass}}
+            @onlyAvailable={{true}}
             @onChange={{action (mut link.icon)}}
           />
         </div>

app/assets/javascripts/discourse/tests/integration/components/select-kit/icon-picker-test.js

@@ -0,0 +1,58 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import selectKit from "discourse/tests/helpers/select-kit-helper";
+import { queryAll } from "discourse/tests/helpers/qunit-helpers";
+import pretender, { response } from "discourse/tests/helpers/create-pretender";
+import { setIconList } from "discourse-common/lib/icon-library";
+
+module("Integration | Component | select-kit/icon-picker", function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.set("subject", selectKit());
+    setIconList(["ad", "link"]);
+
+    pretender.get("/svg-sprite/picker-search", () => {
+      return response([
+        { id: "ad", symbol: "" },
+        { id: "bacon", symbol: "" },
+        { id: "link", symbol: [] },
+      ]);
+    });
+  });
+
+  test("content", async function (assert) {
+    await render(hbs`
+      <IconPicker
+        @name="icon"
+        @value={{this.value}}
+        @content={{this.content}}
+      />
+    `);
+
+    await this.subject.expand();
+    const icons = [...queryAll(".select-kit-row .name")].map(
+      (el) => el.innerText
+    );
+    assert.deepEqual(icons, ["ad", "bacon", "link"]);
+  });
+
+  test("only available", async function (assert) {
+    await render(hbs`
+      <IconPicker
+        @name="icon"
+        @value={{this.value}}
+        @content={{this.content}}
+        @onlyAvailable={{true}}
+      />
+    `);
+
+    await this.subject.expand();
+    const icons = [...queryAll(".select-kit-row .name")].map(
+      (el) => el.innerText
+    );
+    assert.deepEqual(icons, ["ad", "link"]);
+  });
+});

app/assets/javascripts/select-kit/addon/components/icon-picker.js

@@ -2,6 +2,7 @@ import {
   convertIconClass,
   disableMissingIconWarning,
   enableMissingIconWarning,
+  isExistingIconId,
 } from "discourse-common/lib/icon-library";
 import MultiSelectComponent from "select-kit/components/multi-select";
 import { computed } from "@ember/object";
@@ -39,6 +40,9 @@ export default MultiSelectComponent.extend({
         data: { filter },
       }).then((icons) => {
         icons = icons.map(this._processIcon);
+        if (this.onlyAvailable) {
+          icons = icons.filter(this._iconExists);
+        }
         if (filter === "") {
           this._cachedIconsList = icons;
         }
@@ -47,6 +51,10 @@ export default MultiSelectComponent.extend({
     }
   },
 
+  _iconExists(icon) {
+    return isExistingIconId(icon.id);
+  },
+
   _processIcon(icon) {
     const iconName = typeof icon === "object" ? icon.id : icon,
       strippedIconName = convertIconClass(iconName);