UX: shows a hint when there are more tags than displayed (#12649)

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

@@ -5,11 +5,14 @@ import DiscourseURL, { getCategoryAndTagUrl } from "discourse/lib/url";
 import TagsMixin from "select-kit/mixins/tags";
 import { computed } from "@ember/object";
 import { makeArray } from "discourse-common/lib/helpers";
+import { MAIN_COLLECTION } from "select-kit/components/select-kit";
 
 export const NO_TAG_ID = "no-tags";
 export const ALL_TAGS_ID = "all-tags";
 export const NONE_TAG_ID = "none";
 
+const MORE_TAGS_COLLECTION = "MORE_TAGS_COLLECTION";
+
 export default ComboBoxComponent.extend(TagsMixin, {
   pluginApiIdentifiers: ["tag-drop"],
   classNameBindings: ["categoryStyle", "tagClass"],
@@ -19,6 +22,14 @@ export default ComboBoxComponent.extend(TagsMixin, {
   categoryStyle: setting("category_style"),
   maxTagSearchResults: setting("max_tag_search_results"),
   sortTagsAlphabetically: setting("tags_sort_alphabetically"),
+  maxTagsInFilterList: setting("max_tags_in_filter_list"),
+  shouldShowMoreTags: computed(
+    "maxTagsInFilterList",
+    "topTags.[]",
+    function () {
+      return this.topTags.length > this.maxTagsInFilterList;
+    }
+  ),
 
   selectKitOptions: {
     allowAny: false,
@@ -34,6 +45,26 @@ export default ComboBoxComponent.extend(TagsMixin, {
 
   filterable: gte("content.length", 15),
 
+  init() {
+    this._super(...arguments);
+
+    this.insertAfterCollection(MAIN_COLLECTION, MORE_TAGS_COLLECTION);
+  },
+
+  modifyComponentForCollection(collection) {
+    if (collection === MORE_TAGS_COLLECTION) {
+      return "tag-drop/more-tags-collection";
+    }
+  },
+
+  modifyContentForCollection(collection) {
+    if (collection === MORE_TAGS_COLLECTION) {
+      return {
+        shouldShowMoreTags: this.shouldShowMoreTags,
+      };
+    }
+  },
+
   modifyNoSelection() {
     if (this.noTagsSelected) {
       return this.defaultItem(NO_TAG_ID, this.noTagsLabel);
@@ -90,18 +121,19 @@ export default ComboBoxComponent.extend(TagsMixin, {
     "site.top_tags.[]",
     function () {
       if (this.currentCategory && this.site.category_top_tags) {
-        return this.site.category_top_tags;
+        return this.site.category_top_tags || [];
       }
 
-      return this.site.top_tags;
+      return this.site.top_tags || [];
     }
   ),
 
   content: computed("topTags.[]", "shortcuts.[]", function () {
-    if (this.sortTagsAlphabetically && this.topTags) {
-      return this.shortcuts.concat(this.topTags.sort());
+    const topTags = this.topTags.slice(0, this.maxTagsInFilterList);
+    if (this.sortTagsAlphabetically && topTags) {
+      return this.shortcuts.concat(topTags.sort());
     } else {
-      return this.shortcuts.concat(makeArray(this.topTags));
+      return this.shortcuts.concat(makeArray(topTags));
     }
   }),
 

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

@@ -0,0 +1,10 @@
+import Component from "@ember/component";
+import layout from "select-kit/templates/components/tag-drop/more-tags-collection";
+
+export default Component.extend({
+  tagName: "",
+
+  layout,
+
+  collection: null,
+});

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

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

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

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

app/models/tag.rb

@@ -95,7 +95,9 @@ class Tag < ActiveRecord::Base
   end
 
   def self.top_tags(limit_arg: nil, category: nil, guardian: nil)
-    limit = limit_arg || SiteSetting.max_tags_in_filter_list
+    # we add 1 to max_tags_in_filter_list to efficiently know we have more tags
+    # than the limit. Frontend is responsible to enforce limit.
+    limit = limit_arg || (SiteSetting.max_tags_in_filter_list + 1)
     scope_category_ids = (guardian || Guardian.new).allowed_category_ids
 
     if category

config/locales/client.en.yml

@@ -1919,6 +1919,8 @@ en:
         one: "Selection must be at least %{count} character."
         other: "Selection must be at least %{count} characters."
       components:
+        tag_drop:
+          filter_for_more: Filter for more...
         categories_admin_dropdown:
           title: "Manage categories"