From 6b607c509df2129156f6e0d61048cf0108f1d941 Mon Sep 17 00:00:00 2001
From: jciasenza <jciasenza@aulasneo.com>
Date: Fri, 25 Oct 2024 22:09:22 -0300
Subject: [PATCH 1/2] fix: Untranslatable strings in Instructor Toolbar

---
 src/instructor-toolbar/InstructorToolbar.jsx  | 10 +++++----
 .../masquerade-widget/MasqueradeWidget.jsx    |  7 +++----
 .../masquerade-widget/messages.ts             | 10 +++++++++
 src/instructor-toolbar/messages.ts            | 21 +++++++++++++++++++
 4 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 src/instructor-toolbar/messages.ts

diff --git a/src/instructor-toolbar/InstructorToolbar.jsx b/src/instructor-toolbar/InstructorToolbar.jsx
index 71d968c869..157495469e 100644
--- a/src/instructor-toolbar/InstructorToolbar.jsx
+++ b/src/instructor-toolbar/InstructorToolbar.jsx
@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
+import { useIntl, 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';
+import messages from './messages';
 import { useAccessExpirationMasqueradeBanner } from '../alerts/access-expiration-alert';
 import { useCourseStartMasqueradeBanner } from '../alerts/course-start-alert';
 
@@ -61,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);
 
@@ -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"><FormattedMessage {...messages.titleViewCourseIn} /></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}>{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}>{formatMessage(messages.titleInsights)}</a>
             </span>
           )}
         </div>
diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
index e898c5c03f..a4edd5d6fb 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: 'Staff',
+      masquerade: this.props.intl.formatMessage(messages.titleStaff),
       active: {},
       available: [],
       shouldShowUserNameInput: false,
@@ -128,7 +127,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"><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.ts b/src/instructor-toolbar/masquerade-widget/messages.ts
index 4621534c63..17caa517e1 100644
--- a/src/instructor-toolbar/masquerade-widget/messages.ts
+++ b/src/instructor-toolbar/masquerade-widget/messages.ts
@@ -16,6 +16,16 @@ const messages = defineMessages({
     defaultMessage: 'Masquerade as this user',
     description: 'Label for the masquerade user input',
   },
+  titleViewAs: {
+    id: 'instructor.toolbar.view.as',
+    defaultMessage: 'View this course as:',
+    description: 'Button to view this course as',
+  },
+  titleStaff: {
+    id: 'instructor.toolbar.staff',
+    defaultMessage: 'Staffaaaa',
+    description: 'Button Staff',
+  },
 });
 
 export default messages;
diff --git a/src/instructor-toolbar/messages.ts b/src/instructor-toolbar/messages.ts
new file mode 100644
index 0000000000..ad3a6c75e5
--- /dev/null
+++ b/src/instructor-toolbar/messages.ts
@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  titleViewCourseIn: {
+    id: 'instructor.toolbar.view.course',
+    defaultMessage: 'View course in:',
+    description: 'Button to view the course in the studio',
+  },
+  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 f1abc393a706b89b2cf115dc73e6ae2ff05544cf Mon Sep 17 00:00:00 2001
From: jciasenza <jciasenza@aulasneo.com>
Date: Tue, 29 Oct 2024 18:19:26 -0300
Subject: [PATCH 2/2] fix: message Staff

---
 src/instructor-toolbar/masquerade-widget/messages.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/instructor-toolbar/masquerade-widget/messages.ts b/src/instructor-toolbar/masquerade-widget/messages.ts
index 17caa517e1..c5250420fb 100644
--- a/src/instructor-toolbar/masquerade-widget/messages.ts
+++ b/src/instructor-toolbar/masquerade-widget/messages.ts
@@ -23,7 +23,7 @@ const messages = defineMessages({
   },
   titleStaff: {
     id: 'instructor.toolbar.staff',
-    defaultMessage: 'Staffaaaa',
+    defaultMessage: 'Staff',
     description: 'Button Staff',
   },
 });