feat: Add HeaderNotificationsSlot to enable notifications tray default ON

package.json

@@ -52,6 +52,7 @@
     "ts-jest": "^29.4.4"
   },
   "dependencies": {
+    "@edx/frontend-plugin-notifications": "^2.0.5",
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-regular-svg-icons": "6.7.2",

src/Header.test.jsx

@@ -4,6 +4,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
 import { AppContext } from '@edx/frontend-platform/react';
 import { Context as ResponsiveContext } from 'react-responsive';
+import { MemoryRouter } from 'react-router-dom';
 
 import Header from './index';
 
@@ -13,7 +14,9 @@ const HeaderComponent = ({ width, contextValue }) => (
       <AppContext.Provider
         value={contextValue}
       >
-        <Header />
+        <MemoryRouter>
+          <Header />
+        </MemoryRouter>
       </AppContext.Provider>
     </IntlProvider>
   </ResponsiveContext.Provider>

src/learning-header/LearningHeader.jsx

@@ -10,7 +10,7 @@ import LogoSlot from '../plugin-slots/LogoSlot';
 import CourseInfoSlot from '../plugin-slots/CourseInfoSlot';
 import { courseInfoDataShape } from './LearningHeaderCourseInfo';
 import messages from './messages';
-import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';
+import LearningHeaderActionsSlot from '../plugin-slots/LearningHeaderActionsSlot';
 
 const LearningHeader = ({
   courseOrg,
@@ -39,7 +39,7 @@ const LearningHeader = ({
         </div>
         {showUserDropdown && authenticatedUser && (
         <>
-          <LearningHelpSlot />
+          <LearningHeaderActionsSlot />
           <AuthenticatedUserDropdown
             username={authenticatedUser.username}
           />

src/plugin-slots/DesktopSecondaryMenuSlot/README.md

@@ -9,8 +9,47 @@
 
 This slot is used to replace/modify/hide the desktop secondary menu.
 
+**Default Content:**
+- **Notification Tray** (via `HeaderNotificationsSlot`) — Rendered before menu items
+- **Secondary Menu Items** — Links like "New", "Help", etc.
+
+### Why Include Notifications Here?
+
+The `org.openedx.frontend.layout.header_notifications_tray.v1` slot is rendered in **multiple headers** (Desktop, Learning, and Studio). Modifying that slot directly would impact notifications across all header types.
+
+By embedding notifications in this slot's default content, operators can:
+- **Hide notifications in Desktop header only** — without affecting Learning or Studio headers
+- **Customize the entire secondary menu area** — including both notifications and menu items
+- **Maintain control** — each header type can be configured independently
+
+To hide notifications in the Desktop header only, use `PLUGIN_OPERATIONS.Hide` with `widgetId: 'org.openedx.frontend.layout.header_notifications_tray.v1'` (see examples below).
+
 ## Examples
 
+### Hide Notifications in Desktop Header Only
+
+The following `env.config.jsx` will hide the notification bell in the Desktop header while keeping it in Learning and Studio headers:
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'org.openedx.frontend.layout.header_notifications_tray.v1',
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
 ### Modify Items
 
 The following `env.config.jsx` will modify the items in the desktop secondary menu.

src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import DesktopHeaderMainOrSecondaryMenu, { desktopHeaderMainOrSecondaryMenuDataShape } from '../../desktop-header/DesktopHeaderMainOrSecondaryMenu';
+import HeaderNotificationsSlot from '../HeaderNotificationsSlot';
 
 const DesktopSecondaryMenuSlot = ({
   menu,
@@ -12,6 +13,7 @@ const DesktopSecondaryMenuSlot = ({
       mergeProps: true,
     }}
   >
+    <HeaderNotificationsSlot />
     <DesktopHeaderMainOrSecondaryMenu menu={menu} />
   </PluginSlot>
 );

src/plugin-slots/HeaderNotificationsSlot/README.md

@@ -0,0 +1,131 @@
+# Header Notifications Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_notifications_tray.v1`
+
+## Description
+
+This slot renders the notifications tray (bell icon + notification popover) from `@edx/frontend-plugin-notifications` by default.
+
+**Important:** This slot is **not used standalone** in headers. Instead, it is embedded within the default content of three parent slots:
+
+1. **Desktop Header** — via `org.openedx.frontend.layout.header_desktop_secondary_menu.v1`
+   Notifications appear before secondary menu items (e.g., "New", "Help")
+
+2. **Learning Header** — via `org.openedx.frontend.layout.learning_header_actions.v1`
+   Notifications appear before the help link
+
+3. **Studio Header** — via `org.openedx.frontend.layout.studio_header_actions.v1`
+   Notifications appear before the search button
+
+## Slot Hierarchy
+
+```
+Desktop Header
+└── org.openedx.frontend.layout.header_desktop_secondary_menu.v1
+    ├── org.openedx.frontend.layout.header_notifications_tray.v1 ← This slot
+    └── (secondary menu items)
+
+Learning Header
+└── org.openedx.frontend.layout.learning_header_actions.v1
+    ├── org.openedx.frontend.layout.header_notifications_tray.v1 ← This slot
+    └── org.openedx.frontend.layout.header_learning_help.v1
+
+Studio Header
+└── org.openedx.frontend.layout.studio_header_actions.v1
+    ├── org.openedx.frontend.layout.header_notifications_tray.v1 ← This slot
+    └── org.openedx.frontend.layout.studio_header_search_button_slot.v1
+```
+
+## Examples
+
+### Disable Notifications Globally (All Headers)
+
+The following `env.config.jsx` will hide the notifications tray across all headers:
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_notifications_tray.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Disable Notifications Per Header
+
+To hide notifications in a specific header only, modify the parent wrapper slot:
+
+- **Desktop Header:** See [DesktopSecondaryMenuSlot documentation](../DesktopSecondaryMenuSlot/)
+- **Learning Header:** See [LearningHeaderActionsSlot documentation](../LearningHeaderActionsSlot/)
+- **Studio Header:** See [StudioHeaderActionsSlot documentation](../StudioHeaderActionsSlot/)
+
+### Replace Notifications with Custom Component (All Headers)
+
+The following `env.config.jsx` will replace the default notifications tray with a custom component across all headers:
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import CustomNotifications from './CustomNotifications';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_notifications_tray.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_notifications_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: CustomNotifications,
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Alert Icon Before Notifications (All Headers)
+
+The following `env.config.jsx` will insert a custom alert icon before the notifications bell:
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_notifications_tray.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_alert_icon',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <button aria-label="Alerts">🚨</button>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/HeaderNotificationsSlot/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import NotificationsTray from '@edx/frontend-plugin-notifications';
+
+const HeaderNotificationsSlot = () => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_notifications_tray.v1"
+  >
+    <NotificationsTray />
+  </PluginSlot>
+);
+
+export default HeaderNotificationsSlot;

src/plugin-slots/LearningHeaderActionsSlot/README.md

@@ -0,0 +1,94 @@
+# Learning Header Actions Slot
+
+### Slot ID: `org.openedx.frontend.layout.learning_header_actions.v1`
+
+## Description
+
+This slot wraps the notification tray and help link in the Learning header. It provides a single location for operators to customize the action area before the user menu in the Learning (course) header.
+
+By default, this slot renders:
+1. **HeaderNotificationsSlot** — The notification bell from `@edx/frontend-plugin-notifications`
+2. **LearningHelpSlot** — The help link (question mark icon)
+
+This wrapper slot ensures that:
+- Notifications are enabled by default in the Learning header
+- Operators can customize the entire action area using one slot ID
+- The existing `org.openedx.frontend.layout.header_learning_help.v1` remains functional for backward compatibility
+
+## Why This Wrapper Slot?
+
+The `org.openedx.frontend.layout.header_notifications_tray.v1` slot is rendered in **multiple headers** (Desktop, Learning, and Studio). Modifying that slot directly would impact notifications across all header types.
+
+This wrapper slot allows operators to:
+- **Hide notifications in Learning header only** — without affecting Desktop or Studio
+- **Customize the action area** — replace or extend both notifications and help link together
+- **Maintain control** — each header type can be configured independently
+
+## Examples
+
+### Disable Notifications in Learning Header Only
+
+The following `env.config.jsx` will hide the notification bell in the Learning header while keeping it in Desktop and Studio headers:
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.learning_header_actions.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'org.openedx.frontend.layout.header_notifications_tray.v1',
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace the Entire Actions Area
+
+The following `env.config.jsx` will replace both notifications and help link with a custom component:
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.learning_header_actions.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_learning_actions',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <div>
+                <button>Custom Action 1</button>
+                <button>Custom Action 2</button>
+              </div>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Modify Help Link Only
+
+To customize just the help link while keeping notifications, see the [LearningHelpSlot documentation](../LearningHelpSlot/).
+
+## Slot Hierarchy
+
+This slot contains two child slots:
+- `org.openedx.frontend.layout.header_notifications_tray.v1` (HeaderNotificationsSlot)
+- `org.openedx.frontend.layout.header_learning_help.v1` (LearningHelpSlot)

src/plugin-slots/LearningHeaderActionsSlot/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import HeaderNotificationsSlot from '../HeaderNotificationsSlot';
+import LearningHelpSlot from '../LearningHelpSlot';
+
+const LearningHeaderActionsSlot = () => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.learning_header_actions.v1"
+  >
+    <HeaderNotificationsSlot />
+    <LearningHelpSlot />
+  </PluginSlot>
+);
+
+export default LearningHeaderActionsSlot;

src/plugin-slots/README.md

@@ -2,6 +2,7 @@
 
 ### Shared
 * [`org.openedx.frontend.layout.header_logo.v1`](./LogoSlot/)
+* [`org.openedx.frontend.layout.header_notifications_tray.v1`](./HeaderNotificationsSlot/)
 
 ### Desktop Header
 * [`org.openedx.frontend.layout.header_desktop.v1`](./DesktopHeaderSlot/)
@@ -13,6 +14,7 @@
 
 ### Learning Header
 * [`org.openedx.frontend.layout.header_learning_course_info.v1`](./CourseInfoSlot/)
+* [`org.openedx.frontend.layout.learning_header_actions.v1`](./LearningHeaderActionsSlot/)
 * [`org.openedx.frontend.layout.header_learning_help.v1`](./LearningHelpSlot/)
 * [`org.openedx.frontend.layout.header_learning_logged_out_items.v1`](./LearningLoggedOutItemsSlot/)
 * [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
@@ -26,4 +28,5 @@
 * [`org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`](./MobileUserMenuToggleSlot/)
 
 ### Studio Header
+* [`org.openedx.frontend.layout.studio_header_actions.v1`](./StudioHeaderActionsSlot/)
 * [`org.openedx.frontend.layout.studio_header_search_button_slot.v1`](./StudioHeaderSearchButtonSlot/)