From eebf3320252061176a41d1807c4289e359059418 Mon Sep 17 00:00:00 2001 From: Krzysztof Kotlarek Date: Tue, 4 Jun 2024 12:23:21 +1000 Subject: [PATCH] FEATURE: expand the admin sidebar when filtering (#27312) Even when the admin sidebar sections are collapsed, they should expand while filtering. When the filter is removed, sections should go back to the previous state. In addition, trim whitespace from the filter section. --- .../app/components/sidebar/api-section.gjs | 9 ++++++-- .../app/components/sidebar/filter.gjs | 2 +- .../app/components/sidebar/section.gjs | 9 ++++++++ .../discourse/app/services/sidebar-state.js | 4 ++++ spec/system/admin_sidebar_navigation_spec.rb | 23 +++++++++++++++++++ 5 files changed, 44 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/sidebar/api-section.gjs b/app/assets/javascripts/discourse/app/components/sidebar/api-section.gjs index 3df637a811f..6e46073a77c 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/api-section.gjs +++ b/app/assets/javascripts/discourse/app/components/sidebar/api-section.gjs @@ -27,13 +27,18 @@ export default class SidebarApiSection extends Component { return this.section.links; } - if (this.section.text.toLowerCase().match(this.sidebarState.filter)) { + if ( + this.section.text.toLowerCase().match(this.sidebarState.sanitizedFilter) + ) { return this.section.links; } return this.section.links.filter((link) => { return ( - link.text.toString().toLowerCase().match(this.sidebarState.filter) || + link.text + .toString() + .toLowerCase() + .match(this.sidebarState.sanitizedFilter) || link.keywords.navigation.some((keyword) => keyword.match(this.sidebarState.filter) ) diff --git a/app/assets/javascripts/discourse/app/components/sidebar/filter.gjs b/app/assets/javascripts/discourse/app/components/sidebar/filter.gjs index 0139acd8fd0..6f89ec62c98 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/filter.gjs +++ b/app/assets/javascripts/discourse/app/components/sidebar/filter.gjs @@ -24,7 +24,7 @@ export default class Filter extends Component { @action setFilter(event) { - this.sidebarState.filter = event.target.value.toLowerCase(); + this.sidebarState.filter = event.target.value; } @action diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.gjs b/app/assets/javascripts/discourse/app/components/sidebar/section.gjs index fecfd1f1e75..8903a0f724d 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section.gjs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section.gjs @@ -4,6 +4,7 @@ import { on } from "@ember/modifier"; import { action } from "@ember/object"; import didInsert from "@ember/render-modifiers/modifiers/did-insert"; import { service } from "@ember/service"; +import { isEmpty } from "@ember/utils"; import icon from "discourse-common/helpers/d-icon"; import i18n from "discourse-common/helpers/i18n"; import { bind } from "discourse-common/utils/decorators"; @@ -41,6 +42,10 @@ export default class SidebarSection extends Component { @bind setExpandedState() { + if (!isEmpty(this.sidebarState.filter)) { + return; + } + if (this.isCollapsed) { this.sidebarState.collapseSection(this.args.sectionName); } else { @@ -49,6 +54,10 @@ export default class SidebarSection extends Component { } get displaySectionContent() { + if (!isEmpty(this.sidebarState.filter)) { + return true; + } + return !this.sidebarState.collapsedSections.has( this.collapsedSidebarSectionKey ); diff --git a/app/assets/javascripts/discourse/app/services/sidebar-state.js b/app/assets/javascripts/discourse/app/services/sidebar-state.js index b0efd04f9a9..ad757961919 100644 --- a/app/assets/javascripts/discourse/app/services/sidebar-state.js +++ b/app/assets/javascripts/discourse/app/services/sidebar-state.js @@ -134,6 +134,10 @@ export default class SidebarState extends Service { ); } + get sanitizedFilter() { + return this.filter.toLowerCase().trim(); + } + clearFilter() { this.filter = ""; } diff --git a/spec/system/admin_sidebar_navigation_spec.rb b/spec/system/admin_sidebar_navigation_spec.rb index 945488409f8..f5afd3e2c6d 100644 --- a/spec/system/admin_sidebar_navigation_spec.rb +++ b/spec/system/admin_sidebar_navigation_spec.rb @@ -105,6 +105,29 @@ describe "Admin Revamp | Sidebar Navigation", type: :system do links = page.all(".sidebar-section-link-content-text") expect(links.count).to eq(3) expect(links.map(&:text)).to eq(["Appearance", "Preview Summary", "Server Setup"]) + + filter.filter(" preview ") + links = page.all(".sidebar-section-link-content-text") + expect(links.count).to eq(1) + expect(links.map(&:text)).to eq(["Preview Summary"]) + expect(page).to have_no_css(".sidebar-no-results") + end + + it "temporarily expands section when filter" do + visit("/admin") + links = page.all(".sidebar-section-link-content-text") + expect(links.count).to eq(2) + expect(links.map(&:text)).to eq(["Dashboard", "All Site Settings"]) + + filter.filter("ie") + links = page.all(".sidebar-section-link-content-text") + expect(links.count).to eq(2) + expect(links.map(&:text)).to eq(["User Fields", "Preview Summary"]) + + filter.filter("") + links = page.all(".sidebar-section-link-content-text") + expect(links.count).to eq(2) + expect(links.map(&:text)).to eq(["Dashboard", "All Site Settings"]) end it "allows further filtering of site settings or users if links do not show results" do