Skip to content

Commit f298364

Browse files
lis2lis2
committed
UX: display search input and open modal on click
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 1ab57f6 commit f298364

File tree

12 files changed

+130
-13
lines changed

12 files changed

+130
-13
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
22
import { service } from "@ember/service";
33
import BackToForum from "./back-to-forum";
44
import ToggleAllSections from "./toggle-all-sections";
5+
import Search from "./search";
56

67
export default class PanelHeader extends Component {
78
@service sidebarState;
@@ -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: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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 { i18n } from "discourse-i18n";
7+
8+
export default class Search extends Component {
9+
@service sidebarState;
10+
11+
willDestroy() {
12+
super.willDestroy(...arguments);
13+
}
14+
15+
get shouldDisplay() {
16+
return this.sidebarState.currentPanel.searchable;
17+
}
18+
19+
@action
20+
onClick(event) {
21+
event?.preventDefault();
22+
return this.sidebarState.currentPanel.onSearchClick;
23+
}
24+
25+
<template>
26+
{{#if this.shouldDisplay}}
27+
<div class="sidebar-search">
28+
<div class="sidebar-search__input-container">
29+
<DButton
30+
@action={{this.onClick}}
31+
@icon="magnifying-glass"
32+
class="btn-transparent sidebar-search__icon"
33+
/>
34+
35+
<input
36+
{{on "mouseup" this.onClick}}
37+
placeholder={{i18n "sidebar.search"}}
38+
type="text"
39+
enterkeyhint="done"
40+
class="sidebar-search__input"
41+
/>
42+
43+
</div>
44+
</div>
45+
{{/if}}
46+
</template>
47+
}

‎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: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import BaseCustomSidebarSection from "discourse/lib/sidebar/base-custom-sidebar-
1111
import BaseCustomSidebarSectionLink from "discourse/lib/sidebar/base-custom-sidebar-section-link";
1212
import { ADMIN_PANEL } from "discourse/lib/sidebar/panels";
1313
import I18n, { i18n } from "discourse-i18n";
14+
import AdminSearchModal from "admin/components/modal/admin-search";
1415

1516
let additionalAdminSidebarSectionLinks = {};
1617

@@ -407,4 +408,12 @@ export default class AdminSidebarPanel extends BaseCustomSidebarPanel {
407408
);
408409
});
409410
}
411+
412+
get searchable() {
413+
return true;
414+
}
415+
416+
get onSearchClick() {
417+
getOwnerWithFallback(this).lookup("service:modal").show(AdminSearchModal);
418+
}
410419
}

‎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/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: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,42 @@
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+
}
364+
365+
&__icon.btn.btn-transparent {
366+
border: 0;
367+
background: var(--d-input-bg-color);
368+
width: var(--d-sidebar-section-link-prefix-width);
369+
padding-left: 1em;
370+
padding-right: 1em;
371+
372+
&:hover {
373+
background: var(--d-input-bg-color) !important;
374+
}
375+
376+
.d-icon:hover {
377+
color: var(--primary-high);
378+
}
379+
}
380+
381+
&__input[type="text"] {
382+
margin-bottom: 0;
383+
border: 0;
384+
padding: 0;
385+
width: 100%;
386+
height: var(--d-sidebar-row-height);
387+
}
388+
}
389+
354390
.sidebar-panel-header__row {
355391
display: flex;
356392
justify-content: space-between;

‎config/locales/client.en.yml

Lines changed: 1 addition & 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"

‎spec/system/admin_search_spec.rb

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
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

@@ -75,4 +76,12 @@ def open_search_modal
7576
"We couldn’t find anything matching ‘very long search phrase’.",
7677
)
7778
end
79+
80+
it "opens search modal when search input is clicked" do
81+
visit "/admin"
82+
sidebar.click_search_input
83+
84+
search_modal.search("min_topic_title")
85+
expect(search_modal.find_result("setting", 0)).to have_content("Min topic title length")
86+
end
7887
end

‎spec/system/admin_sidebar_navigation_spec.rb

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
expect(links.map(&:text)).to eq(
5151
[
5252
I18n.t("admin_js.admin.dashboard.title"),
53-
I18n.t("admin_js.admin.config.search_everything.title"),
5453
I18n.t("admin_js.admin.config.users.title"),
5554
I18n.t("admin_js.admin.config.groups.title"),
5655
I18n.t("admin_js.admin.config.site_settings.title"),
@@ -86,11 +85,10 @@
8685
)
8786

8887
sidebar.toggle_all_sections
89-
expect(page).to have_selector(".sidebar-section-link-content-text", count: 6)
88+
expect(page).to have_selector(".sidebar-section-link-content-text", count: 5)
9089
expect(all(".sidebar-section-link-content-text").map(&:text)).to eq(
9190
[
9291
I18n.t("admin_js.admin.dashboard.title"),
93-
I18n.t("admin_js.admin.config.search_everything.title"),
9492
I18n.t("admin_js.admin.config.users.title"),
9593
I18n.t("admin_js.admin.config.groups.title"),
9694
I18n.t("admin_js.admin.config.site_settings.title"),
@@ -140,7 +138,6 @@
140138
expect(links.map(&:text)).to eq(
141139
[
142140
I18n.t("admin_js.admin.dashboard.title"),
143-
I18n.t("admin_js.admin.config.search_everything.title"),
144141
I18n.t("admin_js.admin.config.users.title"),
145142
I18n.t("admin_js.admin.config.groups.title"),
146143
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)