diff --git a/frontend/app-development/layout/PageHeader/PageHeader.tsx b/frontend/app-development/layout/PageHeader/PageHeader.tsx index 612628c9461..1b84744b5e1 100644 --- a/frontend/app-development/layout/PageHeader/PageHeader.tsx +++ b/frontend/app-development/layout/PageHeader/PageHeader.tsx @@ -66,14 +66,13 @@ const RightContent = (): ReactElement => { const isSmallScreen = useMediaQuery(MEDIA_QUERY_MAX_WIDTH); const userNameAndOrg = useUserNameAndOrg(user, org, repository); - const shouldDisplayText = !isSmallScreen; if (isSmallScreen) { return ; } return ( { afterEach(() => { @@ -90,11 +92,28 @@ describe('SmallHeaderMenu', () => { expect(screen.getByRole('menuitem', { name: profileMenuItem.itemName })).toBeInTheDocument(); }); }); + + it('should show the header name when group is "Tools"', async () => { + const user = userEvent.setup(); + renderSmallHeaderMenu({ + ...pageHeaderContextMock, + menuItems: [{ ...pageHeaderContextMock.menuItems[0], group: HeaderMenuGroupKey.Tools }], + }); + + const button = screen.getByRole('button', { name: textMock('top_menu.menu') }); + await user.click(button); + + const heading = screen.getByRole('heading', { + name: textMock(HeaderMenuGroupKey.Tools), + level: 2, + }); + expect(heading).toBeInTheDocument(); + }); }); -const renderSmallHeaderMenu = () => { +const renderSmallHeaderMenu = (contextProps: Partial = {}) => { return renderWithProviders()( - + , ); diff --git a/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsx b/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsx index 3b485325706..e322d9a0639 100644 --- a/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsx +++ b/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsx @@ -94,9 +94,6 @@ const DropdownMenuGroups = ({ const { t } = useTranslation(); const { menuItems, profileMenuItems } = usePageHeaderContext(); - const menuGroupHeader = (menuGroup: NavigationMenuSmallGroup): string => - menuGroup.showName ? t(menuGroup.name) : ''; - const groupedMenuItems: HeaderMenuGroup[] = groupMenuItemsByGroup(menuItems); const profileMenuGroup: NavigationMenuSmallGroup = { @@ -113,9 +110,9 @@ const DropdownMenuGroups = ({ profileMenuGroup, ]; - return menuGroups.map((menuGroup: NavigationMenuSmallGroup, index: number) => ( + return menuGroups.map((menuGroup: NavigationMenuSmallGroup) => (