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/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)
         )

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

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
     );

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 = "";
   }

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