refactor: rename Value Prop related notification components (#516)

Part 3 of REV-2130

src/courseware/course/sequence/Sequence.jsx

@@ -22,8 +22,8 @@ import CourseLicense from '../course-license';
 import messages from './messages';
 import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
 import SequenceContent from './SequenceContent';
-import Sidebar from '../Sidebar';
-import SidebarNotificationButton from '../SidebarNotificationButton';
+import NotificationTray from '../NotificationTray';
+import NotificationTrigger from '../NotificationTrigger';
 
 /** [MM-P2P] Experiment */
 import { isMobile } from '../../../experiments/mm-p2p/utils';
@@ -37,9 +37,9 @@ function Sequence({
   nextSequenceHandler,
   previousSequenceHandler,
   intl,
-  toggleSidebar,
-  sidebarVisible,
-  isSidebarVisible,
+  toggleNotificationTray,
+  notificationTrayVisible,
+  isNotificationTrayVisible,
   isValuePropCookieSet,
   mmp2p,
 }) {
@@ -49,7 +49,7 @@ function Sequence({
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
   const specialExamsEnabledWaffleFlag = useSelector(state => state.courseware.specialExamsEnabledWaffleFlag);
   const proctoredExamsEnabledWaffleFlag = useSelector(state => state.courseware.proctoredExamsEnabledWaffleFlag);
-  const shouldDisplaySidebarButton = useWindowSize().width < responsiveBreakpoints.small.minWidth;
+  const shouldDisplayNotificationTrigger = useWindowSize().width < responsiveBreakpoints.small.minWidth;
 
   const handleNext = () => {
     const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
@@ -167,7 +167,7 @@ function Sequence({
 
   const defaultContent = (
     <div className="sequence-container" style={{ display: 'inline-flex', flexDirection: 'row' }}>
-      <div className={classNames('sequence', { 'position-relative': shouldDisplaySidebarButton })} style={{ width: '100%' }}>
+      <div className={classNames('sequence', { 'position-relative': shouldDisplayNotificationTrigger })} style={{ width: '100%' }}>
         <SequenceNavigation
           sequenceId={sequenceId}
           unitId={unitId}
@@ -192,10 +192,10 @@ function Sequence({
           isValuePropCookieSet={isValuePropCookieSet}
         />
 
-        {isValuePropCookieSet && shouldDisplaySidebarButton ? (
-          <SidebarNotificationButton
-            toggleSidebar={toggleSidebar}
-            isSidebarVisible={isSidebarVisible}
+        {isValuePropCookieSet && shouldDisplayNotificationTrigger ? (
+          <NotificationTrigger
+            toggleNotificationTray={toggleNotificationTray}
+            isNotificationTrayVisible={isNotificationTrayVisible}
           />
         ) : null}
 
@@ -226,10 +226,10 @@ function Sequence({
           )}
         </div>
       </div>
-      {isValuePropCookieSet && sidebarVisible ? (
-        <Sidebar
-          toggleSidebar={toggleSidebar}
-          sidebarVisible={sidebarVisible}
+      {isValuePropCookieSet && notificationTrayVisible ? (
+        <NotificationTray
+          toggleNotificationTray={toggleNotificationTray}
+          notificationTrayVisible={notificationTrayVisible}
         />
       ) : null }
 
@@ -269,9 +269,9 @@ Sequence.propTypes = {
   nextSequenceHandler: PropTypes.func.isRequired,
   previousSequenceHandler: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
-  toggleSidebar: PropTypes.func,
-  sidebarVisible: PropTypes.bool,
-  isSidebarVisible: PropTypes.func,
+  toggleNotificationTray: PropTypes.func,
+  notificationTrayVisible: PropTypes.bool,
+  isNotificationTrayVisible: PropTypes.func,
   isValuePropCookieSet: PropTypes.bool,
 
   /** [MM-P2P] Experiment */
@@ -291,9 +291,9 @@ Sequence.propTypes = {
 Sequence.defaultProps = {
   sequenceId: null,
   unitId: null,
-  toggleSidebar: null,
-  sidebarVisible: null,
-  isSidebarVisible: null,
+  toggleNotificationTray: null,
+  notificationTrayVisible: null,
+  isNotificationTrayVisible: null,
   isValuePropCookieSet: null,
 
   /** [MM-P2P] Experiment */

src/courseware/course/sequence/Sequence.test.jsx

@@ -28,7 +28,7 @@ describe('Sequence', () => {
       unitNavigationHandler: () => {},
       nextSequenceHandler: () => {},
       previousSequenceHandler: () => {},
-      sidebarVisible: false,
+      notificationTrayVisible: false,
     };
   });
 
@@ -130,10 +130,10 @@ describe('Sequence', () => {
     expect(screen.getAllByRole('button', { name: /previous|next/i }).length).toEqual(4);
   });
 
-  it('renders sidebar in sequence', async () => {
+  it('renders notification tray in sequence', async () => {
     const testData = {
       ...mockData,
-      sidebarVisible: true,
+      notificationTrayVisible: true,
       isValuePropCookieSet: true,
     };
 

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx

@@ -40,7 +40,7 @@ function SequenceNavigation({
     sequence.gatedContent !== undefined && sequence.gatedContent.gated
   ) : undefined;
 
-  const shouldDisplaySidebarButton = useWindowSize().width < responsiveBreakpoints.small.minWidth;
+  const shouldDisplayNotificationTrigger = useWindowSize().width < responsiveBreakpoints.small.minWidth;
 
   const renderUnitButtons = () => {
     if (isLocked) {
@@ -70,15 +70,15 @@ function SequenceNavigation({
     const disabled = isLastUnit && !exitActive;
     return (
       <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled} iconAfter={ChevronRight}>
-        {isValuePropCookieSet && shouldDisplaySidebarButton ? null : buttonText}
+        {isValuePropCookieSet && shouldDisplayNotificationTrigger ? null : buttonText}
       </Button>
     );
   };
 
   return sequenceStatus === LOADED && (
-    <nav className={classNames('sequence-navigation', className)} style={{ width: isValuePropCookieSet && shouldDisplaySidebarButton ? '90%' : null }}>
+    <nav className={classNames('sequence-navigation', className)} style={{ width: isValuePropCookieSet && shouldDisplayNotificationTrigger ? '90%' : null }}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={ChevronLeft}>
-        {isValuePropCookieSet && shouldDisplaySidebarButton ? null : intl.formatMessage(messages.previousButton)}
+        {isValuePropCookieSet && shouldDisplayNotificationTrigger ? null : intl.formatMessage(messages.previousButton)}
       </Button>
       {renderUnitButtons()}
       {renderNextButton()}