[Discover][Unified Tabs] Rename "Tabs bar menu" to "Tabs menu"

src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx

@@ -39,7 +39,7 @@ export interface TabbedContentProps
     | 'disableCloseButton'
     | 'disableInlineLabelEditing'
     | 'disableDragAndDrop'
-    | 'disableTabsBarMenu'
+    | 'disableTabsMenu'
   > {
   items: TabItem[];
   selectedItemId?: string;
@@ -80,7 +80,7 @@ export const TabbedContent: React.FC<TabbedContentProps> = ({
   disableCloseButton = false,
   disableInlineLabelEditing = false,
   disableDragAndDrop = false,
-  disableTabsBarMenu = false,
+  disableTabsMenu = false,
 }) => {
   const tabsBarApi = useRef<TabsBarApi | null>(null);
   const [generatedId] = useState(() => tabContentIdOverride ?? htmlIdGenerator()());
@@ -346,7 +346,7 @@ export const TabbedContent: React.FC<TabbedContentProps> = ({
       disableCloseButton={disableCloseButton}
       disableInlineLabelEditing={disableInlineLabelEditing}
       disableDragAndDrop={disableDragAndDrop}
-      disableTabsBarMenu={disableTabsBarMenu}
+      disableTabsMenu={disableTabsMenu}
     />
   );
 

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx

@@ -141,7 +141,7 @@ describe('TabsBar', () => {
     expect(onAdd).not.toHaveBeenCalled();
   });
 
-  it('does not render tabs bar menu when disableTabsBarMenu=true', () => {
+  it('does not render tabs menu when disableTabsMenu=true', () => {
     const selectedItem = items[0];
 
     render(
@@ -160,20 +160,20 @@ describe('TabsBar', () => {
         onReorder={onReorder}
         getPreviewData={getPreviewData}
         onEBTEvent={onEBTEvent}
-        disableTabsBarMenu={true}
+        disableTabsMenu={true}
       />
     );
 
     // Verify tabs are still rendered
     const tabs = screen.getAllByRole('tab');
     expect(tabs).toHaveLength(items.length);
 
-    // Verify tabs bar menu is not rendered
-    const tabsBarMenu = screen.queryByTestId('unifiedTabs_tabsBarMenu');
-    expect(tabsBarMenu).not.toBeInTheDocument();
+    // Verify tabs menu is not rendered
+    const tabsMenu = screen.queryByTestId('unifiedTabs_tabsMenu');
+    expect(tabsMenu).not.toBeInTheDocument();
 
     // Verify menu button is not rendered
-    const menuButton = screen.queryByTestId('unifiedTabs_tabsBarMenuButton');
+    const menuButton = screen.queryByTestId('unifiedTabs_tabsMenuButton');
     expect(menuButton).not.toBeInTheDocument();
   });
 });

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx

@@ -35,7 +35,7 @@ import { TabsEventName } from '../../types';
 import { getTabIdAttribute } from '../../utils/get_tab_attributes';
 import { useResponsiveTabs } from '../../hooks/use_responsive_tabs';
 import { TabsBarWithBackground } from '../tabs_visual_glue_to_header/tabs_bar_with_background';
-import { TabsBarMenu, type TabsBarMenuProps } from '../tabs_bar_menu';
+import { TabsMenu, type TabsMenuProps } from '../tabs_menu';
 import { TabsEventDataKeys } from '../../event_data_keys';
 import { OptionalDraggable } from './optional_draggable';
 import { OptionalDroppable } from './optional_droppable';
@@ -71,12 +71,12 @@ export type TabsBarProps = Pick<
   maxItemsCount?: number;
   services: TabsServices;
   onAdd: () => Promise<void>;
-  onSelectRecentlyClosed: TabsBarMenuProps['onSelectRecentlyClosed'];
+  onSelectRecentlyClosed: TabsMenuProps['onSelectRecentlyClosed'];
   onReorder: (items: TabItem[], movedTabId: string) => void;
   onEBTEvent: (event: TabsEBTEvent) => void;
-  onClearRecentlyClosed: TabsBarMenuProps['onClearRecentlyClosed'];
+  onClearRecentlyClosed: TabsMenuProps['onClearRecentlyClosed'];
   customNewTabButton?: React.ReactElement;
-  disableTabsBarMenu?: boolean;
+  disableTabsMenu?: boolean;
 };
 
 export interface TabsBarApi {
@@ -107,7 +107,7 @@ export const TabsBar = forwardRef<TabsBarApi, TabsBarProps>(
       disableCloseButton = false,
       disableInlineLabelEditing = false,
       disableDragAndDrop = false,
-      disableTabsBarMenu = false,
+      disableTabsMenu = false,
     },
     componentRef
   ) => {
@@ -342,9 +342,9 @@ export const TabsBar = forwardRef<TabsBarApi, TabsBarProps>(
             )}
           </EuiFlexGroup>
         </EuiFlexItem>
-        {!disableTabsBarMenu && (
+        {!disableTabsMenu && (
           <EuiFlexItem grow={false}>
-            <TabsBarMenu
+            <TabsMenu
               items={items}
               selectedItem={selectedItem}
               recentlyClosedItems={recentlyClosedItems}

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/index.ts → src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_menu/index.ts

@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { TabsBarMenu, type TabsBarMenuProps } from './tabs_bar_menu';
+export { TabsMenu, type TabsMenuProps } from './tabs_menu';

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.test.tsx → src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_menu/tabs_menu.test.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { TabsBarMenu } from './tabs_bar_menu';
+import { TabsMenu } from './tabs_menu';
 
 const mockTabs = [
   { id: 'tab1', label: 'Tab 1' },
@@ -23,9 +23,9 @@ const mockRecentlyClosedTabs = [
   { id: 'closed2', label: 'Closed Tab 2' },
 ];
 
-const tabsBarMenuButtonTestId = 'unifiedTabs_tabsBarMenuButton';
+const tabsMenuButtonTestId = 'unifiedTabs_tabsMenuButton';
 
-describe('TabsBarMenu', () => {
+describe('TabsMenu', () => {
   const mockOnSelectOpenedTab = jest.fn();
   const mockOnSelectClosedTab = jest.fn();
   const mockOnClearRecentlyClosed = jest.fn();
@@ -44,29 +44,29 @@ describe('TabsBarMenu', () => {
   });
 
   it('renders the menu button', async () => {
-    render(<TabsBarMenu {...defaultProps} />);
+    render(<TabsMenu {...defaultProps} />);
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     expect(menuButton).toBeInTheDocument();
   });
 
   it('opens popover when menu button is clicked', async () => {
     const user = userEvent.setup();
-    render(<TabsBarMenu {...defaultProps} />);
+    render(<TabsMenu {...defaultProps} />);
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     await user.click(menuButton);
 
-    const tabsBarMenu = await screen.findByTestId('unifiedTabs_tabsBarMenu');
-    expect(tabsBarMenu).toBeInTheDocument();
+    const tabsMenu = await screen.findByTestId('unifiedTabs_tabsMenu');
+    expect(tabsMenu).toBeInTheDocument();
     expect(screen.getByText('Opened tabs')).toBeInTheDocument();
   });
 
   it('displays opened tabs correctly', async () => {
     const user = userEvent.setup();
-    render(<TabsBarMenu {...defaultProps} />);
+    render(<TabsMenu {...defaultProps} />);
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     await user.click(menuButton);
 
     expect(await screen.findByText('Opened tabs')).toBeInTheDocument();
@@ -77,9 +77,9 @@ describe('TabsBarMenu', () => {
 
   it('selects a tab when clicked', async () => {
     const user = userEvent.setup();
-    render(<TabsBarMenu {...defaultProps} />);
+    render(<TabsMenu {...defaultProps} />);
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     await user.click(menuButton);
 
     const secondTabOption = (await screen.findAllByRole('option'))[1];
@@ -90,9 +90,9 @@ describe('TabsBarMenu', () => {
 
   it('shows recently closed tabs when present', async () => {
     const user = userEvent.setup();
-    render(<TabsBarMenu {...defaultProps} />);
+    render(<TabsMenu {...defaultProps} />);
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     await user.click(menuButton);
 
     expect(await screen.findByText('Recently closed')).toBeInTheDocument();
@@ -104,9 +104,9 @@ describe('TabsBarMenu', () => {
 
   it('can clear recently closed items', async () => {
     const user = userEvent.setup();
-    render(<TabsBarMenu {...defaultProps} />);
+    render(<TabsMenu {...defaultProps} />);
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     await user.click(menuButton);
 
     expect(await screen.findByText('Recently closed')).toBeInTheDocument();
@@ -117,9 +117,9 @@ describe('TabsBarMenu', () => {
 
   it('selects a closed tab when clicked', async () => {
     const user = userEvent.setup();
-    render(<TabsBarMenu {...defaultProps} />);
+    render(<TabsMenu {...defaultProps} />);
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     await user.click(menuButton);
 
     const closedTabOption = (await screen.findAllByTitle(mockRecentlyClosedTabs[0].label))[0];
@@ -135,9 +135,9 @@ describe('TabsBarMenu', () => {
       recentlyClosedItems: [],
     };
 
-    render(<TabsBarMenu {...propsWithNoClosedTabs} />);
+    render(<TabsMenu {...propsWithNoClosedTabs} />);
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     await user.click(menuButton);
 
     expect(screen.queryByText('Recently closed')).not.toBeInTheDocument();
@@ -147,11 +147,11 @@ describe('TabsBarMenu', () => {
     const user = userEvent.setup();
     render(
       <div style={{ width: '1000px' }}>
-        <TabsBarMenu {...defaultProps} />
+        <TabsMenu {...defaultProps} />
       </div>
     );
 
-    const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId);
+    const menuButton = await screen.findByTestId(tabsMenuButtonTestId);
     await user.click(menuButton);
 
     const selectedTabOption = (await screen.findAllByTitle(mockTabs[0].label))[0];

src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx → src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_menu/tabs_menu.tsx

@@ -49,7 +49,7 @@ const getRecentlyClosedTabsList = (tabItems: TabItem[]): EuiSelectableOption[] =
   });
 };
 
-export interface TabsBarMenuProps {
+export interface TabsMenuProps {
   items: TabItem[];
   selectedItem: TabItem | null;
   recentlyClosedItems: TabItem[];
@@ -58,7 +58,7 @@ export interface TabsBarMenuProps {
   onClearRecentlyClosed: () => void;
 }
 
-export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
+export const TabsMenu: React.FC<TabsMenuProps> = React.memo(
   ({
     items,
     selectedItem,
@@ -79,8 +79,8 @@ export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
     const [isPopoverOpen, setPopover] = useState(false);
     const contextMenuPopoverId = useGeneratedHtmlId();
 
-    const menuButtonLabel = i18n.translate('unifiedTabs.tabsBarMenu.tabsBarMenuButton', {
-      defaultMessage: 'Tabs bar menu',
+    const menuButtonLabel = i18n.translate('unifiedTabs.tabsMenu.tabsMenuButton', {
+      defaultMessage: 'Tabs menu',
     });
 
     const closePopover = useCallback(() => {
@@ -96,7 +96,7 @@ export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
 
     return (
       <EuiPopover
-        data-test-subj="unifiedTabs_tabsBarMenu"
+        data-test-subj="unifiedTabs_tabsMenu"
         id={contextMenuPopoverId}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
@@ -105,22 +105,22 @@ export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
         hasArrow={false}
         panelProps={{
           css: popoverCss,
-          ['data-test-subj']: 'unifiedTabs_tabsBarMenuPanel',
+          ['data-test-subj']: 'unifiedTabs_tabsMenuPanel',
         }}
         button={
           <EuiToolTip content={menuButtonLabel} disableScreenReaderOutput>
             <EuiButtonIcon
               aria-label={menuButtonLabel}
               color="text"
-              data-test-subj="unifiedTabs_tabsBarMenuButton"
+              data-test-subj="unifiedTabs_tabsMenuButton"
               iconType="boxesVertical"
               onClick={() => setPopover((prev) => !prev)}
             />
           </EuiToolTip>
         }
       >
         <EuiSelectable
-          aria-label={i18n.translate('unifiedTabs.tabsBarMenu.openedTabsList', {
+          aria-label={i18n.translate('unifiedTabs.tabsMenu.openedTabsList', {
             defaultMessage: 'Opened tabs list',
           })}
           options={openedTabsList}
@@ -138,7 +138,7 @@ export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
           {(tabs) => (
             <>
               <EuiPopoverTitle paddingSize="s">
-                {i18n.translate('unifiedTabs.tabsBarMenu.openedItems', {
+                {i18n.translate('unifiedTabs.tabsMenu.openedItems', {
                   defaultMessage: 'Opened tabs',
                 })}
               </EuiPopoverTitle>
@@ -150,7 +150,7 @@ export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
           <>
             <EuiHorizontalRule margin="none" />
             <EuiSelectable
-              aria-label={i18n.translate('unifiedTabs.tabsBarMenu.recentlyClosedTabsList', {
+              aria-label={i18n.translate('unifiedTabs.tabsMenu.recentlyClosedTabsList', {
                 defaultMessage: 'Recently closed tabs list',
               })}
               options={recentlyClosedTabsList}
@@ -175,7 +175,7 @@ export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
                       justifyContent="spaceBetween"
                     >
                       <EuiFlexItem grow>
-                        {i18n.translate('unifiedTabs.tabsBarMenu.recentlyClosed', {
+                        {i18n.translate('unifiedTabs.tabsMenu.recentlyClosed', {
                           defaultMessage: 'Recently closed',
                         })}
                       </EuiFlexItem>
@@ -184,15 +184,12 @@ export const TabsBarMenu: React.FC<TabsBarMenuProps> = React.memo(
                           size="xs"
                           flush="both"
                           data-test-subj="unifiedTabs_tabsMenu_clearRecentlyClosed"
-                          aria-label={i18n.translate(
-                            'unifiedTabs.tabsBarMenu.clearRecentlyClosed',
-                            {
-                              defaultMessage: 'Clear',
-                            }
-                          )}
+                          aria-label={i18n.translate('unifiedTabs.tabsMenu.clearRecentlyClosed', {
+                            defaultMessage: 'Clear',
+                          })}
                           onClick={onClearRecentlyClosed}
                         >
-                          {i18n.translate('unifiedTabs.tabsBarMenu.clearRecentlyClosed', {
+                          {i18n.translate('unifiedTabs.tabsMenu.clearRecentlyClosed', {
                             defaultMessage: 'Clear',
                           })}
                         </EuiButtonEmpty>

src/platform/test/accessibility/apps/discover.ts

@@ -70,7 +70,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('a11y test on share panel', async () => {
-      // The tabs bar menu button tooltip can get in the way of the share button
+      // The tabs menu button tooltip can get in the way of the share button
       // after closing the inspector flyout, so we move the mouse to hide it first
       await testSubjects.moveMouseTo('shareTopNavButton');
       await share.clickShareTopNavButton();