UX: Add "filter for more" to icon picker (#25263)

Repurposes the existing "filter for more" row from the tag drop component.

app/assets/javascripts/discourse/tests/integration/components/select-kit/tag-drop-test.js

@@ -83,4 +83,17 @@ module("Integration | Component | select-kit/tag-drop", function (hooks) {
       "it has the tag count"
     );
   });
+
+  test("default global (no category)", async function (assert) {
+    this.siteSettings.max_tags_in_filter_list = 3;
+    await render(hbs`<TagDrop />`);
+
+    await this.subject.expand();
+    assert.dom(".filter-for-more").exists("it has the 'filter for more' note");
+
+    await this.subject.fillInFilter("dav");
+    assert
+      .dom(".filter-for-more")
+      .doesNotExist("it does not have the 'filter for more' note");
+  });
 });

app/assets/javascripts/select-kit/addon/components/filter-for-more.gjs

@@ -0,0 +1,11 @@
+import i18n from "discourse-common/helpers/i18n";
+
+const FilterForMore = <template>
+  {{#if @collection.content.shouldShowMoreTip}}
+    <div class="filter-for-more">
+      {{i18n "select_kit.components.filter_for_more"}}
+    </div>
+  {{/if}}
+</template>;
+
+export default FilterForMore;

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

@@ -8,7 +8,13 @@ import {
   disableMissingIconWarning,
   enableMissingIconWarning,
 } from "discourse-common/lib/icon-library";
+import FilterForMore from "select-kit/components/filter-for-more";
 import MultiSelectComponent from "select-kit/components/multi-select";
+import { MAIN_COLLECTION } from "select-kit/components/select-kit";
+
+const MORE_ICONS_COLLECTION = "MORE_ICONS_COLLECTION";
+const MAX_RESULTS_RETURNED = 200;
+// Matches  max returned results from icon_picker_search in svg_sprite_controller.rb
 
 export default MultiSelectComponent.extend({
   pluginApiIdentifiers: ["icon-picker"],
@@ -18,10 +24,27 @@ export default MultiSelectComponent.extend({
     this._super(...arguments);
 
     this._cachedIconsList = null;
+    this._resultCount = 0;
 
     if (isDevelopment()) {
       disableMissingIconWarning();
     }
+
+    this.insertAfterCollection(MAIN_COLLECTION, MORE_ICONS_COLLECTION);
+  },
+
+  modifyComponentForCollection(collection) {
+    if (collection === MORE_ICONS_COLLECTION) {
+      return FilterForMore;
+    }
+  },
+
+  modifyContentForCollection(collection) {
+    if (collection === MORE_ICONS_COLLECTION) {
+      return {
+        shouldShowMoreTip: this._resultCount === MAX_RESULTS_RETURNED,
+      };
+    }
   },
 
   content: computed("value.[]", function () {
@@ -29,11 +52,8 @@ export default MultiSelectComponent.extend({
   }),
 
   search(filter = "") {
-    if (
-      filter === "" &&
-      this._cachedIconsList &&
-      this._cachedIconsList.length
-    ) {
+    if (filter === "" && this._cachedIconsList?.length) {
+      this._resultCount = this._cachedIconsList.length;
       return this._cachedIconsList;
     } else {
       return ajax("/svg-sprite/picker-search", {
@@ -46,6 +66,7 @@ export default MultiSelectComponent.extend({
         if (filter === "") {
           this._cachedIconsList = icons;
         }
+        this._resultCount = icons.length;
         return icons;
       });
     }
@@ -84,6 +105,7 @@ export default MultiSelectComponent.extend({
     this._super(...arguments);
 
     this._cachedIconsList = null;
+    this._resultCount = 0;
 
     if (isDevelopment()) {
       enableMissingIconWarning();

app/assets/javascripts/select-kit/addon/components/tag-drop.js

@@ -4,6 +4,7 @@ import { i18n, setting } from "discourse/lib/computed";
 import DiscourseURL, { getCategoryAndTagUrl } from "discourse/lib/url";
 import { makeArray } from "discourse-common/lib/helpers";
 import ComboBoxComponent from "select-kit/components/combo-box";
+import FilterForMore from "select-kit/components/filter-for-more";
 import { MAIN_COLLECTION } from "select-kit/components/select-kit";
 import TagsMixin from "select-kit/mixins/tags";
 
@@ -24,8 +25,13 @@ export default ComboBoxComponent.extend(TagsMixin, {
   shouldShowMoreTags: computed(
     "maxTagsInFilterList",
     "topTags.[]",
+    "mainCollection.[]",
     function () {
-      return this.topTags.length > this.maxTagsInFilterList;
+      if (this.selectKit.filter?.length > 0) {
+        return this.mainCollection.length > this.maxTagsInFilterList;
+      } else {
+        return this.topTags.length > this.maxTagsInFilterList;
+      }
     }
   ),
 
@@ -49,14 +55,14 @@ export default ComboBoxComponent.extend(TagsMixin, {
 
   modifyComponentForCollection(collection) {
     if (collection === MORE_TAGS_COLLECTION) {
-      return "tag-drop/more-tags-collection";
+      return FilterForMore;
     }
   },
 
   modifyContentForCollection(collection) {
     if (collection === MORE_TAGS_COLLECTION) {
       return {
-        shouldShowMoreTags: this.shouldShowMoreTags,
+        shouldShowMoreTip: this.shouldShowMoreTags,
       };
     }
   },

app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.hbs

@@ -1,5 +0,0 @@
-{{#if this.collection.content.shouldShowMoreTags}}
-  <div class="more-tags">
-    {{i18n "select_kit.components.tag_drop.filter_for_more"}}
-  </div>
-{{/if}}

app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.js

@@ -1,6 +0,0 @@
-import Component from "@ember/component";
-
-export default Component.extend({
-  tagName: "",
-  collection: null,
-});

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -53,6 +53,15 @@
     .select-kit-filter.is-expanded {
       padding: 0.25em 0.5em;
     }
+
+    .filter-for-more {
+      display: flex;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0.5em 1em;
+      font-size: var(--font-down-1);
+      color: var(--primary-low-mid);
+    }
   }
 
   &.is-loading {

app/assets/stylesheets/common/select-kit/tag-drop.scss

@@ -10,15 +10,6 @@
           font-weight: 700;
         }
       }
-
-      .more-tags {
-        display: flex;
-        box-sizing: border-box;
-        width: 100%;
-        padding: 0.5em 1em;
-        font-size: var(--font-down-1);
-        color: var(--primary-low-mid);
-      }
     }
   }
 }

config/locales/client.en.yml

@@ -2346,8 +2346,7 @@ en:
         one: "Select at least %{count} item."
         other: "Select at least %{count} items."
       components:
-        tag_drop:
-          filter_for_more: Filter for more…
+        filter_for_more: Filter for more…
         categories_admin_dropdown:
           title: "Manage categories"
 

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs

@@ -168,3 +168,7 @@
 <StyleguideExample @title="<UserNotificationsDropdown>">
   <UserNotificationsDropdown @user={{@currentUser}} @value="changeToNormal" />
 </StyleguideExample>
+
+<StyleguideExample @title="<IconPicker>">
+  <IconPicker @name="icon" />
+</StyleguideExample>