From 5f88e7d20126dc0aa06c726831086eb33a72750d Mon Sep 17 00:00:00 2001
From: Pooja <pooja@usebruno.com>
Date: Fri, 19 Dec 2025 16:15:52 +0530
Subject: [PATCH] fix: auto-expand collapsed sidebar section when clicking
 action buttons (#6468)

---
 .../Sidebar/SidebarSection/index.js           |  7 +-
 tests/sidebar/section-auto-expand.spec.ts     | 74 +++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 tests/sidebar/section-auto-expand.spec.ts

diff --git a/packages/bruno-app/src/components/Sidebar/SidebarSection/index.js b/packages/bruno-app/src/components/Sidebar/SidebarSection/index.js
index c43e2ccf2..bd2fbec37 100644
--- a/packages/bruno-app/src/components/Sidebar/SidebarSection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/SidebarSection/index.js
@@ -66,7 +66,12 @@ const SidebarSection = ({
           {actions && (
             <div
               className="section-actions"
-              onClick={(e) => e.stopPropagation()}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (!localExpanded) {
+                  setSectionExpanded(id, true);
+                }
+              }}
             >
               {actions}
             </div>
diff --git a/tests/sidebar/section-auto-expand.spec.ts b/tests/sidebar/section-auto-expand.spec.ts
new file mode 100644
index 000000000..406d4260d
--- /dev/null
+++ b/tests/sidebar/section-auto-expand.spec.ts
@@ -0,0 +1,74 @@
+import { test, expect } from '../../playwright';
+
+test.describe('Sidebar Section Auto-Expand', () => {
+  test('Clicking action button on collapsed section should expand it', async ({ page }) => {
+    // The api-specs section is collapsed by default (only collections is expanded)
+    // Find the api-specs section by its title
+    const apiSpecsSection = page.locator('.sidebar-section').filter({ hasText: 'API Specs' });
+
+    // Verify the api-specs section is initially collapsed (doesn't have 'expanded' class)
+    await expect(apiSpecsSection).not.toHaveClass(/expanded/);
+
+    // Verify section-content is not visible when collapsed
+    const sectionContent = apiSpecsSection.locator('.section-content');
+    await expect(sectionContent).not.toBeVisible();
+
+    // Click on the add button in the section-actions area
+    // This should trigger the auto-expand logic
+    const addButton = page.getByTestId('api-specs-header-add-menu');
+    await addButton.click();
+
+    // Close the dropdown by pressing Escape (we just want to test the expand, not the dropdown action)
+    await page.keyboard.press('Escape');
+
+    // After clicking an action, the section should be expanded
+    await expect(apiSpecsSection).toHaveClass(/expanded/);
+
+    // Verify section-content is now visible
+    await expect(sectionContent).toBeVisible();
+  });
+
+  test('Clicking action button on already expanded section should keep it expanded', async ({ page }) => {
+    // The collections section is expanded by default
+    const collectionsSection = page.locator('.sidebar-section').filter({ hasText: 'Collections' });
+
+    // Verify the collections section is initially expanded
+    await expect(collectionsSection).toHaveClass(/expanded/);
+
+    // Verify section-content is visible
+    const sectionContent = collectionsSection.locator('.section-content');
+    await expect(sectionContent).toBeVisible();
+
+    // Click on the add button in the section-actions area
+    const addButton = page.getByTestId('collections-header-add-menu');
+    await addButton.click();
+
+    // Close the dropdown
+    await page.keyboard.press('Escape');
+
+    // Section should still be expanded
+    await expect(collectionsSection).toHaveClass(/expanded/);
+    await expect(sectionContent).toBeVisible();
+  });
+
+  test('Clicking search action on collapsed collections section should expand it', async ({ page }) => {
+    // First, collapse the collections section by clicking on its header
+    const collectionsSection = page.locator('.sidebar-section').filter({ hasText: 'Collections' });
+    const sectionHeader = collectionsSection.locator('.section-header-left');
+    await sectionHeader.click();
+
+    // Verify the section is now collapsed
+    await expect(collectionsSection).not.toHaveClass(/expanded/);
+    const sectionContent = collectionsSection.locator('.section-content');
+    await expect(sectionContent).not.toBeVisible();
+
+    // Now click on the search action button in the collapsed section
+    // The search button is in section-actions with title "Search requests"
+    const searchButton = collectionsSection.locator('.section-actions button[title="Search requests"]');
+    await searchButton.click();
+
+    // The section should now be expanded
+    await expect(collectionsSection).toHaveClass(/expanded/);
+    await expect(sectionContent).toBeVisible();
+  });
+});