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

This reverts commit 0664dc3.

Author: arbrandes

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

@@ -1,12 +1,9 @@
 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: [

example.env.config.jsx

@@ -24,16 +24,20 @@ const config = createConfig('jest', {
 
 // delete config.testURL;
 
-// 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 },
-// }]];
+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,
+  },
+}]];
 
 module.exports = config;

jest.config.js

@@ -83,8 +83,7 @@
     "eslint-import-resolver-webpack": "^0.13.9",
     "jest-console-group-reporter": "^1.1.1",
     "jest-when": "^3.6.0",
-    "rosie": "2.1.1",
-    "ts-jest": "29.1.4"
+    "rosie": "2.1.1"
   },
   "bundlewatch": {
     "files": [

package-lock.json

@@ -64,7 +64,7 @@ export const ALLOW_UPSELL_MODES = [
 
 export const WIDGETS = {
   DISCUSSIONS: 'DISCUSSIONS',
-  COURSE_OUTLINE: 'COURSE_OUTLINE',
+  NOTIFICATIONS: 'NOTIFICATIONS',
 } as const satisfies Readonly<{ [k: string]: string }>;
 
 export const LOADING = 'loading';

package.json

@@ -10,7 +10,8 @@ import { AlertList } from '@src/generic/user-messages';
 import { useModel } from '@src/generic/model-store';
 import { LearnerToolsSlot } from '../../plugin-slots/LearnerToolsSlot';
 import SidebarProvider from './sidebar/SidebarContextProvider';
-import { RightSidebarTriggerSlot } from '../../plugin-slots/RightSidebarTriggerSlot';
+import NewSidebarProvider from './new-sidebar/SidebarContextProvider';
+import { NotificationsDiscussionsSidebarTriggerSlot } from '../../plugin-slots/NotificationsDiscussionsSidebarTriggerSlot';
 import { CelebrationModal, shouldCelebrateOnSectionLoad, WeeklyGoalCelebrationModal } from './celebration';
 import ContentTools from './content-tools';
 import Sequence from './sequence';
@@ -30,6 +31,7 @@ const Course = ({
   const {
     celebrations,
     isStaff,
+    isNewDiscussionSidebarViewEnabled,
     originalUserIsStaff,
   } = useModel('courseHomeMeta', courseId);
   const sequence = useModel('sequences', sequenceId);
@@ -71,8 +73,10 @@ const Course = ({
     ));
   }, [sequenceId]);
 
+  const SidebarProviderComponent = isNewDiscussionSidebarViewEnabled ? NewSidebarProvider : SidebarProvider;
+
   return (
-    <SidebarProvider courseId={courseId} unitId={unitId}>
+    <SidebarProviderComponent courseId={courseId} unitId={unitId}>
       <Helmet>
         <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
       </Helmet>
@@ -94,7 +98,7 @@ const Course = ({
         )}
         <div className="w-100 d-flex align-items-center">
           <CourseOutlineMobileSidebarTriggerSlot />
-          <RightSidebarTriggerSlot courseId={courseId} />
+          <NotificationsDiscussionsSidebarTriggerSlot courseId={courseId} />
         </div>
       </div>
 
@@ -119,7 +123,7 @@ const Course = ({
         onClose={() => setWeeklyGoalCelebrationOpen(false)}
       />
       <ContentTools course={course} />
-    </SidebarProvider>
+    </SidebarProviderComponent>
   );
 };
 

src/constants.ts

@@ -198,9 +198,18 @@ describe('Course', () => {
     rerender(null);
   });
 
-  it('doesn\'t renders course breadcrumbs by default', async () => {
-    global.innerWidth = breakpoints.extraLarge.minWidth;
+  it('handles click to open/close notification tray', async () => {
+    await setupDiscussionSidebar();
+    const notificationShowButton = await screen.findByRole('button', { name: /Show notification tray/i });
+    expect(screen.queryByRole('region', { name: /notification tray/i })).not.toBeInTheDocument();
+    fireEvent.click(notificationShowButton);
 
+    const notificationTray = await screen.findByRole('region', { name: /notification tray/i });
+    expect(notificationTray).toBeInTheDocument();
+    expect(notificationTray).not.toHaveClass('d-none');
+  });
+
+  it('doesn\'t renders course breadcrumbs by default', async () => {
     const courseMetadata = Factory.build('courseMetadata');
     const unitBlocks = Array.from({ length: 3 }).map(() => Factory.build(
       'block',

src/courseware/course/Course.jsx

@@ -1,15 +1,35 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  closeSidebarTrigger: {
-    id: 'sidebar.close.button',
-    defaultMessage: 'Close sidebar',
-    description: 'Button to close the active sidebar panel',
+  notificationTray: {
+    id: 'notification.tray.container',
+    defaultMessage: 'Notification tray',
+    description: 'Notification tray container',
   },
-  responsiveCloseSidebarPanel: {
-    id: 'sidebar.responsive.close.button',
+  openNotificationTrigger: {
+    id: 'notification.open.button',
+    defaultMessage: 'Show notification tray',
+    description: 'Button to open the notification tray and show notifications',
+  },
+  closeNotificationTrigger: {
+    id: 'notification.close.button',
+    defaultMessage: 'Close notification tray',
+    description: 'Button for the learner to close the sidebar',
+  },
+  responsiveCloseNotificationTray: {
+    id: 'responsive.close.notification',
     defaultMessage: 'Back to course',
-    description: 'Responsive back-button to close the sidebar and return to course content',
+    description: 'Responsive button to go back to course and close the notification tray',
+  },
+  notificationTitle: {
+    id: 'notification.tray.title',
+    defaultMessage: 'Notifications',
+    description: 'Title text displayed for the notification tray',
+  },
+  noNotificationsMessage: {
+    id: 'notification.tray.no.message',
+    defaultMessage: 'You have no new notifications at this time.',
+    description: 'Text displayed when the learner has no notifications',
   },
 });
 

src/courseware/course/Course.test.jsx

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+
+import SidebarContext from './SidebarContext';
+import { SIDEBARS } from './sidebars';
+
+const Sidebar = () => {
+  const { currentSidebar, isDiscussionbarAvailable, isNotificationbarAvailable } = useContext(SidebarContext);
+
+  if (currentSidebar === null || (!isDiscussionbarAvailable && !isNotificationbarAvailable)
+    || !SIDEBARS[currentSidebar]) { return null; }
+  const SidebarToRender = SIDEBARS[currentSidebar].Sidebar;
+
+  return (
+    <SidebarToRender />
+  );
+};
+
+export default Sidebar;