fix: fixed right panel closing issue (#1732)

* fix: fixed right panel closing issue

* fix: fixed status of notificationTrayStatus in session storage

* test: added test cases to close or open notification tray

Author: sundasnoreen12

src/courseware/course/new-sidebar/SidebarContextProvider.tsx

@@ -54,6 +54,8 @@ const SidebarProvider: React.FC<Props> = ({
   }, [courseId]);
 
   useEffect(() => {
+    window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
+    window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'open');
     setHideDiscussionbar(!isDiscussionbarAvailable);
     setHideNotificationbar(!isNotificationbarAvailable);
     if (initialSidebar && currentSidebar !== initialSidebar) {

src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
+import { fireEvent } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 
 import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+import { getSessionStorage, setSessionStorage } from '../../../../../../data/sessionStorage';
 import {
   initializeMockApp, initializeTestStore, render, screen,
 } from '../../../../../../setupTest';
@@ -14,11 +16,19 @@ import { buildTopicsFromUnits } from '../../../../../data/__factories__/discussi
 import { getCourseDiscussionTopics } from '../../../../../data/thunks';
 import SidebarContext from '../../../SidebarContext';
 import DiscussionsNotificationsSidebar from '../DiscussionsNotificationsSidebar';
+import DiscussionsNotificationsTrigger from '../DiscussionsNotificationsTrigger';
 import DiscussionsWidget from './DiscussionsWidget';
 
 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');
 
+jest.mock('../../../../../../data/sessionStorage', () => ({
+  getSessionStorage: jest.fn(),
+  setSessionStorage: jest.fn(),
+}));
+
+const onClickMock = jest.fn();
+
 describe('DiscussionsWidget', () => {
   let axiosMock;
   let mockData;
@@ -81,4 +91,34 @@ describe('DiscussionsWidget', () => {
     expect(screen.queryByText('Back to course')).toBeInTheDocument();
     expect(sendTrackEvent).toHaveBeenCalledTimes(1);
   });
+
+  it('should open notification tray if closed', () => {
+    (getSessionStorage as jest.Mock).mockReturnValue('closed');
+
+    renderWithProvider(() => <DiscussionsNotificationsTrigger onClick={onClickMock} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(setSessionStorage).toHaveBeenCalledWith(
+      `notificationTrayStatus.${courseId}`,
+      'open',
+    );
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  it('should close notification tray if open', () => {
+    (getSessionStorage as jest.Mock).mockReturnValue('open');
+
+    renderWithProvider(() => <DiscussionsNotificationsTrigger onClick={onClickMock} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(setSessionStorage).toHaveBeenCalledWith(
+      `notificationTrayStatus.${courseId}`,
+      'open',
+    );
+    expect(onClickMock).toHaveBeenCalled();
+  });
 });

src/courseware/course/sidebar/sidebars/course-outline/hooks.js

@@ -68,6 +68,7 @@ export const useCourseOutlineSidebar = () => {
     } else {
       toggleSidebar(ID);
       window.sessionStorage.removeItem('hideCourseOutlineSidebar');
+      window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'closed');
     }
   };