Unify component wrappers and OL-prefix dropdown components (#35152)

* Rename dropdown primitives to OL-prefixed components

* Migrate all consumers to OL-prefixed dropdown components

* Migrate subscription dropdown shells to OL components

* Update pdf-preview story to OL-prefixed dropdown components

* Migrate navbar and spelling dropdowns to OL components

* Move dropdown primitives to ol/ol-dropdown-menu, remove BS5 import aliases

* Rename dropdown prop types to OL-prefixed, clean up BS5 import aliases

* Widen OLDropdownItem/Toggle/Menu props to include AriaAttributes and data-*

GitOrigin-RevId: 0babce46867849b3f176bac8cf1652dc76fd34da

services/web/frontend/js/features/source-editor/components/editor-context-menu-feedback.tsx

@@ -1,9 +1,9 @@
 import { FC, memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  DropdownItem,
-  DropdownDivider,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdownItem,
+  OLDropdownDivider,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import DropdownListItem from '@/shared/components/dropdown/dropdown-list-item'
 import SplitTestBadge from '@/shared/components/split-test-badge'
 import { sendContextMenuEvent } from '../utils/context-menu-analytics'
@@ -24,9 +24,9 @@ export const EditorContextMenuFeedback: FC = memo(
 
     return (
       <>
-        <DropdownDivider />
+        <OLDropdownDivider />
         <DropdownListItem>
-          <DropdownItem
+          <OLDropdownItem
             as="button"
             onClick={handleClick}
             leadingIcon={
@@ -37,7 +37,7 @@ export const EditorContextMenuFeedback: FC = memo(
             }
           >
             {t('give_feedback')}
-          </DropdownItem>
+          </OLDropdownItem>
         </DropdownListItem>
       </>
     )

services/web/frontend/js/features/source-editor/components/editor-context-menu.tsx

@@ -2,11 +2,11 @@ import { FC, Fragment, memo, useEffect, useRef } from 'react'
 import ReactDOM from 'react-dom'
 import { getTooltip } from '@codemirror/view'
 import {
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownDivider,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdown,
+  OLDropdownMenu,
+  OLDropdownItem,
+  OLDropdownDivider,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import {
   useCodeMirrorStateContext,
   useCodeMirrorViewContext,
@@ -48,9 +48,9 @@ const EditorContextMenuContent: FC = memo(function EditorContextMenuContent() {
   }, [])
 
   return (
-    <Dropdown show onToggle={onToggle}>
+    <OLDropdown show onToggle={onToggle}>
       <div onContextMenu={event => event.preventDefault()}>
-        <DropdownMenu
+        <OLDropdownMenu
           ref={menuRef}
           show
           tabIndex={0}
@@ -67,9 +67,9 @@ const EditorContextMenuContent: FC = memo(function EditorContextMenuContent() {
         >
           {menuItems.map((menuItem, index) => (
             <Fragment key={index}>
-              {menuItem.separatorAbove && <DropdownDivider />}
+              {menuItem.separatorAbove && <OLDropdownDivider />}
               <DropdownListItem>
-                <DropdownItem
+                <OLDropdownItem
                   as="button"
                   onClick={() => menuItem.handler()}
                   disabled={menuItem.disabled}
@@ -80,14 +80,14 @@ const EditorContextMenuContent: FC = memo(function EditorContextMenuContent() {
                   }
                 >
                   {menuItem.label}
-                </DropdownItem>
+                </OLDropdownItem>
               </DropdownListItem>
             </Fragment>
           ))}
           <EditorContextMenuFeedback />
-        </DropdownMenu>
+        </OLDropdownMenu>
       </div>
-    </Dropdown>
+    </OLDropdown>
   )
 })
 

services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx

@@ -1,9 +1,9 @@
 import { useProjectSettingsContext } from '@/features/ide-settings/context/project-settings-context'
 import {
-  Dropdown,
-  DropdownMenu,
-  DropdownToggle,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdown,
+  OLDropdownMenu,
+  OLDropdownToggle,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import OLButton from '@/shared/components/ol/ol-button'
 import {
   OLModal,
@@ -81,8 +81,8 @@ const MathPreviewTooltipMenu: FC = () => {
 
   return (
     <>
-      <Dropdown align="end">
-        <DropdownToggle
+      <OLDropdown align="end">
+        <OLDropdownToggle
           id="some-id"
           className="math-tooltip-options-toggle"
           variant="secondary"
@@ -92,8 +92,8 @@ const MathPreviewTooltipMenu: FC = () => {
             type="more_vert"
             accessibilityLabel={t('more_options')}
           />
-        </DropdownToggle>
-        <DropdownMenu flip={false}>
+        </OLDropdownToggle>
+        <OLDropdownMenu flip={false}>
           <DropdownMenuItem
             onClick={onHide}
             description={t('temporarily_hides_the_preview')}
@@ -111,8 +111,8 @@ const MathPreviewTooltipMenu: FC = () => {
           >
             {t('disable')}
           </DropdownMenuItem>
-        </DropdownMenu>
-      </Dropdown>
+        </OLDropdownMenu>
+      </OLDropdown>
 
       {showDisableModal && (
         <OLModal show onHide={closeDisableModal}>

services/web/frontend/js/features/source-editor/components/tabs/tabs-context-menu.tsx

@@ -2,11 +2,11 @@ import { useEffect, useRef } from 'react'
 import ReactDOM from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import {
-  Dropdown,
-  DropdownDivider,
-  DropdownItem,
-  DropdownMenu,
-} from '@/shared/components/dropdown/dropdown-menu'
+  OLDropdown,
+  OLDropdownDivider,
+  OLDropdownItem,
+  OLDropdownMenu,
+} from '@/shared/components/ol/ol-dropdown-menu'
 import { useTabsContext } from '@/features/ide-react/context/tabs-context'
 
 export function TabsContextMenu() {
@@ -75,14 +75,14 @@ export function TabsContextMenu() {
       style={{ top: contextMenuTarget.top, left: contextMenuTarget.left }}
       className="context-menu"
     >
-      <Dropdown
+      <OLDropdown
         show
         drop="down"
         onKeyDown={handleKeyDown}
         onToggle={handleToggle}
       >
-        <DropdownMenu className="dropdown-menu-sm-width" tabIndex={-1}>
-          <DropdownItem
+        <OLDropdownMenu className="dropdown-menu-sm-width" tabIndex={-1}>
+          <OLDropdownItem
             disabled={tabs.length <= 1}
             as="button"
             onClick={() => {
@@ -91,8 +91,8 @@ export function TabsContextMenu() {
             }}
           >
             {t('close')}
-          </DropdownItem>
-          <DropdownItem
+          </OLDropdownItem>
+          <OLDropdownItem
             disabled={tabs.length <= 1}
             as="button"
             onClick={() => {
@@ -101,8 +101,8 @@ export function TabsContextMenu() {
             }}
           >
             {t('close_other_tabs')}
-          </DropdownItem>
-          <DropdownItem
+          </OLDropdownItem>
+          <OLDropdownItem
             disabled={tabs[tabs.length - 1]?.id === contextMenuTarget.tabId}
             as="button"
             onClick={() => {
@@ -111,9 +111,9 @@ export function TabsContextMenu() {
             }}
           >
             {t('close_tabs_to_the_right')}
-          </DropdownItem>
-          <DropdownDivider />
-          <DropdownItem
+          </OLDropdownItem>
+          <OLDropdownDivider />
+          <OLDropdownItem
             as="button"
             onClick={() => {
               window.dispatchEvent(
@@ -130,9 +130,9 @@ export function TabsContextMenu() {
             leadingIcon="settings"
           >
             {t('tab_settings')}
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
+          </OLDropdownItem>
+        </OLDropdownMenu>
+      </OLDropdown>
     </div>,
     document.body
   )

services/web/frontend/js/features/source-editor/components/toolbar/math-dropdown.tsx

@@ -1,4 +1,4 @@
-import { DropdownHeader } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownHeader } from '@/shared/components/ol/ol-dropdown-menu'
 import { ToolbarButtonMenu } from './button-menu'
 import { emitToolbarEvent } from '../../extensions/toolbar/utils/analytics'
 import MaterialIcon from '../../../../shared/components/material-icon'
@@ -31,9 +31,9 @@ export const MathDropdown = memo(function MathDropdown() {
     >
       {renderAIButton && (
         <>
-          <DropdownHeader className="ol-cm-toolbar-header mx-2">
+          <OLDropdownHeader className="ol-cm-toolbar-header mx-2">
             {t('toolbar_insert_math_lowercase')}
-          </DropdownHeader>
+          </OLDropdownHeader>
           <OLListGroupItem
             className={showAiFeaturesDisabled ? 'opacity-50' : ''}
             aria-label={t('toolbar_generate_math')}

services/web/frontend/js/features/source-editor/components/toolbar/table-dropdown.tsx

@@ -1,4 +1,4 @@
-import { DropdownHeader } from '@/shared/components/dropdown/dropdown-menu'
+import { OLDropdownHeader } from '@/shared/components/ol/ol-dropdown-menu'
 import { ToolbarButtonMenu } from './button-menu'
 import MaterialIcon from '../../../../shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
@@ -43,9 +43,9 @@ export const TableDropdown = memo(function TableDropdown() {
           disablePopover={selectSizeDropdown.open}
           icon={<MaterialIcon type="table_chart" />}
         >
-          <DropdownHeader className="ol-cm-toolbar-header mx-2">
+          <OLDropdownHeader className="ol-cm-toolbar-header mx-2">
             {t('toolbar_table_insert_table_lowercase')}
-          </DropdownHeader>
+          </OLDropdownHeader>
           <OLListGroupItem
             className={showAiFeaturesDisabled ? 'opacity-50' : ''}
             aria-label={t('toolbar_generate_table')}