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

packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js

@@ -17,6 +17,7 @@ import Documentation from 'components/Documentation/index';
 import StatusDot from 'components/StatusDot';
 import ResponsiveTabs from 'ui/ResponsiveTabs';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
+import AuthMode from '../Auth/AuthMode/index';
 
 const MULTIPLE_CONTENT_TABS = new Set(['params', 'script', 'vars', 'auth', 'docs']);
 
@@ -51,7 +52,7 @@ const HttpRequestPane = ({ item, collection }) => {
   const tabs = useSelector((state) => state.tabs.tabs);
   const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
 
-  const bodyModeRef = useRef(null);
+  const rightContentRef = useRef(null);
   const initialAutoSelectDone = useRef(false);
 
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
@@ -130,9 +131,13 @@ const HttpRequestPane = ({ item, collection }) => {
   const isMultipleContentTab = MULTIPLE_CONTENT_TABS.has(requestPaneTab);
 
   const rightContent = requestPaneTab === 'body' ? (
-    <div ref={bodyModeRef}>
+    <div ref={rightContentRef}>
       <RequestBodyMode item={item} collection={collection} />
     </div>
+  ) : requestPaneTab === 'auth' ? (
+    <div ref={rightContentRef} className="flex flex-grow justify-start items-center">
+      <AuthMode item={item} collection={collection} />
+    </div>
   ) : null;
 
   return (
@@ -142,7 +147,7 @@ const HttpRequestPane = ({ item, collection }) => {
         activeTab={requestPaneTab}
         onTabSelect={selectTab}
         rightContent={rightContent}
-        rightContentRef={bodyModeRef}
+        rightContentRef={rightContent ? rightContentRef : null}
         delayedTabs={['body']}
       />