Skip to content

Commit 3813afd

Browse files
rpenidorpenido
committed
feat: wip
1 parent e95758c commit 3813afd

File tree

9 files changed

+118
-36
lines changed

9 files changed

+118
-36
lines changed

‎src/course-outline/CourseOutline.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@
88
@import "./publish-modal/PublishModal";
99
@import "./xblock-status/XBlockStatus";
1010
@import "./drag-helper/SortableItem";
11+
@import "./outline-sidebar";

‎src/course-outline/CourseOutline.tsx‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { useState, useEffect, useCallback } from 'react';
22
import { useIntl } from '@edx/frontend-platform/i18n';
33
import {
44
Container,
5-
Layout,
65
Row,
6+
Stack,
77
TransitionReplace,
88
Toast,
99
StandardModal,
@@ -331,17 +331,11 @@ const CourseOutline = ({ courseId }: CourseOutlineProps) => {
331331
/>
332332
)}
333333
/>
334-
<Layout
335-
lg={[{ span: 9 }, { span: 3 }]}
336-
md={[{ span: 9 }, { span: 3 }]}
337-
sm={[{ span: 12 }, { span: 12 }]}
338-
xs={[{ span: 12 }, { span: 12 }]}
339-
xl={[{ span: 9 }, { span: 3 }]}
340-
>
341-
<Layout.Element>
334+
<div className="d-flex align-items-baseline flex-wrap">
335+
<div className="flex-fill">
342336
<article>
343337
<div>
344-
<section className="course-outline-section">
338+
<section>
345339
<StatusBar
346340
courseId={courseId}
347341
isLoading={isLoading}
@@ -489,15 +483,13 @@ const CourseOutline = ({ courseId }: CourseOutlineProps) => {
489483
</section>
490484
</div>
491485
</article>
492-
</Layout.Element>
493-
<Layout.Element>
494-
<CourseAuthoringOutlineSidebarSlot
495-
courseId={courseId}
496-
courseName={courseName}
497-
sections={sections}
498-
/>
499-
</Layout.Element>
500-
</Layout>
486+
</div>
487+
<CourseAuthoringOutlineSidebarSlot
488+
courseId={courseId}
489+
courseName={courseName}
490+
sections={sections}
491+
/>
492+
</div>
501493
<EnableHighlightsModal
502494
isOpen={isEnableHighlightsModalOpen}
503495
close={closeEnableHighlightsModal}

src/course-outline/outline-sidebar/OutlineSidebar.test.jsx renamed to src/course-outline/outline-sidebar/OutlineHelpSidebar.test.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
// @ts-check
21
import { initializeMocks, render, waitFor } from '../../testUtils';
32
import { helpUrls } from '../../help-urls/__mocks__';
43
import { getHelpUrlsApiUrl } from '../../help-urls/data/api';
5-
import OutlineSidebar from './OutlineSidebar';
4+
import OutlineHelpSidebar from './OutlineHelpSidebar';
65
import messages from './messages';
76

87
jest.mock('@edx/frontend-platform/i18n', () => ({
@@ -16,7 +15,7 @@ let axiosMock;
1615
const mockPathname = '/foo-bar';
1716
const courseId = '123';
1817

19-
const renderComponent = (props) => render(<OutlineSidebar courseId={courseId} {...props} />, { path: mockPathname });
18+
const renderComponent = () => render(<OutlineHelpSidebar courseId={courseId} />, { path: mockPathname });
2019

2120
describe('<OutlineSidebar />', () => {
2221
beforeEach(() => {

src/course-outline/outline-sidebar/OutlineSidebar.jsx renamed to src/course-outline/outline-sidebar/OutlineHelpSidebar.tsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
31
import { Hyperlink } from '@openedx/paragon';
42
import { useIntl } from '@edx/frontend-platform/i18n';
53

6-
import { HelpSidebar } from '../../generic/help-sidebar';
7-
import { useHelpUrls } from '../../help-urls/hooks';
4+
import { HelpSidebar } from '@src/generic/help-sidebar';
5+
import { useHelpUrls } from '@src/help-urls/hooks';
6+
87
import { getFormattedSidebarMessages } from './utils';
98

10-
const OutlineSideBar = ({ courseId }) => {
9+
interface OutlineHelpSidebarProps {
10+
courseId: string;
11+
}
12+
13+
const OutlineHelpSideBar = ({ courseId }: OutlineHelpSidebarProps) => {
1114
const intl = useIntl();
1215
const {
1316
visibility: learnMoreVisibilityUrl,
@@ -40,7 +43,7 @@ const OutlineSideBar = ({ courseId }) => {
4043
{descriptions.map((description) => (
4144
<p className="help-sidebar-about-descriptions" key={description}>{description}</p>
4245
))}
43-
{Boolean(link) && Boolean(link.href) && (
46+
{!!link?.href && (
4447
<Hyperlink
4548
className="small"
4649
destination={link.href}
@@ -58,8 +61,4 @@ const OutlineSideBar = ({ courseId }) => {
5861
);
5962
};
6063

61-
OutlineSideBar.propTypes = {
62-
courseId: PropTypes.string.isRequired,
63-
};
64-
65-
export default OutlineSideBar;
64+
export default OutlineHelpSideBar;

‎src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useGetBlockTypes } from '@src/search-manager';
2+
3+
const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => {
4+
const { data } = useGetBlockTypes(
5+
[`context_key = "${courseId}"`],
6+
);
7+
8+
return (
9+
<pre>
10+
{JSON.stringify(data, null, 2)}
11+
</pre>
12+
);
13+
};
14+
15+
export default OutlineInfoSidebar;

‎src/course-outline/outline-sidebar/OutlineSidebar.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { useState } from 'react';
2+
import {
3+
IconButton,
4+
IconButtonToggle,
5+
Stack,
6+
breakpoints,
7+
} from '@openedx/paragon';
8+
import { Close, Help, Info } from '@openedx/paragon/icons';
9+
import { useMediaQuery } from 'react-responsive';
10+
11+
import { useWaffleFlags } from '@src/data/apiHooks';
12+
13+
import OutlineHelpSidebar from './OutlineHelpSidebar';
14+
import OutlineInfoSidebar from './OutlineInfoSidebar';
15+
16+
interface OutlineSideBarProps {
17+
courseId: string;
18+
}
19+
20+
const COMPONENTS = {
21+
help: OutlineHelpSidebar,
22+
info: OutlineInfoSidebar,
23+
};
24+
25+
const OutlineSideBar = ({ courseId }: OutlineSideBarProps) => {
26+
const { tempWaffleFlag } = useWaffleFlags();
27+
const [currentTab, setCurrentTab] = useState('info');
28+
const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });
29+
30+
// Returns the previous help sidebar component if the waffle flag is disabled
31+
if (!tempWaffleFlag) {
32+
// On screens smaller than medium, the help sidebar is shown below the course outline
33+
const colSpan = isMedium ? 'col-12' : 'col-3';
34+
return (
35+
<div className={colSpan}>
36+
<OutlineHelpSidebar courseId={courseId} />
37+
</div>
38+
);
39+
}
40+
41+
const SidebarComponent = COMPONENTS[currentTab];
42+
43+
return (
44+
<Stack direction="horizontal" className="align-items-baseline px-3">
45+
{!!currentTab && (
46+
<div className="mw-300px">
47+
<SidebarComponent courseId={courseId} />
48+
</div>
49+
)}
50+
<div className="sidebar-toggle">
51+
<IconButtonToggle
52+
activeValue={currentTab}
53+
onChange={setCurrentTab}
54+
>
55+
<IconButton src={Close} alt="Close" />
56+
<IconButton value="info" src={Info} alt="Help" />
57+
<IconButton value="help" src={Help} alt="Help" />
58+
</IconButtonToggle>
59+
</div>
60+
</Stack>
61+
);
62+
};
63+
64+
export default OutlineSideBar;

‎src/course-outline/outline-sidebar/index.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.sidebar-toggle {
2+
.pgn__icon-button-toggle__container {
3+
flex-direction: column;
4+
align-items: flex-center;
5+
6+
.btn-icon + .btn-icon {
7+
margin-top: var(--pgn-spacing-spacer-1);
8+
margin-inline-start: unset;
9+
}
10+
}
11+
}

‎src/data/api.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export const waffleFlagDefaults = {
6161
useNewGroupConfigurationsPage: true,
6262
useReactMarkdownEditor: true,
6363
useVideoGalleryFlow: false,
64+
tempWaffleFlag: true, // FIXME: update this to false once we have the feature flag
6465
} as const;
6566

6667
export type WaffleFlagName = keyof typeof waffleFlagDefaults;

‎src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
2-
import React from 'react';
3-
import OutlineSideBar from '../../course-outline/outline-sidebar/OutlineSidebar';
1+
import { PluginSlot } from '@openedx/frontend-plugin-framework';
2+
3+
import OutlineSideBar from '@src/course-outline/outline-sidebar/OutlineSidebar';
44

55
export const CourseAuthoringOutlineSidebarSlot = ({
66
courseId,

0 commit comments

Comments
 (0)