feat: update header to be keyboard accessible (#597)
This commit is contained in:
Kristin Aoki
@@ -1,43 +0,0 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { AvatarIcon } from './Icons';
|
||||
|
||||
const Avatar = ({
|
||||
size,
|
||||
src,
|
||||
alt,
|
||||
className,
|
||||
}) => {
|
||||
const avatar = src ? (
|
||||
<img className="d-block w-100 h-100" src={src} alt={alt} />
|
||||
) : (
|
||||
<AvatarIcon className="text-muted" style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
|
||||
);
|
||||
|
||||
return (
|
||||
<span
|
||||
style={{ height: size, width: size }}
|
||||
className={`avatar overflow-hidden d-inline-flex rounded-circle ${className}`}
|
||||
>
|
||||
{avatar}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
Avatar.propTypes = {
|
||||
src: PropTypes.string,
|
||||
size: PropTypes.string,
|
||||
alt: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
Avatar.defaultProps = {
|
||||
src: null,
|
||||
size: '2rem',
|
||||
alt: null,
|
||||
className: null,
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
23
src/studio-header/BrandNav.jsx
Normal file
23
src/studio-header/BrandNav.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const BrandNav = ({
|
||||
studioBaseUrl,
|
||||
logo,
|
||||
logoAltText,
|
||||
}) => (
|
||||
<a href={studioBaseUrl}>
|
||||
<img
|
||||
src={logo}
|
||||
alt={logoAltText}
|
||||
className="d-block logo"
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
|
||||
BrandNav.propTypes = {
|
||||
studioBaseUrl: PropTypes.string.isRequired,
|
||||
logo: PropTypes.string.isRequired,
|
||||
logoAltText: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default BrandNav;
|
||||
54
src/studio-header/CourseLockUp.jsx
Normal file
54
src/studio-header/CourseLockUp.jsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
OverlayTrigger,
|
||||
Tooltip,
|
||||
} from '@edx/paragon';
|
||||
import { getPagePath } from '../utils';
|
||||
import messages from './messages';
|
||||
|
||||
const CourseLockUp = ({
|
||||
courseId,
|
||||
courseOrg,
|
||||
courseNumber,
|
||||
courseTitle,
|
||||
// injected
|
||||
intl,
|
||||
}) => (
|
||||
<OverlayTrigger
|
||||
placement="bottom"
|
||||
overlay={(
|
||||
<Tooltip id="course-lock-up">
|
||||
{courseTitle}
|
||||
</Tooltip>
|
||||
)}
|
||||
>
|
||||
<a
|
||||
className="course-title-lockup w-25 mr-2"
|
||||
href={getPagePath(courseId, process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE, 'course')}
|
||||
aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
|
||||
data-testid="course-lock-up-block"
|
||||
>
|
||||
<span className="d-block small m-0" data-testid="course-org-number">{courseOrg} {courseNumber}</span>
|
||||
<span className="d-block m-0 font-weight-bold" data-testid="course-title">{courseTitle}</span>
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
||||
CourseLockUp.propTypes = {
|
||||
courseId: PropTypes.string,
|
||||
courseNumber: PropTypes.string,
|
||||
courseOrg: PropTypes.string,
|
||||
courseTitle: PropTypes.string,
|
||||
// injected
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
CourseLockUp.defaultProps = {
|
||||
courseNumber: null,
|
||||
courseOrg: null,
|
||||
courseId: null,
|
||||
courseTitle: null,
|
||||
};
|
||||
|
||||
export default injectIntl(CourseLockUp);
|
||||
@@ -1,154 +0,0 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
// Local Components
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
import Avatar from './Avatar';
|
||||
import { LinkedLogo, Logo } from './Logo';
|
||||
|
||||
// i18n
|
||||
import messages from './Header.messages';
|
||||
|
||||
// Assets
|
||||
import { CaretIcon } from './Icons';
|
||||
|
||||
class DesktopHeader extends React.Component {
|
||||
constructor(props) { // eslint-disable-line no-useless-constructor
|
||||
super(props);
|
||||
}
|
||||
|
||||
renderMainMenu() {
|
||||
const { mainMenu } = this.props;
|
||||
|
||||
// Nodes are accepted as a prop
|
||||
if (!Array.isArray(mainMenu)) {
|
||||
return mainMenu;
|
||||
}
|
||||
|
||||
return mainMenu.map((menuItem) => {
|
||||
const {
|
||||
type,
|
||||
href,
|
||||
content,
|
||||
submenuContent,
|
||||
} = menuItem;
|
||||
|
||||
if (type === 'item') {
|
||||
return (
|
||||
<a key={`${type}-${content}`} className="nav-link" href={href}>{content}</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
|
||||
<MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
|
||||
{content} <CaretIcon role="img" aria-hidden focusable="false" />
|
||||
</MenuTrigger>
|
||||
<MenuContent className="pin-left pin-right shadow py-2">
|
||||
{submenuContent}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderUserMenu() {
|
||||
const {
|
||||
userMenu,
|
||||
avatar,
|
||||
username,
|
||||
intl,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
|
||||
className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
|
||||
>
|
||||
<Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
|
||||
{username} <CaretIcon role="img" aria-hidden focusable="false" />
|
||||
</MenuTrigger>
|
||||
<MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
|
||||
{userMenu.map(({ type, href, content }) => (
|
||||
<a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
|
||||
))}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
logo,
|
||||
logoAltText,
|
||||
logoDestination,
|
||||
intl,
|
||||
} = this.props;
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
|
||||
return (
|
||||
<header className="site-header-desktop">
|
||||
<div className="px-5">
|
||||
<div className="nav-container position-relative d-flex align-items-center">
|
||||
{logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
|
||||
{/* This lockup HTML was copied from edx/frontend-app-learning/src/course-header/Header.jsx. */}
|
||||
{ this.props.courseLockUp }
|
||||
<nav
|
||||
aria-label={intl.formatMessage(messages['header.label.main.nav'])}
|
||||
className="nav main-nav"
|
||||
>
|
||||
{this.renderMainMenu()}
|
||||
</nav>
|
||||
<nav
|
||||
aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
|
||||
className="nav secondary-menu-container align-items-center ml-auto"
|
||||
>
|
||||
{this.renderUserMenu()}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DesktopHeader.propTypes = {
|
||||
mainMenu: PropTypes.oneOfType([
|
||||
PropTypes.node,
|
||||
PropTypes.array,
|
||||
]),
|
||||
userMenu: PropTypes.arrayOf(PropTypes.shape({
|
||||
type: PropTypes.oneOf(['item', 'menu']),
|
||||
href: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
})),
|
||||
logo: PropTypes.string,
|
||||
logoAltText: PropTypes.string,
|
||||
logoDestination: PropTypes.string,
|
||||
courseId: PropTypes.string,
|
||||
avatar: PropTypes.string,
|
||||
username: PropTypes.string,
|
||||
loggedIn: PropTypes.bool,
|
||||
courseLockUp: PropTypes.node.isRequired,
|
||||
|
||||
// i18n
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
DesktopHeader.defaultProps = {
|
||||
mainMenu: [],
|
||||
userMenu: [],
|
||||
logo: null,
|
||||
logoAltText: null,
|
||||
logoDestination: null,
|
||||
courseId: null,
|
||||
avatar: null,
|
||||
username: null,
|
||||
loggedIn: false,
|
||||
};
|
||||
|
||||
export default injectIntl(DesktopHeader);
|
||||
@@ -5,16 +5,9 @@ import React, { useContext } from 'react';
|
||||
import Responsive from 'react-responsive';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import { ensureConfig } from '@edx/frontend-platform';
|
||||
import { OverlayTrigger, Tooltip } from '@edx/paragon';
|
||||
import {
|
||||
injectIntl,
|
||||
intlShape,
|
||||
} from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { getPagePath } from '../utils';
|
||||
import DesktopHeader from './DesktopHeader';
|
||||
import MobileHeader from './MobileHeader';
|
||||
import messages from './Header.messages';
|
||||
import HeaderBody from './HeaderBody';
|
||||
|
||||
ensureConfig([
|
||||
'STUDIO_BASE_URL',
|
||||
@@ -24,156 +17,31 @@ ensureConfig([
|
||||
], 'Header component');
|
||||
|
||||
const Header = ({
|
||||
courseId, courseNumber, courseOrg, courseTitle, intl,
|
||||
courseId, courseNumber, courseOrg, courseTitle,
|
||||
}) => {
|
||||
const { authenticatedUser, config } = useContext(AppContext);
|
||||
|
||||
const mainMenu = [
|
||||
{
|
||||
type: 'submenu',
|
||||
content: intl.formatMessage(messages['header.links.content']),
|
||||
submenuContent: (
|
||||
<>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE, 'course')}>{intl.formatMessage(messages['header.links.outline'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, process.env.ENABLE_NEW_UPDATES_PAGE, 'course_info')}>{intl.formatMessage(messages['header.links.updates'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, 'true', 'tabs')}>{intl.formatMessage(messages['header.links.pages'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, process.env.ENABLE_NEW_FILES_UPLOADS_PAGE, 'assets')}>{intl.formatMessage(messages['header.links.filesAndUploads'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={`${config.STUDIO_BASE_URL}/textbooks/${courseId}`}>{intl.formatMessage(messages['header.links.textbooks'])}</a>
|
||||
</div>
|
||||
{process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN === 'true' && (
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, process.env.ENABLE_NEW_VIDEO_UPLOAD_PAGE, 'videos')}>{intl.formatMessage(messages['header.links.videoUploads'])}</a>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
type: 'submenu',
|
||||
content: intl.formatMessage(messages['header.links.settings']),
|
||||
submenuContent: (
|
||||
<>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/details/${courseId}`}>{intl.formatMessage(messages['header.links.scheduleAndDetails'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, process.env.ENABLE_NEW_GRADING_PAGE, 'settings/grading')}>{intl.formatMessage(messages['header.links.grading'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, process.env.ENABLE_NEW_COURSE_TEAM_PAGE, 'course_team')}>{intl.formatMessage(messages['header.links.courseTeam'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={`${config.STUDIO_BASE_URL}/group_configurations/course-v1:${courseId}`}>{intl.formatMessage(messages['header.links.groupConfigurations'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/advanced/${courseId}`}>{intl.formatMessage(messages['header.links.advancedSettings'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={`${config.STUDIO_BASE_URL}/certificates/${courseId}`}>{intl.formatMessage(messages['header.links.certificates'])}</a>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
type: 'submenu',
|
||||
content: intl.formatMessage(messages['header.links.tools']),
|
||||
submenuContent: (
|
||||
<>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, process.env.ENABLE_NEW_IMPORT_PAGE, 'import')}>{intl.formatMessage(messages['header.links.import'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={getPagePath(courseId, process.env.ENABLE_NEW_EXPORT_PAGE, 'export')}>{intl.formatMessage(messages['header.links.export'])}</a>
|
||||
</div>
|
||||
<div className="mb-1 small">
|
||||
<a rel="noopener" href={`${config.STUDIO_BASE_URL}/checklists/${courseId}`}>{intl.formatMessage(messages['header.links.checklists'])}</a>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const studioHomeItem = {
|
||||
type: 'item',
|
||||
href: config.STUDIO_BASE_URL,
|
||||
content: intl.formatMessage(messages['header.user.menu.studio']),
|
||||
};
|
||||
|
||||
const logoutItem = {
|
||||
type: 'item',
|
||||
href: config.LOGOUT_URL,
|
||||
content: intl.formatMessage(messages['header.user.menu.logout']),
|
||||
};
|
||||
|
||||
let userMenu = [];
|
||||
|
||||
if (authenticatedUser !== null) {
|
||||
if (authenticatedUser.administrator) {
|
||||
userMenu = [
|
||||
studioHomeItem,
|
||||
{
|
||||
type: 'item',
|
||||
href: `${config.STUDIO_BASE_URL}/maintenance`,
|
||||
content: intl.formatMessage(messages['header.user.menu.maintenance']),
|
||||
},
|
||||
logoutItem,
|
||||
];
|
||||
} else {
|
||||
userMenu = [
|
||||
studioHomeItem,
|
||||
logoutItem,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
const courseLockUp = (
|
||||
<OverlayTrigger
|
||||
placement="bottom"
|
||||
overlay={(
|
||||
<Tooltip id="course-lock-up">
|
||||
{courseTitle}
|
||||
</Tooltip>
|
||||
)}
|
||||
>
|
||||
<a
|
||||
className="course-title-lockup w-25"
|
||||
href={getPagePath(courseId, process.env.ENABLE_NEW_COURSE_OUTLINE_PAGE, 'course')}
|
||||
aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
|
||||
>
|
||||
<span className="d-block small m-0" data-testid="course-org-number">{courseOrg} {courseNumber}</span>
|
||||
<span className="d-block m-0 font-weight-bold" data-testid="course-title">{courseTitle}</span>
|
||||
</a>
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
||||
const props = {
|
||||
logo: config.LOGO_URL,
|
||||
logoAltText: 'Studio edX',
|
||||
siteName: 'edX',
|
||||
logoDestination: process.env.ENABLE_NEW_HOME_PAGE === 'true' ? '/home' : config.STUDIO_BASE_URL,
|
||||
courseLockUp,
|
||||
logoAltText: `Studio ${config.SITE_NAME}`,
|
||||
courseId,
|
||||
username: authenticatedUser !== null ? authenticatedUser.username : null,
|
||||
avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
|
||||
mainMenu,
|
||||
userMenu,
|
||||
courseNumber,
|
||||
courseOrg,
|
||||
courseTitle,
|
||||
username: authenticatedUser?.username,
|
||||
isAdmin: authenticatedUser?.administrator,
|
||||
authenticatedUserAvatar: authenticatedUser?.avatar,
|
||||
studioBaseUrl: config.STUDIO_BASE_URL,
|
||||
logoutUrl: config.LOGOUT_URL,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Responsive maxWidth={768}>
|
||||
<MobileHeader {...props} />
|
||||
</Responsive>
|
||||
<Responsive minWidth={769}>
|
||||
<DesktopHeader {...props} />
|
||||
<HeaderBody {...props} />
|
||||
</Responsive>
|
||||
</>
|
||||
);
|
||||
@@ -184,7 +52,6 @@ Header.propTypes = {
|
||||
courseNumber: PropTypes.string,
|
||||
courseOrg: PropTypes.string,
|
||||
courseTitle: PropTypes.string.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
Header.defaultProps = {
|
||||
@@ -192,4 +59,4 @@ Header.defaultProps = {
|
||||
courseOrg: null,
|
||||
};
|
||||
|
||||
export default injectIntl(Header);
|
||||
export default Header;
|
||||
|
||||
@@ -1,151 +1,132 @@
|
||||
/* eslint-disable react/jsx-no-constructed-context-values */
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import { Context as ResponsiveContext } from 'react-responsive';
|
||||
import {
|
||||
cleanup,
|
||||
fireEvent,
|
||||
render,
|
||||
fireEvent,
|
||||
screen,
|
||||
waitFor,
|
||||
} from '@testing-library/react';
|
||||
|
||||
import { initializeMockApp } from '@edx/frontend-platform';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { Context as ResponsiveContext } from 'react-responsive';
|
||||
|
||||
import initializeStore from '../store';
|
||||
import Header from './Header';
|
||||
import messages from './messages';
|
||||
|
||||
describe('<Header />', () => {
|
||||
function createComponent(screenWidth, component) {
|
||||
return (
|
||||
<ResponsiveContext.Provider value={{ width: screenWidth }}>
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider value={{
|
||||
authenticatedUser: {
|
||||
userId: 'abc123',
|
||||
username: 'edX',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{component}
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
</ResponsiveContext.Provider>
|
||||
);
|
||||
}
|
||||
let store;
|
||||
|
||||
it('renders desktop header correctly with API call', async () => {
|
||||
const component = createComponent(
|
||||
1280, (
|
||||
<Header
|
||||
courseId="course-v1:edX+DemoX+Demo_Course"
|
||||
courseNumber="DemoX"
|
||||
courseOrg="edX"
|
||||
courseTitle="Demonstration Course"
|
||||
/>
|
||||
),
|
||||
);
|
||||
const courseId = 'testEd123';
|
||||
const courseNumber = '123';
|
||||
const courseOrg = 'Ed';
|
||||
const courseTitle = 'test';
|
||||
|
||||
render(component);
|
||||
expect(screen.getByTestId('course-org-number').textContent).toEqual(expect.stringContaining('edX DemoX'));
|
||||
expect(screen.getByTestId('course-title').textContent).toEqual(expect.stringContaining('Demonstration Course'));
|
||||
const renderComponent = (screenWidth) => {
|
||||
render(
|
||||
<ResponsiveContext.Provider value={{ width: screenWidth }}>
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store}>
|
||||
<Header
|
||||
{...{
|
||||
courseId, courseNumber, courseOrg, courseTitle,
|
||||
}}
|
||||
/>
|
||||
</AppProvider>
|
||||
</IntlProvider>
|
||||
</ResponsiveContext.Provider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe('Header', () => {
|
||||
describe('desktop', () => {
|
||||
beforeEach(async () => {
|
||||
initializeMockApp({
|
||||
authenticatedUser: {
|
||||
userId: 3,
|
||||
username: 'abc123',
|
||||
administrator: false,
|
||||
roles: [],
|
||||
},
|
||||
});
|
||||
store = initializeStore({});
|
||||
});
|
||||
it('course lock up should be visible', () => {
|
||||
renderComponent(1280);
|
||||
const courseLockUpBlock = screen.getByTestId('course-lock-up-block');
|
||||
expect(courseLockUpBlock).toBeVisible();
|
||||
});
|
||||
it('mobile menu should not be visible', () => {
|
||||
renderComponent(1280);
|
||||
const mobileMenuButton = screen.queryByTestId('mobile-menu-button');
|
||||
expect(mobileMenuButton).toBeNull();
|
||||
});
|
||||
it('desktop menu should be visible', () => {
|
||||
renderComponent(1280);
|
||||
const desktopMenu = screen.getByTestId('desktop-menu');
|
||||
expect(desktopMenu).toBeVisible();
|
||||
});
|
||||
it('video uploads should be in content menu', async () => {
|
||||
renderComponent(1280);
|
||||
const contentMenu = screen.getAllByRole('button')[0];
|
||||
await waitFor(() => fireEvent.click(contentMenu));
|
||||
const videoUploadButton = screen.getByText(messages['header.links.videoUploads'].defaultMessage);
|
||||
expect(videoUploadButton).toBeVisible();
|
||||
});
|
||||
it('maintenance should not be in user menu', async () => {
|
||||
renderComponent(1280);
|
||||
const userMenu = screen.getAllByRole('button')[3];
|
||||
await waitFor(() => fireEvent.click(userMenu));
|
||||
const maintenanceButton = screen.queryByText(messages['header.user.menu.maintenance'].defaultMessage);
|
||||
expect(maintenanceButton).toBeNull();
|
||||
});
|
||||
it('user menu should use avatar icon', async () => {
|
||||
renderComponent(1280);
|
||||
const avatarIcon = screen.getByTestId('avatar-icon');
|
||||
expect(avatarIcon).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders mobile header correctly with API call', async () => {
|
||||
const component = createComponent(
|
||||
500, (
|
||||
<Header
|
||||
courseId="course-v1:edX+DemoX+Demo_Course"
|
||||
courseNumber="DemoX"
|
||||
courseOrg="edX"
|
||||
courseTitle="Demonstration Course"
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
render(component);
|
||||
expect(screen.getByTestId('edx-header-logo'));
|
||||
});
|
||||
|
||||
it('renders desktop header correctly with bad API call', async () => {
|
||||
const component = createComponent(
|
||||
1280, (
|
||||
<Header
|
||||
courseId="course-v1:edX+DemoX+Demo_Course"
|
||||
courseNumber={null}
|
||||
courseOrg={null}
|
||||
courseTitle="course-v1:edX+DemoX+Demo_Course"
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
render(component);
|
||||
expect(screen.getByTestId('course-title').textContent).toEqual(expect.stringContaining('course-v1:edX+DemoX+Demo_Course'));
|
||||
});
|
||||
|
||||
it('renders mobile header correctly with bad API call', async () => {
|
||||
const component = createComponent(
|
||||
500, (
|
||||
<Header
|
||||
courseId="course-v1:edX+DemoX+Demo_Course"
|
||||
courseNumber={null}
|
||||
courseOrg={null}
|
||||
courseTitle="course-v1:edX+DemoX+Demo_Course"
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
render(component);
|
||||
expect(screen.getByTestId('edx-header-logo'));
|
||||
});
|
||||
|
||||
it('renders Video Uploads link', () => {
|
||||
process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = 'true';
|
||||
|
||||
const component = createComponent(
|
||||
1280, (
|
||||
<Header
|
||||
courseId="course-v1:edX+DemoX+Demo_Course"
|
||||
courseNumber="DemoX"
|
||||
courseOrg="edX"
|
||||
courseTitle="Demonstration Course"
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
render(component);
|
||||
fireEvent.click(screen.getByText('Content'));
|
||||
|
||||
expect(screen.getByText('Video Uploads')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render Video Uploads link', () => {
|
||||
process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = 'false';
|
||||
|
||||
const component = createComponent(
|
||||
1280, (
|
||||
<Header
|
||||
courseId="course-v1:edX+DemoX+Demo_Course"
|
||||
courseNumber="DemoX"
|
||||
courseOrg="edX"
|
||||
courseTitle="Demonstration Course"
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
render(component);
|
||||
fireEvent.click(screen.getByText('Content'));
|
||||
|
||||
expect(screen.queryByText('Video Uploads')).toBeNull();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
describe('mobile', () => {
|
||||
beforeEach(async () => {
|
||||
initializeMockApp({
|
||||
authenticatedUser: {
|
||||
userId: 3,
|
||||
username: 'abc123',
|
||||
administrator: true,
|
||||
roles: [],
|
||||
avatar: '/imges/test.png',
|
||||
},
|
||||
});
|
||||
store = initializeStore({});
|
||||
});
|
||||
it('course lock up should not be visible', async () => {
|
||||
renderComponent(500);
|
||||
const courseLockUpBlock = screen.queryByTestId('course-lock-up-block');
|
||||
expect(courseLockUpBlock).toBeNull();
|
||||
});
|
||||
it('mobile menu should be visible', async () => {
|
||||
renderComponent(500);
|
||||
const mobileMenuButton = screen.getByTestId('mobile-menu-button');
|
||||
expect(mobileMenuButton).toBeVisible();
|
||||
await waitFor(() => fireEvent.click(mobileMenuButton));
|
||||
const mobileMenu = screen.getByTestId('mobile-menu');
|
||||
expect(mobileMenu).toBeVisible();
|
||||
});
|
||||
it('desktop menu should not be visible', () => {
|
||||
renderComponent(500);
|
||||
const desktopMenu = screen.queryByTestId('desktop-menu');
|
||||
expect(desktopMenu).toBeNull();
|
||||
});
|
||||
it('maintenance should be in user menu', async () => {
|
||||
renderComponent(500);
|
||||
const userMenu = screen.getAllByRole('button')[1];
|
||||
await waitFor(() => fireEvent.click(userMenu));
|
||||
const maintenanceButton = screen.getByText(messages['header.user.menu.maintenance'].defaultMessage);
|
||||
expect(maintenanceButton).toBeVisible();
|
||||
});
|
||||
it('user menu should use avatar image', async () => {
|
||||
renderComponent(1280);
|
||||
const avatarImage = screen.getByTestId('avatar-image');
|
||||
expect(avatarImage).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
147
src/studio-header/HeaderBody.jsx
Normal file
147
src/studio-header/HeaderBody.jsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
ActionRow,
|
||||
Button,
|
||||
Nav,
|
||||
Row,
|
||||
} from '@edx/paragon';
|
||||
import { Close, MenuIcon } from '@edx/paragon/icons';
|
||||
|
||||
import messages from './messages';
|
||||
import CourseLockUp from './CourseLockUp';
|
||||
import UserMenu from './UserMenu';
|
||||
import BrandNav from './BrandNav';
|
||||
import NavDropdownMenu from './NavDropdownMenu';
|
||||
import { getContentMenuItem, getSettingMenuItems, getToolsMenuItems } from './utils';
|
||||
|
||||
const HeaderBody = ({
|
||||
logo,
|
||||
logoAltText,
|
||||
courseId,
|
||||
courseNumber,
|
||||
courseOrg,
|
||||
courseTitle,
|
||||
username,
|
||||
isAdmin,
|
||||
studioBaseUrl,
|
||||
logoutUrl,
|
||||
authenticatedUserAvatar,
|
||||
isMobile,
|
||||
setModalPopupTarget,
|
||||
toggleModalPopup,
|
||||
isModalPopupOpen,
|
||||
// injected
|
||||
intl,
|
||||
}) => (
|
||||
<ActionRow as="header" className="site-header-desktop sticky-top px-4">
|
||||
{isMobile ? (
|
||||
<Button
|
||||
ref={setModalPopupTarget}
|
||||
className="d-inline-flex align-items-center"
|
||||
variant="tertiary"
|
||||
onClick={toggleModalPopup}
|
||||
iconBefore={isModalPopupOpen ? Close : MenuIcon}
|
||||
data-testid="mobile-menu-button"
|
||||
>
|
||||
Menu
|
||||
</Button>
|
||||
) : (
|
||||
<Row className="flex-nowrap m-0">
|
||||
<BrandNav
|
||||
{...{
|
||||
studioBaseUrl,
|
||||
logo,
|
||||
logoAltText,
|
||||
}}
|
||||
/>
|
||||
<CourseLockUp
|
||||
{...{
|
||||
courseId,
|
||||
courseNumber,
|
||||
courseOrg,
|
||||
courseTitle,
|
||||
}}
|
||||
/>
|
||||
</Row>
|
||||
)}
|
||||
{isMobile ? (
|
||||
<>
|
||||
<ActionRow.Spacer />
|
||||
<BrandNav
|
||||
{...{
|
||||
studioBaseUrl,
|
||||
logo,
|
||||
logoAltText,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Nav data-testid="desktop-menu">
|
||||
<NavDropdownMenu
|
||||
id={`${intl.formatMessage(messages['header.links.content'])}-dropdown-menu`}
|
||||
buttonTitle={intl.formatMessage(messages['header.links.content'])}
|
||||
items={getContentMenuItem({ studioBaseUrl, courseId, intl })}
|
||||
/>
|
||||
<NavDropdownMenu
|
||||
id={`${intl.formatMessage(messages['header.links.settings'])}-dropdown-menu`}
|
||||
buttonTitle={intl.formatMessage(messages['header.links.settings'])}
|
||||
items={getSettingMenuItems({ studioBaseUrl, courseId, intl })}
|
||||
/>
|
||||
<NavDropdownMenu
|
||||
id={`${intl.formatMessage(messages['header.links.tools'])}-dropdown-menu`}
|
||||
buttonTitle={intl.formatMessage(messages['header.links.tools'])}
|
||||
items={getToolsMenuItems({ studioBaseUrl, courseId, intl })}
|
||||
/>
|
||||
</Nav>
|
||||
)}
|
||||
<ActionRow.Spacer />
|
||||
<Nav>
|
||||
<UserMenu
|
||||
{...{
|
||||
username,
|
||||
studioBaseUrl,
|
||||
logoutUrl,
|
||||
authenticatedUserAvatar,
|
||||
isAdmin,
|
||||
}}
|
||||
/>
|
||||
</Nav>
|
||||
</ActionRow>
|
||||
);
|
||||
|
||||
HeaderBody.propTypes = {
|
||||
studioBaseUrl: PropTypes.string.isRequired,
|
||||
logoutUrl: PropTypes.string.isRequired,
|
||||
setModalPopupTarget: PropTypes.func.isRequired,
|
||||
toggleModalPopup: PropTypes.func.isRequired,
|
||||
isModalPopupOpen: PropTypes.bool.isRequired,
|
||||
courseNumber: PropTypes.string,
|
||||
courseOrg: PropTypes.string,
|
||||
courseTitle: PropTypes.string,
|
||||
logo: PropTypes.string,
|
||||
logoAltText: PropTypes.string,
|
||||
courseId: PropTypes.string,
|
||||
authenticatedUserAvatar: PropTypes.string,
|
||||
username: PropTypes.string,
|
||||
isAdmin: PropTypes.bool,
|
||||
isMobile: PropTypes.bool,
|
||||
// injected
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
HeaderBody.defaultProps = {
|
||||
logo: null,
|
||||
logoAltText: null,
|
||||
courseId: null,
|
||||
courseNumber: null,
|
||||
courseOrg: null,
|
||||
courseTitle: null,
|
||||
authenticatedUserAvatar: null,
|
||||
username: null,
|
||||
isAdmin: false,
|
||||
isMobile: false,
|
||||
};
|
||||
|
||||
export default injectIntl(HeaderBody);
|
||||
@@ -1,47 +0,0 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
|
||||
export const MenuIcon = (props) => (
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
{...props}
|
||||
>
|
||||
<rect fill="currentColor" x="2" y="5" width="20" height="2" />
|
||||
<rect fill="currentColor" x="2" y="11" width="20" height="2" />
|
||||
<rect fill="currentColor" x="2" y="17" width="20" height="2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const AvatarIcon = (props) => (
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CaretIcon = (props) => (
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
||||
fill="currentColor"
|
||||
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -1,32 +0,0 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Logo = ({ src, alt, ...attributes }) => (
|
||||
<img src={src} alt={alt} {...attributes} />
|
||||
);
|
||||
|
||||
Logo.propTypes = {
|
||||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const LinkedLogo = ({
|
||||
href,
|
||||
src,
|
||||
alt,
|
||||
...attributes
|
||||
}) => (
|
||||
<a href={href} {...attributes}>
|
||||
<img className="d-block" src={src} alt={alt} />
|
||||
</a>
|
||||
);
|
||||
|
||||
LinkedLogo.propTypes = {
|
||||
href: PropTypes.string.isRequired,
|
||||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export { LinkedLogo, Logo };
|
||||
export default Logo;
|
||||
@@ -1,275 +0,0 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const MenuTrigger = ({ tag, className, ...attributes }) => React.createElement(tag, {
|
||||
className: `menu-trigger ${className}`,
|
||||
...attributes,
|
||||
});
|
||||
MenuTrigger.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
MenuTrigger.defaultProps = {
|
||||
tag: 'div',
|
||||
className: null,
|
||||
};
|
||||
const MenuTriggerType = <MenuTrigger />.type;
|
||||
|
||||
const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
|
||||
className: ['menu-content', className].join(' '),
|
||||
...attributes,
|
||||
});
|
||||
MenuContent.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
MenuContent.defaultProps = {
|
||||
tag: 'div',
|
||||
className: null,
|
||||
};
|
||||
|
||||
class Menu extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.menu = React.createRef();
|
||||
this.state = {
|
||||
expanded: false,
|
||||
};
|
||||
|
||||
this.onTriggerClick = this.onTriggerClick.bind(this);
|
||||
this.onCloseClick = this.onCloseClick.bind(this);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
this.onDocumentClick = this.onDocumentClick.bind(this);
|
||||
this.onMouseEnter = this.onMouseEnter.bind(this);
|
||||
this.onMouseLeave = this.onMouseLeave.bind(this);
|
||||
}
|
||||
|
||||
// Lifecycle Events
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('touchend', this.onDocumentClick, true);
|
||||
document.removeEventListener('click', this.onDocumentClick, true);
|
||||
|
||||
// Call onClose callback when unmounting and open
|
||||
if (this.state.expanded && this.props.onClose) {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
onDocumentClick(e) {
|
||||
if (!this.props.closeOnDocumentClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
const clickIsInMenu = this.menu.current === e.target || this.menu.current.contains(e.target);
|
||||
if (clickIsInMenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.close();
|
||||
}
|
||||
|
||||
onTriggerClick(e) {
|
||||
// Let the browser follow the link of the trigger if the menu
|
||||
// is already expanded and the trigger has an href attribute
|
||||
if (this.state.expanded && e.target.getAttribute('href')) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
}
|
||||
|
||||
onCloseClick() {
|
||||
this.getFocusableElements()[0].focus();
|
||||
this.close();
|
||||
}
|
||||
|
||||
onKeyDown(e) {
|
||||
if (!this.state.expanded) {
|
||||
return;
|
||||
}
|
||||
switch (e.key) {
|
||||
case 'Escape': {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.getFocusableElements()[0].focus();
|
||||
this.close();
|
||||
break;
|
||||
}
|
||||
case 'Enter': {
|
||||
// Using focusable elements instead of a ref to the trigger
|
||||
// because Hyperlink and Button can handle refs as functional components
|
||||
if (document.activeElement === this.getFocusableElements()[0]) {
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Tab': {
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
this.focusPrevious();
|
||||
} else {
|
||||
this.focusNext();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'ArrowDown': {
|
||||
e.preventDefault();
|
||||
this.focusNext();
|
||||
break;
|
||||
}
|
||||
case 'ArrowUp': {
|
||||
e.preventDefault();
|
||||
this.focusPrevious();
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
onMouseEnter() {
|
||||
if (!this.props.respondToPointerEvents) {
|
||||
return;
|
||||
}
|
||||
this.open();
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
if (!this.props.respondToPointerEvents) {
|
||||
return;
|
||||
}
|
||||
this.close();
|
||||
}
|
||||
|
||||
// Internal functions
|
||||
|
||||
getFocusableElements() {
|
||||
return this.menu.current.querySelectorAll('button:not([disabled]), [href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])');
|
||||
}
|
||||
|
||||
getAttributesFromProps() {
|
||||
// Any extra props are attributes for the menu
|
||||
const attributes = {};
|
||||
Object.keys(this.props)
|
||||
// eslint-disable-next-line react/forbid-foreign-prop-types
|
||||
.filter(property => Menu.propTypes[property] === undefined)
|
||||
.forEach((property) => {
|
||||
attributes[property] = this.props[property];
|
||||
});
|
||||
return attributes;
|
||||
}
|
||||
|
||||
focusNext() {
|
||||
const focusableElements = Array.from(this.getFocusableElements());
|
||||
const activeIndex = focusableElements.indexOf(document.activeElement);
|
||||
const nextIndex = (activeIndex + 1) % focusableElements.length;
|
||||
focusableElements[nextIndex].focus();
|
||||
}
|
||||
|
||||
focusPrevious() {
|
||||
const focusableElements = Array.from(this.getFocusableElements());
|
||||
const activeIndex = focusableElements.indexOf(document.activeElement);
|
||||
const previousIndex = (activeIndex || focusableElements.length) - 1;
|
||||
focusableElements[previousIndex].focus();
|
||||
}
|
||||
|
||||
open() {
|
||||
if (this.props.onOpen) {
|
||||
this.props.onOpen();
|
||||
}
|
||||
this.setState({ expanded: true });
|
||||
// Listen to touchend and click events to ensure the menu
|
||||
// can be closed on mobile, pointer, and mixed input devices
|
||||
document.addEventListener('touchend', this.onDocumentClick, true);
|
||||
document.addEventListener('click', this.onDocumentClick, true);
|
||||
}
|
||||
|
||||
close() {
|
||||
if (this.props.onClose) {
|
||||
this.props.onClose();
|
||||
}
|
||||
this.setState({ expanded: false });
|
||||
document.removeEventListener('touchend', this.onDocumentClick, true);
|
||||
document.removeEventListener('click', this.onDocumentClick, true);
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this.state.expanded) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
renderTrigger(node) {
|
||||
return React.cloneElement(node, {
|
||||
onClick: this.onTriggerClick,
|
||||
'aria-haspopup': 'menu',
|
||||
'aria-expanded': this.state.expanded,
|
||||
});
|
||||
}
|
||||
|
||||
renderMenuContent(node) {
|
||||
return (
|
||||
<CSSTransition
|
||||
in={this.state.expanded}
|
||||
timeout={this.props.transitionTimeout}
|
||||
classNames={this.props.transitionClassName}
|
||||
unmountOnExit
|
||||
>
|
||||
{node}
|
||||
</CSSTransition>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className } = this.props;
|
||||
|
||||
const wrappedChildren = React.Children.map(this.props.children, (child) => {
|
||||
if (child.type === MenuTriggerType) {
|
||||
return this.renderTrigger(child);
|
||||
}
|
||||
return this.renderMenuContent(child);
|
||||
});
|
||||
|
||||
const rootClassName = this.state.expanded ? 'menu expanded' : 'menu';
|
||||
|
||||
return React.createElement(this.props.tag, {
|
||||
className: `${rootClassName} ${className}`,
|
||||
ref: this.menu,
|
||||
onKeyDown: this.onKeyDown,
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
...this.getAttributesFromProps(),
|
||||
}, wrappedChildren);
|
||||
}
|
||||
}
|
||||
|
||||
Menu.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
onClose: PropTypes.func,
|
||||
onOpen: PropTypes.func,
|
||||
closeOnDocumentClick: PropTypes.bool,
|
||||
respondToPointerEvents: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
transitionTimeout: PropTypes.number,
|
||||
transitionClassName: PropTypes.string,
|
||||
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||
};
|
||||
Menu.defaultProps = {
|
||||
tag: 'div',
|
||||
className: null,
|
||||
onClose: null,
|
||||
onOpen: null,
|
||||
respondToPointerEvents: false,
|
||||
closeOnDocumentClick: true,
|
||||
transitionTimeout: 250,
|
||||
transitionClassName: 'menu-content',
|
||||
};
|
||||
|
||||
export { Menu, MenuTrigger, MenuContent };
|
||||
@@ -1,78 +0,0 @@
|
||||
import React from 'react';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
|
||||
jest.mock('react-transition-group', () => ({
|
||||
// eslint-disable-next-line react/jsx-no-useless-fragment, react/prop-types
|
||||
CSSTransition: ({ children }) => <>{children}</>,
|
||||
}));
|
||||
|
||||
const RootWrapper = () => (
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<Menu>
|
||||
<MenuTrigger>Toggle Menu</MenuTrigger>
|
||||
<MenuContent>Menu Content</MenuContent>
|
||||
</Menu>,
|
||||
</IntlProvider>
|
||||
);
|
||||
|
||||
describe('<Menu />', () => {
|
||||
it('should render Menu component', () => {
|
||||
const { getByText } = render(<RootWrapper />);
|
||||
const menuTrigger = getByText(/Toggle Menu/i);
|
||||
const menuContent = getByText(/Menu Content/i);
|
||||
expect(menuTrigger).toBeInTheDocument();
|
||||
expect(menuContent).toBeInTheDocument();
|
||||
});
|
||||
it('should expand menu on trigger click', () => {
|
||||
const { getByText } = render(<RootWrapper />);
|
||||
const menuTrigger = getByText(/Toggle Menu/i);
|
||||
const menuContent = getByText(/Menu Content/i);
|
||||
fireEvent.click(menuTrigger);
|
||||
expect(menuContent).toHaveClass('menu-content');
|
||||
expect(menuTrigger).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
it('should close menu on document click outside the menu', () => {
|
||||
const { getByText } = render(<RootWrapper />);
|
||||
const menuTrigger = getByText(/Toggle Menu/i);
|
||||
const menuContent = getByText(/Menu Content/i);
|
||||
fireEvent.click(menuTrigger);
|
||||
fireEvent.click(document.body);
|
||||
expect(menuContent).toBeInTheDocument();
|
||||
expect(menuTrigger).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
it('should not close menu on document click inside the menu', () => {
|
||||
const { getByText, getByRole } = render(
|
||||
<Menu>
|
||||
<MenuTrigger>Toggle Menu</MenuTrigger>
|
||||
<MenuContent role="menu">
|
||||
<button type="button">Menu Item 1</button>
|
||||
<button type="button">Menu Item 2</button>
|
||||
</MenuContent>
|
||||
</Menu>,
|
||||
);
|
||||
const menuTrigger = getByText(/Toggle Menu/i);
|
||||
const menuContent = getByRole('menu');
|
||||
fireEvent.click(menuTrigger);
|
||||
fireEvent.click(screen.getByText(/Menu Item 1/i));
|
||||
expect(menuContent).toBeVisible();
|
||||
expect(menuTrigger).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
it('should close menu after press Escape keyboard key', () => {
|
||||
render(
|
||||
<Menu tag="div" className="nav-item">
|
||||
<MenuTrigger>Toggle Menu</MenuTrigger>
|
||||
<MenuContent role="menu">
|
||||
<button type="button">Menu Item 1</button>
|
||||
<button type="button">Menu Item 2</button>
|
||||
</MenuContent>
|
||||
</Menu>,
|
||||
);
|
||||
const menuTrigger = screen.getByText(/Toggle Menu/i);
|
||||
fireEvent.click(menuTrigger);
|
||||
fireEvent.keyDown(menuTrigger, { key: 'Escape' });
|
||||
expect(menuTrigger).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
@@ -1,4 +0,0 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
|
||||
export { Menu, MenuTrigger, MenuContent };
|
||||
@@ -1,47 +0,0 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
.menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 10;
|
||||
background: $white;
|
||||
min-width: 10rem;
|
||||
|
||||
&.pin-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.pin-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-dropdown-enter {
|
||||
opacity: 0;
|
||||
transform-origin: 75% 0;
|
||||
transform: scale3d(.8, .8, 1);
|
||||
}
|
||||
|
||||
.menu-dropdown-enter-active {
|
||||
transform-origin: 75% 0;
|
||||
transition: all 250ms cubic-bezier(.4, 0, .2, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu-dropdown-exit {
|
||||
transform-origin: 75% 0;
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu-dropdown-exit-active {
|
||||
transform-origin: 75% 0;
|
||||
transform: scale3d(.8, .8, 1);
|
||||
transition: all 250ms cubic-bezier(.8, 0, .6, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -1,166 +1,69 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { useToggle, ModalPopup } from '@edx/paragon';
|
||||
import HeaderBody from './HeaderBody';
|
||||
import MobileMenu from './MobileMenu';
|
||||
|
||||
// Local Components
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
import Avatar from './Avatar';
|
||||
import { LinkedLogo, Logo } from './Logo';
|
||||
const MobileHeader = ({
|
||||
studioBaseUrl,
|
||||
courseId,
|
||||
...props
|
||||
}) => {
|
||||
const [isOpen, , close, toggle] = useToggle(false);
|
||||
const [target, setTarget] = useState(null);
|
||||
|
||||
// i18n
|
||||
import messages from './Header.messages';
|
||||
|
||||
// Assets
|
||||
import { MenuIcon } from './Icons';
|
||||
|
||||
class MobileHeader extends React.Component {
|
||||
constructor(props) { // eslint-disable-line no-useless-constructor
|
||||
super(props);
|
||||
}
|
||||
|
||||
renderMainMenu() {
|
||||
const { mainMenu } = this.props;
|
||||
|
||||
// Nodes are accepted as a prop
|
||||
if (!Array.isArray(mainMenu)) {
|
||||
return mainMenu;
|
||||
}
|
||||
|
||||
return mainMenu.map((menuItem) => {
|
||||
const {
|
||||
type,
|
||||
href,
|
||||
content,
|
||||
submenuContent,
|
||||
} = menuItem;
|
||||
|
||||
if (type === 'item') {
|
||||
return (
|
||||
<a key={`${type}-${content}`} className="nav-link" href={href}>
|
||||
{content}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu key={`${type}-${content}`} tag="div" className="nav-item">
|
||||
<MenuTrigger tag="a" role="button" tabIndex="0" className="nav-link">
|
||||
{content}
|
||||
</MenuTrigger>
|
||||
<MenuContent className="position-static pin-left pin-right py-2">
|
||||
{submenuContent}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderUserMenuItems() {
|
||||
const { userMenu } = this.props;
|
||||
|
||||
return userMenu.map(({ type, href, content }) => (
|
||||
<li className="nav-item" key={`${type}-${content}`}>
|
||||
<a className="nav-link" href={href}>{content}</a>
|
||||
</li>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
logo,
|
||||
logoAltText,
|
||||
logoDestination,
|
||||
avatar,
|
||||
username,
|
||||
stickyOnMobile,
|
||||
mainMenu,
|
||||
intl,
|
||||
} = this.props;
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
|
||||
return (
|
||||
<header
|
||||
aria-label={intl.formatMessage(messages['header.label.main.header'])}
|
||||
className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
|
||||
return (
|
||||
<>
|
||||
<HeaderBody
|
||||
{...props}
|
||||
isMobile
|
||||
setModalPopupTarget={setTarget}
|
||||
toggleModalPopup={toggle}
|
||||
isModalPopupOpen={isOpen}
|
||||
/>
|
||||
<ModalPopup
|
||||
hasArrow
|
||||
placement="bottom"
|
||||
positionRef={target}
|
||||
isOpen={isOpen}
|
||||
onClose={close}
|
||||
onEscapeKey={close}
|
||||
className="mobile-menu-container"
|
||||
>
|
||||
<div className="w-100 d-flex justify-content-start">
|
||||
{mainMenu.length > 0
|
||||
? (
|
||||
<Menu className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label={intl.formatMessage(messages['header.label.main.menu'])}
|
||||
title={intl.formatMessage(messages['header.label.main.menu'])}
|
||||
>
|
||||
<MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
|
||||
</MenuTrigger>
|
||||
<MenuContent
|
||||
tag="nav"
|
||||
aria-label={intl.formatMessage(messages['header.label.main.nav'])}
|
||||
className="nav flex-column pin-left pin-right border-top shadow py-2"
|
||||
>
|
||||
{this.renderMainMenu()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="d-flex align-items-center mobile-lockup">
|
||||
{logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" data-testid="edx-header-logo" />}
|
||||
</div>
|
||||
<div className="w-100 d-flex justify-content-end align-items-center">
|
||||
<Menu tag="nav" aria-label="Secondary" className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
title={intl.formatMessage(messages['header.label.account.menu'])}
|
||||
>
|
||||
<Avatar size="1.5rem" src={avatar} alt={username} />
|
||||
</MenuTrigger>
|
||||
<MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
|
||||
{this.renderUserMenuItems()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
<MobileMenu {...{ studioBaseUrl, courseId }} />
|
||||
</ModalPopup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
MobileHeader.propTypes = {
|
||||
mainMenu: PropTypes.oneOfType([
|
||||
PropTypes.node,
|
||||
PropTypes.array,
|
||||
]),
|
||||
|
||||
userMenu: PropTypes.arrayOf(PropTypes.shape({
|
||||
type: PropTypes.oneOf(['item', 'menu']),
|
||||
href: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
})),
|
||||
studioBaseUrl: PropTypes.string.isRequired,
|
||||
logoutUrl: PropTypes.string.isRequired,
|
||||
setModalPopupTarget: PropTypes.func.isRequired,
|
||||
toggleModalPopup: PropTypes.func.isRequired,
|
||||
isModalPopupOpen: PropTypes.bool.isRequired,
|
||||
courseNumber: PropTypes.string,
|
||||
courseOrg: PropTypes.string,
|
||||
courseTitle: PropTypes.string,
|
||||
logo: PropTypes.string,
|
||||
logoAltText: PropTypes.string,
|
||||
logoDestination: PropTypes.string,
|
||||
avatar: PropTypes.string,
|
||||
courseId: PropTypes.string,
|
||||
authenticatedUserAvatar: PropTypes.string,
|
||||
username: PropTypes.string,
|
||||
stickyOnMobile: PropTypes.bool,
|
||||
courseLockUp: PropTypes.node.isRequired,
|
||||
|
||||
// i18n
|
||||
intl: intlShape.isRequired,
|
||||
isAdmin: PropTypes.bool,
|
||||
};
|
||||
|
||||
MobileHeader.defaultProps = {
|
||||
mainMenu: [],
|
||||
userMenu: [],
|
||||
logo: null,
|
||||
logoAltText: null,
|
||||
logoDestination: null,
|
||||
avatar: null,
|
||||
courseId: null,
|
||||
courseNumber: null,
|
||||
courseOrg: null,
|
||||
courseTitle: null,
|
||||
authenticatedUserAvatar: null,
|
||||
username: null,
|
||||
stickyOnMobile: true,
|
||||
isAdmin: false,
|
||||
};
|
||||
|
||||
export default injectIntl(MobileHeader);
|
||||
export default MobileHeader;
|
||||
|
||||
77
src/studio-header/MobileMenu.jsx
Normal file
77
src/studio-header/MobileMenu.jsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Collapsible } from '@edx/paragon';
|
||||
import messages from './messages';
|
||||
import { getContentMenuItem, getSettingMenuItems, getToolsMenuItems } from './utils';
|
||||
|
||||
const MobileMenu = ({
|
||||
studioBaseUrl,
|
||||
courseId,
|
||||
// injected
|
||||
intl,
|
||||
}) => {
|
||||
const contentItems = getContentMenuItem({ studioBaseUrl, courseId, intl });
|
||||
const settingsItems = getSettingMenuItems({ studioBaseUrl, courseId, intl });
|
||||
const toolsItems = getToolsMenuItems({ studioBaseUrl, courseId, intl });
|
||||
|
||||
return (
|
||||
<div
|
||||
className="ml-4 p-2 bg-light-100 border border-gray-200 small rounded"
|
||||
data-testid="mobile-menu"
|
||||
>
|
||||
<div>
|
||||
<Collapsible
|
||||
className="border-light-100"
|
||||
title={intl.formatMessage(messages['header.links.content'])}
|
||||
>
|
||||
<ul className="p-0" style={{ listStyleType: 'none' }}>
|
||||
{contentItems.map(item => (
|
||||
<li className="mobile-menu-item">
|
||||
<a href={item.href}>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Collapsible>
|
||||
<Collapsible
|
||||
className="border-light-100"
|
||||
title={intl.formatMessage(messages['header.links.settings'])}
|
||||
>
|
||||
<ul className="p-0" style={{ listStyleType: 'none' }}>
|
||||
{settingsItems.map(item => (
|
||||
<li className="mobile-menu-item">
|
||||
<a href={item.href}>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Collapsible>
|
||||
<Collapsible
|
||||
className="border-light-100"
|
||||
title={intl.formatMessage(messages['header.links.tools'])}
|
||||
>
|
||||
<ul className="p-0" style={{ listStyleType: 'none' }}>
|
||||
{toolsItems.map(item => (
|
||||
<li className="mobile-menu-item">
|
||||
<a href={item.href}>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
MobileMenu.propTypes = {
|
||||
courseId: PropTypes.string.isRequired,
|
||||
studioBaseUrl: PropTypes.string.isRequired,
|
||||
// injected
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(MobileMenu);
|
||||
37
src/studio-header/NavDropdownMenu.jsx
Normal file
37
src/studio-header/NavDropdownMenu.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Dropdown,
|
||||
DropdownButton,
|
||||
} from '@edx/paragon';
|
||||
|
||||
const NavDropdownMenu = ({
|
||||
id,
|
||||
buttonTitle,
|
||||
items,
|
||||
}) => (
|
||||
<DropdownButton
|
||||
id={id}
|
||||
title={buttonTitle}
|
||||
variant="tertiary"
|
||||
>
|
||||
{items.map(item => (
|
||||
<Dropdown.Item
|
||||
href={item.href}
|
||||
className="small"
|
||||
>
|
||||
{item.title}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</DropdownButton>
|
||||
);
|
||||
|
||||
NavDropdownMenu.propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
buttonTitle: PropTypes.string.isRequired,
|
||||
items: PropTypes.arrayOf(PropTypes.shape({
|
||||
href: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
})).isRequired,
|
||||
};
|
||||
|
||||
export default NavDropdownMenu;
|
||||
68
src/studio-header/UserMenu.jsx
Normal file
68
src/studio-header/UserMenu.jsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Avatar,
|
||||
} from '@edx/paragon';
|
||||
import NavDropdownMenu from './NavDropdownMenu';
|
||||
import { getUserMenuItems } from './utils';
|
||||
|
||||
const UserMenu = ({
|
||||
username,
|
||||
studioBaseUrl,
|
||||
logoutUrl,
|
||||
authenticatedUserAvatar,
|
||||
isMobile,
|
||||
isAdmin,
|
||||
// injected
|
||||
intl,
|
||||
}) => {
|
||||
const avatar = authenticatedUserAvatar ? (
|
||||
<img
|
||||
className="d-block w-100 h-100"
|
||||
src={authenticatedUserAvatar}
|
||||
alt={username}
|
||||
data-testid="avatar-image"
|
||||
/>
|
||||
) : (
|
||||
<Avatar
|
||||
size="sm"
|
||||
className="mr-2"
|
||||
alt={username}
|
||||
data-testid="avatar-icon"
|
||||
/>
|
||||
);
|
||||
const title = isMobile ? avatar : <>{avatar}{username}</>;
|
||||
|
||||
return (
|
||||
<NavDropdownMenu
|
||||
buttonTitle={title}
|
||||
id="user-dropdown-menu"
|
||||
items={getUserMenuItems({
|
||||
studioBaseUrl,
|
||||
logoutUrl,
|
||||
intl,
|
||||
isAdmin,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
UserMenu.propTypes = {
|
||||
username: PropTypes.string,
|
||||
studioBaseUrl: PropTypes.string.isRequired,
|
||||
logoutUrl: PropTypes.string.isRequired,
|
||||
authenticatedUserAvatar: PropTypes.string,
|
||||
isMobile: PropTypes.bool,
|
||||
isAdmin: PropTypes.bool,
|
||||
// injected
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
UserMenu.defaultProps = {
|
||||
isMobile: false,
|
||||
isAdmin: false,
|
||||
authenticatedUserAvatar: null,
|
||||
username: null,
|
||||
};
|
||||
|
||||
export default injectIntl(UserMenu);
|
||||
@@ -3,7 +3,10 @@ $spacer: 1rem;
|
||||
$blue: #007DB8;
|
||||
$white: #FFFFFF;
|
||||
|
||||
@import "./Menu/menu";
|
||||
.btn-tertiary:hover {
|
||||
color: white;
|
||||
background-color: #00262B;
|
||||
}
|
||||
|
||||
.course-title-lockup {
|
||||
@media only screen and (max-width: 768px) {
|
||||
@@ -15,6 +18,7 @@ $white: #FFFFFF;
|
||||
padding: .5rem;
|
||||
padding-right: $spacer;
|
||||
border-right: 1px solid #E5E5E5;
|
||||
min-width: 70%;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
@@ -28,33 +32,45 @@ $white: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-lockup {
|
||||
max-width: 50%;
|
||||
.mobile-menu-container {
|
||||
background-color: white;
|
||||
|
||||
.pgn__modal-popup__arrow::after {
|
||||
border-top-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
display: inline-flex;
|
||||
line-height: 3rem;
|
||||
background: transparent;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
border: none;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
padding: .75rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.mobile-menu-item {
|
||||
padding: 8px 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgb(0 0 0 / .1);
|
||||
a {
|
||||
color: #454545;
|
||||
}
|
||||
}
|
||||
|
||||
// .icon-button {
|
||||
// display: inline-flex;
|
||||
// line-height: 3rem;
|
||||
// background: transparent;
|
||||
// vertical-align: middle;
|
||||
// text-align: center;
|
||||
// border: none;
|
||||
// height: 3rem;
|
||||
// width: 3rem;
|
||||
// padding: .75rem;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// background: rgb(0 0 0 / .1);
|
||||
// }
|
||||
// }
|
||||
|
||||
.site-header-mobile,
|
||||
.site-header-desktop {
|
||||
position: relative;
|
||||
|
||||
105
src/studio-header/utils.js
Normal file
105
src/studio-header/utils.js
Normal file
@@ -0,0 +1,105 @@
|
||||
import { getPagePath } from '../utils';
|
||||
import messages from './messages';
|
||||
|
||||
export const getContentMenuItem = ({ studioBaseUrl, courseId, intl }) => {
|
||||
const items = [
|
||||
{
|
||||
href: `${studioBaseUrl}/course/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.outline']),
|
||||
},
|
||||
{
|
||||
href: `${studioBaseUrl}/course_info/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.updates']),
|
||||
},
|
||||
{
|
||||
href: getPagePath(courseId, 'true', 'tabs'),
|
||||
title: intl.formatMessage(messages['header.links.pages']),
|
||||
},
|
||||
{
|
||||
href: `${studioBaseUrl}/assets/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.filesAndUploads']),
|
||||
},
|
||||
];
|
||||
if (process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN === 'true') {
|
||||
items.push({
|
||||
href: `${studioBaseUrl}/videos/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.videoUploads']),
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
export const getSettingMenuItems = ({ studioBaseUrl, courseId, intl }) => ([
|
||||
{
|
||||
href: `${studioBaseUrl}/settings/details/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.scheduleAndDetails']),
|
||||
},
|
||||
{
|
||||
href: `${studioBaseUrl}/settings/grading/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.grading']),
|
||||
},
|
||||
{
|
||||
href: `${studioBaseUrl}/course_team/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.pages']),
|
||||
},
|
||||
{
|
||||
href: `${studioBaseUrl}/group_configurations/course-v1:${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.groupConfigurations']),
|
||||
},
|
||||
{
|
||||
href: `${studioBaseUrl}/settings/advanced/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.advancedSettings']),
|
||||
},
|
||||
{
|
||||
href: `${studioBaseUrl}/certificates/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.certificates']),
|
||||
},
|
||||
]);
|
||||
|
||||
export const getToolsMenuItems = ({ studioBaseUrl, courseId, intl }) => ([
|
||||
{
|
||||
href: `${studioBaseUrl}/import/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.import']),
|
||||
},
|
||||
{
|
||||
href: `${studioBaseUrl}/export/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.export']),
|
||||
}, {
|
||||
href: `${studioBaseUrl}/checklists/${courseId}`,
|
||||
title: intl.formatMessage(messages['header.links.checklists']),
|
||||
},
|
||||
]);
|
||||
|
||||
export const getUserMenuItems = ({
|
||||
studioBaseUrl,
|
||||
logoutUrl,
|
||||
intl,
|
||||
isAdmin,
|
||||
}) => {
|
||||
let items = [
|
||||
{
|
||||
href: `${studioBaseUrl}}`,
|
||||
title: intl.formatMessage(messages['header.user.menu.studio']),
|
||||
}, {
|
||||
href: `${logoutUrl}`,
|
||||
title: intl.formatMessage(messages['header.user.menu.logout']),
|
||||
},
|
||||
];
|
||||
if (isAdmin) {
|
||||
items = [
|
||||
{
|
||||
href: `${studioBaseUrl}}`,
|
||||
title: intl.formatMessage(messages['header.user.menu.studio']),
|
||||
}, {
|
||||
href: `${studioBaseUrl}/maintenance`,
|
||||
title: intl.formatMessage(messages['header.user.menu.maintenance']),
|
||||
}, {
|
||||
href: `${logoutUrl}`,
|
||||
title: intl.formatMessage(messages['header.user.menu.logout']),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
Reference in New Issue
Block a user