Fix Untranslatable strings #1193

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) && (
             <>
               <hr className="border-light" />
-              <span className="mr-2 mt-1 col-form-label">View course in:</span>
+              <span className="mr-2 mt-1 col-form-label">{props.intl.formatMessage(messages.titleViewAs)}</span>
             </>
           )}
           {urlStudio && (
             <span className="mx-1 my-1">
-              <a className="btn btn-inverse-outline-primary" href={urlStudio}>Studio</a>
+              <a className="btn btn-inverse-outline-primary" href={urlStudio}>{props.intl.formatMessage(messages.titleStudio)}</a>
             </span>
           )}
           {urlInsights && (
             <span className="mx-1 my-1">
-              <a className="btn btn-inverse-outline-primary" href={urlInsights}>Insights</a>
+              <a className="btn btn-inverse-outline-primary" href={urlInsights}>{props.intl.formatMessage(messages.titleInsights)}</a>
             </span>
           )}
         </div>
@@ -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);

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 (
       <div className="flex-grow-1">
         <div className="row">
-          <span className="col-auto col-form-label pl-3">View this course as:</span>
+          <span className="col-auto col-form-label pl-3">{this.props.intl.formatMessage(messages.titleViewCourseIn)}</span>
           <Dropdown className="flex-shrink-1 mx-1">
             <Dropdown.Toggle id="masquerade-widget-toggle" variant="inverse-outline-primary">
               {masquerade}
@@ -135,7 +135,7 @@ class MasqueradeWidget extends Component {
             <span className="col-auto col-form-label pl-3" id="masquerade-search-label">{`${specificLearnerInputText}:`}</span>
             <MasqueradeUserNameInput
               id="masquerade-search"
-              className="col-4"
+              className="col-4 form-control"
               autoFocus={autoFocus}
               defaultValue={masqueradeUsername}
               onError={(errorMessage) => this.onError(errorMessage)}

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;

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;