Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] [Don't Merge] Use component header #361

Closed
wants to merge 10 commits into from
Closed

[WIP] [Don't Merge] Use component header #361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a3ed999
chuck the component in there
Oct 7, 2022
28bb838
courseLockUp in actionRowContent
Oct 11, 2022
223e563
title block looks ok
Oct 12, 2022
c7ebbde
remove usermenu code that already exists in shared header component
Oct 12, 2022
11b9238
remove more unused stuff
Oct 12, 2022
0b634c2
move main menu into dropdown components
Oct 12, 2022
a0412cc
remove a ton of unused stuff
Oct 12, 2022
724fd46
rename to headerwrapper
Oct 12, 2022
fe2cb28
looking kinda funky with spacers but i'll figure it out
Oct 12, 2022
16828ed
calling this good until i have better direction on styling
Oct 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
347 changes: 250 additions & 97 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@edx/brand": "npm:@edx/[email protected]",
"@edx/frontend-build": "^11.0.0",
"@edx/frontend-component-footer": "11.1.1",
"@edx/frontend-component-header": "github:brian-smith-tcril/frontend-component-header#studio-header-for-prs",
"@edx/frontend-lib-content-components": "^1.43.0",
"@edx/frontend-platform": "2.5.1",
"@edx/paragon": "20.6.1",
Expand Down
4 changes: 2 additions & 2 deletions src/CourseAuthoringPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
import {
useLocation,
} from 'react-router-dom';
import Header from './studio-header/Header';
import HeaderWrapper from './studio-header-wrapper/HeaderWrapper';
import { fetchCourseDetail } from './data/thunks';
import { useModel } from './generic/model-store';
import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
Expand Down Expand Up @@ -36,7 +36,7 @@ export default function CourseAuthoringPage({ courseId, children }) {
}

const AppHeader = () => (
<Header
<HeaderWrapper
courseNumber={courseNumber}
courseOrg={courseOrg}
courseTitle={courseTitle}
Expand Down
2 changes: 1 addition & 1 deletion src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
@import "~@edx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";

@import "studio-header/header";
@import "~@edx/frontend-component-footer/dist/footer";
@import '~@edx/frontend-component-header/dist/index';

@import "proctored-exam-settings/proctoredExamSettings";
@import "pages-and-resources/discussions/app-list/AppList";
115 changes: 115 additions & 0 deletions src/studio-header-wrapper/HeaderWrapper.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable jsx-a11y/anchor-has-content */
import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { AppContext } from '@edx/frontend-platform/react';
import { ensureConfig } from '@edx/frontend-platform';
import { ActionRow, Dropdown, OverlayTrigger, Tooltip } from '@edx/paragon';
import {
injectIntl,
intlShape,
} from '@edx/frontend-platform/i18n';

import { StudioHeader } from '@edx/frontend-component-header';
import messages from './HeaderWrapper.messages';


ensureConfig([
'STUDIO_BASE_URL',
'LOGOUT_URL',
'LOGIN_URL',
], 'Header component');

function HeaderWrapper({
courseId, courseNumber, courseOrg, courseTitle, intl,
}) {
const { config } = useContext(AppContext);

const mainMenu = (
<>
<Dropdown>
<Dropdown.Toggle variant="outline-primary" id="library-header-menu-dropdown">
{intl.formatMessage(messages['header.links.content'])}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/course/${courseId}`}>{intl.formatMessage(messages['header.links.outline'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/course_info/${courseId}`}>{intl.formatMessage(messages['header.links.updates'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/tabs/${courseId}`}>{intl.formatMessage(messages['header.links.pages'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/assets/${courseId}`}>{intl.formatMessage(messages['header.links.filesAndUploads'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/textbooks/${courseId}`}>{intl.formatMessage(messages['header.links.textbooks'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/videos/${courseId}`}>{intl.formatMessage(messages['header.links.videoUploads'])}</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown>
<Dropdown.Toggle variant="outline-primary" id="library-header-menu-dropdown">
{intl.formatMessage(messages['header.links.settings'])}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/settings/details/${courseId}`}>{intl.formatMessage(messages['header.links.scheduleAndDetails'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/settings/grading/${courseId}`}>{intl.formatMessage(messages['header.links.grading'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/course_team/${courseId}`}>{intl.formatMessage(messages['header.links.courseTeam'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/group_configurations/${courseId}`}>{intl.formatMessage(messages['header.links.groupConfigurations'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/settings/advanced/${courseId}`}>{intl.formatMessage(messages['header.links.advancedSettings'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/certificates/${courseId}`}>{intl.formatMessage(messages['header.links.certificates'])}</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown>
<Dropdown.Toggle variant="outline-primary" id="library-header-menu-dropdown">
{intl.formatMessage(messages['header.links.tools'])}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/import/${courseId}`}>{intl.formatMessage(messages['header.links.import'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/export/${courseId}`}>{intl.formatMessage(messages['header.links.export'])}</Dropdown.Item>
<Dropdown.Item href={`${config.STUDIO_BASE_URL}/checklists/${courseId}`}>{intl.formatMessage(messages['header.links.checklists'])}</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</>
);

const courseLockUp = (
<OverlayTrigger
placement="bottom"
overlay={(
<Tooltip>
{courseTitle}
</Tooltip>
)}
>
<a
className="content-title-block"
href={`${config.STUDIO_BASE_URL}/course/${courseId}`}
aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
>
<span className="d-block small m-0 w-100 pr-2" data-testid="course-org-number">{courseOrg} {courseNumber}</span>
<span className="d-block m-0 font-weight-bold w-100 pr-2" data-testid="course-title">{courseTitle}</span>
</a>
</OverlayTrigger>
);

const actionRowContent = (
<>
{courseLockUp}
<ActionRow.Spacer />
{mainMenu}
</>
)

return (
<StudioHeader actionRowContent={actionRowContent}/>
);
}

HeaderWrapper.propTypes = {
courseId: PropTypes.string.isRequired,
courseNumber: PropTypes.string,
courseOrg: PropTypes.string,
courseTitle: PropTypes.string.isRequired,
intl: intlShape.isRequired,
};

HeaderWrapper.defaultProps = {
courseNumber: null,
courseOrg: null,
};

export default injectIntl(HeaderWrapper);
0 src/studio-header/Header.messages.jsx → ...header-wrapper/HeaderWrapper.messages.jsx
View file
Open in desktop
File renamed without changes.
0 src/studio-header/Header.test.jsx → ...dio-header-wrapper/HeaderWrapper.test.jsx
View file
Open in desktop
File renamed without changes.
43 changes: 0 additions & 43 deletions src/studio-header/Avatar.jsx
View file
Open in desktop

This file was deleted.

154 changes: 0 additions & 154 deletions src/studio-header/DesktopHeader.jsx
View file
Open in desktop

This file was deleted.

Loading