diff --git a/src/instructor-toolbar/InstructorToolbar.jsx b/src/instructor-toolbar/InstructorToolbar.jsx index 71d968c869..539b3d2fa6 100644 --- a/src/instructor-toolbar/InstructorToolbar.jsx +++ b/src/instructor-toolbar/InstructorToolbar.jsx @@ -1,9 +1,11 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { getConfig } from '@edx/frontend-platform'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { ALERT_TYPES, AlertList } from '../generic/user-messages'; import Alert from '../generic/user-messages/Alert'; +import messages from './messages'; import MasqueradeWidget from './masquerade-widget'; import { useAccessExpirationMasqueradeBanner } from '../alerts/access-expiration-alert'; import { useCourseStartMasqueradeBanner } from '../alerts/course-start-alert'; @@ -75,17 +77,17 @@ const InstructorToolbar = (props) => { {(urlStudio || urlInsights) && ( <>
- View course in: + {props.intl.formatMessage(messages.titleViewAs)} )} {urlStudio && ( - Studio + {props.intl.formatMessage(messages.titleStudio)} )} {urlInsights && ( - Insights + {props.intl.formatMessage(messages.titleInsights)} )} @@ -115,6 +117,7 @@ InstructorToolbar.propTypes = { courseId: PropTypes.string, unitId: PropTypes.string, tab: PropTypes.string, + intl: intlShape.isRequired, }; InstructorToolbar.defaultProps = { @@ -123,4 +126,4 @@ InstructorToolbar.defaultProps = { tab: '', }; -export default InstructorToolbar; +export default injectIntl(InstructorToolbar); diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx index 0808f0ec41..07c8b69ae2 100644 --- a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx +++ b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx @@ -21,7 +21,7 @@ class MasqueradeWidget extends Component { this.courseId = props.courseId; this.state = { autoFocus: false, - masquerade: 'Staff', + masquerade: this.props.intl.formatMessage(messages.buttonStaff), options: [], shouldShowUserNameInput: false, masqueradeUsername: null, @@ -71,7 +71,7 @@ class MasqueradeWidget extends Component { toggle(show) { this.setState(prevState => ({ autoFocus: true, - masquerade: 'Specific Student...', + masquerade: this.props.intl.formatMessage(messages.buttonSpecificStudent), shouldShowUserNameInput: show === undefined ? !prevState.shouldShowUserNameInput : show, })); } @@ -96,7 +96,7 @@ class MasqueradeWidget extends Component { if (active.userName) { this.setState({ autoFocus: false, - masquerade: 'Specific Student...', + masquerade: this.props.intl.formatMessage(messages.buttonSpecificStudent), masqueradeUsername: active.userName, shouldShowUserNameInput: true, }); @@ -120,7 +120,7 @@ class MasqueradeWidget extends Component { return (
- View this course as: + {this.props.intl.formatMessage(messages.titleViewCourseIn)} {masquerade} @@ -135,7 +135,7 @@ class MasqueradeWidget extends Component { {`${specificLearnerInputText}:`} this.onError(errorMessage)} diff --git a/src/instructor-toolbar/masquerade-widget/messages.js b/src/instructor-toolbar/masquerade-widget/messages.js index 4621534c63..6161719ca6 100644 --- a/src/instructor-toolbar/masquerade-widget/messages.js +++ b/src/instructor-toolbar/masquerade-widget/messages.js @@ -16,6 +16,21 @@ const messages = defineMessages({ defaultMessage: 'Masquerade as this user', description: 'Label for the masquerade user input', }, + titleViewCourseIn: { + id: 'instructor.toolbar.view.course', + defaultMessage: 'View course in: ', + description: 'Button to view the course in the studio', + }, + buttonStaff: { + id: 'buttonStaff', + defaultMessage: 'Staff', + description: 'Button to see the different staff options', + }, + buttonSpecificStudent: { + id: 'buttonSpecificStudent', + defaultMessage: 'Specific Student...', + description: 'Button specific student', + }, }); export default messages; diff --git a/src/instructor-toolbar/messages.js b/src/instructor-toolbar/messages.js new file mode 100644 index 0000000000..e8e5804fe8 --- /dev/null +++ b/src/instructor-toolbar/messages.js @@ -0,0 +1,21 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + titleViewAs: { + id: 'instructor.toolbar.view.as', + defaultMessage: 'View this course as: ', + description: 'Button to view this course as', + }, + titleStudio: { + id: 'instructor.toolbar.studio', + defaultMessage: 'Studio', + description: 'Button to view in studio', + }, + titleInsights: { + id: 'instructor.toolbar.insights', + defaultMessage: 'Insights', + description: 'Button Insights', + }, +}); + +export default messages;