Andal.LND/frontend-app-learning
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: added course level isNewDiscussionSidebarViewEnabled flag

* test: fixed notification widget test cases
This commit is contained in:
Awais Ansari
2024-04-29 16:14:08 +05:00
committed by GitHub
parent 72381a783b
commit cf3a91dde0
11 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env
View File

@@ -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=''

1
.env.development
View File

@@ -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=''

1
.env.test
View File

@@ -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'

1
src/course-home/data/__factories__/courseHomeMetadata.factory.js
View File

@@ -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,

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

@@ -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",

6
src/courseware/course/Course.jsx
View File

@@ -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>

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

@@ -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 });

7
src/courseware/course/sequence/Sequence.jsx
View File

@@ -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"

10
src/courseware/course/sequence/sequence-navigation/hooks.js
View File

@@ -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));
}

9
src/courseware/course/test-utils.jsx
View File

@@ -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);

1
src/index.jsx
View File

@@ -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,