From b7f8653fa8ec4e2f30b1044680cb66478a1cd8b6 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Tue, 18 Nov 2025 11:02:39 +0100 Subject: [PATCH 1/3] change all occurrences of "tabs bar menu" to "tabs menu" --- .../tabbed_content/tabbed_content.tsx | 6 +-- .../src/components/tabs_bar/tabs_bar.test.tsx | 12 ++--- .../src/components/tabs_bar/tabs_bar.tsx | 14 +++--- .../{tabs_bar_menu => tabs_menu}/index.ts | 2 +- .../tabs_menu.test.tsx} | 46 +++++++++---------- .../tabs_menu.tsx} | 33 ++++++------- .../test/accessibility/apps/discover.ts | 2 +- .../functional/page_objects/unified_tabs.ts | 26 +++++------ 8 files changed, 69 insertions(+), 72 deletions(-) rename src/platform/packages/shared/kbn-unified-tabs/src/components/{tabs_bar_menu => tabs_menu}/index.ts (87%) rename src/platform/packages/shared/kbn-unified-tabs/src/components/{tabs_bar_menu/tabs_bar_menu.test.tsx => tabs_menu/tabs_menu.test.tsx} (74%) rename src/platform/packages/shared/kbn-unified-tabs/src/components/{tabs_bar_menu/tabs_bar_menu.tsx => tabs_menu/tabs_menu.tsx} (84%) diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx index fd8d0729a29c1..8c207a92378fc 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx +++ b/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 = ({ disableCloseButton = false, disableInlineLabelEditing = false, disableDragAndDrop = false, - disableTabsBarMenu = false, + disableTabsMenu = false, }) => { const tabsBarApi = useRef(null); const [generatedId] = useState(() => tabContentIdOverride ?? htmlIdGenerator()()); @@ -346,7 +346,7 @@ export const TabbedContent: React.FC = ({ disableCloseButton={disableCloseButton} disableInlineLabelEditing={disableInlineLabelEditing} disableDragAndDrop={disableDragAndDrop} - disableTabsBarMenu={disableTabsBarMenu} + disableTabsMenu={disableTabsMenu} /> ); diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx index f58870bffd52c..1273f362982bb 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx +++ b/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,7 +160,7 @@ describe('TabsBar', () => { onReorder={onReorder} getPreviewData={getPreviewData} onEBTEvent={onEBTEvent} - disableTabsBarMenu={true} + disableTabsMenu={true} /> ); @@ -168,12 +168,12 @@ describe('TabsBar', () => { 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(); }); }); diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx index 37afb8627275c..c7ac808974391 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx +++ b/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; - 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( disableCloseButton = false, disableInlineLabelEditing = false, disableDragAndDrop = false, - disableTabsBarMenu = false, + disableTabsMenu = false, }, componentRef ) => { @@ -342,9 +342,9 @@ export const TabsBar = forwardRef( )} - {!disableTabsBarMenu && ( + {!disableTabsMenu && ( - { +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(); + render(); - 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(); + render(); - 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(); + render(); - 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(); + render(); - 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(); + render(); - 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(); + render(); - 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(); + render(); - 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(); + render(); - 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(
- +
); - 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]; diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_menu/tabs_menu.tsx similarity index 84% rename from src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx rename to src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_menu/tabs_menu.tsx index c22b5caba10ce..5299377bd83e9 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx +++ b/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 = React.memo( +export const TabsMenu: React.FC = React.memo( ({ items, selectedItem, @@ -79,8 +79,8 @@ export const TabsBarMenu: React.FC = 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 = React.memo( return ( = React.memo( hasArrow={false} panelProps={{ css: popoverCss, - ['data-test-subj']: 'unifiedTabs_tabsBarMenuPanel', + ['data-test-subj']: 'unifiedTabs_tabsMenuPanel', }} button={ setPopover((prev) => !prev)} /> @@ -120,7 +120,7 @@ export const TabsBarMenu: React.FC = React.memo( } > = React.memo( {(tabs) => ( <> - {i18n.translate('unifiedTabs.tabsBarMenu.openedItems', { + {i18n.translate('unifiedTabs.tabsMenu.openedItems', { defaultMessage: 'Opened tabs', })} @@ -150,7 +150,7 @@ export const TabsBarMenu: React.FC = React.memo( <> = React.memo( justifyContent="spaceBetween" > - {i18n.translate('unifiedTabs.tabsBarMenu.recentlyClosed', { + {i18n.translate('unifiedTabs.tabsMenu.recentlyClosed', { defaultMessage: 'Recently closed', })} @@ -184,15 +184,12 @@ export const TabsBarMenu: React.FC = 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', })} diff --git a/src/platform/test/accessibility/apps/discover.ts b/src/platform/test/accessibility/apps/discover.ts index 5156be36349e8..4a5f18bf7cf26 100644 --- a/src/platform/test/accessibility/apps/discover.ts +++ b/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(); diff --git a/src/platform/test/functional/page_objects/unified_tabs.ts b/src/platform/test/functional/page_objects/unified_tabs.ts index 90a348654f403..c642f6ff01638 100644 --- a/src/platform/test/functional/page_objects/unified_tabs.ts +++ b/src/platform/test/functional/page_objects/unified_tabs.ts @@ -293,23 +293,23 @@ export class UnifiedTabsPageObject extends FtrService { return content; } - public async openTabsBarMenu() { - await this.testSubjects.click('unifiedTabs_tabsBarMenuButton'); - await this.retry.waitFor('the tabs bar menu to open', async () => { - return await this.testSubjects.exists('unifiedTabs_tabsBarMenuPanel'); + public async openTabsMenu() { + await this.testSubjects.click('unifiedTabs_tabsMenuButton'); + await this.retry.waitFor('the tabs menu to open', async () => { + return await this.testSubjects.exists('unifiedTabs_tabsMenuPanel'); }); } - public async closeTabsBarMenu() { - await this.testSubjects.click('unifiedTabs_tabsBarMenuButton'); - await this.retry.waitFor('the tabs bar menu to close', async () => { - return !(await this.testSubjects.exists('unifiedTabs_tabsBarMenuPanel')); + public async closeTabsMenu() { + await this.testSubjects.click('unifiedTabs_tabsMenuButton'); + await this.retry.waitFor('the tabs menu to close', async () => { + return !(await this.testSubjects.exists('unifiedTabs_tabsMenuPanel')); }); await this.browser.pressKeys(this.browser.keys.ESCAPE); // cancel the tooltip if it is open } public async getRecentlyClosedTabLabels() { - await this.openTabsBarMenu(); + await this.closeTabsMenu(); const recentlyClosedItems = await this.find.allByCssSelector( '[data-test-subj^="unifiedTabs_tabsMenu_recentlyClosedTab_"]' ); @@ -317,13 +317,13 @@ export class UnifiedTabsPageObject extends FtrService { for (const item of recentlyClosedItems) { labels.push(await item.getVisibleText()); } - await this.closeTabsBarMenu(); + await this.closeTabsMenu(); return labels; } public async restoreRecentlyClosedTab(index: number) { const currentNumberOfTabs = await this.getNumberOfTabs(); - await this.openTabsBarMenu(); + await this.openTabsMenu(); const recentlyClosedItems = await this.find.allByCssSelector( '[data-test-subj^="unifiedTabs_tabsMenu_recentlyClosedTab_"]' ); @@ -338,7 +338,7 @@ export class UnifiedTabsPageObject extends FtrService { } public async clearRecentlyClosedTabs() { - await this.openTabsBarMenu(); + await this.openTabsMenu(); const buttonTestId = 'unifiedTabs_tabsMenu_clearRecentlyClosed'; const clearButtonExists = await this.testSubjects.exists(buttonTestId); if (clearButtonExists) { @@ -347,6 +347,6 @@ export class UnifiedTabsPageObject extends FtrService { return !(await this.testSubjects.exists(buttonTestId)); }); } - await this.closeTabsBarMenu(); + await this.closeTabsMenu(); } } From 2864b43cab44e26725fdc1b6a24bfcc8338581e2 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Fri, 21 Nov 2025 11:55:23 +0100 Subject: [PATCH 2/3] Revert "change all occurrences of "tabs bar menu" to "tabs menu"" This reverts commit b7f8653fa8ec4e2f30b1044680cb66478a1cd8b6. --- .../tabbed_content/tabbed_content.tsx | 6 +-- .../src/components/tabs_bar/tabs_bar.test.tsx | 12 ++--- .../src/components/tabs_bar/tabs_bar.tsx | 14 +++--- .../{tabs_menu => tabs_bar_menu}/index.ts | 2 +- .../tabs_bar_menu.test.tsx} | 46 +++++++++---------- .../tabs_bar_menu.tsx} | 33 +++++++------ .../test/accessibility/apps/discover.ts | 2 +- .../functional/page_objects/unified_tabs.ts | 26 +++++------ 8 files changed, 72 insertions(+), 69 deletions(-) rename src/platform/packages/shared/kbn-unified-tabs/src/components/{tabs_menu => tabs_bar_menu}/index.ts (87%) rename src/platform/packages/shared/kbn-unified-tabs/src/components/{tabs_menu/tabs_menu.test.tsx => tabs_bar_menu/tabs_bar_menu.test.tsx} (74%) rename src/platform/packages/shared/kbn-unified-tabs/src/components/{tabs_menu/tabs_menu.tsx => tabs_bar_menu/tabs_bar_menu.tsx} (84%) diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx index 8c207a92378fc..fd8d0729a29c1 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx +++ b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabbed_content/tabbed_content.tsx @@ -39,7 +39,7 @@ export interface TabbedContentProps | 'disableCloseButton' | 'disableInlineLabelEditing' | 'disableDragAndDrop' - | 'disableTabsMenu' + | 'disableTabsBarMenu' > { items: TabItem[]; selectedItemId?: string; @@ -80,7 +80,7 @@ export const TabbedContent: React.FC = ({ disableCloseButton = false, disableInlineLabelEditing = false, disableDragAndDrop = false, - disableTabsMenu = false, + disableTabsBarMenu = false, }) => { const tabsBarApi = useRef(null); const [generatedId] = useState(() => tabContentIdOverride ?? htmlIdGenerator()()); @@ -346,7 +346,7 @@ export const TabbedContent: React.FC = ({ disableCloseButton={disableCloseButton} disableInlineLabelEditing={disableInlineLabelEditing} disableDragAndDrop={disableDragAndDrop} - disableTabsMenu={disableTabsMenu} + disableTabsBarMenu={disableTabsBarMenu} /> ); diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx index 1273f362982bb..f58870bffd52c 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.test.tsx +++ b/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 menu when disableTabsMenu=true', () => { + it('does not render tabs bar menu when disableTabsBarMenu=true', () => { const selectedItem = items[0]; render( @@ -160,7 +160,7 @@ describe('TabsBar', () => { onReorder={onReorder} getPreviewData={getPreviewData} onEBTEvent={onEBTEvent} - disableTabsMenu={true} + disableTabsBarMenu={true} /> ); @@ -168,12 +168,12 @@ describe('TabsBar', () => { const tabs = screen.getAllByRole('tab'); expect(tabs).toHaveLength(items.length); - // Verify tabs menu is not rendered - const tabsMenu = screen.queryByTestId('unifiedTabs_tabsMenu'); - expect(tabsMenu).not.toBeInTheDocument(); + // Verify tabs bar menu is not rendered + const tabsBarMenu = screen.queryByTestId('unifiedTabs_tabsBarMenu'); + expect(tabsBarMenu).not.toBeInTheDocument(); // Verify menu button is not rendered - const menuButton = screen.queryByTestId('unifiedTabs_tabsMenuButton'); + const menuButton = screen.queryByTestId('unifiedTabs_tabsBarMenuButton'); expect(menuButton).not.toBeInTheDocument(); }); }); diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx index c7ac808974391..37afb8627275c 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar/tabs_bar.tsx +++ b/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 { TabsMenu, type TabsMenuProps } from '../tabs_menu'; +import { TabsBarMenu, type TabsBarMenuProps } from '../tabs_bar_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; - onSelectRecentlyClosed: TabsMenuProps['onSelectRecentlyClosed']; + onSelectRecentlyClosed: TabsBarMenuProps['onSelectRecentlyClosed']; onReorder: (items: TabItem[], movedTabId: string) => void; onEBTEvent: (event: TabsEBTEvent) => void; - onClearRecentlyClosed: TabsMenuProps['onClearRecentlyClosed']; + onClearRecentlyClosed: TabsBarMenuProps['onClearRecentlyClosed']; customNewTabButton?: React.ReactElement; - disableTabsMenu?: boolean; + disableTabsBarMenu?: boolean; }; export interface TabsBarApi { @@ -107,7 +107,7 @@ export const TabsBar = forwardRef( disableCloseButton = false, disableInlineLabelEditing = false, disableDragAndDrop = false, - disableTabsMenu = false, + disableTabsBarMenu = false, }, componentRef ) => { @@ -342,9 +342,9 @@ export const TabsBar = forwardRef( )} - {!disableTabsMenu && ( + {!disableTabsBarMenu && ( - { +describe('TabsBarMenu', () => { const mockOnSelectOpenedTab = jest.fn(); const mockOnSelectClosedTab = jest.fn(); const mockOnClearRecentlyClosed = jest.fn(); @@ -44,29 +44,29 @@ describe('TabsMenu', () => { }); it('renders the menu button', async () => { - render(); + render(); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); expect(menuButton).toBeInTheDocument(); }); it('opens popover when menu button is clicked', async () => { const user = userEvent.setup(); - render(); + render(); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); await user.click(menuButton); - const tabsMenu = await screen.findByTestId('unifiedTabs_tabsMenu'); - expect(tabsMenu).toBeInTheDocument(); + const tabsBarMenu = await screen.findByTestId('unifiedTabs_tabsBarMenu'); + expect(tabsBarMenu).toBeInTheDocument(); expect(screen.getByText('Opened tabs')).toBeInTheDocument(); }); it('displays opened tabs correctly', async () => { const user = userEvent.setup(); - render(); + render(); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); await user.click(menuButton); expect(await screen.findByText('Opened tabs')).toBeInTheDocument(); @@ -77,9 +77,9 @@ describe('TabsMenu', () => { it('selects a tab when clicked', async () => { const user = userEvent.setup(); - render(); + render(); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); await user.click(menuButton); const secondTabOption = (await screen.findAllByRole('option'))[1]; @@ -90,9 +90,9 @@ describe('TabsMenu', () => { it('shows recently closed tabs when present', async () => { const user = userEvent.setup(); - render(); + render(); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); await user.click(menuButton); expect(await screen.findByText('Recently closed')).toBeInTheDocument(); @@ -104,9 +104,9 @@ describe('TabsMenu', () => { it('can clear recently closed items', async () => { const user = userEvent.setup(); - render(); + render(); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); await user.click(menuButton); expect(await screen.findByText('Recently closed')).toBeInTheDocument(); @@ -117,9 +117,9 @@ describe('TabsMenu', () => { it('selects a closed tab when clicked', async () => { const user = userEvent.setup(); - render(); + render(); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); await user.click(menuButton); const closedTabOption = (await screen.findAllByTitle(mockRecentlyClosedTabs[0].label))[0]; @@ -135,9 +135,9 @@ describe('TabsMenu', () => { recentlyClosedItems: [], }; - render(); + render(); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); await user.click(menuButton); expect(screen.queryByText('Recently closed')).not.toBeInTheDocument(); @@ -147,11 +147,11 @@ describe('TabsMenu', () => { const user = userEvent.setup(); render(
- +
); - const menuButton = await screen.findByTestId(tabsMenuButtonTestId); + const menuButton = await screen.findByTestId(tabsBarMenuButtonTestId); await user.click(menuButton); const selectedTabOption = (await screen.findAllByTitle(mockTabs[0].label))[0]; diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_menu/tabs_menu.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx similarity index 84% rename from src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_menu/tabs_menu.tsx rename to src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx index 5299377bd83e9..c22b5caba10ce 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_menu/tabs_menu.tsx +++ b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx @@ -49,7 +49,7 @@ const getRecentlyClosedTabsList = (tabItems: TabItem[]): EuiSelectableOption[] = }); }; -export interface TabsMenuProps { +export interface TabsBarMenuProps { items: TabItem[]; selectedItem: TabItem | null; recentlyClosedItems: TabItem[]; @@ -58,7 +58,7 @@ export interface TabsMenuProps { onClearRecentlyClosed: () => void; } -export const TabsMenu: React.FC = React.memo( +export const TabsBarMenu: React.FC = React.memo( ({ items, selectedItem, @@ -79,8 +79,8 @@ export const TabsMenu: React.FC = React.memo( const [isPopoverOpen, setPopover] = useState(false); const contextMenuPopoverId = useGeneratedHtmlId(); - const menuButtonLabel = i18n.translate('unifiedTabs.tabsMenu.tabsMenuButton', { - defaultMessage: 'Tabs menu', + const menuButtonLabel = i18n.translate('unifiedTabs.tabsBarMenu.tabsBarMenuButton', { + defaultMessage: 'Tabs bar menu', }); const closePopover = useCallback(() => { @@ -96,7 +96,7 @@ export const TabsMenu: React.FC = React.memo( return ( = React.memo( hasArrow={false} panelProps={{ css: popoverCss, - ['data-test-subj']: 'unifiedTabs_tabsMenuPanel', + ['data-test-subj']: 'unifiedTabs_tabsBarMenuPanel', }} button={ setPopover((prev) => !prev)} /> @@ -120,7 +120,7 @@ export const TabsMenu: React.FC = React.memo( } > = React.memo( {(tabs) => ( <> - {i18n.translate('unifiedTabs.tabsMenu.openedItems', { + {i18n.translate('unifiedTabs.tabsBarMenu.openedItems', { defaultMessage: 'Opened tabs', })} @@ -150,7 +150,7 @@ export const TabsMenu: React.FC = React.memo( <> = React.memo( justifyContent="spaceBetween" > - {i18n.translate('unifiedTabs.tabsMenu.recentlyClosed', { + {i18n.translate('unifiedTabs.tabsBarMenu.recentlyClosed', { defaultMessage: 'Recently closed', })} @@ -184,12 +184,15 @@ export const TabsMenu: React.FC = React.memo( size="xs" flush="both" data-test-subj="unifiedTabs_tabsMenu_clearRecentlyClosed" - aria-label={i18n.translate('unifiedTabs.tabsMenu.clearRecentlyClosed', { - defaultMessage: 'Clear', - })} + aria-label={i18n.translate( + 'unifiedTabs.tabsBarMenu.clearRecentlyClosed', + { + defaultMessage: 'Clear', + } + )} onClick={onClearRecentlyClosed} > - {i18n.translate('unifiedTabs.tabsMenu.clearRecentlyClosed', { + {i18n.translate('unifiedTabs.tabsBarMenu.clearRecentlyClosed', { defaultMessage: 'Clear', })} diff --git a/src/platform/test/accessibility/apps/discover.ts b/src/platform/test/accessibility/apps/discover.ts index 4a5f18bf7cf26..5156be36349e8 100644 --- a/src/platform/test/accessibility/apps/discover.ts +++ b/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 menu button tooltip can get in the way of the share button + // The tabs bar 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(); diff --git a/src/platform/test/functional/page_objects/unified_tabs.ts b/src/platform/test/functional/page_objects/unified_tabs.ts index c642f6ff01638..90a348654f403 100644 --- a/src/platform/test/functional/page_objects/unified_tabs.ts +++ b/src/platform/test/functional/page_objects/unified_tabs.ts @@ -293,23 +293,23 @@ export class UnifiedTabsPageObject extends FtrService { return content; } - public async openTabsMenu() { - await this.testSubjects.click('unifiedTabs_tabsMenuButton'); - await this.retry.waitFor('the tabs menu to open', async () => { - return await this.testSubjects.exists('unifiedTabs_tabsMenuPanel'); + public async openTabsBarMenu() { + await this.testSubjects.click('unifiedTabs_tabsBarMenuButton'); + await this.retry.waitFor('the tabs bar menu to open', async () => { + return await this.testSubjects.exists('unifiedTabs_tabsBarMenuPanel'); }); } - public async closeTabsMenu() { - await this.testSubjects.click('unifiedTabs_tabsMenuButton'); - await this.retry.waitFor('the tabs menu to close', async () => { - return !(await this.testSubjects.exists('unifiedTabs_tabsMenuPanel')); + public async closeTabsBarMenu() { + await this.testSubjects.click('unifiedTabs_tabsBarMenuButton'); + await this.retry.waitFor('the tabs bar menu to close', async () => { + return !(await this.testSubjects.exists('unifiedTabs_tabsBarMenuPanel')); }); await this.browser.pressKeys(this.browser.keys.ESCAPE); // cancel the tooltip if it is open } public async getRecentlyClosedTabLabels() { - await this.closeTabsMenu(); + await this.openTabsBarMenu(); const recentlyClosedItems = await this.find.allByCssSelector( '[data-test-subj^="unifiedTabs_tabsMenu_recentlyClosedTab_"]' ); @@ -317,13 +317,13 @@ export class UnifiedTabsPageObject extends FtrService { for (const item of recentlyClosedItems) { labels.push(await item.getVisibleText()); } - await this.closeTabsMenu(); + await this.closeTabsBarMenu(); return labels; } public async restoreRecentlyClosedTab(index: number) { const currentNumberOfTabs = await this.getNumberOfTabs(); - await this.openTabsMenu(); + await this.openTabsBarMenu(); const recentlyClosedItems = await this.find.allByCssSelector( '[data-test-subj^="unifiedTabs_tabsMenu_recentlyClosedTab_"]' ); @@ -338,7 +338,7 @@ export class UnifiedTabsPageObject extends FtrService { } public async clearRecentlyClosedTabs() { - await this.openTabsMenu(); + await this.openTabsBarMenu(); const buttonTestId = 'unifiedTabs_tabsMenu_clearRecentlyClosed'; const clearButtonExists = await this.testSubjects.exists(buttonTestId); if (clearButtonExists) { @@ -347,6 +347,6 @@ export class UnifiedTabsPageObject extends FtrService { return !(await this.testSubjects.exists(buttonTestId)); }); } - await this.closeTabsMenu(); + await this.closeTabsBarMenu(); } } From b57f62117b64e025410e739a32e8956ecd7af613 Mon Sep 17 00:00:00 2001 From: Ania Kowalska Date: Fri, 21 Nov 2025 11:56:17 +0100 Subject: [PATCH 3/3] Change Tabs bar menu tooltip to Tabs menu --- .../src/components/tabs_bar_menu/tabs_bar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx index c22b5caba10ce..11cbb6ddf2611 100644 --- a/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx +++ b/src/platform/packages/shared/kbn-unified-tabs/src/components/tabs_bar_menu/tabs_bar_menu.tsx @@ -80,7 +80,7 @@ export const TabsBarMenu: React.FC = React.memo( const contextMenuPopoverId = useGeneratedHtmlId(); const menuButtonLabel = i18n.translate('unifiedTabs.tabsBarMenu.tabsBarMenuButton', { - defaultMessage: 'Tabs bar menu', + defaultMessage: 'Tabs menu', }); const closePopover = useCallback(() => {