feat: decouple notifications panel using widget registry mechanism (#1885)

Removes the tightly coupled upgrade/upsell ("notifications") panel from the Learning MFE core and replaces it with a pluggable widget registry system. The right sidebar now supports dynamically-registered external widgets, making it easy to add, remove, or replace sidebar panels without forking the MFE.

Author: awais-ansari

docs/decisions/0010-upgrade-widget-extraction.md

@@ -0,0 +1,38 @@
+# 10. Extract Upgrade Widget from Core MFE
+
+## Context
+
+The Learning MFE shipped with a built-in upgrade sidebar widget internally named "Notifications". This caused several problems:
+
+1. **Confusing naming**: The "Notifications" label implied platform notification functionality, conflicting with the actual notification tray used elsewhere in the platform.
+2. **Core/commercial coupling**: The upgrade widget is a commercial feature specific to paid instances, not part of the Open edX core offering. Yet it was enabled by default for all deployments.
+3. **Empty panel problem**: In courses without a paid track, the upgrade panel was empty but still visible, degrading the learner experience.
+4. **Tight coupling**: The widget was directly imported and wired into the sidebar, making it difficult to customize or disable without forking the MFE.
+
+## Decision
+
+### 1. Rename "notifications" terminology to "upgrade"
+
+All internal code references to "notification" that specifically relate to the upgrade panel are renamed to "upgrade":
+
+- `WIDGETS.NOTIFICATIONS` → `WIDGETS.UPGRADE`
+- `notificationStatus` context property → `upgradeWidgetStatus`
+- `onNotificationSeen` → `onUpgradeWidgetSeen`
+- `NotificationTray` component → `UpgradePanel`
+- `NotificationTrigger` component → `UpgradeTrigger`
+- `NotificationIcon` component → `UpgradeIcon`
+- localStorage keys: `notificationStatus.${courseId}` → `upgradeWidget.${courseId}`
+- i18n message keys (`notification.*`)
+
+
+### 2. Widget moved to `src/widgets/upgrade/`
+
+Rather than publishing a separate npm package, the widget is kept as a subdirectory of the MFE. This avoids monorepo publishing overhead while maintaining a clean separation from the sidebar framework.
+
+Instances that need the upgrade panel register it via `env.config.jsx`:
+
+```js
+import upgradeWidget from './src/widgets/upgrade/src/index';
+
+export const SIDEBAR_WIDGETS = [upgradeWidget];
+```

example.env.config.jsx

@@ -1,9 +1,12 @@
 import UnitTranslationPlugin from '@edx/unit-translation-selector-plugin';
+import { upgradeWidgetConfig } from './src/widgets/upgrade/src/index';
 import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
 
 // Load environment variables from .env file
 const config = {
   ...process.env,
+  SIDEBAR_WIDGETS: [upgradeWidgetConfig],
+
   pluginSlots: {
     unit_title_plugin: {
       plugins: [

jest.config.js

@@ -24,20 +24,16 @@ const config = createConfig('jest', {
 
 // delete config.testURL;
 
-config.reporters = [...(config.reporters || []), ["jest-console-group-reporter", {
-  // change this setting if need to see less details for each test
-  // reportType: "summary" | "details",
-  // enable: true | false,
-  afterEachTest: {
-    enable: true,
-    filePaths: false,
-    reportType: "details",
-  },
-  afterAllTests: {
-    reportType: "summary",
-    enable: true,
-    filePaths: true,
-  },
-}]];
+// NOTE: jest-console-group-reporter@1.1.1 uses @jest/reporters@^30 internally
+// (via its peer dep resolution) but this project runs Jest 29, whose globalConfig
+// uses testPathPattern (string) not testPathPatterns (object). When any worker
+// exits uncleanly the reporter's SummaryReporter.onRunComplete crashes with
+// "Cannot read properties of undefined (reading 'isSet')", causing a non-zero
+// exit code even when all tests pass. Disabled until the package is updated for
+// Jest 29/30 compatibility.
+// config.reporters = [...(config.reporters || []), ["jest-console-group-reporter", {
+//   afterEachTest: { enable: true, filePaths: false, reportType: "details" },
+//   afterAllTests: { reportType: "summary", enable: true, filePaths: true },
+// }]];
 
 module.exports = config;