refactor: fixed UI and logic related issue

src/courseware/course/new-sidebar/Sidebar.jsx

@@ -20,7 +20,7 @@ const Sidebar = () => {
   const SidebarToRender = SIDEBARS[currentSidebar].Sidebar;
 
   return (
-    <div className={classNames('vh-100 d-flex flex-column', { 'bg-white fixed-top': shouldDisplayFullScreen })}>
+    <div className={classNames('d-flex flex-column', { 'bg-white fixed-top': shouldDisplayFullScreen })}>
       {shouldDisplayFullScreen && (
         <div
           className="pt-2 pb-2.5 border-bottom border-light-400 d-flex align-items-center ml-2"

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

@@ -3,37 +3,42 @@ import PropTypes from 'prop-types';
 import React, {
   useEffect, useState, useMemo, useCallback,
 } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import isEmpty from 'lodash/isEmpty';
 import { SIDEBARS } from './sidebars';
 import { getLocalStorage, setLocalStorage } from '../../../data/localStorage';
 import SidebarContext from './SidebarContext';
 import { useModel } from '../../../generic/model-store';
+import messages from './messages';
 
 const SidebarProvider = ({
   courseId,
   unitId,
   children,
 }) => {
+  const intl = useIntl();
   const shouldDisplayFullScreen = useWindowSize().width < breakpoints.large.minWidth;
   const shouldDisplaySidebarOpen = useWindowSize().width > breakpoints.medium.minWidth;
   const query = new URLSearchParams(window.location.search);
   const initialSidebar = (shouldDisplaySidebarOpen || query.get('sidebar') === 'true')
     ? SIDEBARS.DISCUSSIONS_NOTIFICATIONS.ID : null;
   const [currentSidebar, setCurrentSidebar] = useState(initialSidebar);
   const [notificationStatus, setNotificationStatus] = useState(getLocalStorage(`notificationStatus.${courseId}`));
+  const [hideDiscussionbar, setHideDiscussionbar] = useState(false);
+  const [hideNotificationbar, setHideNotificationbar] = useState(false);
   const [upgradeNotificationCurrentState, setUpgradeNotificationCurrentState] = useState(
     getLocalStorage(`upgradeNotificationCurrentState.${courseId}`),
   );
   const topic = useModel('discussionTopics', unitId);
   const { verifiedMode } = useModel('courseHomeMeta', courseId);
-  const isDiscussionbarAvailable = !topic?.id || !topic?.enabledInContext;
+  const isDiscussionbarAvailable = !(!topic?.id || !topic?.enabledInContext);
   const isNotificationbarAvailable = !isEmpty(verifiedMode);
-  const [hideDiscussionbar, setHideDiscussionbar] = useState(isDiscussionbarAvailable);
-  const [hideNotificationbar, setHideNotificationbar] = useState(isNotificationbarAvailable);
 
   useEffect(() => {
+    setHideDiscussionbar(!isDiscussionbarAvailable);
+    setHideNotificationbar(!isNotificationbarAvailable);
     setCurrentSidebar(SIDEBARS.DISCUSSIONS_NOTIFICATIONS.ID);
-  }, [unitId]);
+  }, [unitId, topic]);
 
   const onNotificationSeen = useCallback(() => {
     setNotificationStatus('inactive');
@@ -46,17 +51,19 @@ const SidebarProvider = ({
     }
   }, [hideDiscussionbar, hideNotificationbar]);
 
-  const toggleSidebar = useCallback((sidebarId, tabId) => {
-    if (tabId === Discussions) {
-      setHideDiscussionbar(true);
-    } else if (tabId === Notifications) {
-      setHideNotificationbar(true);
+  const toggleSidebar = useCallback((sidebarId, widgetId) => {
+    if (widgetId) {
+      if (widgetId === intl.formatMessage(messages.discussionsTitle)) {
+        setHideDiscussionbar(true);
+      } else if (widgetId === intl.formatMessage(messages.notificationTitle)) {
+        setHideNotificationbar(true);
+      }
     } else {
       setCurrentSidebar(prevSidebar => (sidebarId === prevSidebar ? null : sidebarId));
-      if (isDiscussionbarAvailable) { setHideDiscussionbar(false); }
-      if (isNotificationbarAvailable) { setHideNotificationbar(false); }
+      setHideDiscussionbar(!isDiscussionbarAvailable);
+      setHideNotificationbar(!isNotificationbarAvailable);
     }
-  }, [isNotificationbarAvailable, isDiscussionbarAvailable]);
+  }, [isDiscussionbarAvailable, isNotificationbarAvailable]);
 
   const contextValue = useMemo(() => ({
     toggleSidebar,

src/courseware/course/new-sidebar/common/SidebarBase.jsx

@@ -17,6 +17,7 @@ const SidebarBase = ({
   showTitleBar,
   width,
   allowFullHeight,
+  showBorder,
 }) => {
   const intl = useIntl();
   const {
@@ -28,7 +29,7 @@ const SidebarBase = ({
   const receiveMessage = useCallback(({ data }) => {
     const { type } = data;
     if (type === 'learning.events.sidebar.close') {
-      toggleSidebar(sidebarId, 'Discussions');
+      toggleSidebar(sidebarId, intl.formatMessage(messages.discussionsTitle));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [toggleSidebar]);
@@ -37,9 +38,10 @@ const SidebarBase = ({
 
   return (
     <section
-      className={classNames('ml-0 ml-lg-4 border border-light-400 rounded-sm h-auto align-top', {
+      className={classNames('ml-0 ml-lg-4 h-auto align-top', {
         'min-vh-100': !shouldDisplayFullScreen && allowFullHeight,
         'd-none': currentSidebar !== sidebarId,
+        'border border-light-400 rounded-sm': showBorder,
       }, className)}
       data-testid={`sidebar-${sidebarId}`}
       style={{ width: shouldDisplayFullScreen ? '100%' : width }}
@@ -77,13 +79,15 @@ SidebarBase.propTypes = {
   showTitleBar: PropTypes.bool,
   width: PropTypes.string,
   allowFullHeight: PropTypes.bool,
+  showBorder: PropTypes.bool,
 };
 
 SidebarBase.defaultProps = {
   width: '31rem',
   allowFullHeight: false,
   showTitleBar: true,
   className: '',
+  showBorder: true,
 };
 
 export default SidebarBase;

src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsSidebar.jsx

@@ -1,23 +1,26 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import SidebarBase from '../../common/SidebarBase';
 import NotificationTray from './notifications/NotificationsWidget';
 import DiscussionsSidebar from './discussions/DiscussionsWidget';
 import messages from '../../messages';
 import { ID } from './DiscussionsNotificationsTrigger';
+import SidebarContext from '../../SidebarContext';
 
 const DiscussionsNotificationsSidebar = () => {
   const intl = useIntl();
+  const { hideNotificationbar } = useContext(SidebarContext);
 
   return (
     <SidebarBase
       ariaLabel={intl.formatMessage(messages.discussionNotificationTray)}
       sidebarId={ID}
-      className="flex-fill"
+      className="d-flex flex-column flex-fill"
       showTitleBar={false}
+      showBorder={false}
     >
       <NotificationTray />
-      <div className="my-1.5" />
+      {!hideNotificationbar && <div className="my-1.5" />}
       <DiscussionsSidebar />
     </SidebarBase>
   );

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

@@ -21,7 +21,7 @@ const DiscussionsWidget = () => {
   return (
     <iframe
       src={`${discussionsUrl}?inContextSidebar`}
-      className="d-flex w-100 h-100 border-0 flex-fill"
+      className="d-flex w-100 vh-100 flex-fill border border-light-400 rounded-sm"
       title={intl.formatMessage(messages.discussionsTitle)}
       allow="clipboard-write"
       loading="lazy"

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

@@ -5,16 +5,16 @@ import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import {
   initializeMockApp, initializeTestStore, render, screen,
-} from '../../../../../setupTest';
-import { executeThunk } from '../../../../../utils';
-import { buildTopicsFromUnits } from '../../../../data/__factories__/discussionTopics.factory';
-import { getCourseDiscussionTopics } from '../../../../data/thunks';
-import SidebarContext from '../../SidebarContext';
-import DiscussionsSidebar from './DiscussionsSidebar';
+} from '../../../../../../setupTest';
+import { executeThunk } from '../../../../../../utils';
+import { buildTopicsFromUnits } from '../../../../../data/__factories__/discussionTopics.factory';
+import { getCourseDiscussionTopics } from '../../../../../data/thunks';
+import SidebarContext from '../../../SidebarContext';
+import DiscussionsWidget from './DiscussionsWidget';
 
 initializeMockApp();
 
-describe('Discussions Trigger', () => {
+describe('DiscussionsWidget', () => {
   let axiosMock;
   let mockData;
   let courseId;
@@ -52,7 +52,7 @@ describe('Discussions Trigger', () => {
   function renderWithProvider(testData = {}) {
     const { container } = render(
       <SidebarContext.Provider value={{ ...mockData, ...testData }}>
-        <DiscussionsSidebar />
+        <DiscussionsWidget />
       </SidebarContext.Provider>,
     );
     return container;

src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx

@@ -39,25 +39,26 @@ const NotificationsWidget = () => {
   if (hideNotificationbar || !isNotificationbarAvailable) { return null; }
 
   return (
-    <UpgradeNotification
-      offer={offer}
-      verifiedMode={verifiedMode}
-      accessExpiration={accessExpiration}
-      contentTypeGatingEnabled={contentTypeGatingEnabled}
-      marketingUrl={marketingUrl}
-      upsellPageName="in_course"
-      userTimezone={userTimezone}
-      shouldDisplayBorder={false}
-      timeOffsetMillis={timeOffsetMillis}
-      courseId={courseId}
-      org={org}
-      upgradeNotificationCurrentState={upgradeNotificationCurrentState}
-      setupgradeNotificationCurrentState={setUpgradeNotificationCurrentState}
-      showRemoveIcon
-      sidebarId="qqw"
-      toggleSidebar={toggleSidebar}
-      tabId={intl.formatMessage(messages.notificationTitle)}
-    />
+    <div className="border border-light-400 rounded-sm">
+      <UpgradeNotification
+        offer={offer}
+        verifiedMode={verifiedMode}
+        accessExpiration={accessExpiration}
+        contentTypeGatingEnabled={contentTypeGatingEnabled}
+        marketingUrl={marketingUrl}
+        upsellPageName="in_course"
+        userTimezone={userTimezone}
+        shouldDisplayBorder={false}
+        timeOffsetMillis={timeOffsetMillis}
+        courseId={courseId}
+        org={org}
+        upgradeNotificationCurrentState={upgradeNotificationCurrentState}
+        setupgradeNotificationCurrentState={setUpgradeNotificationCurrentState}
+        showRemoveIcon
+        toggleSidebar={toggleSidebar}
+        widgetId={intl.formatMessage(messages.notificationTitle)}
+      />
+    </div>
   );
 };
 

src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.jsx

@@ -6,18 +6,18 @@ import { breakpoints } from '@edx/paragon';
 import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import { Factory } from 'rosie';
-import { initializeMockApp, render, screen } from '../../../../../setupTest';
-import initializeStore from '../../../../../store';
-import { appendBrowserTimezoneToUrl, executeThunk } from '../../../../../utils';
+import { initializeMockApp, render, screen } from '../../../../../../setupTest';
+import initializeStore from '../../../../../../store';
+import { appendBrowserTimezoneToUrl, executeThunk } from '../../../../../../utils';
 
-import { fetchCourse } from '../../../../data';
-import SidebarContext from '../../SidebarContext';
-import NotificationTray from './NotificationsSidebar';
+import { fetchCourse } from '../../../../../data';
+import SidebarContext from '../../../SidebarContext';
+import NotificationsWidget from './NotificationsWidget';
 
 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');
 
-describe('NotificationsSidebar', () => {
+describe('NotificationsWidget', () => {
   let axiosMock;
   let store;
   const ID = 'NEWSIDEBAR';
@@ -57,7 +57,7 @@ describe('NotificationsSidebar', () => {
         isNotificationbarAvailable: true,
       }}
       >
-        <NotificationTray />
+        <NotificationsWidget />
       </SidebarContext.Provider>,
     );
     const UpgradeNotification = document.querySelector('.upgrade-notification');
@@ -81,7 +81,7 @@ describe('NotificationsSidebar', () => {
         isNotificationbarAvailable: false,
       }}
       >
-        <NotificationTray />
+        <NotificationsWidget />
       </SidebarContext.Provider>,
     );
     expect(screen.queryByText('Notifications'))
@@ -101,7 +101,7 @@ describe('NotificationsSidebar', () => {
         isNotificationbarAvailable: true,
       }}
       >
-        <NotificationTray />
+        <NotificationsWidget />
       </SidebarContext.Provider>,
     );
     expect(onNotificationSeen).toHaveBeenCalledTimes(0);

src/courseware/course/sequence/Sequence.jsx

@@ -9,7 +9,7 @@ import {
   sendTrackEvent,
   sendTrackingLogEvent,
 } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import { breakpoints, useWindowSize } from '@edx/paragon';
@@ -35,8 +35,8 @@ const Sequence = ({
   unitNavigationHandler,
   nextSequenceHandler,
   previousSequenceHandler,
-  intl,
 }) => {
+  const intl = useIntl();
   const course = useModel('coursewareMeta', courseId);
   const {
     isStaff,
@@ -227,12 +227,11 @@ Sequence.propTypes = {
   unitNavigationHandler: PropTypes.func.isRequired,
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
 };
 
 Sequence.defaultProps = {
   sequenceId: null,
   unitId: null,
 };
 
-export default injectIntl(Sequence);
+export default Sequence;

src/generic/upgrade-notification/UpgradeNotification.jsx

@@ -16,6 +16,7 @@ import {
   SupportMissionBullet,
 } from '../upsell-bullets/UpsellBullets';
 import messages from '../messages';
+import { ID } from '../../courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsTrigger';
 
 const UpsellNoFBECardContent = () => (
   <ul className="fa-ul upgrade-notification-ul pt-0">
@@ -289,8 +290,7 @@ const UpgradeNotification = ({
   verifiedMode,
   showRemoveIcon,
   toggleSidebar,
-  sidebarId,
-  tabId,
+  widgetId,
 }) => {
   const intl = useIntl();
   const dateNow = Date.now();
@@ -505,7 +505,7 @@ const UpgradeNotification = ({
                 src={Close}
                 size="sm"
                 iconAs={Icon}
-                onClick={() => toggleSidebar(sidebarId, tabId)}
+                onClick={() => toggleSidebar(ID, widgetId)}
                 className="icon-hover"
                 alt={intl.formatMessage(messages.close)}
               />
@@ -553,8 +553,7 @@ UpgradeNotification.propTypes = {
     upgradeUrl: PropTypes.string.isRequired,
   }),
   showRemoveIcon: PropTypes.bool,
-  sidebarId: PropTypes.string,
-  tabId: PropTypes.string,
+  widgetId: PropTypes.string,
 };
 
 UpgradeNotification.defaultProps = {
@@ -569,8 +568,7 @@ UpgradeNotification.defaultProps = {
   verifiedMode: null,
   showRemoveIcon: false,
   toggleSidebar: null,
-  sidebarId: null,
-  tabId: null,
+  widgetId: null,
 };
 
 export default injectIntl(UpgradeNotification);