Merge pull request #5359 from kchadha/studio-translation-setup

Add l10n file to studios view and replace text with formatted message.

src/l10n.json

@@ -248,6 +248,7 @@
     "thumbnail.by": "by",
     "report.error": "Something went wrong when trying to send your message. Please try again.",
     "report.project": "Report Project",
+    "report.studio": "Report Studio",
     "report.projectInstructions": "When you send a report, it lets the Scratch Team know about projects that break the {CommunityGuidelinesLink}. Does something in this project break the {CommunityGuidelinesLink}? If you think it does, please tell us more.",
     "report.CommunityGuidelinesLinkText": "Scratch Community Guidelines",
     "report.reasonPlaceHolder": "Select a reason",

src/views/studio/l10n.json

+{
+    "studio.tabNavProjects": "Projects",
+    "studio.tabNavCurators": "Curators",
+    "studio.tabNavComments": "Comments",
+    "studio.tabNavActivity": "Activity",
+
+    "studio.title": "Title",
+    "studio.description": "Description",
+    "studio.thumbnail": "Thumbnail",
+
+    "studio.projectsHeader": "Projects",
+    "studio.addProjectsHeader": "Add Projects",
+    "studio.addProject": "Add",
+
+    "studio.creatorRole": "Studio Creator",
+
+    "studio.managersHeader": "Managers",
+    
+    "studio.unfollowStudio": "Unfollow Studio",
+    "studio.followStudio": "Follow Studio",
+
+    "studio.curatorsHeader": "Curators",
+    "studio.inviteCuratorsHeader": "Invite Curators",
+    "studio.inviteCurator": "Invite",
+    "studio.curatorAcceptInvite": "Accept Invite",
+
+    "studio.commentsHeader": "Comments"
+}
\ No newline at end of file

src/views/studio/studio-comments.jsx

@@ -56,7 +56,7 @@ const StudioComments = ({
 
     return (
         <div>
-            <h2>Comments</h2>
+            <h2><FormattedMessage id="studio.commentsHeader" /></h2>
             {canEditCommentsAllowed && <StudioCommentsAllowed />}
             <div>
                 {shouldShowCommentComposer && commentsAllowed &&

src/views/studio/studio-curator-invite.jsx

@@ -3,6 +3,7 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
 
 import {acceptInvitation} from './lib/studio-member-actions';
 
@@ -26,7 +27,7 @@ const StudioCuratorInvite = ({onSubmit}) => {
                             setSubmitting(false);
                         });
                 }}
-            >Accept invite</button>
+            ><FormattedMessage id="studio.curatorAcceptInvite" /></button>
             {error && <div>{error}</div>}
         </div>
     );

src/views/studio/studio-curator-inviter.jsx

@@ -3,6 +3,7 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
 
 import {inviteCurator} from './lib/studio-member-actions';
 
@@ -13,7 +14,7 @@ const StudioCuratorInviter = ({onSubmit}) => {
 
     return (
         <div className="studio-adder-section">
-            <h3>✦ Invite Curators</h3>
+            <h3><FormattedMessage id="studio.inviteCuratorsHeader" /></h3>
             <input
                 disabled={submitting}
                 type="text"
@@ -34,7 +35,7 @@ const StudioCuratorInviter = ({onSubmit}) => {
                         .catch(e => setError(e))
                         .then(() => setSubmitting(false));
                 }}
-            >Invite</button>
+            ><FormattedMessage id="studio.inviteCurator" /></button>
             {error && <div>{error}</div>}
         </div>
     );

src/views/studio/studio-curators.jsx

 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
 
 import {curators} from './lib/redux-modules';
 import Debug from './debug.jsx';
