Skip to content

Commit 3f73530

Browse files
rpenidorpenido
committed
feat: wip
1 parent e95758c commit 3f73530

7 files changed

Lines changed: 90 additions & 36 deletions

File tree

‎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/OutlineSidebar.tsx‎

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

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.sidebar-toggle {
2+
.pgn__icon-button-toggle__container {
3+
flex-direction: column;
4+
align-items: flex-center;
5+
}
6+
}

‎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: false, // 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)