Skip to content

feat: default enable notification tray across all header #79

@awais-ansari

Description

@awais-ansari

Summery
Add a new HeaderNotificationsSlot plugin slot that renders NotificationsTray (from @edx/frontend-plugin-notifications) by default across all 5 header surfaces. This makes notifications available out-of-the-box for every Open edX community instance, while allowing operators to disable them via plugin slot configuration or the existing backend waffle flag.

Motivation

Currently, notifications in the header are enabled through tutor-contrib-platform-notifications, which injects NotificationsTray into 3 separate plugin slots:

Slots
org.openedx.frontend.layout.header_desktop_secondary_menu.v1 (Desktop Header)
org.openedx.frontend.layout.studio_header_search_button_slot.v1 (Studio Header)
org.openedx.frontend.layout.header_learning_help.v1 (Learning Header)

Problems with this approach:

  • Mobile headers are missed entirely. Neither the LMS Mobile Header nor the Studio Mobile Header have notifications, so users on narrow viewports don't see the notification bell.
  • Not default-on. Community instances must install and configure tutor-contrib-platform-notifications to get notifications. Non-Tutor deployments require manual env.config.jsx configuration.
  • 3 separate slot configs. Operators must configure 3 different slot IDs to enable one feature, and each slot is semantically unrelated to notifications (secondary menu, search button, help link).

Proposal

Create a single new HeaderNotificationsSlot with:

  • Slot ID: org.openedx.frontend.layout.header_notifications_tray.v1
  • Alias: header_notifications_tray
  • Default content: from @edx/frontend-plugin-notifications
  • Add @edx/frontend-plugin-notifications as a dependency (not peerDependency), so it bundles automatically

Insert this slot into all 5 header surfaces for authenticated users:

  • LMS Desktop
  • LMS Mobile
  • Learning
  • Studio Desktop
  • Studio Mobile

How Operators Can Disable Notifications

Option 1: Plugin slot config (env.config.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;

Option 2:
Backend waffle flag - NotificationsTray is self-gating. It returns empty when the backend waffle flag is True. DISABLE_NOTIFICATIONS: True. Backend PR

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

In review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions