From 04d3aa72e3e1eaed273e1f237e3c5a700736b9e2 Mon Sep 17 00:00:00 2001
From: jciasenza <jciasenza@aulasneo.com>
Date: Tue, 27 Aug 2024 15:20:13 -0300
Subject: [PATCH 1/3] Fix Untranslatable strings #1193

---
 src/instructor-toolbar/InstructorToolbar.jsx  | 11 ++++++----
 .../masquerade-widget/MasqueradeWidget.jsx    | 10 ++++-----
 .../masquerade-widget/messages.js             | 15 +++++++++++++
 src/instructor-toolbar/messages.js            | 21 +++++++++++++++++++
 4 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 src/instructor-toolbar/messages.js

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) && (
             <>
               <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);
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 (
       <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)}
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;

From fc531589a356f2d9c6a6bfe3d47672b08d8e9e0a Mon Sep 17 00:00:00 2001
From: jciasenza <jciasenza@aulasneo.com>
Date: Thu, 17 Oct 2024 09:16:46 -0300
Subject: [PATCH 2/3] fix: component form in a JSX context and use useIntl
 instead of injectIntl

---
 src/instructor-toolbar/InstructorToolbar.jsx        | 13 ++++++-------
 .../masquerade-widget/MasqueradeWidget.jsx          | 11 +++++------
 .../masquerade-widget/messages.js                   |  8 ++++----
 src/instructor-toolbar/messages.js                  |  8 ++++----
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/instructor-toolbar/InstructorToolbar.jsx b/src/instructor-toolbar/InstructorToolbar.jsx
index 539b3d2fa6..9c215c7b7e 100644
--- a/src/instructor-toolbar/InstructorToolbar.jsx
+++ b/src/instructor-toolbar/InstructorToolbar.jsx
@@ -1,7 +1,7 @@
 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 { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { ALERT_TYPES, AlertList } from '../generic/user-messages';
 import Alert from '../generic/user-messages/Alert';
@@ -63,7 +63,7 @@ const InstructorToolbar = (props) => {
   const urlInsights = getInsightsUrl(courseId);
   const urlStudio = getStudioUrl(courseId, unitId);
   const [masqueradeErrorMessage, showMasqueradeError] = useState(null);
-
+  const { formatMessage } = useIntl();
   const accessExpirationMasqueradeBanner = useAccessExpirationMasqueradeBanner(courseId, tab);
   const courseStartDateMasqueradeBanner = useCourseStartMasqueradeBanner(courseId, tab);
 
@@ -77,17 +77,17 @@ const InstructorToolbar = (props) => {
           {(urlStudio || urlInsights) && (
             <>
               <hr className="border-light" />
-              <span className="mr-2 mt-1 col-form-label">{props.intl.formatMessage(messages.titleViewAs)}</span>
+              <span className="mr-2 mt-1 col-form-label"><FormattedMessage {...messages.titleViewCourseIn} /></span>
             </>
           )}
           {urlStudio && (
             <span className="mx-1 my-1">
-              <a className="btn btn-inverse-outline-primary" href={urlStudio}>{props.intl.formatMessage(messages.titleStudio)}</a>
+              <a className="btn btn-inverse-outline-primary" href={urlStudio}>{formatMessage(messages.titleStudio)}</a>
             </span>
           )}
           {urlInsights && (
             <span className="mx-1 my-1">
-              <a className="btn btn-inverse-outline-primary" href={urlInsights}>{props.intl.formatMessage(messages.titleInsights)}</a>
+              <a className="btn btn-inverse-outline-primary" href={urlInsights}>{formatMessage(messages.titleInsights)}</a>
             </span>
           )}
         </div>
@@ -117,7 +117,6 @@ InstructorToolbar.propTypes = {
   courseId: PropTypes.string,
   unitId: PropTypes.string,
   tab: PropTypes.string,
-  intl: intlShape.isRequired,
 };
 
 InstructorToolbar.defaultProps = {
@@ -126,4 +125,4 @@ InstructorToolbar.defaultProps = {
   tab: '',
 };
 
-export default injectIntl(InstructorToolbar);
+export default InstructorToolbar;
diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
index 07c8b69ae2..8dd60a884e 100644
--- a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
+++ b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
@@ -2,11 +2,10 @@ import React, {
   Component,
 } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';
 
 import { UserMessagesContext } from '../../generic/user-messages';
-
 import MasqueradeUserNameInput from './MasqueradeUserNameInput';
 import MasqueradeWidgetOption from './MasqueradeWidgetOption';
 import {
@@ -21,7 +20,7 @@ class MasqueradeWidget extends Component {
     this.courseId = props.courseId;
     this.state = {
       autoFocus: false,
-      masquerade: this.props.intl.formatMessage(messages.buttonStaff),
+      masquerade: 'Staff',
       options: [],
       shouldShowUserNameInput: false,
       masqueradeUsername: null,
@@ -71,7 +70,7 @@ class MasqueradeWidget extends Component {
   toggle(show) {
     this.setState(prevState => ({
       autoFocus: true,
-      masquerade: this.props.intl.formatMessage(messages.buttonSpecificStudent),
+      masquerade: 'Specific Student...',
       shouldShowUserNameInput: show === undefined ? !prevState.shouldShowUserNameInput : show,
     }));
   }
@@ -96,7 +95,7 @@ class MasqueradeWidget extends Component {
     if (active.userName) {
       this.setState({
         autoFocus: false,
-        masquerade: this.props.intl.formatMessage(messages.buttonSpecificStudent),
+        masquerade: 'Specific Student...',
         masqueradeUsername: active.userName,
         shouldShowUserNameInput: true,
       });
@@ -120,7 +119,7 @@ class MasqueradeWidget extends Component {
     return (
       <div className="flex-grow-1">
         <div className="row">
-          <span className="col-auto col-form-label pl-3">{this.props.intl.formatMessage(messages.titleViewCourseIn)}</span>
+          <span className="col-auto col-form-label pl-3"><FormattedMessage {...messages.titleViewAs} /></span>
           <Dropdown className="flex-shrink-1 mx-1">
             <Dropdown.Toggle id="masquerade-widget-toggle" variant="inverse-outline-primary">
               {masquerade}
diff --git a/src/instructor-toolbar/masquerade-widget/messages.js b/src/instructor-toolbar/masquerade-widget/messages.js
index 6161719ca6..a4765ba33c 100644
--- a/src/instructor-toolbar/masquerade-widget/messages.js
+++ b/src/instructor-toolbar/masquerade-widget/messages.js
@@ -16,10 +16,10 @@ 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',
+  titleViewAs: {
+    id: 'instructor.toolbar.view.as',
+    defaultMessage: 'View this course as: ',
+    description: 'Button to view this course as',
   },
   buttonStaff: {
     id: 'buttonStaff',
diff --git a/src/instructor-toolbar/messages.js b/src/instructor-toolbar/messages.js
index e8e5804fe8..ad3a6c75e5 100644
--- a/src/instructor-toolbar/messages.js
+++ b/src/instructor-toolbar/messages.js
@@ -1,10 +1,10 @@
 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',
+  titleViewCourseIn: {
+    id: 'instructor.toolbar.view.course',
+    defaultMessage: 'View course in:',
+    description: 'Button to view the course in the studio',
   },
   titleStudio: {
     id: 'instructor.toolbar.studio',

From ecc6c791d94f60d2f7f7eddd956a9b45c437af5c Mon Sep 17 00:00:00 2001
From: jciasenza <jciasenza@aulasneo.com>
Date: Thu, 24 Oct 2024 11:57:57 -0300
Subject: [PATCH 3/3] fix: message in masquered-widget

---
 src/instructor-toolbar/masquerade-widget/messages.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/instructor-toolbar/masquerade-widget/messages.js b/src/instructor-toolbar/masquerade-widget/messages.js
index a4765ba33c..22dfddb36a 100644
--- a/src/instructor-toolbar/masquerade-widget/messages.js
+++ b/src/instructor-toolbar/masquerade-widget/messages.js
@@ -18,19 +18,9 @@ const messages = defineMessages({
   },
   titleViewAs: {
     id: 'instructor.toolbar.view.as',
-    defaultMessage: 'View this course as: ',
+    defaultMessage: 'View this course as:',
     description: 'Button to view this course as',
   },
-  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;