Skip to content

Commit 915bd55

Browse files
navinkarkeranavinkarkera
authored
feat: disable drag handles for children of library imported containers in course outline [FC-0097] (#2311)
* Hides/disables drag handles for children components of containers imported from library. * Disables move, delete and duplicate options for children components. * Move up and down option skips containers that cannot accept children (imported from library). * Authors cannot drag and drop xblocks under containers imported from library. * Improves drag-n-drop by creating a representational drag overlay.
1 parent 00ce3d7 commit 915bd55

15 files changed

+2008
-485
lines changed

‎src/course-outline/CourseOutline.test.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1767,7 +1767,7 @@ describe('<CourseOutline />', () => {
17671767
.reply(200, { dummy: 'value' });
17681768
const expectedSection = moveSubsection([
17691769
...courseOutlineIndexMock.courseStructure.childInfo.children,
1770-
], 0, 0, 1)[0][0];
1770+
] as unknown as XBlock[], 0, 0, 1)[0][0];
17711771
axiosMock
17721772
.onGet(getXBlockApiUrl(section.id))
17731773
.reply(200, expectedSection);
@@ -1805,7 +1805,7 @@ describe('<CourseOutline />', () => {
18051805
.reply(200, { dummy: 'value' });
18061806
const expectedSections = moveSubsectionOver([
18071807
...courseOutlineIndexMock.courseStructure.childInfo.children,
1808-
], 1, 0, 0, firstSection.childInfo.children.length + 1)[0];
1808+
] as unknown as XBlock[], 1, 0, 0, firstSection.childInfo.children.length + 1)[0];
18091809
axiosMock
18101810
.onGet(getXBlockApiUrl(firstSection.id))
18111811
.reply(200, expectedSections[0]);
@@ -1842,7 +1842,7 @@ describe('<CourseOutline />', () => {
18421842
.reply(200, { dummy: 'value' });
18431843
const expectedSections = moveSubsectionOver([
18441844
...courseOutlineIndexMock.courseStructure.childInfo.children,
1845-
], 0, lastSubsectionIdx, 1, 0)[0];
1845+
] as unknown as XBlock[], 0, lastSubsectionIdx, 1, 0)[0];
18461846
axiosMock
18471847
.onGet(getXBlockApiUrl(section.id))
18481848
.reply(200, expectedSections[0]);
@@ -1929,7 +1929,9 @@ describe('<CourseOutline />', () => {
19291929
axiosMock
19301930
.onPut(getCourseItemApiUrl(store.getState().courseOutline.sectionsList[1].childInfo.children[1].id))
19311931
.reply(200, { dummy: 'value' });
1932-
const expectedSection = moveUnit([...courseOutlineIndexMock.courseStructure.childInfo.children], 1, 1, 0, 1)[0][1];
1932+
const expectedSection = moveUnit([
1933+
...courseOutlineIndexMock.courseStructure.childInfo.children,
1934+
] as unknown as XBlock[], 1, 1, 0, 1)[0][1];
19331935
axiosMock
19341936
.onGet(getXBlockApiUrl(section.id))
19351937
.reply(200, expectedSection);
@@ -1970,7 +1972,7 @@ describe('<CourseOutline />', () => {
19701972
.reply(200, { dummy: 'value' });
19711973
const expectedSections = moveUnitOver([
19721974
...courseOutlineIndexMock.courseStructure.childInfo.children,
1973-
], 1, 1, 0, 1, 0, firstSubsection.childInfo.children.length)[0];
1975+
] as unknown as XBlock[], 1, 1, 0, 1, 0, firstSubsection.childInfo.children.length)[0];
19741976
axiosMock
19751977
.onGet(getXBlockApiUrl(section.id))
19761978
.reply(200, expectedSections[1]);
@@ -2004,7 +2006,7 @@ describe('<CourseOutline />', () => {
20042006
.onPut(getCourseItemApiUrl(firstSectionLastSubsection.id))
20052007
.reply(200, { dummy: 'value' });
20062008
const expectedSections = moveUnitOver(
2007-
[...courseOutlineIndexMock.courseStructure.childInfo.children],
2009+
[...courseOutlineIndexMock.courseStructure.childInfo.children] as unknown as XBlock[],
20082010
1,
20092011
0,
20102012
0,
@@ -2050,7 +2052,7 @@ describe('<CourseOutline />', () => {
20502052
.reply(200, { dummy: 'value' });
20512053
const expectedSections = moveUnitOver([
20522054
...courseOutlineIndexMock.courseStructure.childInfo.children,
2053-
], 1, 0, lastUnitIdx, 1, 1, 0)[0];
2055+
] as unknown as XBlock[], 1, 0, lastUnitIdx, 1, 1, 0)[0];
20542056
axiosMock
20552057
.onGet(getXBlockApiUrl(section.id))
20562058
.reply(200, expectedSections[1]);
@@ -2086,7 +2088,7 @@ describe('<CourseOutline />', () => {
20862088
.onPut(getCourseItemApiUrl(thirdSectionFirstSubsection.id))
20872089
.reply(200, { dummy: 'value' });
20882090
const expectedSections = moveUnitOver(
2089-
[...courseOutlineIndexMock.courseStructure.childInfo.children],
2091+
[...courseOutlineIndexMock.courseStructure.childInfo.children] as unknown as XBlock[],
20902092
1,
20912093
lastSubIndex,
20922094
lastUnitIdx,
@@ -2173,7 +2175,7 @@ describe('<CourseOutline />', () => {
21732175
.reply(200, { dummy: 'value' });
21742176
const expectedSection = moveSubsection([
21752177
...courseOutlineIndexMock.courseStructure.childInfo.children,
2176-
], 0, 1, 0)[0][0];
2178+
] as unknown as XBlock[], 0, 1, 0)[0][0];
21772179
axiosMock
21782180
.onGet(getXBlockApiUrl(section.id))
21792181
.reply(200, expectedSection);
@@ -2236,7 +2238,7 @@ describe('<CourseOutline />', () => {
22362238
axiosMock
22372239
.onPut(getCourseItemApiUrl(subsection.id))
22382240
.reply(200, { dummy: 'value' });
2239-
const expectedSection = moveUnit([...sections], 2, 0, 1, 0)[0][2];
2241+
const expectedSection = moveUnit([...sections] as unknown as XBlock[], 2, 0, 1, 0)[0][2];
22402242
axiosMock
22412243
.onGet(getXBlockApiUrl(section.id))
22422244
.reply(200, expectedSection);
@@ -2270,7 +2272,7 @@ describe('<CourseOutline />', () => {
22702272
axiosMock
22712273
.onPut(getCourseItemApiUrl(subsection.id))
22722274
.reply(500);
2273-
const expectedSection = moveUnit([...sections], 2, 0, 1, 0)[0][2];
2275+
const expectedSection = moveUnit([...sections] as unknown as XBlock[], 2, 0, 1, 0)[0][2];
22742276
axiosMock
22752277
.onGet(getXBlockApiUrl(section.id))
22762278
.reply(200, expectedSection);

‎src/course-outline/drag-helper/CourseItemOverlay.tsx

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { Col, Icon, Row } from '@openedx/paragon';
2+
import { ArrowRight, DragIndicator } from '@openedx/paragon/icons';
3+
import { ContainerType } from '@src/generic/key-utils';
4+
import { getItemStatusBorder } from '../utils';
5+
6+
interface ItemProps {
7+
displayName: string;
8+
status: string;
9+
}
10+
11+
interface CourseItemOverlayProps extends ItemProps {
12+
category: string;
13+
}
14+
15+
const commonStyle = {
16+
padding: '1rem 1.5rem',
17+
marginBottom: '1.5rem',
18+
borderRadius: '0.35rem',
19+
boxShadow: '0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)',
20+
};
21+
22+
const DragIndicatorBtn = () => (
23+
<button
24+
key="drag-to-reorder-icon"
25+
className="btn-icon btn-icon-secondary btn-icon-md"
26+
type="button"
27+
>
28+
<span className="btn-icon__icon-container">
29+
<Icon src={DragIndicator} />
30+
</span>
31+
</button>
32+
);
33+
34+
const SectionCard = ({ status, displayName }: ItemProps) => {
35+
const style = {
36+
...commonStyle,
37+
paddingTop: '2rem',
38+
paddingBottom: '5rem',
39+
...getItemStatusBorder(status),
40+
};
41+
42+
return (
43+
<Row
44+
style={style}
45+
className="mx-0 bg-white"
46+
>
47+
<Col className="extend-margin px-0">
48+
<div className="item-card-header h3">
49+
<Icon src={ArrowRight} className="mr-2" />
50+
{displayName}
51+
</div>
52+
</Col>
53+
<DragIndicatorBtn />
54+
</Row>
55+
);
56+
};
57+
58+
const SubsectionCard = ({ status, displayName }: ItemProps) => {
59+
const style = {
60+
...commonStyle,
61+
paddingTop: '1rem',
62+
paddingBottom: '2.5rem',
63+
...getItemStatusBorder(status),
64+
};
65+
66+
return (
67+
<Row
68+
style={style}
69+
className="mx-0 bg-light-200"
70+
>
71+
<Col className="extend-margin px-0">
72+
<div className="item-card-header h4 pt-2">
73+
<Icon src={ArrowRight} className="mr-2" />
74+
{displayName}
75+
</div>
76+
</Col>
77+
<DragIndicatorBtn />
78+
</Row>
79+
);
80+
};
81+
82+
const UnitCard = ({ status, displayName }: ItemProps) => {
83+
const style = {
84+
...commonStyle,
85+
paddingBottom: '1.5rem',
86+
...getItemStatusBorder(status),
87+
};
88+
89+
return (
90+
<Row
91+
style={style}
92+
className="mx-0 bg-white"
93+
>
94+
<Col className="extend-margin px-0">
95+
<div className="item-card-header h5 pt-3">
96+
{displayName}
97+
</div>
98+
</Col>
99+
<DragIndicatorBtn />
100+
</Row>
101+
);
102+
};
103+
104+
const CourseItemOverlay = ({ category, displayName, status }: CourseItemOverlayProps) => {
105+
switch (category) {
106+
case ContainerType.Chapter:
107+
return <SectionCard displayName={displayName} status={status} />;
108+
case ContainerType.Sequential:
109+
return <SubsectionCard displayName={displayName} status={status} />;
110+
case ContainerType.Vertical:
111+
return <UnitCard displayName={displayName} status={status} />;
112+
default:
113+
throw new Error(`Invalid course item type: ${category}`);
114+
}
115+
};
116+
117+
export default CourseItemOverlay;

‎src/course-outline/drag-helper/DragContextProvider.jsx

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎src/course-outline/drag-helper/DragContextProvider.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { UniqueIdentifier } from '@dnd-kit/core';
2+
import React from 'react';
3+
4+
interface DragContextProviderProps {
5+
activeId: UniqueIdentifier | null,
6+
overId: UniqueIdentifier | null,
7+
children?: React.ReactNode,
8+
}
9+
10+
export const DragContext = React.createContext<DragContextProviderProps>({
11+
activeId: null,
12+
overId: null,
13+
children: null,
14+
});
15+
16+
const DragContextProvider = ({ activeId, overId, children }: DragContextProviderProps) => {
17+
const contextValue = React.useMemo(() => ({
18+
activeId,
19+
overId,
20+
}), [activeId, overId]);
21+
return (
22+
<DragContext.Provider
23+
value={contextValue}
24+
>
25+
{children}
26+
</DragContext.Provider>
27+
);
28+
};
29+
30+
export default DragContextProvider;

0 commit comments

Comments
 (0)