From 74706bab101176913be1f84f85a8b33c2463950c Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 13 Oct 2021 12:09:28 -0400
Subject: [PATCH] UX: Add `Enter` hint to search dropdown (#14587)

---
 .../discourse/app/widgets/search-menu-results.js    | 13 ++++++++-----
 .../discourse/tests/acceptance/search-test.js       |  2 +-
 app/assets/stylesheets/common/base/search-menu.scss |  9 ++++++++-
 config/locales/client.en.yml                        |  1 +
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/search-menu-results.js b/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
index 4d8c4fb2eca..bae2e830599 100644
--- a/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
+++ b/app/assets/javascripts/discourse/app/widgets/search-menu-results.js
@@ -564,12 +564,12 @@ createWidget("search-menu-initial-options", {
   defaultRow(term, opts = { withLabel: false }) {
     return this.attach("search-menu-assistant-item", {
       slug: term,
+      extraHint: I18n.t("search.enter_hint"),
       label: [
-        h("span", `${term} `),
-        h(
-          "span.label-suffix",
-          opts.withLabel ? I18n.t("search.in_topics_posts") : null
-        ),
+        h("span.keyword", `${term} `),
+        opts.withLabel
+          ? h("span.label-suffix", I18n.t("search.in_topics_posts"))
+          : null,
       ],
     });
   },
@@ -619,6 +619,9 @@ createWidget("search-menu-assistant-item", {
       content.push(h("span.search-item-user", userResult));
     } else {
       content.push(h("span.search-item-slug", attrs.label || attrs.slug));
+      if (attrs.extraHint) {
+        content.push(h("span.extra-hint", attrs.extraHint));
+      }
     }
     return h("a.widget-link.search-link", { attributes }, content);
   },
diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-test.js
index 912c94992f0..0478e6512a8 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/search-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/search-test.js
@@ -53,7 +53,7 @@ acceptance("Search - Anonymous", function (needs) {
 
     assert.equal(
       query(
-        ".search-menu .results ul.search-menu-initial-options li:first-child"
+        ".search-menu .results ul.search-menu-initial-options li:first-child .search-item-slug"
       ).innerText.trim(),
       `dev ${I18n.t("search.in_topics_posts")}`,
       "shows topic search as first dropdown item"
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index aa6ba6b1989..ad03465dd01 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -184,7 +184,14 @@ $search-pad-horizontal: 0.5em;
       color: var(--primary-medium);
     }
 
-    .badge-wrapper {
+    .extra-hint {
+      color: var(--primary-low-mid);
+      font-size: var(--font-down-1);
+      float: right;
+      margin-top: 2px;
+    }
+
+    .search-item-slug .badge-wrapper {
       font-size: var(--font-0);
       margin-left: 2px;
     }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 087a087395f..3e7c73e52c4 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2366,6 +2366,7 @@ en:
       in: "in"
       in_this_topic: "in this topic"
       in_topics_posts: "in all topics and posts"
+      enter_hint: "or press Enter"
       in_posts_by: "in posts by %{username}"
 
       type: