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) => (