feat: notification count from notification plugin in course outline

Author: navinkarkera

src/course-outline/status-bar/NotificationStatusIcon.tsx

@@ -0,0 +1,79 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { NotificationsNone } from '@openedx/paragon/icons';
+import React from 'react';
+import messages from './messages';
+
+interface HooKType {
+  notificationAppData: {
+    tabsCount?: {
+      count?: number;
+    }
+  }
+}
+
+// Load the hook module asynchronously
+function useDynamicHookShim() {
+  const [hook, setHook] = React.useState<(() => HooKType) | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      try {
+        const module = await import("@edx/frontend-plugin-notifications");
+        const hookFn = module.useAppNotifications ?? module.default;
+        if (!cancelled) {
+          // `module.useAppNotifications` is itself a hook
+          setHook(() => hookFn);
+        }
+      } catch (err: any) {
+        // If the module cannot be found, just keep `hook` as null.
+        console.error("Failed to load notifications plugin:", err);
+        // No hook – the UI will fall back to the placeholder.
+      }
+    }
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return hook;
+}
+
+// Component that actually calls the loaded hook
+function NotificationHookConsumer({ hook }: { hook: () => HooKType }) {
+  // The hook is now called on **every** render of this component
+  const { notificationAppData } = hook();
+
+  if (!notificationAppData?.tabsCount?.count || notificationAppData?.tabsCount?.count < 1) {
+    return null;
+  }
+
+  // You can use `hookResult` here as needed
+  return (
+    <small className="d-flex">
+      <Icon className="mr-1" size="md" src={NotificationsNone} />
+      <FormattedMessage
+        {...messages.notificationMetadataTitle}
+        values={{ count: notificationAppData?.tabsCount?.count }}
+      />
+    </small>
+  );
+}
+
+// Main component
+export const NotificationStatusIcon = () => {
+  const loadedHook = useDynamicHookShim();
+
+  if (!loadedHook) {
+    return null;
+  }
+
+  // Once loaded, delegate to a component that calls the hook
+  return <NotificationHookConsumer hook={loadedHook} />;
+};
+

src/course-outline/status-bar/StatusBar.tsx

@@ -8,6 +8,7 @@ import { CourseOutlineStatusBar } from '@src/course-outline/data/types';
 import { ChecklistRtl, NotificationsNone } from '@openedx/paragon/icons';
 import messages from './messages';
 import { useWaffleFlags } from '../../data/apiHooks';
+import { NotificationStatusIcon } from './NotificationStatusIcon';
 
 const CourseBadge = ({ startDate, endDate }: { startDate: Moment, endDate: Moment }) => {
   const now = moment().utc();
@@ -131,12 +132,7 @@ export const StatusBar = ({
         startDateRaw={courseReleaseDate}
         datesLink={waffleFlags.useNewScheduleDetailsPage ? `/course/${courseId}/settings/details/#schedule` : scheduleDestination()}
       />
-      {(notificationCount || 0) > 0 && (
-      <small className="d-flex">
-        <Icon className="mr-2" size="md" src={NotificationsNone} />
-        {intl.formatMessage(messages.notificationMetadataTitle, { count: notificationCount })}
-      </small>
-      )}
+      <NotificationStatusIcon />
       <Link
         className="small text-primary-500 d-flex"
         to={`/course/${courseId}/checklists`}

src/data/api.ts

@@ -67,6 +67,7 @@ export async function getCourseDetails(courseId: string, username: string): Prom
  */
 export const waffleFlagDefaults = {
   enableCourseOptimizer: false,
+  enableNotifications: false,
   enableCourseOptimizerCheckPrevRunLinks: false,
   useNewHomePage: true,
   useNewCustomPages: true,

src/stubs/empty-notifications-plugin.tsx

@@ -0,0 +1,11 @@
+export const useAppNotifications = () => {
+  return {
+    notificationAppData: {
+      tabsCount: {
+        count: 0,
+      }
+    }
+  };
+};
+
+export const NotificationsTray = () => <></>;

webpack.dev.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
+const webpack = require('webpack');
 
 const config = createConfig('webpack-dev', {
   resolve: {
@@ -14,6 +15,21 @@ const config = createConfig('webpack-dev', {
       constants: false,
     },
   },
+  // Silently ignore “module not found” errors for that exact specifier.
+  plugins: [
+    new webpack.NormalModuleReplacementPlugin(
+      /@edx\/frontend-plugin-notifications/,
+      (resource) => {
+        try {
+          // Try to resolve the real package. If it exists, do nothing.
+          require.resolve('@edx/frontend-plugin-notifications');
+        } catch (e) {
+          // Package not found → point to the stub we created.
+          resource.request = path.resolve(__dirname, 'src/stubs/empty-notifications-plugin.tsx');
+        }
+      }
+    ),
+  ],
 });
 
 module.exports = config;

webpack.prod.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
+const webpack = require('webpack');
 
 const config = createConfig('webpack-prod', {
   resolve: {
@@ -14,6 +15,21 @@ const config = createConfig('webpack-prod', {
       constants: false,
     },
   },
+  // Silently ignore “module not found” errors for that exact specifier.
+  plugins: [
+    new webpack.NormalModuleReplacementPlugin(
+      /@edx\/frontend-plugin-notifications/,
+      (resource) => {
+        try {
+          // Try to resolve the real package. If it exists, do nothing.
+          require.resolve('@edx/frontend-plugin-notifications');
+        } catch (e) {
+          // Package not found → point to the stub we created.
+          resource.request = path.resolve(__dirname, 'src/stubs/empty-notifications-plugin.tsx');
+        }
+      }
+    ),
+  ],
 });
 
 module.exports = config;