FIX: Include tags in quick search suggestions (#14080)

Followup to 438a762956

app/assets/javascripts/discourse/app/widgets/search-menu-results.js

@@ -5,6 +5,7 @@ import { avatarImg } from "discourse/widgets/post";
 import { createWidget } from "discourse/widgets/widget";
 import { dateNode } from "discourse/helpers/node";
 import { emojiUnescape } from "discourse/lib/text";
+import getURL from "discourse-common/lib/get-url";
 import { h } from "virtual-dom";
 import highlightSearch from "discourse/lib/highlight-search";
 import { iconNode } from "discourse-common/lib/icon-library";
@@ -369,37 +370,45 @@ createWidget("search-menu-assistant", {
 
     const content = [];
     const { fullTerm, suggestionKeyword } = attrs;
-    const prefix = fullTerm.split(suggestionKeyword)[0].trim() || null;
+    let prefix = fullTerm.split(suggestionKeyword)[0].trim() || "";
+
+    if (prefix.length) {
+      prefix = `${prefix} `;
+    }
 
     switch (suggestionKeyword) {
       case "#":
-        attrs.results.forEach((category) => {
+        attrs.results.forEach((item) => {
-          const fullSlug = category.parentCategory
+          if (item.model) {
-            ? `#${category.parentCategory.slug}:${category.slug}`
+            const fullSlug = item.model.parentCategory
-            : `#${category.slug}`;
+              ? `#${item.model.parentCategory.slug}:${item.model.slug}`
+              : `#${item.model.slug}`;
 
-          const slug = prefix ? `${prefix} ${fullSlug} ` : `${fullSlug} `;
+            content.push(
-
+              this.attach("search-menu-assistant-item", {
-          content.push(
+                prefix,
-            this.attach("search-menu-assistant-item", {
+                category: item.model,
-              prefix: prefix,
+                slug: `${prefix}${fullSlug} `,
-              category,
+              })
-              slug,
+            );
-            })
+          } else {
-          );
+            content.push(
+              this.attach("search-menu-assistant-item", {
+                prefix,
+                tag: item.name,
+                slug: `${prefix}#${item.name} `,
+              })
+            );
+          }
         });
         break;
       case "@":
         attrs.results.forEach((user) => {
-          const slug = prefix
-            ? `${prefix} @${user.username} `
-            : `@${user.username} `;
-
           content.push(
             this.attach("search-menu-assistant-item", {
-              prefix: prefix,
+              prefix,
               user,
-              slug,
+              slug: `${prefix}@${user.username} `,
             })
           );
         });
@@ -407,8 +416,11 @@ createWidget("search-menu-assistant", {
       default:
         suggestionShortcuts.forEach((item) => {
           if (item.includes(suggestionKeyword)) {
-            const slug = prefix ? `${prefix} ${item} ` : `${item} `;
+            content.push(
-            content.push(this.attach("search-menu-assistant-item", { slug }));
+              this.attach("search-menu-assistant-item", {
+                slug: `${prefix}${item} `,
+              })
+            );
           }
         });
         break;
@@ -422,6 +434,7 @@ createWidget("search-menu-assistant-item", {
   tagName: "li.search-menu-assistant-item",
 
   html(attrs) {
+    const prefix = attrs.prefix?.trim();
     if (attrs.category) {
       return h(
         "a.widget-link.search-link",
@@ -431,7 +444,7 @@ createWidget("search-menu-assistant-item", {
           },
         },
         [
-          h("span.search-item-prefix", attrs.prefix),
+          h("span.search-item-prefix", prefix),
           this.attach("category-link", {
             category: attrs.category,
             allowUncategorized: true,
@@ -439,6 +452,20 @@ createWidget("search-menu-assistant-item", {
           }),
         ]
       );
+    } else if (attrs.tag) {
+      return h(
+        "a.widget-link.search-link",
+        {
+          attributes: {
+            href: getURL(`/tag/${attrs.tag}`),
+          },
+        },
+        [
+          h("span.search-item-prefix", prefix),
+          iconNode("tag"),
+          h("span.search-item-tag", attrs.tag),
+        ]
+      );
     } else if (attrs.user) {
       const userResult = [
         avatarImg("small", {
@@ -456,7 +483,7 @@ createWidget("search-menu-assistant-item", {
           },
         },
         [
-          h("span.search-item-prefix", attrs.prefix),
+          h("span.search-item-prefix", prefix),
           h("span.search-item-user", userResult),
         ]
       );

app/assets/javascripts/discourse/app/widgets/search-menu.js

@@ -1,5 +1,4 @@
 import { isValidSearchTerm, searchForTerm } from "discourse/lib/search";
-import Category from "discourse/models/category";
 import DiscourseURL from "discourse/lib/url";
 import { createWidget } from "discourse/widgets/widget";
 import discourseDebounce from "discourse-common/lib/debounce";
@@ -7,6 +6,8 @@ import { get } from "@ember/object";
 import getURL from "discourse-common/lib/get-url";
 import { h } from "virtual-dom";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { Promise } from "rsvp";
+import { search as searchCategoryTag } from "discourse/lib/category-tag-search";
 import userSearch from "discourse/lib/user-search";
 
 const CATEGORY_SLUG_REGEXP = /(\#[a-zA-Z0-9\-:]*)$/gi;
@@ -59,9 +60,15 @@ const SearchHelper = {
           ""
         );
 
-        searchData.suggestionResults = Category.search(categorySearchTerm);
+        const categoryTagSearch = searchCategoryTag(
-        searchData.suggestionKeyword = "#";
+          categorySearchTerm,
-        widget.scheduleRerender();
+          widget.siteSettings
+        );
+        Promise.resolve(categoryTagSearch).then((results) => {
+          searchData.suggestionResults = results;
+          searchData.suggestionKeyword = "#";
+          widget.scheduleRerender();
+        });
       } else if (matchSuggestions.type === "username") {
         const userSearchTerm = matchSuggestions.usernamesMatch[0].replace(
           "@",

app/assets/javascripts/discourse/tests/acceptance/search-test.js

@@ -263,6 +263,22 @@ acceptance("Search - with tagging enabled", function (needs) {
 
     assert.equal(tags, "dev slow");
   });
+
+  test("displays tag shortcuts", async function (assert) {
+    await visit("/");
+
+    await click("#search-button");
+
+    await fillIn("#search-term", "dude #monk");
+    await triggerKeyEvent("#search-term", "keyup", 51);
+
+    const firstItem =
+      ".search-menu .results ul.search-menu-assistant .search-link";
+    assert.ok(exists(query(firstItem)));
+
+    const firstTag = query(`${firstItem} .search-item-tag`).innerText.trim();
+    assert.equal(firstTag, "monkey");
+  });
 });
 
 acceptance("Search - assistant", function (needs) {

app/assets/stylesheets/common/base/search-menu.scss

@@ -267,6 +267,18 @@
       .search-item-prefix {
         margin-right: 0.5em;
       }
+
+      .search-item-tag {
+        color: var(--primary-high);
+        font-size: var(--font-down-1);
+      }
+
+      .d-icon-tag {
+        // match category badge styling
+        // tag/category suggestions can be displayed simultaneously
+        font-size: var(--font-down-2);
+        margin-right: 4px;
+      }
     }
   }