feat: added support to open notification tray from query params (#615)

Author: muhammadadeeltajamul

src/Notification/data/hook.js

@@ -98,7 +98,7 @@ export function useNotification() {
         newNotificationIds, notificationsKeyValuePair, pagination,
       } = normalizedData;
 
-      const existingNotificationIds = apps[appName];
+      const existingNotificationIds = apps[appName] || [];
       const { count } = tabsCount;
 
       return {

src/Notification/index.jsx

@@ -4,6 +4,7 @@ import React, {
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { useSearchParams } from 'react-router-dom';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -26,12 +27,14 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
   const intl = useIntl();
   const popoverRef = useRef(null);
   const headerRef = useRef(null);
+  const [searchParams] = useSearchParams();
   const buttonRef = useRef(null);
   const [enableNotificationTray, setEnableNotificationTray] = useState(false);
   const [appName, setAppName] = useState('discussion');
   const [isHeaderVisible, setIsHeaderVisible] = useState(true);
   const [notificationData, setNotificationData] = useState({});
   const [tabsCount, setTabsCount] = useState(notificationAppData?.tabsCount);
+  const [openFlag, setOpenFlag] = useState(false);
   const isOnMediumScreen = useIsOnMediumScreen();
   const isOnLargeScreen = useIsOnLargeScreen();
 
@@ -45,6 +48,15 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
     }
   }, []);
 
+  useEffect(() => {
+    if (openFlag || Object.keys(tabsCount).length === 0) {
+      return;
+    }
+    setAppName(searchParams.get('app') || 'discussion');
+    setEnableNotificationTray(searchParams.get('showNotifications') === 'true');
+    setOpenFlag(true);
+  }, [tabsCount, openFlag, searchParams]);
+
   useEffect(() => {
     setTabsCount(notificationAppData.tabsCount);
     setNotificationData(prevData => ({
@@ -97,10 +109,10 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
 
   const notificationContextValue = useMemo(() => ({
     enableNotificationTray,
-    appName,
     handleActiveTab,
     updateNotificationData,
     ...notificationData,
+    appName,
   }), [enableNotificationTray, appName, handleActiveTab, updateNotificationData, notificationData]);
 
   return (

src/Notification/index.test.jsx

@@ -34,9 +34,9 @@ const contextValue = {
   config: {},
 };
 
-async function renderComponent() {
+async function renderComponent(url = '/') {
   render(
-    <MemoryRouter>
+    <MemoryRouter initialEntries={[url]}>
       <AppContext.Provider value={contextValue}>
         <IntlProvider locale="en" messages={{}}>
           <LearningHeader />
@@ -70,6 +70,38 @@ describe('Notification test cases.', () => {
       .reply(200, (Factory.build('notificationsCount', { count, showNotificationsTray })));
   }
 
+  it.each(['true', 'false', null])(
+    'Ensures correct rendering of the notification tray based on the showNotifications query parameter value %s',
+    async (showNotifications) => {
+      await setupMockNotificationCountResponse();
+
+      const url = showNotifications ? `/?showNotifications=${showNotifications}` : '/';
+      await renderComponent(url);
+      await waitFor(() => {
+        expect(screen.queryByTestId('notification-bell-icon')).toBeInTheDocument();
+        if (showNotifications === 'true') {
+          expect(screen.queryByTestId('notification-tray')).toBeInTheDocument();
+        } else {
+          expect(screen.queryByTestId('notification-tray')).not.toBeInTheDocument();
+        }
+      });
+    },
+  );
+
+  it.each(['discussion', 'grades'])(
+    'Notification tray opens tab if app param is %s',
+    async (app) => {
+      await setupMockNotificationCountResponse();
+      const url = `/?showNotifications=true&app=${app}`;
+      await renderComponent(url);
+      await waitFor(() => {
+        expect(screen.queryByTestId('notification-bell-icon')).toBeInTheDocument();
+        expect(screen.queryByTestId('notification-tray')).toBeInTheDocument();
+        expect(screen.queryByTestId(`notification-tab-${app}`)).toHaveClass('active');
+      });
+    },
+  );
+
   it('Successfully showed bell icon and unseen count on it if unseen count is greater then 0.', async () => {
     await setupMockNotificationCountResponse();
     await renderComponent();