From cf3a91dde0274d6cf3c5a4acff63e3381900b2e3 Mon Sep 17 00:00:00 2001 From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com> Date: Mon, 29 Apr 2024 16:14:08 +0500 Subject: [PATCH] feat: added course level isNewDiscussionSidebarViewEnabled flag to control sidebar view switching (#1373) * feat: added course level isNewDiscussionSidebarViewEnabled flag * test: fixed notification widget test cases --- .env | 1 - .env.development | 1 - .env.test | 1 - .../__factories__/courseHomeMetadata.factory.js | 1 + .../data/__snapshots__/redux.test.js.snap | 3 +++ src/courseware/course/Course.jsx | 6 +++--- .../notifications/NotificationsWidget.test.jsx | 14 ++++++++------ src/courseware/course/sequence/Sequence.jsx | 7 +++---- .../course/sequence/sequence-navigation/hooks.js | 10 ++++++---- src/courseware/course/test-utils.jsx | 9 +++++---- src/index.jsx | 1 - 11 files changed, 29 insertions(+), 25 deletions(-) diff --git a/.env b/.env index 32adc06e74..b162247399 100644 --- a/.env +++ b/.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='' diff --git a/.env.development b/.env.development index aa70982169..34e014efb0 100644 --- a/.env.development +++ b/.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='' diff --git a/.env.test b/.env.test index 34745fe206..b2e2ba7c34 100644 --- a/.env.test +++ b/.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' diff --git a/src/course-home/data/__factories__/courseHomeMetadata.factory.js b/src/course-home/data/__factories__/courseHomeMetadata.factory.js index ca9c8428dd..45fb489157 100644 --- a/src/course-home/data/__factories__/courseHomeMetadata.factory.js +++ b/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, diff --git a/src/course-home/data/__snapshots__/redux.test.js.snap b/src/course-home/data/__snapshots__/redux.test.js.snap index 1c0e269a84..c1999d8c08 100644 --- a/src/course-home/data/__snapshots__/redux.test.js.snap +++ b/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", diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx index 74fc267b62..502e9b666d 100644 --- a/src/courseware/course/Course.jsx +++ b/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 ( @@ -102,7 +102,7 @@ const Course = ({ )} {shouldDisplayTriggers && ( <> - {enableNewSidebar === 'true' ? : } + {isNewDiscussionSidebarViewEnabled ? : } )} diff --git a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.jsx b/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.jsx index 74d12a8ebe..fb5fb08416 100644 --- a/src/courseware/course/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.jsx +++ b/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 }); diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx index f6109c34fe..949a77f668 100644 --- a/src/courseware/course/sequence/Sequence.jsx +++ b/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' ? : + isNewDiscussionSidebarViewEnabled ? : )} @@ -199,7 +198,7 @@ const Sequence = ({ )} - {enableNewSidebar === 'true' ? : } + {isNewDiscussionSidebarViewEnabled ? : } 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)); } diff --git a/src/courseware/course/test-utils.jsx b/src/courseware/course/test-utils.jsx index f18a56b52a..9efa7e3cf6 100644 --- a/src/courseware/course/test-utils.jsx +++ b/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); diff --git a/src/index.jsx b/src/index.jsx index 7892399e39..f390cb3106 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -156,7 +156,6 @@ initialize({ DISCUSSIONS_MFE_BASE_URL: process.env.DISCUSSIONS_MFE_BASE_URL || null, ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME || null, ENABLE_JUMPNAV: process.env.ENABLE_JUMPNAV || null, - ENABLE_NEW_SIDEBAR: process.env.ENABLE_NEW_SIDEBAR || null, ENABLE_NOTICES: process.env.ENABLE_NOTICES || null, INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null, SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,