Skip to content

Commit 5af5916

Browse files
rpenidorpenido
committed
feat: make new unit outline design default and fix sidebar for Content Experiments
1 parent 3b4ae21 commit 5af5916

10 files changed

Lines changed: 101 additions & 24 deletions

File tree

‎.env‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,7 @@ ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=false
3737
ENABLE_TAGGING_TAXONOMY_PAGES=true
3838
ENABLE_CERTIFICATE_PAGE=true
3939
ENABLE_COURSE_IMPORT_IN_LIBRARY=false
40-
ENABLE_UNIT_PAGE_NEW_DESIGN=false
41-
ENABLE_COURSE_OUTLINE_NEW_DESIGN=false
40+
ENABLE_UNIT_PAGE_NEW_DESIGN=true
4241
BBB_LEARN_MORE_URL=''
4342
HOTJAR_APP_ID=''
4443
HOTJAR_VERSION=6

‎.env.development‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ ENABLE_ASSETS_PAGE=false
3838
ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
3939
ENABLE_CERTIFICATE_PAGE=true
4040
ENABLE_COURSE_IMPORT_IN_LIBRARY=true
41-
ENABLE_COURSE_OUTLINE_NEW_DESIGN=true
4241
ENABLE_UNIT_PAGE_NEW_DESIGN=true
4342
ENABLE_NEW_VIDEO_UPLOAD_PAGE=true
4443
ENABLE_TAGGING_TAXONOMY_PAGES=true

‎.env.test‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@ ENABLE_ASSETS_PAGE=false
3434
ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
3535
ENABLE_CERTIFICATE_PAGE=true
3636
ENABLE_COURSE_IMPORT_IN_LIBRARY=true
37-
ENABLE_COURSE_OUTLINE_NEW_DESIGN=false
38-
ENABLE_UNIT_PAGE_NEW_DESIGN=false
37+
ENABLE_UNIT_PAGE_NEW_DESIGN=true
3938
ENABLE_TAGGING_TAXONOMY_PAGES=true
4039
BBB_LEARN_MORE_URL=''
4140
INVITE_STUDENTS_EMAIL_TO="[email protected]"

