LayoutHeader

LayoutHeader

LayoutHeader is the shell header for the application. It wires Carbon's top bar primitives to the app's layout context, runtime environment configuration, and TanStack Router navigation.

Rationale

Use LayoutHeader as the single header implementation for the app shell. It centralizes menu toggling, branding, environment display, global actions, profile panel access, and the embedded side navigation.

Source References

• Source: frontend/src/components/Layout/LayoutHeader/index.tsx
• Tests: frontend/src/components/Layout/LayoutHeader/index.unit.test.tsx

Props

This component does not accept props.

Behavior

• Renders Carbon Header, SkipToContent, HeaderMenuButton, and HeaderName.
• Reads isSideNavExpanded and toggleSideNav from useLayout().
• Links the app name to /dashboard through TanStack Router Link.
• Derives the environment label from env.VITE_NODE_ENV using getFormattedEnvName().
• Hides the environment label when VITE_NODE_ENV ends with prod.
• Composes LayoutHeaderGlobalBar, LayoutHeaderPanel, and LayoutSideNav inside the header.

Examples

Happy path: render through Carbon HeaderContainer

import { HeaderContainer } from '@carbon/react';

import { LayoutHeader } from '@/components/Layout/LayoutHeader';

<HeaderContainer render={LayoutHeader} />;

Edge case: environment label behavior

// VITE_NODE_ENV=openshift-test => renders "Env. Test"
// VITE_NODE_ENV=openshift-prod => renders no environment label
<HeaderContainer render={LayoutHeader} />;

Dependencies

LayoutHeader depends on:

• LayoutProvider for side-nav state
• RouterProvider for TanStack Link
• ThemeProvider, AuthProvider, and preference-related providers required by LayoutHeaderGlobalBar and LayoutHeaderPanel
• env.VITE_APP_NAME and env.VITE_NODE_ENV

Accessibility

• Includes SkipToContent for keyboard users.
• Sets aria-label={appName} on the header.
• Toggles the menu button aria-label between Open menu and Close menu.
• Exposes data-testid="bc-header__header" for targeted tests.

Known Constraints

• The header assumes /dashboard is a valid routed destination.
• Non-openshift- environment values can still show Env. with no formatted suffix, which is covered by tests.
• This component should be rendered through Carbon HeaderContainer; rendering it standalone bypasses Carbon shell coordination.

Change Impact

• codes/frontend/Components.md — catalog entry points to this page.
• codes/frontend/Layout/Layout.md — parent shell documentation references this header.
• codes/frontend/Layout/LayoutSideNav.md — navigation described here is embedded by this header.

See Also

• Layout
• LayoutSideNav
• Components