PageNotification

PageNotification

PageNotification is a shared generic component that renders a Carbon InlineNotification for page-level or feature-level events. It subscribes to the notification event bus via useScopedNotification and displays a dismissible inline alert when an active event matches the provided eventTarget.

Rationale

Use PageNotification when a page or feature needs a consistent, auto-wired inline notification without duplicating subscription logic. The component abstracts useScopedNotification and eventIconDescription behind a stable public interface, keeping notification rendering declarative.

Source References

• Source: frontend/src/components/core/PageNotification/index.tsx
• Tests: frontend/src/components/core/PageNotification/index.unit.test.tsx
• Barrel: frontend/src/components/core/index.ts

Props

Name	Type	Required	Default	Description
eventTarget	string	Yes	—	Unique scope identifier used to match dispatched notification events.
className	string	No	—	Optional CSS class applied to the notification container.

Props Interface

interface PageNotificationProps {
  readonly eventTarget: string;
  readonly className?: string;
}

Behavior

• Subscribes to notifications for the given eventTarget via useScopedNotification(eventTarget).
• Returns null when eventNotification is undefined or eventNotification.title is falsy.
• Renders a Carbon InlineNotification with lowContrast.
• Sets kind to eventNotification.eventType (error, warning, info, etc.).
• Sets title, subtitle from eventNotification.title and eventNotification.description.
• Sets statusIconDescription via eventIconDescription(eventNotification).
• Aria label is Closes ${eventNotification.eventType} notification.
• onClose and onCloseButtonClick both call clearNotification to dismiss the event.

Key Features

• Automatic subscription / unsubscription to the scoped notification bus.
• No internal state; rendering is driven entirely by the event bus.
• Dismissible via Carbon's close button; dismissal clears the scoped event.
• Accepts an optional className for layout overrides without wrapping markup.

Examples

Happy path: page-scoped notification

import PageNotification from '@/components/core/PageNotification';

<PageNotification eventTarget="waste-search" />

The component renders an inline alert when a notification is dispatched with eventTarget: 'waste-search'.

With custom class for layout

import PageNotification from '@/components/core/PageNotification';

<PageNotification eventTarget="ru-details" className="notification-column" />

Useful when the notification must sit in a specific grid column beside page content.

Testing Notes

Current unit coverage verifies:

• Null render when event notification is undefined or title is empty
• eventTarget is passed to useScopedNotification
• Title and subtitle render from event notification
• className is applied and does not produce undefined class
• Aria label contains event type
• kind class reflects error, warning, info
• eventIconDescription is called with current event
• Close button triggers clearNotification

Known Constraints

• Renders only when a notification with a non-empty title is active for the scope.
• Relies on useScopedNotification and the global notification event bus; no manual state can force a render.
• className is forwarded directly to InlineNotification; it does not scope styles.

Change Impact

• codes/frontend/Components.md — catalog entry points to this page.
• architecture/frontend/Frontend Architecture Overview.md — notification pattern reference.

See Also

• PageTitle
• Subtitle
• Components