fix: [CHTC-121] fix course home page missing translations

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) && (
             <>
               <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">
+                <FormattedMessage id="instructorToolbar.viewCourseIn.label" defaultMessage="View course in:" />
+              </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}>
+                <FormattedMessage id="instructorToolbar.studio.link" defaultMessage="Studio" />
+              </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}>
+                <FormattedMessage id="instructorToolbar.insights.link" defaultMessage="Insights" />
+              </a>
             </span>
           )}
         </div>

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 (
       <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">{viewThisCourseAsText}</span>
           <Dropdown className="flex-shrink-1 mx-1">
             <Dropdown.Toggle id="masquerade-widget-toggle" variant="inverse-outline-primary">
               {masquerade}

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;