FEATURE: clear sidebar admin filter with ESC (#26408)

Allow the sidebar filter to be cleared by hitting ESC.
This commit is contained in:
Krzysztof Kotlarek 2024-04-02 09:45:25 +11:00 committed by GitHub
parent fa6e275ad9
commit 92a341355a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 2 deletions

View File

@ -27,6 +27,12 @@ export default class Filter extends Component {
@action
setFilter(event) {
if (event.key === "Escape") {
event.stopPropagation();
return this.sidebarState.filter.length > 0
? (this.sidebarState.filter = "")
: event.target.blur();
}
this.sidebarState.filter = event.target.value.toLowerCase();
}
@ -43,7 +49,7 @@ export default class Filter extends Component {
class="sidebar-filter__input"
placeholder={{i18n "sidebar.filter"}}
@value={{this.sidebarState.filter}}
{{on "input" this.setFilter}}
{{on "keydown" this.setFilter}}
/>
{{#if this.displayClearFilter}}
<DButton @action={{this.clearFilter}} class="sidebar-filter__clear">

View File

@ -1,4 +1,4 @@
import { click, fillIn, visit } from "@ember/test-helpers";
import { click, fillIn, triggerKeyEvent, visit } from "@ember/test-helpers";
import { test } from "qunit";
import { AUTO_GROUPS } from "discourse/lib/constants";
import { withPluginApi } from "discourse/lib/plugin-api";
@ -74,6 +74,29 @@ acceptance("Admin Sidebar - Sections", function (needs) {
);
});
test("filter sections and clear filter with ESC", async function (assert) {
await visit("/admin");
await fillIn(".sidebar-filter__input", "advanced");
assert.notOk(
exists(".sidebar-section[data-section-name='admin-plugins']"),
"plugins section is hidden"
);
assert.ok(
exists(".sidebar-section[data-section-name='admin-advanced']"),
"advanced section is displayed"
);
await triggerKeyEvent(".sidebar-filter__input", "keydown", "Escape");
assert.ok(
exists(".sidebar-section[data-section-name='admin-plugins']"),
"plugins section is displayed"
);
assert.ok(
exists(".sidebar-section[data-section-name='admin-advanced']"),
"advanced section is displayed"
);
});
test("enabled plugin admin routes have links added", async function (assert) {
await visit("/admin");
await click(".sidebar-toggle-all-sections");