From a2b038ffe7043b6e725c75591dd157c98015c26c Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Fri, 16 Jun 2023 09:24:07 -0500
Subject: [PATCH] DEV: Upgrade search-menu to glimmer (#20482)
# Top level view
This PR is the first version of converting the search menu and its logic from (deprecated) widgets to glimmer components. The changes are hidden behind a group based feature flag. This will give us the ability to test the new implementation in a production setting before fully committing to the new search menu.
# What has changed
The majority of the logic from the widget implementation has been updated to fit within the context of a glimmer component, but it has not fundamentally changed. Instead of having a single widget - [search-menu.js](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/search-menu.js) - that built the bulk of the search menu logic, we split the logic into (20+) bite size components. This greatly increases the readability and makes extending a component in the search menu much more straightforward.
That being said, certain pieces needed to be rewritten from scratch as they did not translate from widget -> glimmer, or there was a general code upgraded needed. There are a few of these changes worth noting:
### Search Service
**Search Term** -> In the widget implementation we had a overly complex way of managing the current search term. We tracked the search term across multiple different states (`term`, `opts.term`, `searchData.term`) causing headaches. This PR introduces a single source of truth:
```js
this.search.activeGlobalSearchTerm
```
This tracked value is available anywhere the `search` service is injected. In the case the search term should be needs to be updated you can call
```js
this.search.activeGlobalSearchTerm = "foo"
```
**event listeners** -> In the widget implementation we defined event listeners **only** on the search input to handle things such as
- keyboard navigation / shortcuts
- closing the search menu
- performing a search with "enter"
Having this in one place caused a lot of bloat in our logic as we had to handle multiple different cases in one location. Do _x_ if it is this element, but do _y_ if it is another. This PR updates the event listeners to be attached to individual components, allowing for a more fine tuned set of actions per element. To not duplicate logic across multiple components, we have condensed shared logic to actions on the search service to be reused. For example - `this.search.handleArrowUpOrDown` - to handle keyboard navigation.
### Search Context
We have unique logic based on the current search context (topic / tag / category / user / etc). This context is set within a models route file. We have updated the search service with a tracked value `searchContext` that can be utilized and updated from any component where the search service is injected.
```js
# before
this.searchService.set("searchContext", user.searchContext);
# after
this.searchService.searchContext = user.searchContext;
```
# Views
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu.js b/app/assets/javascripts/discourse/app/components/search-menu.js
new file mode 100644
index 00000000000..a1b5c62c726
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu.js
@@ -0,0 +1,294 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+import { bind } from "discourse-common/utils/decorators";
+import { tracked } from "@glimmer/tracking";
+import {
+ isValidSearchTerm,
+ searchForTerm,
+ updateRecentSearches,
+} from "discourse/lib/search";
+import DiscourseURL from "discourse/lib/url";
+import discourseDebounce from "discourse-common/lib/debounce";
+import getURL from "discourse-common/lib/get-url";
+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";
+import { CANCELLED_STATUS } from "discourse/lib/autocomplete";
+import { cancel } from "@ember/runloop";
+
+const CATEGORY_SLUG_REGEXP = /(\#[a-zA-Z0-9\-:]*)$/gi;
+const USERNAME_REGEXP = /(\@[a-zA-Z0-9\-\_]*)$/gi;
+const SUGGESTIONS_REGEXP = /(in:|status:|order:|:)([a-zA-Z]*)$/gi;
+export const SEARCH_INPUT_ID = "search-term";
+export const SEARCH_BUTTON_ID = "search-button";
+export const MODIFIER_REGEXP = /.*(\#|\@|:).*$/gi;
+export const DEFAULT_TYPE_FILTER = "exclude_topics";
+
+export function focusSearchInput() {
+ document.getElementById(SEARCH_INPUT_ID).focus();
+}
+
+export function focusSearchButton() {
+ document.getElementById(SEARCH_BUTTON_ID).focus();
+}
+
+export default class SearchMenu extends Component {
+ @service search;
+ @service currentUser;
+ @service siteSettings;
+ @service appEvents;
+
+ @tracked inTopicContext = this.args.inTopicContext;
+ @tracked loading = false;
+ @tracked results = {};
+ @tracked noResults = false;
+ @tracked inPMInboxContext =
+ this.search.searchContext?.type === "private_messages";
+ @tracked typeFilter = DEFAULT_TYPE_FILTER;
+ @tracked suggestionKeyword = false;
+ @tracked suggestionResults = [];
+ @tracked invalidTerm = false;
+ _debouncer = null;
+ _activeSearch = null;
+
+ get includesTopics() {
+ return this.typeFilter !== DEFAULT_TYPE_FILTER;
+ }
+
+ get searchContext() {
+ if (this.inTopicContext || this.inPMInboxContext) {
+ return this.search.searchContext;
+ }
+
+ return false;
+ }
+
+ @bind
+ fullSearchUrl(opts) {
+ let url = "/search";
+ let params = new URLSearchParams();
+
+ if (this.search.activeGlobalSearchTerm) {
+ let q = this.search.activeGlobalSearchTerm;
+
+ if (this.searchContext?.type === "topic") {
+ q += ` topic:${this.searchContext.id}`;
+ } else if (this.searchContext?.type === "private_messages") {
+ q += " in:messages";
+ }
+ params.set("q", q);
+ }
+ if (opts?.expanded) {
+ params.set("expanded", "true");
+ }
+ if (params.toString() !== "") {
+ url = `${url}?${params}`;
+ }
+ return getURL(url);
+ }
+
+ @bind
+ clearSearch(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ this.search.activeGlobalSearchTerm = "";
+ focusSearchInput();
+ this.triggerSearch();
+ }
+
+ @action
+ searchTermChanged(term, opts = {}) {
+ this.typeFilter = opts.searchTopics ? null : DEFAULT_TYPE_FILTER;
+ if (opts.setTopicContext) {
+ this.inTopicContext = true;
+ }
+ this.search.activeGlobalSearchTerm = term;
+ this.triggerSearch();
+ }
+
+ @action
+ fullSearch() {
+ this.loading = false;
+ const url = this.fullSearchUrl();
+ if (url) {
+ DiscourseURL.routeTo(url);
+ }
+ }
+
+ @action
+ updateTypeFilter(value) {
+ this.typeFilter = value;
+ }
+
+ @action
+ clearPMInboxContext() {
+ this.inPMInboxContext = false;
+ }
+
+ @action
+ clearTopicContext() {
+ this.inTopicContext = false;
+ }
+
+ // for cancelling debounced search
+ cancel() {
+ if (this._activeSearch) {
+ this._activeSearch.abort();
+ this._activeSearch = null;
+ }
+ }
+
+ async perform() {
+ this.cancel();
+
+ const matchSuggestions = this.matchesSuggestions();
+ if (matchSuggestions) {
+ this.noResults = true;
+ this.results = {};
+ this.loading = false;
+ this.suggestionResults = [];
+
+ if (matchSuggestions.type === "category") {
+ const categorySearchTerm = matchSuggestions.categoriesMatch[0].replace(
+ "#",
+ ""
+ );
+
+ const categoryTagSearch = searchCategoryTag(
+ categorySearchTerm,
+ this.siteSettings
+ );
+ Promise.resolve(categoryTagSearch).then((results) => {
+ if (results !== CANCELLED_STATUS) {
+ this.suggestionResults = results;
+ this.suggestionKeyword = "#";
+ }
+ });
+ } else if (matchSuggestions.type === "username") {
+ const userSearchTerm = matchSuggestions.usernamesMatch[0].replace(
+ "@",
+ ""
+ );
+ const opts = { includeGroups: true, limit: 6 };
+ if (userSearchTerm.length > 0) {
+ opts.term = userSearchTerm;
+ } else {
+ opts.lastSeenUsers = true;
+ }
+
+ userSearch(opts).then((result) => {
+ if (result?.users?.length > 0) {
+ this.suggestionResults = result.users;
+ this.suggestionKeyword = "@";
+ } else {
+ this.noResults = true;
+ this.suggestionKeyword = false;
+ }
+ });
+ } else {
+ this.suggestionKeyword = matchSuggestions[0];
+ }
+ return;
+ }
+
+ this.suggestionKeyword = false;
+
+ if (!this.search.activeGlobalSearchTerm) {
+ this.noResults = false;
+ this.results = {};
+ this.loading = false;
+ this.invalidTerm = false;
+ } else if (
+ !isValidSearchTerm(this.search.activeGlobalSearchTerm, this.siteSettings)
+ ) {
+ this.noResults = true;
+ this.results = {};
+ this.loading = false;
+ this.invalidTerm = true;
+ } else {
+ this.invalidTerm = false;
+
+ this._activeSearch = searchForTerm(this.search.activeGlobalSearchTerm, {
+ typeFilter: this.typeFilter,
+ fullSearchUrl: this.fullSearchUrl,
+ searchContext: this.searchContext,
+ });
+
+ this._activeSearch
+ .then((results) => {
+ // we ensure the current search term is the one used
+ // when starting the query
+ if (results) {
+ if (this.searchContext) {
+ this.appEvents.trigger("post-stream:refresh", {
+ force: true,
+ });
+ }
+
+ this.noResults = results.resultTypes.length === 0;
+ this.results = results;
+ }
+ })
+ .catch(popupAjaxError)
+ .finally(() => {
+ this.loading = false;
+ });
+ }
+ }
+
+ matchesSuggestions() {
+ if (
+ this.search.activeGlobalSearchTerm === undefined ||
+ this.includesTopics
+ ) {
+ return false;
+ }
+
+ const term = this.search.activeGlobalSearchTerm.trim();
+ const categoriesMatch = term.match(CATEGORY_SLUG_REGEXP);
+
+ if (categoriesMatch) {
+ return { type: "category", categoriesMatch };
+ }
+
+ const usernamesMatch = term.match(USERNAME_REGEXP);
+ if (usernamesMatch) {
+ return { type: "username", usernamesMatch };
+ }
+
+ const suggestionsMatch = term.match(SUGGESTIONS_REGEXP);
+ if (suggestionsMatch) {
+ return suggestionsMatch;
+ }
+
+ return false;
+ }
+
+ @action
+ triggerSearch() {
+ this.noResults = false;
+
+ if (this.includesTopics) {
+ if (this.search.contextType === "topic") {
+ this.search.highlightTerm = this.search.activeGlobalSearchTerm;
+ }
+ this.loading = true;
+ cancel(this._debouncer);
+ this.perform();
+
+ if (this.currentUser) {
+ updateRecentSearches(
+ this.currentUser,
+ this.search.activeGlobalSearchTerm
+ );
+ }
+ } else {
+ this.loading = false;
+ if (!this.inTopicContext) {
+ this._debouncer = discourseDebounce(this, this.perform, 400);
+ }
+ }
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.hbs b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.hbs
new file mode 100644
index 00000000000..b1b847c430c
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.hbs
@@ -0,0 +1,7 @@
+
+ {{d-icon "sliders-h"}}
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/browser-search-tip.hbs b/app/assets/javascripts/discourse/app/components/search-menu/browser-search-tip.hbs
new file mode 100644
index 00000000000..4b470452ec4
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/browser-search-tip.hbs
@@ -0,0 +1,8 @@
+
+
+ {{this.translatedLabel}}
+
+
+ {{i18n "search.browser_tip_description"}}
+
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/browser-search-tip.js b/app/assets/javascripts/discourse/app/components/search-menu/browser-search-tip.js
new file mode 100644
index 00000000000..904e1db6f27
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/browser-search-tip.js
@@ -0,0 +1,9 @@
+import Component from "@glimmer/component";
+import I18n from "I18n";
+import { translateModKey } from "discourse/lib/utilities";
+
+export default class BrowserSearchTip extends Component {
+ get translatedLabel() {
+ return I18n.t("search.browser_tip", { modifier: translateModKey("Meta+") });
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/clear-button.hbs b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.hbs
new file mode 100644
index 00000000000..0b3b2dce015
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.hbs
@@ -0,0 +1,9 @@
+
+ {{d-icon "times"}}
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/highlighted-search.hbs b/app/assets/javascripts/discourse/app/components/search-menu/highlighted-search.hbs
new file mode 100644
index 00000000000..af66c0f837a
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/highlighted-search.hbs
@@ -0,0 +1 @@
+{{this.content}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/highlighted-search.js b/app/assets/javascripts/discourse/app/components/search-menu/highlighted-search.js
new file mode 100644
index 00000000000..7f892b47ef5
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/highlighted-search.js
@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import highlightSearch from "discourse/lib/highlight-search";
+import { inject as service } from "@ember/service";
+
+export default class HighlightedSearch extends Component {
+ @service search;
+
+ constructor() {
+ super(...arguments);
+ const span = document.createElement("span");
+ span.textContent = this.args.string;
+ this.content = span;
+
+ highlightSearch(span, this.search.activeGlobalSearchTerm);
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/menu-panel-contents.hbs b/app/assets/javascripts/discourse/app/components/search-menu/menu-panel-contents.hbs
new file mode 100644
index 00000000000..04d0941b4da
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/menu-panel-contents.hbs
@@ -0,0 +1,65 @@
+
+
+{{#if (and @inTopicContext (not @includesTopics))}}
+
+ {{#if @suggestionKeyword}}
+
+ {{else if this.termTooShort}}
+
{{i18n "search.too_short"}}
+ {{else if this.noTopicResults}}
+
{{i18n "search.no_results"}}
+ {{else if this.renderInitialOptions}}
+
+ {{else}}
+ {{#if @searchTopics}}
+ {{! render results after a search has been performed }}
+ {{#if this.resultTypesWithComponent}}
+
+
+ {{/if}}
+ {{else}}
+ {{#unless @inPMInboxContext}}
+ {{! render the first couple suggestions before a search has been performed}}
+
+ {{#if this.resultTypesWithComponent}}
+
+ {{/if}}
+ {{/unless}}
+ {{/if}}
+ {{/if}}
+
+ {{format-age @result.created_at}}
+ -
+ {{#if this.siteSettings.use_pg_headlines_for_excerpt}}
+ {{@result.blurb}}
+ {{else}}
+
+
+ {{/if}}
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/blurb.js b/app/assets/javascripts/discourse/app/components/search-menu/results/blurb.js
new file mode 100644
index 00000000000..5e0c15590ca
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/blurb.js
@@ -0,0 +1,7 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class Blurb extends Component {
+ @service siteSettings;
+ @service site;
+}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.hbs b/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.hbs
new file mode 100644
index 00000000000..77f8600fb53
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.hbs
@@ -0,0 +1,45 @@
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.js b/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.js
new file mode 100644
index 00000000000..5c13732ae22
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.js
@@ -0,0 +1,128 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { MODIFIER_REGEXP } from "discourse/components/search-menu";
+import AssistantItem from "./assistant-item";
+import Assistant from "./assistant";
+import I18n from "I18n";
+
+const SEARCH_CONTEXT_TYPE_COMPONENTS = {
+ topic: AssistantItem,
+ private_messages: AssistantItem,
+ category: Assistant,
+ tag: Assistant,
+ tagIntersection: Assistant,
+ user: AssistantItem,
+};
+
+export default class InitialOptions extends Component {
+ @service search;
+ @service siteSettings;
+ @service currentUser;
+
+ constructor() {
+ super(...arguments);
+
+ if (this.search.activeGlobalSearchTerm || this.search.searchContext) {
+ if (this.search.searchContext) {
+ // set the component we will be using to display results
+ this.contextTypeComponent =
+ SEARCH_CONTEXT_TYPE_COMPONENTS[this.search.searchContext.type];
+ // set attributes for the component
+ this.attributesForSearchContextType(this.search.searchContext.type);
+ }
+ }
+ }
+
+ get termMatchesContextTypeKeyword() {
+ return this.search.activeGlobalSearchTerm?.match(MODIFIER_REGEXP)
+ ? true
+ : false;
+ }
+
+ attributesForSearchContextType(type) {
+ switch (type) {
+ case "topic":
+ this.topicContextType();
+ break;
+ case "private_messages":
+ this.privateMessageContextType();
+ break;
+ case "category":
+ this.categoryContextType();
+ break;
+ case "tag":
+ this.tagContextType();
+ break;
+ case "tagIntersection":
+ this.tagIntersectionContextType();
+ break;
+ case "user":
+ this.userContextType();
+ break;
+ }
+ }
+
+ topicContextType() {
+ this.suffix = I18n.t("search.in_this_topic");
+ }
+
+ privateMessageContextType() {
+ this.slug = "in:messages";
+ this.label = "in:messages";
+ }
+
+ categoryContextType() {
+ const searchContextCategory = this.search.searchContext.category;
+ const fullSlug = searchContextCategory.parentCategory
+ ? `#${searchContextCategory.parentCategory.slug}:${searchContextCategory.slug}`
+ : `#${searchContextCategory.slug}`;
+
+ this.slug = fullSlug;
+ this.contextTypeKeyword = "#";
+ this.initialResults = [{ model: this.search.searchContext.category }];
+ this.withInLabel = true;
+ }
+
+ tagContextType() {
+ this.slug = `#${this.search.searchContext.name}`;
+ this.contextTypeKeyword = "#";
+ this.initialResults = [{ name: this.search.searchContext.name }];
+ this.withInLabel = true;
+ }
+
+ tagIntersectionContextType() {
+ const searchContext = this.search.searchContext;
+
+ let tagTerm;
+ if (searchContext.additionalTags) {
+ const tags = [searchContext.tagId, ...searchContext.additionalTags];
+ tagTerm = `tags:${tags.join("+")}`;
+ } else {
+ tagTerm = `#${searchContext.tagId}`;
+ }
+ let suggestionOptions = {
+ tagName: searchContext.tagId,
+ additionalTags: searchContext.additionalTags,
+ };
+ if (searchContext.category) {
+ const categorySlug = searchContext.category.parentCategory
+ ? `#${searchContext.category.parentCategory.slug}:${searchContext.category.slug}`
+ : `#${searchContext.category.slug}`;
+ suggestionOptions.categoryName = categorySlug;
+ suggestionOptions.category = searchContext.category;
+ tagTerm = tagTerm + ` ${categorySlug}`;
+ }
+
+ this.slug = tagTerm;
+ this.contextTypeKeyword = "+";
+ this.initialResults = [suggestionOptions];
+ this.withInLabel = true;
+ }
+
+ userContextType() {
+ this.slug = `@${this.search.searchContext.user.username}`;
+ this.suffix = I18n.t("search.in_posts_by", {
+ username: this.search.searchContext.user.username,
+ });
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.hbs b/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.hbs
new file mode 100644
index 00000000000..a035c876406
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.hbs
@@ -0,0 +1,17 @@
+{{#if this.topicResults}}
+ {{! template-lint-disable no-invalid-interactive }}
+
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.js b/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.js
new file mode 100644
index 00000000000..994c1a946ef
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.js
@@ -0,0 +1,37 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { focusSearchButton } from "discourse/components/search-menu";
+
+export default class MoreLink extends Component {
+ @service search;
+
+ get topicResults() {
+ const topicResults = this.args.resultTypes.filter(
+ (resultType) => resultType.type === "topic"
+ );
+ return topicResults[0];
+ }
+
+ get moreUrl() {
+ return this.topicResults.moreUrl && this.topicResults.moreUrl();
+ }
+
+ @action
+ moreOfType(type) {
+ this.args.updateTypeFilter(type);
+ this.args.triggerSearch();
+ }
+
+ @action
+ onKeyup(e) {
+ if (e.key === "Escape") {
+ focusSearchButton();
+ this.args.closeSearchMenu();
+ e.preventDefault();
+ return false;
+ }
+
+ this.search.handleArrowUpOrDown(e);
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.hbs b/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.hbs
new file mode 100644
index 00000000000..2a605efe836
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.hbs
@@ -0,0 +1,16 @@
+
+
+ {{this.randomTip.label}}
+
+
+
+ {{this.randomTip.description}}
+
+
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.js b/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.js
new file mode 100644
index 00000000000..8f0cf9eb258
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.js
@@ -0,0 +1,70 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+import I18n from "I18n";
+import { focusSearchInput } from "discourse/components/search-menu";
+
+const DEFAULT_QUICK_TIPS = [
+ {
+ label: "#",
+ description: I18n.t("search.tips.category_tag"),
+ clickable: true,
+ },
+ {
+ label: "@",
+ description: I18n.t("search.tips.author"),
+ clickable: true,
+ },
+ {
+ label: "in:",
+ description: I18n.t("search.tips.in"),
+ clickable: true,
+ },
+ {
+ label: "status:",
+ description: I18n.t("search.tips.status"),
+ clickable: true,
+ },
+ {
+ label: I18n.t("search.tips.full_search_key", { modifier: "Ctrl" }),
+ description: I18n.t("search.tips.full_search"),
+ },
+ {
+ label: "@me",
+ description: I18n.t("search.tips.me"),
+ },
+];
+
+let QUICK_TIPS = [];
+
+export function addQuickSearchRandomTip(tip) {
+ if (!QUICK_TIPS.includes(tip)) {
+ QUICK_TIPS.push(tip);
+ }
+}
+
+export function resetQuickSearchRandomTips() {
+ QUICK_TIPS = [].concat(DEFAULT_QUICK_TIPS);
+}
+
+resetQuickSearchRandomTips();
+
+export default class RandomQuickTip extends Component {
+ @service search;
+
+ constructor() {
+ super(...arguments);
+ this.randomTip = QUICK_TIPS[Math.floor(Math.random() * QUICK_TIPS.length)];
+ }
+
+ @action
+ tipSelected(e) {
+ if (e.target.classList.contains("tip-clickable")) {
+ this.search.activeGlobalSearchTerm = this.randomTip.label;
+ focusSearchInput();
+
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.hbs b/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.hbs
new file mode 100644
index 00000000000..158183b3b33
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.hbs
@@ -0,0 +1,23 @@
+{{#if this.currentUser.recent_searches}}
+
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.js b/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.js
new file mode 100644
index 00000000000..2f5c77407b8
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.js
@@ -0,0 +1,51 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import User from "discourse/models/user";
+import { action } from "@ember/object";
+import { focusSearchButton } from "discourse/components/search-menu";
+
+export default class RecentSearches extends Component {
+ @service currentUser;
+ @service siteSettings;
+
+ constructor() {
+ super(...arguments);
+
+ if (
+ this.currentUser &&
+ this.siteSettings.log_search_queries &&
+ !this.currentUser.recent_searches?.length
+ ) {
+ this.loadRecentSearches();
+ }
+ }
+
+ @action
+ clearRecent() {
+ return User.resetRecentSearches().then((result) => {
+ if (result.success) {
+ this.currentUser.recent_searches.clear();
+ }
+ });
+ }
+
+ @action
+ onKeyup(e) {
+ if (e.key === "Escape") {
+ focusSearchButton();
+ this.args.closeSearchMenu();
+ e.preventDefault();
+ return false;
+ }
+
+ this.search.handleArrowUpOrDown(e);
+ }
+
+ loadRecentSearches() {
+ User.loadRecentSearches().then((result) => {
+ if (result.success && result.recent_searches?.length) {
+ this.currentUser.set("recent_searches", result.recent_searches);
+ }
+ });
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/type/category.hbs b/app/assets/javascripts/discourse/app/components/search-menu/results/type/category.hbs
new file mode 100644
index 00000000000..64b312acfc5
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/type/category.hbs
@@ -0,0 +1 @@
+{{category-link @result link=false allowUncategorized=true}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/type/group.hbs b/app/assets/javascripts/discourse/app/components/search-menu/results/type/group.hbs
new file mode 100644
index 00000000000..e552d6926b5
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/type/group.hbs
@@ -0,0 +1,19 @@
+
+ {{#if @result.flairUrl}}
+
+ {{else}}
+ {{d-icon "users"}}
+ {{/if}}
+
+
{{or @result.fullName @result.name}}
+ {{! show the name of the group if we also show the full name }}
+ {{#if @result.fullName}}
+
{{@result.name}}
+ {{/if}}
+
+
+
+
+ {{#if
+ (and
+ this.siteSettings.use_pg_headlines_for_excerpt
+ @result.topic_title_headline
+ )
+ }}
+ {{replace-emoji @result.topic_title_headline}}
+ {{else}}
+
+
+
+ {{category-link @result.topic.category link=false}}
+ {{#if this.siteSettings.tagging_enabled}}
+ {{discourse-tags @result.topic tagName="span"}}
+ {{/if}}
+
+
+
+ {{format-username @result.username}}
+
+{{#if @result.custom_data}}
+ {{#each @result.custom_data as |row|}}
+ {{row.name}}: {{row.value}}
+ {{/each}}
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/types.hbs b/app/assets/javascripts/discourse/app/components/search-menu/results/types.hbs
new file mode 100644
index 00000000000..1a1e0b5f4cb
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/types.hbs
@@ -0,0 +1,18 @@
+{{#each this.filteredResultTypes as |resultType|}}
+
+
+ {{#each resultType.results as |result|}}
+ {{! template-lint-disable no-down-event-binding }}
+ {{! template-lint-disable no-invalid-interactive }}
+
+
+
+
+ {{/each}}
+
+
I've gotten vagrant up and running with a development environment but it's taking forever to load.
\n\nFor example http://192.168.10.200:3000/ takes tens of seconds to load.
\n\nI'm running the whole stack on a new rMBP with OS X 10.8.2.
\n\nAny ideas of what I've done wrong? Or is this just a function of being on the bleeding edge?
\n\nThanks,
\n\n-bd
",
+ post_number: 1,
+ post_type: 1,
+ updated_at: "2013-02-07T17:46:57.469Z",
+ like_count: 0,
+ reply_count: 1,
+ reply_to_post_number: null,
+ quote_count: 0,
+ incoming_link_count: 4422,
+ reads: 327,
+ score: 21978.4,
+ yours: false,
+ topic_id: 2179,
+ topic_slug: "development-mode-super-slow",
+ display_username: "Bill Dudney",
+ primary_group_name: null,
+ version: 2,
+ can_edit: false,
+ can_delete: false,
+ can_recover: false,
+ user_title: null,
+ actions_summary: [
+ {
+ id: 2,
+ count: 0,
+ hidden: false,
+ can_act: false,
+ },
+ {
+ id: 3,
+ count: 0,
+ hidden: false,
+ can_act: false,
+ },
+ {
+ id: 4,
+ count: 0,
+ hidden: false,
+ can_act: false,
+ },
+ {
+ id: 5,
+ count: 0,
+ hidden: true,
+ can_act: false,
+ },
+ {
+ id: 6,
+ count: 0,
+ hidden: false,
+ can_act: false,
+ },
+ {
+ id: 7,
+ count: 0,
+ hidden: false,
+ can_act: false,
+ },
+ {
+ id: 8,
+ count: 0,
+ hidden: false,
+ can_act: false,
+ },
+ ],
+ moderator: false,
+ admin: false,
+ staff: false,
+ user_id: 1828,
+ hidden: false,
+ hidden_reason_id: null,
+ trust_level: 1,
+ deleted_at: null,
+ user_deleted: false,
+ edit_reason: null,
+ can_view_edit_history: true,
+ wiki: false,
+ blurb:
+ "I've gotten vagrant up and running with a development environment but it's taking forever to load. For example http://192.168.10.200:3000/ takes...",
+ },
+ ],
+ topics: [
+ {
+ id: 2179,
+ title: "Development mode super slow",
+ fancy_title: "Development mode super slow",
+ slug: "development-mode-super-slow",
+ posts_count: 72,
+ reply_count: 53,
+ highest_post_number: 73,
+ image_url: null,
+ created_at: "2013-02-07T17:46:57.262Z",
+ last_posted_at: "2015-04-17T08:08:26.671Z",
+ bumped: true,
+ bumped_at: "2015-04-17T08:08:26.671Z",
+ unseen: false,
+ pinned: false,
+ unpinned: null,
+ visible: true,
+ closed: false,
+ archived: false,
+ bookmarked: null,
+ liked: null,
+ views: 9538,
+ like_count: 45,
+ has_summary: true,
+ archetype: "regular",
+ last_poster_username: null,
+ category_id: 7,
+ pinned_globally: false,
+ posters: [],
+ tags: ["dev", "slow"],
+ tags_descriptions: {
+ dev: "dev description",
+ slow: "slow description",
+ },
+ },
+ ],
+ grouped_search_result: {
+ term: "emoji",
+ post_ids: [3833],
+ },
+ });
+ }
+ return helper.response(searchFixtures["search/query"]);
+ });
+
+ server.get("/tag/dev/notifications", () => {
+ return helper.response({
+ tag_notification: { id: "dev", notification_level: 2 },
+ });
+ });
+
+ server.get("/tags/c/bug/1/dev/l/latest.json", () => {
+ return helper.response({
+ users: [],
+ primary_groups: [],
+ topic_list: {
+ can_create_topic: true,
+ draft: null,
+ draft_key: "new_topic",
+ draft_sequence: 1,
+ per_page: 30,
+ tags: [
+ {
+ id: 1,
+ name: "dev",
+ topic_count: 1,
+ },
+ ],
+ topics: [],
+ },
+ });
+ });
+
+ server.get("/tags/intersection/dev/foo.json", () => {
+ return helper.response({
+ topic_list: {
+ can_create_topic: true,
+ draft: null,
+ draft_key: "new_topic",
+ draft_sequence: 1,
+ per_page: 30,
+ topics: [],
+ },
+ });
+ });
+
+ server.get("/u/search/users", () => {
+ return helper.response({
+ users: [
+ {
+ username: "TeaMoe",
+ name: "TeaMoe",
+ avatar_template:
+ "https://avatars.discourse.org/v3/letter/t/41988e/{size}.png",
+ },
+ {
+ username: "TeamOneJ",
+ name: "J Cobb",
+ avatar_template:
+ "https://avatars.discourse.org/v3/letter/t/3d9bf3/{size}.png",
+ },
+ {
+ username: "kudos",
+ name: "Team Blogeto.com",
+ avatar_template:
+ "/user_avatar/meta.discourse.org/kudos/{size}/62185_1.png",
+ },
+ ],
+ });
+ });
+ });
+
+ test("shows category shortcuts when typing #", async function (assert) {
+ await visit("/");
+
+ await click("#search-button");
+
+ await fillIn("#search-term", "#");
+ await triggerKeyEvent("#search-term", "keyup", 51);
+
+ const firstCategory =
+ ".search-menu .results ul.search-menu-assistant .search-link";
+ assert.ok(exists(query(firstCategory)));
+
+ const firstResultSlug = query(
+ `${firstCategory} .category-name`
+ ).textContent.trim();
+
+ await click(firstCategory);
+ assert.strictEqual(query("#search-term").value, `#${firstResultSlug}`);
+
+ await fillIn("#search-term", "sam #");
+ await triggerKeyEvent("#search-term", "keyup", 51);
+
+ assert.ok(exists(query(firstCategory)));
+ assert.strictEqual(
+ query(
+ ".search-menu .results ul.search-menu-assistant .search-item-prefix"
+ ).innerText,
+ "sam"
+ );
+
+ await click(firstCategory);
+ assert.strictEqual(query("#search-term").value, `sam #${firstResultSlug}`);
+ });
+
+ test("Shows category / tag combination shortcut when both are present", async function (assert) {
+ await visit("/tags/c/bug/dev");
+ await click("#search-button");
+
+ assert.strictEqual(
+ query(".search-menu .results ul.search-menu-assistant .category-name")
+ .innerText,
+ "bug",
+ "Category is displayed"
+ );
+
+ assert.strictEqual(
+ query(".search-menu .results ul.search-menu-assistant .search-item-tag")
+ .innerText,
+ "dev",
+ "Tag is displayed"
+ );
+ });
+
+ test("Updates tag / category combination search suggestion when typing", async function (assert) {
+ await visit("/tags/c/bug/dev");
+ await click("#search-button");
+ await fillIn("#search-term", "foo bar");
+
+ assert.strictEqual(
+ query(
+ ".search-menu .results ul.search-menu-assistant .search-item-prefix"
+ ).innerText,
+ "foo bar",
+ "Input is applied to search query"
+ );
+
+ assert.strictEqual(
+ query(".search-menu .results ul.search-menu-assistant .category-name")
+ .innerText,
+ "bug"
+ );
+
+ assert.strictEqual(
+ query(".search-menu .results ul.search-menu-assistant .search-item-tag")
+ .innerText,
+ "dev",
+ "Tag is displayed"
+ );
+ });
+
+ test("Shows tag combination shortcut when visiting tag intersection", async function (assert) {
+ await visit("/tags/intersection/dev/foo");
+ await click("#search-button");
+
+ assert.strictEqual(
+ query(".search-menu .results ul.search-menu-assistant .search-item-tag")
+ .innerText,
+ "tags:dev+foo",
+ "Tags are displayed"
+ );
+ });
+
+ test("Updates tag intersection search suggestion when typing", async function (assert) {
+ await visit("/tags/intersection/dev/foo");
+ await click("#search-button");
+ await fillIn("#search-term", "foo bar");
+
+ assert.strictEqual(
+ query(
+ ".search-menu .results ul.search-menu-assistant .search-item-prefix"
+ ).innerText,
+ "foo bar",
+ "Input is applied to search query"
+ );
+
+ assert.strictEqual(
+ query(".search-menu .results ul.search-menu-assistant .search-item-tag")
+ .innerText,
+ "tags:dev+foo",
+ "Tags are displayed"
+ );
+ });
+
+ test("shows in: shortcuts", async function (assert) {
+ await visit("/");
+ await click("#search-button");
+
+ const firstTarget =
+ ".search-menu .results ul.search-menu-assistant .search-link ";
+
+ await fillIn("#search-term", "in:");
+ await triggerKeyEvent("#search-term", "keydown", 51);
+ assert.strictEqual(
+ query(firstTarget.concat(".search-item-slug")).innerText,
+ "in:title",
+ "keyword is present in suggestion"
+ );
+
+ await fillIn("#search-term", "sam in:");
+ await triggerKeyEvent("#search-term", "keydown", 51);
+ assert.strictEqual(
+ query(firstTarget.concat(".search-item-prefix")).innerText,
+ "sam",
+ "term is present in suggestion"
+ );
+ assert.strictEqual(
+ query(firstTarget.concat(".search-item-slug")).innerText,
+ "in:title",
+ "keyword is present in suggestion"
+ );
+
+ await fillIn("#search-term", "in:mess");
+ await triggerKeyEvent("#search-term", "keydown", 51);
+ assert.strictEqual(query(firstTarget).innerText, "in:messages");
+ });
+
+ test("shows users when typing @", async function (assert) {
+ await visit("/");
+
+ await click("#search-button");
+
+ await fillIn("#search-term", "@");
+ await triggerKeyEvent("#search-term", "keyup", 51);
+
+ const firstUser =
+ ".search-menu .results ul.search-menu-assistant .search-item-user";
+ const firstUsername = query(firstUser).innerText.trim();
+ assert.strictEqual(firstUsername, "TeaMoe");
+
+ await click(query(firstUser));
+ assert.strictEqual(query("#search-term").value, `@${firstUsername}`);
+ });
+
+ test("shows 'in messages' button when in an inbox", async function (assert) {
+ await visit("/u/charlie/messages");
+ await click("#search-button");
+
+ assert.ok(exists(".btn.search-context"), "it shows the button");
+
+ await fillIn("#search-term", "");
+ await query("input#search-term").focus();
+ await triggerKeyEvent("input#search-term", "keyup", "Backspace");
+
+ assert.notOk(exists(".btn.search-context"), "it removes the button");
+
+ await click(".d-header");
+ await click("#search-button");
+ assert.ok(
+ exists(".btn.search-context"),
+ "it shows the button when reinvoking search"
+ );
+
+ await fillIn("#search-term", "emoji");
+ await query("input#search-term").focus();
+ await triggerKeyEvent("#search-term", "keyup", "Enter");
+
+ assert.strictEqual(
+ count(".search-menu .search-result-topic"),
+ 1,
+ "it passes the PM search context to the search query"
+ );
+ });
+});
diff --git a/app/assets/javascripts/discourse/tests/fixtures/search-fixtures.js b/app/assets/javascripts/discourse/tests/fixtures/search-fixtures.js
index 78747bbaeb0..eb7ab45dba8 100644
--- a/app/assets/javascripts/discourse/tests/fixtures/search-fixtures.js
+++ b/app/assets/javascripts/discourse/tests/fixtures/search-fixtures.js
@@ -709,6 +709,111 @@ export default {
"/letter_avatar/devmach/{size}/5_fcf819f9b3791cb8c87edf29c8984f83.png",
},
],
+ "/tag/important/notifications.json": {
+ users: [{ id: 1, username: "sam", avatar_template: "/images/avatar.png" }],
+ primary_groups: [],
+ topic_list: {
+ can_create_topic: true,
+ draft: null,
+ draft_key: "new_topic",
+ draft_sequence: 4,
+ per_page: 30,
+ tags: [
+ {
+ id: 1,
+ name: "important",
+ topic_count: 2,
+ staff: false,
+ },
+ ],
+ topics: [
+ {
+ id: 16,
+ title: "Dinosaurs are the best",
+ fancy_title: "Dinosaurs are the best",
+ slug: "dinosaurs-are-the-best",
+ posts_count: 1,
+ reply_count: 0,
+ highest_post_number: 1,
+ image_url: null,
+ created_at: "2019-11-12T05:19:52.300Z",
+ last_posted_at: "2019-11-12T05:19:52.848Z",
+ bumped: true,
+ bumped_at: "2019-11-12T05:19:52.848Z",
+ unseen: false,
+ last_read_post_number: 1,
+ unread_posts: 0,
+ pinned: false,
+ unpinned: null,
+ visible: true,
+ closed: false,
+ archived: false,
+ notification_level: 3,
+ bookmarked: false,
+ liked: false,
+ tags: ["test"],
+ views: 2,
+ like_count: 0,
+ has_summary: false,
+ archetype: "regular",
+ last_poster_username: "sam",
+ category_id: 1,
+ pinned_globally: false,
+ featured_link: null,
+ posters: [
+ {
+ extras: "latest single",
+ description: "Original Poster, Most Recent Poster",
+ user_id: 1,
+ primary_group_id: null,
+ },
+ ],
+ },
+ {
+ id: 15,
+ title: "This is a test tagged post",
+ fancy_title: "This is a test tagged post",
+ slug: "this-is-a-test-tagged-post",
+ posts_count: 1,
+ reply_count: 0,
+ highest_post_number: 1,
+ image_url: null,
+ created_at: "2019-11-12T05:19:32.032Z",
+ last_posted_at: "2019-11-12T05:19:32.516Z",
+ bumped: true,
+ bumped_at: "2019-11-12T05:19:32.516Z",
+ unseen: false,
+ last_read_post_number: 1,
+ unread_posts: 0,
+ pinned: false,
+ unpinned: null,
+ visible: true,
+ closed: false,
+ archived: false,
+ notification_level: 3,
+ bookmarked: false,
+ liked: false,
+ tags: ["test"],
+ views: 1,
+ like_count: 0,
+ has_summary: false,
+ archetype: "regular",
+ last_poster_username: "sam",
+ category_id: 3,
+ pinned_globally: false,
+ featured_link: null,
+ posters: [
+ {
+ extras: "latest single",
+ description: "Original Poster, Most Recent Poster",
+ user_id: 1,
+ primary_group_id: null,
+ },
+ ],
+ },
+ ],
+ },
+ },
categories: [
{
id: 7,
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 202d7d87843..763f610c907 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -257,11 +257,17 @@
}
.hamburger-panel {
+ // remove once glimmer search menu in place
a.widget-link {
width: 100%;
box-sizing: border-box;
@include ellipsis;
}
+ a.search-link {
+ width: 100%;
+ box-sizing: border-box;
+ @include ellipsis;
+ }
.panel-body {
overflow-y: auto;
}
@@ -279,6 +285,7 @@
}
.menu-panel {
+ // remove once glimmer search menu in place
.widget-link,
.categories-link {
padding: 0.25em 0.5em;
@@ -306,6 +313,33 @@
}
}
+ .search-link,
+ .categories-link {
+ padding: 0.25em 0.5em;
+ display: block;
+ color: var(--primary);
+ &:hover,
+ &:focus {
+ background-color: var(--d-hover);
+ outline: none;
+ }
+
+ .d-icon {
+ color: var(--primary-medium);
+ }
+
+ .new {
+ font-size: var(--font-down-1);
+ margin-left: 0.5em;
+ color: var(--primary-med-or-secondary-med);
+ }
+
+ &.show-help,
+ &.filter {
+ color: var(--tertiary);
+ }
+ }
+
li.category-link {
float: left;
background-color: transparent;
diff --git a/app/models/user.rb b/app/models/user.rb
index 9eab6333f69..991974c2243 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -1831,6 +1831,10 @@ class User < ActiveRecord::Base
in_any_groups?(SiteSetting.new_edit_sidebar_categories_tags_interface_groups_map)
end
+ def experimental_search_menu_groups_enabled?
+ in_any_groups?(SiteSetting.experimental_search_menu_groups_map)
+ end
+
protected
def badge_grant
diff --git a/app/serializers/current_user_serializer.rb b/app/serializers/current_user_serializer.rb
index fcfb09a600c..a4333679c52 100644
--- a/app/serializers/current_user_serializer.rb
+++ b/app/serializers/current_user_serializer.rb
@@ -69,7 +69,8 @@ class CurrentUserSerializer < BasicUserSerializer
:sidebar_list_destination,
:sidebar_sections,
:new_new_view_enabled?,
- :new_edit_sidebar_categories_tags_interface_groups_enabled?
+ :new_edit_sidebar_categories_tags_interface_groups_enabled?,
+ :experimental_search_menu_groups_enabled?
delegate :user_stat, to: :object, private: true
delegate :any_posts, :draft_count, :pending_posts_count, :read_faq?, to: :user_stat
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index fcf08869b76..63d364b9e7b 100644
--- a/config/locales/server.en.yml
+++ b/config/locales/server.en.yml
@@ -2431,6 +2431,7 @@ en:
enable_custom_sidebar_sections: "EXPERIMENTAL: Enable custom sidebar sections"
experimental_topics_filter: "EXPERIMENTAL: Enables the experimental topics filter route at /filter"
experimental_post_image_grid: "EXPERIMENTAL: Enables a [grid] tag in posts to display images in a grid layout."
+ experimental_search_menu_groups: "EXPERIMENTAL: Enables the new search menu that has been upgraded to use glimmer"
errors:
invalid_css_color: "Invalid color. Enter a color name or hex value."
diff --git a/config/site_settings.yml b/config/site_settings.yml
index 8ee006f7c28..f21a88baeeb 100644
--- a/config/site_settings.yml
+++ b/config/site_settings.yml
@@ -2121,6 +2121,12 @@ developer:
default: ""
allow_any: false
hidden: true
+ experimental_search_menu_groups:
+ type: group_list
+ list_type: compact
+ default: ""
+ allow_any: false
+ refresh: true
navigation:
navigation_menu: