feat: added course level isNewDiscussionSidebarViewEnabled flag to control sidebar view switching (openedx#1373)

* feat: added course level isNewDiscussionSidebarViewEnabled flag

* test: fixed notification widget test cases

Author: awais-ansari

.env

@@ -13,7 +13,6 @@ DISCOVERY_API_BASE_URL=''
 DISCUSSIONS_MFE_BASE_URL=''
 ECOMMERCE_BASE_URL=''
 ENABLE_JUMPNAV='true'
-ENABLE_NEW_SIDEBAR=''
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME=''
 EXAMS_BASE_URL=''

.env.development

@@ -13,7 +13,6 @@ DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
-ENABLE_NEW_SIDEBAR=''
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
 EXAMS_BASE_URL=''

.env.test

@@ -13,7 +13,6 @@ DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
-ENABLE_NEW_SIDEBAR=''
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
 EXAMS_BASE_URL='http://localhost:18740'

src/course-home/data/__factories__/courseHomeMetadata.factory.js

@@ -6,6 +6,7 @@ Factory.define('courseHomeMetadata')
   .option('host', 'http://localhost:18000')
   .attrs({
     title: 'Demonstration Course',
+    is_new_discussion_sidebar_view_enabled: false,
     is_self_paced: false,
     is_enrolled: false,
     is_staff: false,

src/course-home/data/__snapshots__/redux.test.js.snap

@@ -38,6 +38,7 @@ Object {
         "id": "course-v1:edX+DemoX+Demo_Course",
         "isEnrolled": false,
         "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",
@@ -425,6 +426,7 @@ Object {
         "id": "course-v1:edX+DemoX+Demo_Course",
         "isEnrolled": false,
         "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",
@@ -693,6 +695,7 @@ Object {
         "id": "course-v1:edX+DemoX+Demo_Course",
         "isEnrolled": false,
         "isMasquerading": false,
+        "isNewDiscussionSidebarViewEnabled": false,
         "isSelfPaced": false,
         "isStaff": false,
         "number": "DemoX",

src/courseware/course/Course.jsx

@@ -33,10 +33,10 @@ const Course = ({
   const {
     celebrations,
     isStaff,
+    isNewDiscussionSidebarViewEnabled,
   } = useModel('courseHomeMeta', courseId);
   const sequence = useModel('sequences', sequenceId);
   const section = useModel('sections', sequence ? sequence.sectionId : null);
-  const enableNewSidebar = getConfig().ENABLE_NEW_SIDEBAR;
   const navigationDisabled = sequence?.navigationDisabled ?? false;
 
   const pageTitleBreadCrumbs = [
@@ -69,7 +69,7 @@ const Course = ({
     ));
   }, [sequenceId]);
 
-  const SidebarProviderComponent = enableNewSidebar === 'true' ? NewSidebarProvider : SidebarProvider;
+  const SidebarProviderComponent = isNewDiscussionSidebarViewEnabled ? NewSidebarProvider : SidebarProvider;
 
   return (
     <SidebarProviderComponent courseId={courseId} unitId={unitId}>
@@ -102,7 +102,7 @@ const Course = ({
         )}
         {shouldDisplayTriggers && (
           <>
-            {enableNewSidebar === 'true' ? <NewSidebarTriggers /> : <SidebarTriggers /> }
+            {isNewDiscussionSidebarViewEnabled ? <NewSidebarTriggers /> : <SidebarTriggers /> }
           </>
         )}
       </div>

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

@@ -4,7 +4,7 @@ import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import { Factory } from 'rosie';
 
-import { mergeConfig, getConfig } from '@edx/frontend-platform';
+import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { breakpoints } from '@openedx/paragon';
 
@@ -49,13 +49,11 @@ describe('NotificationsWidget', () => {
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
     axiosMock.onGet(courseHomeMetadataUrl).reply(200, courseHomeMetadata);
-    mergeConfig({ ENABLE_NEW_SIDEBAR: 'true' }, 'Custom app config');
   });
 
-  it('successfully Open/Hide sidebar tray.', async () => {
+  it('successfully Open/Hide sidebar tray', async () => {
     const userVerifiedMode = Factory.build('verifiedMode');
-
-    await setupDiscussionSidebar(userVerifiedMode);
+    await setupDiscussionSidebar({ verifiedMode: userVerifiedMode, isNewDiscussionSidebarViewEnabled: true });
 
     const sidebarButton = await screen.getByRole('button', { name: /Show sidebar tray/i });
 
@@ -129,7 +127,11 @@ describe('NotificationsWidget', () => {
   ])('successfully %s', async ({ enabledInContext, testId }) => {
     const userVerifiedMode = Factory.build('verifiedMode');
 
-    await setupDiscussionSidebar(userVerifiedMode, enabledInContext);
+    await setupDiscussionSidebar({
+      verifiedMode: userVerifiedMode,
+      enabledInContext,
+      isNewDiscussionSidebarViewEnabled: true,
+    });
 
     const sidebarButton = screen.getByRole('button', { name: /Show sidebar tray/i });
 

src/courseware/course/sequence/Sequence.jsx

@@ -2,7 +2,6 @@
 import React, {
   useEffect, useState,
 } from 'react';
-import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -46,13 +45,13 @@ const Sequence = ({
   const {
     isStaff,
     originalUserIsStaff,
+    isNewDiscussionSidebarViewEnabled,
   } = useModel('courseHomeMeta', courseId);
   const sequence = useModel('sequences', sequenceId);
   const unit = useModel('units', unitId);
   const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
   const sequenceMightBeUnit = useSelector(state => state.courseware.sequenceMightBeUnit);
   const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
-  const enableNewSidebar = getConfig().ENABLE_NEW_SIDEBAR;
 
   const handleNext = () => {
     const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
@@ -171,7 +170,7 @@ const Sequence = ({
               }}
             />
             {shouldDisplayNotificationTriggerInSequence && (
-              enableNewSidebar === 'true' ? <NewSidebarTriggers /> : <SidebarTriggers />
+              isNewDiscussionSidebarViewEnabled ? <NewSidebarTriggers /> : <SidebarTriggers />
             )}
           </div>
 
@@ -199,7 +198,7 @@ const Sequence = ({
             )}
           </div>
         </div>
-        {enableNewSidebar === 'true' ? <NewSidebar /> : <Sidebar />}
+        {isNewDiscussionSidebarViewEnabled ? <NewSidebar /> : <Sidebar />}
       </div>
       <PluginSlot
         id="sequence_container_plugin"

src/courseware/course/sequence/sequence-navigation/hooks.js

@@ -1,7 +1,6 @@
 import { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { breakpoints, useWindowSize } from '@openedx/paragon';
-import { getConfig } from '@edx/frontend-platform';
 
 import { useModel } from '../../../../generic/model-store';
 import { sequenceIdsSelector } from '../../../data';
@@ -80,8 +79,11 @@ export function useIsOnXLDesktop() {
 }
 
 export function useIsSidebarOpen(unitId) {
-  const { currentSidebar } = useContext(getConfig().ENABLE_NEW_SIDEBAR === 'true' ? NewSidebarContext : SidebarContext);
+  const courseId = useSelector(state => state.courseware.courseId);
+  const { isNewDiscussionSidebarViewEnabled } = useModel('courseHomeMeta', courseId);
+  const { currentSidebar } = useContext(isNewDiscussionSidebarViewEnabled ? NewSidebarContext : SidebarContext);
   const topic = useModel('discussionTopics', unitId);
-  return currentSidebar === WIDGETS.NOTIFICATIONS
-    || (currentSidebar === WIDGETS.DISCUSSIONS && !!(topic?.id || topic?.enabledInContext));
+
+  return (currentSidebar === WIDGETS.NOTIFICATIONS) || (
+    currentSidebar === WIDGETS.DISCUSSIONS && !!(topic?.id || topic?.enabledInContext));
 }

src/courseware/course/test-utils.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, snakeCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import MockAdapter from 'axios-mock-adapter';
 import { breakpoints } from '@openedx/paragon';
@@ -16,7 +16,8 @@ const mockData = {
   unitNavigationHandler: () => {},
 };
 
-const setupDiscussionSidebar = async (verifiedMode = null, enabledInContext = true) => {
+const setupDiscussionSidebar = async (HomeMetaParams) => {
+  const params = { verifiedMode: null, enabledInContext: true, ...HomeMetaParams };
   const store = await initializeTestStore();
   const { courseware, models } = store.getState();
   const { courseId, sequenceId } = courseware;
@@ -27,12 +28,12 @@ const setupDiscussionSidebar = async (verifiedMode = null, enabledInContext = tr
   });
   global.innerWidth = breakpoints.extraLarge.minWidth;
 
-  const courseHomeMetadata = Factory.build('courseHomeMetadata', { verified_mode: verifiedMode });
+  const courseHomeMetadata = Factory.build('courseHomeMetadata', { ...snakeCaseObject(params) });
   const testStore = await initializeTestStore({ provider: 'openedx', courseHomeMetadata });
   const state = testStore.getState();
   const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
   axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/${courseId}`).reply(200, { provider: 'openedx' });
-  const topicsResponse = buildTopicsFromUnits(state.models.units, enabledInContext);
+  const topicsResponse = buildTopicsFromUnits(state.models.units, params.enabledInContext);
   axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/discussion/v2/course_topics/${courseId}`)
     .reply(200, topicsResponse);