Skip to content

Commit 62d2501

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

9 files changed

Lines changed: 26 additions & 94 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: 5 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2331,6 +2331,10 @@ describe('<CourseUnit />', () => {
23312331
const newUnitId = '12345';
23322332

23332333
beforeEach(async () => {
2334+
setConfig({
2335+
...getConfig(),
2336+
ENABLE_UNIT_PAGE_NEW_DESIGN: 'false',
2337+
});
23342338
axiosMock
23352339
.onGet(getCourseSectionVerticalApiUrl(blockId))
23362340
.reply(200, {
@@ -2524,6 +2528,7 @@ describe('<CourseUnit />', () => {
25242528
setConfig({
25252529
...getConfig(),
25262530
ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
2531+
ENABLE_UNIT_PAGE_NEW_DESIGN: 'false',
25272532
});
25282533
render(<RootWrapper />);
25292534

@@ -2567,10 +2572,6 @@ describe('<CourseUnit />', () => {
25672572
});
25682573

25692574
it('renders new unit info/settings sidebar', async () => {
2570-
setConfig({
2571-
...getConfig(),
2572-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2573-
});
25742575
const user = userEvent.setup();
25752576
render(<RootWrapper />);
25762577

@@ -2595,10 +2596,6 @@ describe('<CourseUnit />', () => {
25952596
});
25962597

25972598
it('displays the live state in the status bar', async () => {
2598-
setConfig({
2599-
...getConfig(),
2600-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2601-
});
26022599
axiosMock
26032600
.onGet(getCourseSectionVerticalApiUrl(blockId))
26042601
.reply(200, {
@@ -2614,10 +2611,6 @@ describe('<CourseUnit />', () => {
26142611
});
26152612

26162613
it('should change the visibility of the unit in the settings sidebar', async () => {
2617-
setConfig({
2618-
...getConfig(),
2619-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2620-
});
26212614
const user = userEvent.setup();
26222615
render(<RootWrapper />);
26232616

@@ -2691,11 +2684,6 @@ describe('<CourseUnit />', () => {
26912684
});
26922685

26932686
it('displays the staff only state in the status bar', async () => {
2694-
setConfig({
2695-
...getConfig(),
2696-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2697-
});
2698-
26992687
axiosMock
27002688
.onGet(getCourseSectionVerticalApiUrl(blockId))
27012689
.reply(200, {
@@ -2715,10 +2703,6 @@ describe('<CourseUnit />', () => {
27152703

27162704
it('should disable discussions in the settings sidebar', async () => {
27172705
const user = userEvent.setup();
2718-
setConfig({
2719-
...getConfig(),
2720-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2721-
});
27222706
render(<RootWrapper />);
27232707

27242708
axiosMock
@@ -2764,10 +2748,6 @@ describe('<CourseUnit />', () => {
27642748
it('should update the group access in the unit sidebar', async () => {
27652749
const user = userEvent.setup();
27662750

2767-
setConfig({
2768-
...getConfig(),
2769-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2770-
});
27712751
render(<RootWrapper />);
27722752

27732753
axiosMock
@@ -2843,10 +2823,6 @@ describe('<CourseUnit />', () => {
28432823
});
28442824

28452825
it('should one group in the visibility field in the unit sidebar', async () => {
2846-
setConfig({
2847-
...getConfig(),
2848-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2849-
});
28502826
render(<RootWrapper />);
28512827

28522828
axiosMock
@@ -2898,10 +2874,6 @@ describe('<CourseUnit />', () => {
28982874
});
28992875

29002876
it('should multiple groups in the visibility field in the unit sidebar', async () => {
2901-
setConfig({
2902-
...getConfig(),
2903-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2904-
});
29052877
render(<RootWrapper />);
29062878

29072879
axiosMock
@@ -2958,10 +2930,6 @@ describe('<CourseUnit />', () => {
29582930
});
29592931

29602932
it('should render never published state in the unit sidebar', async () => {
2961-
setConfig({
2962-
...getConfig(),
2963-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2964-
});
29652933
render(<RootWrapper />);
29662934

29672935
axiosMock
@@ -2988,10 +2956,6 @@ describe('<CourseUnit />', () => {
29882956
});
29892957

29902958
it('displays the scheduled state in the status bar', async () => {
2991-
setConfig({
2992-
...getConfig(),
2993-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
2994-
});
29952959
axiosMock
29962960
.onGet(getCourseSectionVerticalApiUrl(blockId))
29972961
.reply(200, {
@@ -3008,10 +2972,6 @@ describe('<CourseUnit />', () => {
30082972
});
30092973

30102974
it('displays the draft changes state in the status bar', async () => {
3011-
setConfig({
3012-
...getConfig(),
3013-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
3014-
});
30152975
axiosMock
30162976
.onGet(getCourseSectionVerticalApiUrl(blockId))
30172977
.reply(200, {
@@ -3028,10 +2988,6 @@ describe('<CourseUnit />', () => {
30282988
});
30292989

30302990
it('displays discussions enabled label in the status bar', async () => {
3031-
setConfig({
3032-
...getConfig(),
3033-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
3034-
});
30352991
axiosMock
30362992
.onGet(getCourseSectionVerticalApiUrl(blockId))
30372993
.reply(200, {
@@ -3047,10 +3003,6 @@ describe('<CourseUnit />', () => {
30473003
});
30483004

30493005
it('displays group access with one group in the status bar', async () => {
3050-
setConfig({
3051-
...getConfig(),
3052-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
3053-
});
30543006
axiosMock
30553007
.onGet(getCourseSectionVerticalApiUrl(blockId))
30563008
.reply(200, {
@@ -3094,10 +3046,6 @@ describe('<CourseUnit />', () => {
30943046
});
30953047

30963048
it('displays group access with multiple groups in the status bar', async () => {
3097-
setConfig({
3098-
...getConfig(),
3099-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
3100-
});
31013049
axiosMock
31023050
.onGet(getCourseSectionVerticalApiUrl(blockId))
31033051
.reply(200, {
@@ -3144,7 +3092,6 @@ describe('<CourseUnit />', () => {
31443092
setConfig({
31453093
...getConfig(),
31463094
ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
3147-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
31483095
});
31493096

31503097
render(<RootWrapper />);
@@ -3175,11 +3122,6 @@ describe('<CourseUnit />', () => {
31753122
};
31763123

31773124
beforeEach(async () => {
3178-
setConfig({
3179-
...getConfig(),
3180-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
3181-
});
3182-
31833125
// The Meilisearch client-side API uses fetch, not Axios.
31843126
fetchMock.mockReset();
31853127
fetchMock.post(searchEndpoint, (_url, req) => {
@@ -3430,10 +3372,6 @@ describe('<CourseUnit />', () => {
34303372
});
34313373

34323374
it('not render add sidebar in units from libraries (read-only)', async () => {
3433-
setConfig({
3434-
...getConfig(),
3435-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
3436-
});
34373375
render(<RootWrapper />);
34383376

34393377
axiosMock
@@ -3466,11 +3404,6 @@ describe('<CourseUnit />', () => {
34663404
});
34673405

34683406
it('opens the component info sidebar on postMessage event', async () => {
3469-
setConfig({
3470-
...getConfig(),
3471-
ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
3472-
});
3473-
34743407
axiosMock
34753408
.onGet(getXBlockApiUrl(mockContentData.textXBlock))
34763409
.reply(200, mockContentData.textXBlockData);
@@ -3498,7 +3431,6 @@ describe('<CourseUnit />', () => {
34983431

34993432
// eslint-disable-next-line @typescript-eslint/no-explicit-any
35003433
const renderComponentSidebar = async (data: any = componentData) => {
3501-
setConfig({ ...getConfig(), ENABLE_UNIT_PAGE_NEW_DESIGN: 'true' });
35023434
axiosMock.onGet(getXBlockApiUrl(componentId)).reply(200, data);
35033435
render(<RootWrapper />);
35043436
await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);
@@ -3637,7 +3569,6 @@ describe('<CourseUnit />', () => {
36373569

36383570
// eslint-disable-next-line @typescript-eslint/no-explicit-any
36393571
const renderUnitInfoSidebar = async (itemData: any = unitItemData) => {
3640-
setConfig({ ...getConfig(), ENABLE_UNIT_PAGE_NEW_DESIGN: 'true' });
36413572
axiosMock.onGet(getXBlockApiUrl(unitId)).reply(200, itemData);
36423573
render(<RootWrapper />);
36433574
// Wait for the Details tab which is unique to the new unit info sidebar

‎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/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)