Skip to content

Commit 07a4ffd

Browse files
lis2lis2
authored
UX: display search input and open modal on click (#32508)
In this PR we hide search input. #32485 However, search input is much more intuitive. Therefore, input was brought back and opens modal on click. In addition, search link was removed.
1 parent 3ccb54b commit 07a4ffd

File tree

17 files changed

+192
-23
lines changed

17 files changed

+192
-23
lines changed

‎app/assets/javascripts/admin/addon/components/admin-search.gjs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import Component from "@glimmer/component";
22
import { tracked } from "@glimmer/tracking";
3+
import { hash } from "@ember/helper";
34
import { on } from "@ember/modifier";
45
import { action } from "@ember/object";
56
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
7+
import { LinkTo } from "@ember/routing";
68
import { service } from "@ember/service";
79
import { htmlSafe } from "@ember/template";
810
import { TrackedObject } from "@ember-compat/tracked-built-ins";
@@ -194,6 +196,15 @@ export default class AdminSearch extends Component {
194196
</div>
195197
<DButton class="btn-flat" @icon="filter" @action={{this.toggleFilters}} />
196198
</div>
199+
{{#if @fullPageLink}}
200+
<LinkTo
201+
@route="adminSearch"
202+
@query={{hash filter=this.filter}}
203+
class="admin-search__full-page-link"
204+
>
205+
{{i18n "admin.search.full_page_link"}}
206+
</LinkTo>
207+
{{/if}}
197208

198209
{{#if this.showFilters}}
199210
<AdminSearchFilters

‎app/assets/javascripts/admin/addon/components/modal/admin-search.gjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default class AdminSearchModal extends Component {
1414
@inline={{@inline}}
1515
@hideHeader={{true}}
1616
>
17-
<AdminSearch />
17+
<AdminSearch @fullPageLink={{true}} />
1818
</DModal>
1919
</template>
2020
}

‎app/assets/javascripts/admin/addon/services/admin-sidebar-state-manager.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Service, { service } from "@ember/service";
22
import KeyValueStore from "discourse/lib/key-value-store";
33
import { ADMIN_PANEL, MAIN_PANEL } from "discourse/lib/sidebar/panels";
4+
import AdminSearchModal from "admin/components/modal/admin-search";
45

56
export default class AdminSidebarStateManager extends Service {
67
@service sidebarState;
@@ -57,6 +58,10 @@ export default class AdminSidebarStateManager extends Service {
5758
this.sidebarState.isForcingSidebar = false;
5859
}
5960

61+
get modals() {
62+
return { adminSearch: AdminSearchModal };
63+
}
64+
6065
#forceAdminSidebar() {
6166
this.sidebarState.setPanel(ADMIN_PANEL);
6267
this.sidebarState.setSeparatedMode();

‎app/assets/javascripts/discourse/app/components/sidebar/panel-header.gjs

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Component from "@glimmer/component";
22
import { service } from "@ember/service";
3-
import BackToForum from "./back-to-forum";
3+
import BackToForum from "discourse/components/sidebar/back-to-forum";
4+
import Search from "discourse/components/sidebar/search";
45
import ToggleAllSections from "./toggle-all-sections";
56

67
export default class PanelHeader extends Component {
@@ -17,6 +18,9 @@ export default class PanelHeader extends Component {
1718
<BackToForum />
1819
<ToggleAllSections @sections={{@sections}} />
1920
</div>
21+
<div class="sidebar-panel-header__row">
22+
<Search />
23+
</div>
2024
</div>
2125
{{/if}}
2226
</template>

‎app/assets/javascripts/discourse/app/components/sidebar/search.gjs

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import Component from "@glimmer/component";
2+
import { on } from "@ember/modifier";
3+
import { action } from "@ember/object";
4+
import { service } from "@ember/service";
5+
import DButton from "discourse/components/d-button";
6+
import { translateModKey } from "discourse/lib/utilities";
7+
import { i18n } from "discourse-i18n";
8+
9+
export default class Search extends Component {
10+
@service sidebarState;
11+
12+
get shouldDisplay() {
13+
return this.sidebarState.currentPanel.searchable;
14+
}
15+
16+
get sidebarShortcutCombo() {
17+
return `${translateModKey("Meta")}+/`;
18+
}
19+
20+
@action
21+
onClick(event) {
22+
event?.preventDefault();
23+
return this.sidebarState.currentPanel.onSearchClick;
24+
}
25+
26+
<template>
27+
{{#if this.shouldDisplay}}
28+
<div class="sidebar-search">
29+
<div class="sidebar-search__input-container">
30+
<DButton
31+
@action={{this.onClick}}
32+
@icon="magnifying-glass"
33+
class="btn-transparent sidebar-search__icon"
34+
/>
35+
{{! template-lint-disable no-pointer-down-event-binding }}
36+
<input
37+
{{on "mousedown" this.onClick}}
38+
placeholder={{i18n "sidebar.search"}}
39+
type="text"
40+
enterkeyhint="done"
41+
class="sidebar-search__input"
42+
/>
43+
<span
44+
class="sidebar-search__shortcut-hint"
45+
>{{this.sidebarShortcutCombo}}</span>
46+
</div>
47+
</div>
48+
{{/if}}
49+
</template>
50+
}

‎app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,6 @@ export const ADMIN_NAV_MAP = [
1212
icon: "house",
1313
moderator: true,
1414
},
15-
{
16-
name: "admin_search",
17-
route: "adminSearch",
18-
label: "admin.config.search_everything.title",
19-
description: "admin.config.search_everything.header_description",
20-
icon: "magnifying-glass",
21-
moderator: true,
22-
},
2315
{
2416
name: "admin_users",
2517
route: "adminUsers",

‎app/assets/javascripts/discourse/app/lib/sidebar/admin-sidebar.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -407,4 +407,14 @@ export default class AdminSidebarPanel extends BaseCustomSidebarPanel {
407407
);
408408
});
409409
}
410+
411+
get searchable() {
412+
return true;
413+
}
414+
415+
get onSearchClick() {
416+
getOwnerWithFallback(this)
417+
.lookup("service:modal")
418+
.show(this.adminSidebarStateManager.modals.adminSearch);
419+
}
410420
}

‎app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-panel.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,20 @@ export default class BaseCustomSidebarPanel {
5454
return false;
5555
}
5656

57+
/**
58+
* @returns {boolean} Controls whether the search is shown
59+
*/
60+
get searchable() {
61+
return false;
62+
}
63+
64+
/**
65+
* @returns {Function} Action when search input is clicked.
66+
*/
67+
onSearchClick() {
68+
return null;
69+
}
70+
5771
get scrollActiveLinkIntoView() {
5872
return false;
5973
}

‎app/assets/javascripts/discourse/tests/acceptance/admin-site-settings-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ acceptance("Admin - Site Settings", function (needs) {
114114

115115
// navigate back to the "Settings" page, the title filter
116116
// has been removed from navigation
117-
await click(".sidebar-section-link-wrapper:nth-child(5) a");
117+
await click(".sidebar-section-link-wrapper:nth-child(4) a");
118118
assert.dom(".row.setting").exists({ count: 4 });
119119
});
120120

‎app/assets/stylesheets/admin/search.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@
4242
background: none !important;
4343
width: 100% !important;
4444
}
45+
46+
&__full-page-link {
47+
align-self: self-end;
48+
padding-right: 2.3em;
49+
}
4550
}
4651

4752
// Fitler
@@ -150,4 +155,5 @@
150155

151156
.admin-search-modal {
152157
--modal-max-width: 700px;
158+
--modal-min-height: 200px;
153159
}

‎app/assets/stylesheets/common/base/menu-panel.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,10 @@
229229
.badge-notification {
230230
vertical-align: text-bottom;
231231
}
232+
233+
.sidebar-search {
234+
width: 100%;
235+
}
232236
}
233237

234238
.search-menu .menu-panel {

‎app/assets/stylesheets/common/base/sidebar.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,56 @@
351351
}
352352
}
353353

354+
.sidebar-search {
355+
width: 100%;
356+
357+
&__input-container {
358+
display: flex;
359+
align-items: center;
360+
border: 1px solid var(--primary-400);
361+
background: var(--d-input-bg-color);
362+
box-sizing: border-box;
363+
margin-top: 0.5em;
364+
margin-bottom: 0.5em;
365+
}
366+
367+
&__icon.btn.btn-transparent {
368+
border: 0;
369+
background: var(--d-input-bg-color);
370+
padding-left: var(--d-sidebar-row-horizontal-padding);
371+
padding-right: var(--d-sidebar-row-horizontal-padding);
372+
373+
&:hover {
374+
background: var(--d-input-bg-color) !important;
375+
}
376+
377+
.d-icon:hover {
378+
color: var(--primary-high);
379+
}
380+
}
381+
382+
&__input[type="text"] {
383+
margin-bottom: 0;
384+
border: 0;
385+
padding: 0;
386+
width: 100%;
387+
height: var(--d-sidebar-row-height);
388+
cursor: pointer;
389+
390+
&:focus {
391+
outline: none;
392+
}
393+
}
394+
395+
&__shortcut-hint {
396+
background-color: rgba(var(--tertiary-rgb), 0.1);
397+
padding: 0.25em 0.5em;
398+
margin-right: 0.5em;
399+
font-size: var(--font-down-3);
400+
color: var(--primary-medium);
401+
}
402+
}
403+
354404
.sidebar-panel-header__row {
355405
display: flex;
356406
justify-content: space-between;

‎config/locales/client.en.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5081,6 +5081,7 @@ en:
50815081
back_to_forum: "Back to Forum"
50825082
collapse_all_sections: "Collapse all sections"
50835083
expand_all_sections: "Expand all sections"
5084+
search: "Search everything"
50845085
footer:
50855086
interface_color_selector:
50865087
light: "Light"
@@ -5599,6 +5600,7 @@ en:
55995600
modal_title: "Search anything in admin"
56005601
title: "Search"
56015602
instructions: "Type to search for pages, settings, reports, themes, components, and more..."
5603+
full_page_link: "Switch to full page search"
56025604
no_results: "We couldn’t find anything matching ‘%{filter}’."
56035605
result_types:
56045606
page:

‎spec/system/admin_search_spec.rb

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,10 @@
33
describe "Admin Search", type: :system do
44
fab!(:current_user) { Fabricate(:admin) }
55
let(:search_modal) { PageObjects::Modals::AdminSearch.new }
6+
let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
67

78
before { sign_in(current_user) }
89

9-
def open_search_modal
10-
send_keys([SystemHelpers::PLATFORM_KEY_MODIFIER, "/"])
11-
expect(search_modal).to be_open
12-
end
13-
1410
it "can search for settings, pages, themes, components, and reports" do
1511
theme = Fabricate(:theme, name: "Discourse Invincible Theme")
1612
component = Fabricate(:theme, name: "Discourse Redacted", component: true)
@@ -20,7 +16,7 @@ def open_search_modal
2016
.returns([stub(key: "theme_metadata.description", value: "Some description")])
2117

2218
visit "/admin"
23-
open_search_modal
19+
sidebar.click_search_input
2420

2521
search_modal.search("min_topic_title")
2622
expect(search_modal.find_result("setting", 0)).to have_content("Min topic title length")
@@ -55,7 +51,7 @@ def open_search_modal
5551

5652
it "can search full page" do
5753
visit "/admin"
58-
open_search_modal
54+
sidebar.click_search_input
5955
search_modal.search("min_topic_title")
6056
search_modal.input_enter
6157
expect(page).to have_current_path("/admin/search?filter=min_topic_title")
@@ -65,14 +61,34 @@ def open_search_modal
6561
)
6662
end
6763

64+
it "can go to full page search with link" do
65+
visit "/admin"
66+
sidebar.click_search_input
67+
search_modal.search("min_topic_title")
68+
search_modal.click_switch_to_full_page
69+
70+
expect(page).to have_current_path("/admin/search?filter=min_topic_title")
71+
expect(search_modal.find_result("setting", 0)).to have_content("Min topic title length")
72+
expect(search_modal.find_result("setting", 0)).to have_content(
73+
I18n.t("site_settings.min_topic_title_length"),
74+
)
75+
end
76+
6877
it "informs user about no results" do
6978
visit "/admin"
70-
open_search_modal
79+
sidebar.click_search_input
7180

7281
search_modal.search("very long search phrase")
7382

7483
expect(search_modal).to have_content(
7584
"We couldn’t find anything matching ‘very long search phrase’.",
7685
)
7786
end
87+
88+
it "opens search modal with keyboard shortcut" do
89+
visit "/admin"
90+
91+
send_keys([SystemHelpers::PLATFORM_KEY_MODIFIER, "/"])
92+
expect(search_modal).to be_open
93+
end
7894
end

‎spec/system/admin_sidebar_navigation_spec.rb

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@
6060
expect(links.map(&:text)).to eq(
6161
[
6262
I18n.t("admin_js.admin.dashboard.title"),
63-
I18n.t("admin_js.admin.config.search_everything.title"),
6463
I18n.t("admin_js.admin.config.users.title"),
6564
I18n.t("admin_js.admin.config.groups.title"),
6665
I18n.t("admin_js.admin.config.site_settings.title"),
@@ -98,11 +97,10 @@
9897
)
9998

10099
sidebar.toggle_all_sections
101-
expect(page).to have_selector(".sidebar-section-link-content-text", count: 6)
100+
expect(page).to have_selector(".sidebar-section-link-content-text", count: 5)
102101
expect(all(".sidebar-section-link-content-text").map(&:text)).to eq(
103102
[
104103
I18n.t("admin_js.admin.dashboard.title"),
105-
I18n.t("admin_js.admin.config.search_everything.title"),
106104
I18n.t("admin_js.admin.config.users.title"),
107105
I18n.t("admin_js.admin.config.groups.title"),
108106
I18n.t("admin_js.admin.config.site_settings.title"),
@@ -152,7 +150,6 @@
152150
expect(links.map(&:text)).to eq(
153151
[
154152
I18n.t("admin_js.admin.dashboard.title"),
155-
I18n.t("admin_js.admin.config.search_everything.title"),
156153
I18n.t("admin_js.admin.config.users.title"),
157154
I18n.t("admin_js.admin.config.groups.title"),
158155
I18n.t("admin_js.admin.config.whats_new.title"),

‎spec/system/page_objects/components/navigation_menu/sidebar.rb

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ def click_back_to_forum
6969
page.find(".sidebar-sections__back-to-forum").click
7070
self
7171
end
72+
73+
def click_search_input
74+
page.find(".sidebar-search__input").click
75+
end
7276
end
7377
end
7478
end

0 commit comments

Comments
 (0)