From fc166258d34f677edb23c0be5f5acb0a88277f8d Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Thu, 9 Feb 2023 14:20:04 +1100
Subject: [PATCH] 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.
---
 .../templates/modal/sidebar-section-form.hbs  |  1 +
 .../components/select-kit/icon-picker-test.js | 58 +++++++++++++++++++
 .../addon/components/icon-picker.js           |  8 +++
 3 files changed, 67 insertions(+)
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/select-kit/icon-picker-test.js

diff --git a/app/assets/javascripts/discourse/app/templates/modal/sidebar-section-form.hbs b/app/assets/javascripts/discourse/app/templates/modal/sidebar-section-form.hbs
index fe5ac508c58..66c864a0ca3 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/sidebar-section-form.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/icon-picker-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/icon-picker-test.js
new file mode 100644
index 00000000000..1648940c9d4
--- /dev/null
+++ b/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"]);
+  });
+});
diff --git a/app/assets/javascripts/select-kit/addon/components/icon-picker.js b/app/assets/javascripts/select-kit/addon/components/icon-picker.js
index ab6553acbdf..2ce9d6f77bb 100644
--- a/app/assets/javascripts/select-kit/addon/components/icon-picker.js
+++ b/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);