‎src/course-unit/CourseUnit.test.tsx‎

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@ const RootWrapper = () => (
149149
describe('<CourseUnit />', () => {
150150
beforeEach(async () => {
151151
const mocks = initializeMocks();
152+
152153
window.scrollTo = jest.fn();
153154
global.localStorage.clear();
154155
store = mocks.reduxStore;
@@ -180,6 +181,10 @@ describe('<CourseUnit />', () => {
180181
});
181182

182183
it('render CourseUnit component correctly', async () => {
184+
setConfig({
185+
...getConfig(),
186+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
187+
});
183188
render(<RootWrapper />);
184189
const currentSectionName = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[1].display_name;
185190
const currentSubSectionName = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[1].display_name;
@@ -271,6 +276,10 @@ describe('<CourseUnit />', () => {
271276
});
272277

273278
it('closes legacy edit modal and updates course unit sidebar after saveEditedXBlockData message', async () => {
279+
setConfig({
280+
...getConfig(),
281+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
282+
});
274283
render(<RootWrapper />);
275284

276285
const xblocksIframe = await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
@@ -308,6 +317,10 @@ describe('<CourseUnit />', () => {
308317
});
309318

310319
it('updates course unit sidebar after receiving refreshPositions message', async () => {
320+
setConfig({
321+
...getConfig(),
322+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
323+
});
311324
render(<RootWrapper />);
312325

313326
const xblocksIframe = await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
@@ -341,6 +354,10 @@ describe('<CourseUnit />', () => {
341354

342355
it('checks whether xblock is removed when the corresponding delete button is clicked and the sidebar is the updated', async () => {
343356
const user = userEvent.setup();
357+
setConfig({
358+
...getConfig(),
359+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
360+
});
344361
render(<RootWrapper />);
345362

346363
const iframe = await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
@@ -513,6 +530,10 @@ describe('<CourseUnit />', () => {
513530
});
514531

515532
it('checks if xblock is a duplicate when the corresponding duplicate button is clicked and if the sidebar status is updated', async () => {
533+
setConfig({
534+
...getConfig(),
535+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
536+
});
516537
axiosMock
517538
.onGet(getCourseSectionVerticalApiUrl(blockId))
518539
.reply(200, {
@@ -1130,6 +1151,10 @@ describe('<CourseUnit />', () => {
11301151
});
11311152

11321153
it('renders course unit details for a draft with unpublished changes', async () => {
1154+
setConfig({
1155+
...getConfig(),
1156+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
1157+
});
11331158
render(<RootWrapper />);
11341159

11351160
await waitFor(() => {
@@ -1206,6 +1231,10 @@ describe('<CourseUnit />', () => {
12061231

12071232
it('should toggle visibility from sidebar and update course unit state accordingly', async () => {
12081233
const user = userEvent.setup();
1234+
setConfig({
1235+
...getConfig(),
1236+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
1237+
});
12091238
render(<RootWrapper />);
12101239
const courseUnitSidebar = await screen.findByTestId('course-unit-sidebar');
12111240

@@ -1298,6 +1327,10 @@ describe('<CourseUnit />', () => {
12981327

12991328
it('should publish course unit after click on the "Publish" button', async () => {
13001329
const user = userEvent.setup();
1330+
setConfig({
1331+
...getConfig(),
1332+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
1333+
});
13011334
render(<RootWrapper />);
13021335
let courseUnitSidebar;
13031336
let publishBtn;
@@ -1350,6 +1383,10 @@ describe('<CourseUnit />', () => {
13501383

13511384
it('should discard changes after click on the Discard changes button', async () => {
13521385
const user = userEvent.setup();
1386+
setConfig({
1387+
...getConfig(),
1388+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
1389+
});
13531390
render(<RootWrapper />);
13541391
let courseUnitSidebar;
13551392
let discardChangesBtn;
@@ -1425,6 +1462,10 @@ describe('<CourseUnit />', () => {
14251462
});
14261463

14271464
it('should toggle visibility from header configure modal and update course unit state accordingly', async () => {
1465+
setConfig({
1466+
...getConfig(),
1467+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
1468+
});
14281469
const user = userEvent.setup();
14291470
render(<RootWrapper />);
14301471
expect(
@@ -1524,6 +1565,13 @@ describe('<CourseUnit />', () => {
15241565
});
15251566

15261567
describe('Copy paste functionality', () => {
1568+
beforeEach(() => {
1569+
setConfig({
1570+
...getConfig(),
1571+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
1572+
});
1573+
});
1574+
15271575
it('should copy a unit, paste it as a new unit, and update the course section vertical data', async () => {
15281576
const user = userEvent.setup();
15291577
render(<RootWrapper />);
@@ -2320,17 +2368,31 @@ describe('<CourseUnit />', () => {
23202368
});
23212369
});
23222370

2323-
it('should display visibility modal correctly', async () => (
2324-
checkRenderVisibilityModal('libraryContentAccess')
2325-
));
2371+
it('should display visibility modal correctly', async () => {
2372+
setConfig({
2373+
...getConfig(),
2374+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
2375+
});
2376+
await checkRenderVisibilityModal('libraryContentAccess');
2377+
});
23262378

2327-
it('opens legacy edit modal on edit button click', checkLegacyEditModalOnEditMessage);
2379+
it('opens legacy edit modal on edit button click', async () => {
2380+
setConfig({
2381+
...getConfig(),
2382+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
2383+
});
2384+
await checkLegacyEditModalOnEditMessage();
2385+
});
23282386
});
23292387

23302388
describe('Split Test Content page', () => {
23312389
const newUnitId = '12345';
23322390

23332391
beforeEach(async () => {
2392+
setConfig({
2393+
...getConfig(),
2394+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
2395+
});
23342396
axiosMock
23352397
.onGet(getCourseSectionVerticalApiUrl(blockId))
23362398
.reply(200, {
@@ -2524,6 +2586,7 @@ describe('<CourseUnit />', () => {
25242586
setConfig({
25252587
...getConfig(),
25262588
ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
2589+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
25272590
});
25282591
render(<RootWrapper />);
25292592

‎src/course-unit/header-navigations/HeaderNavigations.test.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,6 @@ describe('<HeaderNavigations />', () => {
108108
});
109109

110110
it('click Add button should open add sidebar', async () => {
111-
setConfig({
112-
...getConfig(),
113-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
114-
});
115-
116111
const user = userEvent.setup();
117112
renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id });
118113

‎src/course-unit/header-title/HeaderTitle.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import MockAdapter from 'axios-mock-adapter';
22
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
3+
import { getConfig, setConfig } from '@edx/frontend-platform';
34
import { initializeMocks, render, screen } from '@src/testUtils';
45
import userEvent from '@testing-library/user-event';
56
import { executeThunk } from '@src/utils';
@@ -47,6 +48,10 @@ describe('<HeaderTitle />', () => {
4748
});
4849

4950
it('render HeaderTitle component correctly', () => {
51+
setConfig({
52+
...getConfig(),
53+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
54+
});
5055
renderComponent();
5156

5257
expect(screen.getByText(unitTitle)).toBeInTheDocument();
@@ -55,6 +60,10 @@ describe('<HeaderTitle />', () => {
5560
});
5661

5762
it('render HeaderTitle with open edit form', () => {
63+
setConfig({
64+
...getConfig(),
65+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
66+
});
5867
renderComponent({
5968
isTitleEditFormOpen: true,
6069
});
@@ -66,6 +75,10 @@ describe('<HeaderTitle />', () => {
6675
});
6776

6877
it('Units sourced from upstream show a enabled edit button', async () => {
78+
setConfig({
79+
...getConfig(),
80+
ENABLE_UNIT_PAGE_NEW_DESIGN: false,
81+
});
6982
// Override mock unit with one sourced from an upstream library
7083
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
7184
axiosMock

‎src/course-unit/unit-sidebar/UnitSidebarContext.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@ interface UnitSidebarContextData {
2929
readOnly: boolean;
3030
/*
3131
* There are other blocks that use the same unit screen and sidebars.
32-
* For example: Conditional block.
32+
* For example: Conditional block, Content Experiments block.
3333
*/
3434
isVertical: boolean;
35+
currentItemCategory?: string;
3536
}
3637

3738
const UnitSidebarContext = createContext<UnitSidebarContextData | undefined>(undefined);
@@ -55,7 +56,8 @@ export const UnitSidebarProvider = ({
5556
const [isOpen, open, , toggle] = useToggle(true);
5657

5758
const currentItemData = useSelector(getCourseUnitData);
58-
const isVertical = currentItemData?.category === 'vertical';
59+
const currentItemCategory = currentItemData?.category;
60+
const isVertical = currentItemCategory === 'vertical';
5961

6062
const setCurrentPageKey = useCallback(/* istanbul ignore next */ (
6163
pageKey?: UnitSidebarPageKeys,
@@ -92,6 +94,7 @@ export const UnitSidebarProvider = ({
9294
toggle,
9395
readOnly,
9496
isVertical,
97+
currentItemCategory,
9598
}),
9699
[
97100
currentPageKey,
@@ -105,6 +108,7 @@ export const UnitSidebarProvider = ({
105108
toggle,
106109
readOnly,
107110
isVertical,
111+
currentItemCategory,
108112
],
109113
);
110114

‎src/course-unit/unit-sidebar/UnitSidebarPagesContext.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export type UnitSidebarPages = {
1616
align?: SidebarPage;
1717
};
1818

19-
const getUnitSidebarPages = (readOnly: boolean, hasComponentSelected: boolean) => {
19+
const getUnitSidebarPages = (readOnly: boolean, disableAdd: boolean) => {
2020
const showAlignSidebar = getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true';
2121

2222
return {
@@ -30,8 +30,8 @@ const getUnitSidebarPages = (readOnly: boolean, hasComponentSelected: boolean) =
3030
component: AddSidebar,
3131
icon: Plus,
3232
title: messages.sidebarButtonAdd,
33-
disabled: hasComponentSelected,
34-
tooltip: hasComponentSelected ? messages.sidebarDisabledAddTooltip : undefined,
33+
disabled: disableAdd,
34+
tooltip: disableAdd ? messages.sidebarDisabledAddTooltip : undefined,
3535
},
3636
}),
3737
...(showAlignSidebar && {
@@ -81,12 +81,18 @@ type UnitSidebarPagesProviderProps = {
8181
};
8282

8383
export const UnitSidebarPagesProvider = ({ children }: UnitSidebarPagesProviderProps) => {
84-
const { readOnly, selectedComponentId } = useUnitSidebarContext();
84+
const {
85+
readOnly,
86+
selectedComponentId,
87+
currentItemCategory,
88+
} = useUnitSidebarContext();
8589

8690
const hasComponentSelected = selectedComponentId !== undefined;
91+
const isSplitTest = currentItemCategory === 'split_test';
92+
const disableAdd = hasComponentSelected || isSplitTest;
8793

8894
const sidebarPages = useMemo(
89-
() => getUnitSidebarPages(readOnly, hasComponentSelected),
95+
() => getUnitSidebarPages(readOnly, disableAdd),
9096
[readOnly, hasComponentSelected],
9197
);
9298

‎src/course-unit/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,5 +47,5 @@ export const subsectionFirstUnitEditUrl = (
4747
};
4848

4949
export const isUnitPageNewDesignEnabled = () => (
50-
getConfig().ENABLE_UNIT_PAGE_NEW_DESIGN?.toString().toLowerCase() === 'true'
50+
(getConfig().ENABLE_UNIT_PAGE_NEW_DESIGN?.toString().toLowerCase() ?? 'true') === 'true'
5151
);

‎src/index.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -184,8 +184,7 @@ initialize({
184184
process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN || 'false',
185185
ENABLE_CERTIFICATE_PAGE: process.env.ENABLE_CERTIFICATE_PAGE || 'false',
186186
ENABLE_COURSE_IMPORT_IN_LIBRARY: process.env.ENABLE_COURSE_IMPORT_IN_LIBRARY || 'false',
187-
ENABLE_UNIT_PAGE_NEW_DESIGN: process.env.ENABLE_UNIT_PAGE_NEW_DESIGN || 'false',
188-
ENABLE_COURSE_OUTLINE_NEW_DESIGN: process.env.ENABLE_COURSE_OUTLINE_NEW_DESIGN || 'false',
187+
ENABLE_UNIT_PAGE_NEW_DESIGN: process.env.ENABLE_UNIT_PAGE_NEW_DESIGN || 'true',
189188
ENABLE_TAGGING_TAXONOMY_PAGES: process.env.ENABLE_TAGGING_TAXONOMY_PAGES || 'false',
190189
ENABLE_CHECKLIST_QUALITY: process.env.ENABLE_CHECKLIST_QUALITY || 'true',
191190
ENABLE_GRADING_METHOD_IN_PROBLEMS: process.env.ENABLE_GRADING_METHOD_IN_PROBLEMS === 'true',

0 commit comments

Comments
 (0)