diff --git a/src/instructor-toolbar/InstructorToolbar.jsx b/src/instructor-toolbar/InstructorToolbar.jsx index 71d968c869..c510689c35 100644 --- a/src/instructor-toolbar/InstructorToolbar.jsx +++ b/src/instructor-toolbar/InstructorToolbar.jsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { getConfig } from '@edx/frontend-platform'; +import { FormattedMessage } from '@edx/frontend-platform/i18n'; import { ALERT_TYPES, AlertList } from '../generic/user-messages'; import Alert from '../generic/user-messages/Alert'; import MasqueradeWidget from './masquerade-widget'; @@ -75,17 +76,23 @@ const InstructorToolbar = (props) => { {(urlStudio || urlInsights) && ( <>
- View course in: + + + )} {urlStudio && ( - Studio + + + )} {urlInsights && ( - Insights + + + )} diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx index 554703fcfd..e33457cce5 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.staffLabel), options: [], shouldShowUserNameInput: false, masqueradeUsername: null, @@ -36,7 +36,7 @@ class MasqueradeWidget extends Component { // This was explicitly denied by the backend; // assume it's disabled/unavailable. // eslint-disable-next-line no-console - this.onError('Unable to get masquerade options'); + this.onError(this.props.intl.formatMessage(messages.optionsError)); } }).catch((response) => { // There's not much we can do to recover; @@ -71,7 +71,7 @@ class MasqueradeWidget extends Component { toggle(show) { this.setState(prevState => ({ autoFocus: true, - masquerade: 'Specific Student...', + masquerade: this.props.intl.formatMessage(messages.specificStudentLabel), shouldShowUserNameInput: show === undefined ? !prevState.shouldShowUserNameInput : show, })); } @@ -96,14 +96,14 @@ class MasqueradeWidget extends Component { if (active.userName) { this.setState({ autoFocus: false, - masquerade: 'Specific Student...', + masquerade: this.props.intl.formatMessage(messages.specificStudentLabel), masqueradeUsername: active.userName, shouldShowUserNameInput: true, }); } else if (active.groupName) { this.setState({ masquerade: active.groupName }); } else if (active.role === 'student') { - this.setState({ masquerade: 'Learner' }); + this.setState({ masquerade: this.props.intl.formatMessage(messages.learnerLabel) }); } return options; } @@ -117,10 +117,11 @@ class MasqueradeWidget extends Component { masqueradeUsername, } = this.state; const specificLearnerInputText = this.props.intl.formatMessage(messages.placeholder); + const viewThisCourseAsText = this.props.intl.formatMessage(messages.viewThisCourseAsLabel); return (
- View this course as: + {viewThisCourseAsText} {masquerade} diff --git a/src/instructor-toolbar/masquerade-widget/messages.js b/src/instructor-toolbar/masquerade-widget/messages.js index 4621534c63..0a8948f9fe 100644 --- a/src/instructor-toolbar/masquerade-widget/messages.js +++ b/src/instructor-toolbar/masquerade-widget/messages.js @@ -16,6 +16,36 @@ const messages = defineMessages({ defaultMessage: 'Masquerade as this user', description: 'Label for the masquerade user input', }, + viewThisCourseAsLabel: { + id: 'masquerade-widget.viewThisCourseAs.label', + defaultMessage: 'View this course as:', + description: 'Label for masquerade dropdown in the instructor toolbar', + }, + staffLabel: { + id: 'masquerade-widget.role.staff', + defaultMessage: 'Staff', + description: 'Masquerade dropdown selected label for Staff role', + }, + learnerLabel: { + id: 'masquerade-widget.role.learner', + defaultMessage: 'Learner', + description: 'Masquerade dropdown selected label for Learner role', + }, + specificStudentLabel: { + id: 'masquerade-widget.role.specificStudent', + defaultMessage: 'Specific Student...', + description: 'Masquerade dropdown selected label when viewing specific student', + }, + myCertificateLabel: { + id: 'masquerade-widget.role.myCertificate', + defaultMessage: 'My certificate', + description: 'Masquerade dropdown label for the certificate view option', + }, + optionsError: { + id: 'masquerade-widget.options.error', + defaultMessage: 'Unable to get masquerade options', + description: 'Error shown when fetching masquerade options fails', + }, }); export default messages;