@@ -18,7 +19,7 @@ const StudioCurators = ({
     }, []);
 
     return (<div className="studio-members">
-        <h2>Curators</h2>
+        <h2><FormattedMessage id="studio.curatorsHeader" /></h2>
         {canInviteCurators && <CuratorInviter />}
         {showCuratorInvite && <CuratorInvite />}
         {error && <Debug
@@ -37,7 +38,7 @@ const StudioCurators = ({
                 {loading ? <small>Loading...</small> : (
                     moreToLoad ?
                         <button onClick={onLoadMore}>
-                    Load more
+                            <FormattedMessage id="general.loadMore" />
                         </button> :
                         <small>No more to load</small>
                 )}

src/views/studio/studio-follow.jsx

@@ -2,6 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+
 import {selectIsFollowing} from '../../redux/studio';
 import {selectCanFollowStudio} from '../../redux/studio-permissions';
 import {
@@ -28,7 +30,9 @@ const StudioFollow = ({
                 onClick={() => handleFollow(!isFollowing)}
             >
                 {isMutating ? '...' : (
-                    isFollowing ? 'Unfollow Studio' : 'Follow Studio'
+                    isFollowing ?
+                        <FormattedMessage id="studio.unfollowStudio" /> :
+                        <FormattedMessage id="studio.followStudio" />
                 )}
             </button>
             {followingError && <div>Error mutating following: {followingError}</div>}

src/views/studio/studio-managers.jsx

 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
 
 import {managers} from './lib/redux-modules';
 import {loadManagers} from './lib/studio-member-actions';
@@ -15,7 +16,7 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
 
     return (
         <div className="studio-members">
-            <h2>Managers</h2>
+            <h2><FormattedMessage id="studio.managersHeader" /></h2>
             {error && <Debug
                 label="Error"
                 data={error}
@@ -33,7 +34,7 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
                     {loading ? <small>Loading...</small> : (
                         moreToLoad ?
                             <button onClick={onLoadMore}>
-                            Load more
+                                <FormattedMessage id="general.loadMore" />
                             </button> :
                             <small>No more to load</small>
                     )}

src/views/studio/studio-member-tile.jsx

@@ -3,6 +3,7 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
 
 import {
     selectCanRemoveCurators, selectCanRemoveManager, selectCanPromoteCurators
@@ -33,7 +34,7 @@ const StudioMemberTile = ({
                     href={userUrl}
                     className="studio-member-name"
                 >{username}</a>
-                {isCreator && <div className="studio-member-role">Studio Creator</div>}
+                {isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
             </div>
             {canRemove &&
                 <button

src/views/studio/studio-project-adder.jsx

@@ -3,6 +3,7 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
 
 import {addProject} from './lib/studio-project-actions';
 
@@ -13,7 +14,7 @@ const StudioProjectAdder = ({onSubmit}) => {
 
     return (
         <div className="studio-adder-section">
-            <h3>✦ Add Projects</h3>
+            <h3><FormattedMessage id="studio.addProjectsHeader" /></h3>
             <input
                 disabled={submitting}
                 type="text"
@@ -34,7 +35,7 @@ const StudioProjectAdder = ({onSubmit}) => {
                         .catch(e => setError(e))
                         .then(() => setSubmitting(false));
                 }}
-            >Add</button>
+            ><FormattedMessage id="studio.addProject" /></button>
             {error && <div>{error}</div>}
         </div>
     );

src/views/studio/studio-projects.jsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import StudioOpenToAll from './studio-open-to-all.jsx';
+import {FormattedMessage} from 'react-intl';
 
 import {projects} from './lib/redux-modules';
 import {selectCanAddProjects, selectCanEditOpenToAll} from '../../redux/studio-permissions';
@@ -19,7 +20,7 @@ const StudioProjects = ({
     
     return (
         <div className="studio-projects">
-            <h2>Projects</h2>
+            <h2><FormattedMessage id="studio.projectsHeader" /></h2>
             {canEditOpenToAll && <StudioOpenToAll />}
             {canAddProjects && <StudioProjectAdder />}
             {error && <Debug
@@ -43,7 +44,7 @@ const StudioProjects = ({
                     {loading ? <small>Loading...</small> : (
                         moreToLoad ?
                             <button onClick={onLoadMore}>
-                            Load more
+                                <FormattedMessage id="general.loadMore" />
                             </button> :
                             <small>No more to load</small>
                     )}

src/views/studio/studio-report.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
 
 import {
     Fields,
@@ -24,15 +25,15 @@ const StudioReport = ({
     <div>
         <h3>Reporting</h3>
         {canReport && (
-            <button onClick={handleOpen}>Report</button>
+            <button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
         )}
         {isOpen && (
             <div style={{padding: '1rem', margin: '1rem', border: '1px solid green'}}>
-                <div>Report Studio Modal</div>
+                <div><FormattedMessage id="report.studio" /></div>
                 {previouslyReported ? (
                     <React.Fragment>
                         <div>Submitted the report!</div>
-                        <button onClick={handleClose}>Close</button>
+                        <button onClick={handleClose}><FormattedMessage id="general.close" /></button>
                     </React.Fragment>
                 ) : (
                     <React.Fragment>
@@ -40,9 +41,9 @@ const StudioReport = ({
                             value={field}
                             onChange={e => handleSetField(e.target.value)}
                         >
-                            <option value={Fields.TITLE}>Title</option>
-                            <option value={Fields.DESCRIPTION}>Description</option>
-                            <option value={Fields.THUMBNAIL}>Thumbnail</option>
+                            <option value={Fields.TITLE}><FormattedMessage id="studio.title" /></option>
+                            <option value={Fields.DESCRIPTION}><FormattedMessage id="studio.description" /></option>
+                            <option value={Fields.THUMBNAIL}><FormattedMessage id="studio.thumbnail" /></option>
                         </select>
                         {error && (
                             <div>
@@ -54,9 +55,9 @@ const StudioReport = ({
                             disabled={isSubmitting}
                             onClick={handleSubmit}
                         >
-                                Submit
+                            <FormattedMessage id="report.send" />
                         </button>
-                        <button onClick={handleClose}>Cancel</button>
+                        <button onClick={handleClose}><FormattedMessage id="general.cancel" /></button>
                     </React.Fragment>
                 )}
             </div>

src/views/studio/studio-tab-nav.jsx

 import React from 'react';
 import {useRouteMatch, NavLink} from 'react-router-dom';
 import SubNavigation from '../../components/subnavigation/subnavigation.jsx';
+import {FormattedMessage} from 'react-intl';
 
 const StudioTabNav = () => {
     const match = useRouteMatch();
@@ -15,25 +16,25 @@ const StudioTabNav = () => {
                 to={`${match.url}`}
                 exact
             >
-                <li>Projects</li>
+                <li><FormattedMessage id="studio.tabNavProjects" /></li>
             </NavLink>
             <NavLink
                 activeClassName="active"
                 to={`${match.url}/curators`}
             >
-                <li>Curators</li>
+                <li><FormattedMessage id="studio.tabNavCurators" /></li>
             </NavLink>
             <NavLink
                 activeClassName="active"
                 to={`${match.url}/comments`}
             >
-                <li> Comments</li>
+                <li><FormattedMessage id="studio.tabNavComments" /></li>
             </NavLink>
             <NavLink
                 activeClassName="active"
                 to={`${match.url}/activity`}
             >
-                <li>Activity</li>
+                <li><FormattedMessage id="studio.tabNavActivity" /></li>
             </NavLink>
         </SubNavigation>
     );