Refactor dropdown components to use MenuDropdown for improved functionality and keyboard accessibility (#6404)

* Refactor dropdown components to use MenuDropdown for improved functionality and keyboard accessibility

- Replaced Dropdown with MenuDropdown in various components including BodyModeSelector, AuthMode, and RequestBodyMode.
- Updated styles and structure for better usability and accessibility.
- Removed unused Dropdown component and its associated styles.
- Enhanced action buttons in ResponsePane and Collection components with ActionIcon for better UI consistency.

* fix: Update HttpMethodSelector styles and tests for improved accessibility

- Changed the class name for the "Add Custom" button to include 'text-link' for better styling.
- Updated tests to use role-based queries for dropdown items, enhancing accessibility checks.
- Ensured the correct application of classes in tests to reflect the updated structure.

* refactor: Improve component accessibility and consistency

* fix: update hover behavior for collection actions menu in runner.ts

* refactor: streamline hover interactions for collection actions across tests

* refactor: enhance component structure and accessibility across response actions

* fix: correct fill property syntax in StyledWrapper for consistent styling

* refactor: simplify isDisabled logic in response components for clarity

* fix: correct tabIndex logic in ResponseCopy component for improved accessibility

* fix: update tabIndex logic in ResponseBookmark component for improved accessibility

* fix: enable action buttons in ResponsePaneActions for improved usability

* refactor: remove unnecessary tabIndex attributes in response components for improved accessibility

* refactor: remove keyDown event handlers from response components for cleaner interaction

* refactor: remove SidebarHeader component and related styles for improved structure

tests/utils/page/actions.ts

@@ -13,7 +13,9 @@ const closeAllCollections = async (page) => {
     const numberOfCollections = await page.locator('[data-testid="collections"] .collection-name').count();
 
     for (let i = 0; i < numberOfCollections; i++) {
-      await page.locator('[data-testid="collections"] .collection-name').first().locator('.collection-actions').click();
+      const firstCollection = page.locator('[data-testid="collections"] .collection-name').first();
+      await firstCollection.hover();
+      await firstCollection.locator('.collection-actions .icon').click();
       await page.locator('.dropdown-item').getByText('Remove').click();
       // Wait for the remove collection modal to be visible
       await page.locator('.bruno-modal-header-title', { hasText: 'Remove Collection' }).waitFor({ state: 'visible' });
@@ -653,10 +655,10 @@ const selectRequestPaneTab = async (page: Page, tabName: string) => {
     if (await overflowButton.isVisible()) {
       await overflowButton.click();
 
-      // Wait for dropdown to appear and click the tab
-      const dropdownTab = page.locator('.tippy-content').getByRole('tab', { name: tabName });
-      await expect(dropdownTab).toBeVisible();
-      await dropdownTab.click();
+      // Wait for dropdown to appear and click the menu item (overflow tabs are rendered as menuitems)
+      const dropdownItem = page.locator('.tippy-content').getByRole('menuitem', { name: tabName });
+      await expect(dropdownItem).toBeVisible();
+      await dropdownItem.click();
       return;
     }
 
@@ -680,15 +682,32 @@ const expectResponseContains = async (page: Page, texts: string[]) => {
   });
 };
 
-// Create a action to click a response action
+// Map button testIds to menu item IDs
+const buttonToMenuItemMap: Record<string, string> = {
+  'response-copy-btn': 'copy-response',
+  'response-bookmark-btn': 'save-response',
+  'response-download-btn': 'download-response',
+  'response-clear-btn': 'clear-response',
+  'response-layout-toggle-btn': 'change-layout'
+};
+
+// Click a response action - handles both visible buttons and menu items
 const clickResponseAction = async (page: Page, actionTestId: string) => {
-  const actionButton = await page.getByTestId(actionTestId).first();
+  const actionButton = page.getByTestId(actionTestId).first();
   if (await actionButton.isVisible()) {
     await actionButton.click();
   } else {
-    const menu = await page.getByTestId('response-actions-menu');
+    // Open the menu dropdown
+    const menu = page.getByTestId('response-actions-menu');
     await menu.click();
-    await actionButton.click();
+
+    // Click the corresponding menu item
+    const menuItemId = buttonToMenuItemMap[actionTestId];
+    if (menuItemId) {
+      await page.locator(`[role="menuitem"][data-item-id="${menuItemId}"]`).click();
+    } else {
+      throw new Error(`Unknown action testId: ${actionTestId}. Add mapping to buttonToMenuItemMap.`);
+    }
   }
 };
 

tests/utils/page/locators.ts

@@ -123,7 +123,7 @@ export const buildWebsocketCommonLocators = (page: Page) => ({
   toolbar: {
     latestFirst: () => page.getByRole('button', { name: 'Latest First' }),
     latestLast: () => page.getByRole('button', { name: 'Latest Last' }),
-    clearResponse: () => page.getByTestId('response-clear-button')
+    clearResponse: () => page.getByTestId('response-clear-btn')
   }
 });
 

tests/utils/page/runner.ts

@@ -44,10 +44,10 @@ export const runCollection = async (page: Page, collectionName: string) => {
     const collectionContainer = page.getByTestId('collections').locator('.collection-name').filter({ hasText: collectionName });
     await collectionContainer.waitFor({ state: 'visible' });
 
-    // Open collection actions menu - wait for the actions container to be actionable
+    // Open collection actions menu - hover first to reveal the hidden actions button
     const actionsContainer = collectionContainer.locator('.collection-actions');
+    await collectionContainer.hover();
     await actionsContainer.waitFor({ state: 'visible' });
-    await actionsContainer.hover();
 
     const icon = actionsContainer.locator('.icon');
     await icon.waitFor({ state: 'visible', timeout: 5000 });