Add translation to missing strings

Question, should ‘x’ and ‘y’ be localizable?

Author: chrisgarrity

.tx/config

@@ -1,7 +1,7 @@
 [main]
 host = https://www.transifex.com
 
-[experimental-scratch.scratch-gui]
+[scratch-editor.interface]
 file_filter = translations/<lang>.json
 source_file = translations/en.json
 source_lang = en

src/components/controls/controls.jsx

@@ -1,17 +1,32 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
 import GreenFlag from '../green-flag/green-flag.jsx';
 import StopAll from '../stop-all/stop-all.jsx';
 import TurboMode from '../turbo-mode/turbo-mode.jsx';
 
 import styles from './controls.css';
 
+const messages = defineMessages({
+    goTitle: {
+        id: 'gui.controls.go',
+        defaultMessage: 'Go',
+        description: 'Green flag button title'
+    },
+    stopTitle: {
+        id: 'gui.controls.stop',
+        defaultMessage: 'Stop',
+        description: 'Stop button title'
+    }
+});
+
 const Controls = function (props) {
     const {
         active,
         className,
+        intl,
         onGreenFlagClick,
         onStopAllClick,
         turbo,
@@ -24,10 +39,12 @@ const Controls = function (props) {
         >
             <GreenFlag
                 active={active}
+                title={intl.formatMessage(messages.goTitle)}
                 onClick={onGreenFlagClick}
             />
             <StopAll
                 active={active}
+                title={intl.formatMessage(messages.stopTitle)}
                 onClick={onStopAllClick}
             />
             {turbo ? (
@@ -40,6 +57,7 @@ const Controls = function (props) {
 Controls.propTypes = {
     active: PropTypes.bool,
     className: PropTypes.string,
+    intl: intlShape.isRequired,
     onGreenFlagClick: PropTypes.func.isRequired,
     onStopAllClick: PropTypes.func.isRequired,
     turbo: PropTypes.bool
@@ -50,4 +68,4 @@ Controls.defaultProps = {
     turbo: false
 };
 
-export default Controls;
+export default injectIntl(Controls);

src/components/crash-message/crash-message.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Box from '../box/box.jsx';
+import {FormattedMessage} from 'react-intl';
 
 import styles from './crash-message.css';
 import reloadIcon from './reload.svg';
@@ -13,13 +14,20 @@ const CrashMessage = props => (
                 src={reloadIcon}
             />
             <h2>
-                Oops! Something went wrong.
+                <FormattedMessage
+                    defaultMessage="Oops! Something went wrong."
+                    description="Unhandled error title"
+                    id="gui.crashMessage.title"
+                />
             </h2>
             <p>
-                We are so sorry, but it looks like Scratch has crashed. This bug has been
-                automatically reported to the Scratch Team. Please refresh your page to try
-                again.
-
+                { /* eslint-disable max-len */ }
+                <FormattedMessage
+                    defaultMessage="We are so sorry, but it looks like Scratch has crashed. This bug has been automatically reported to the Scratch Team. Please refresh your page to try again."
+                    description="Unhandled error description"
+                    id="gui.crashMessage.description"
+                />
+                { /* eslint-enable max-len */ }
             </p>
             <button
                 className={styles.reloadButton}

src/components/forms/label.jsx

@@ -15,7 +15,7 @@ const Label = props => (
 Label.propTypes = {
     children: PropTypes.node,
     secondary: PropTypes.bool,
-    text: PropTypes.string.isRequired
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 };
 
 Label.defaultProps = {

src/components/library/library.jsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
 import LibraryItem from '../library-item/library-item.jsx';
 import Modal from '../../containers/modal.jsx';
@@ -14,6 +15,14 @@ import styles from './library.css';
 const ALL_TAG_TITLE = 'All';
 const tagListPrefix = [{title: ALL_TAG_TITLE}];
 
+const messages = defineMessages({
+    filterPlaceholder: {
+        id: 'gui.library.filterPlaceholder',
+        defaultMessage: 'Search',
+        description: 'Placeholder text for library search field'
+    }
+});
+
 class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
@@ -101,6 +110,7 @@ class LibraryComponent extends React.Component {
                                 )}
                                 filterQuery={this.state.filterQuery}
                                 inputClassName={styles.filterInput}
+                                placeholderText={this.props.intl.formatMessage(messages.filterPlaceholder)}
                                 onChange={this.handleFilterChange}
                                 onClear={this.handleFilterClear}
                             />
@@ -176,6 +186,7 @@ LibraryComponent.propTypes = {
     ),
     filterable: PropTypes.bool,
     id: PropTypes.string.isRequired,
+    intl: intlShape.isRequired,
     onItemMouseEnter: PropTypes.func,
     onItemMouseLeave: PropTypes.func,
     onItemSelected: PropTypes.func,
@@ -188,4 +199,4 @@ LibraryComponent.defaultProps = {
     filterable: true
 };
 
-export default LibraryComponent;
+export default injectIntl(LibraryComponent);

src/components/modal/modal.jsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactModal from 'react-modal';
+import {FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
@@ -46,7 +47,11 @@ const ModalComponent = props => (
                             iconSrc={backIcon}
                             onClick={props.onRequestClose}
                         >
-                            Back
+                            <FormattedMessage
+                                defaultMessage="Back"
+                                description="Back button in modal"
+                                id="gui.modal.back"
+                            />
                         </Button>
                     ) : (
                         <CloseButton

src/components/record-modal/playback-step.jsx

@@ -4,12 +4,36 @@ import Box from '../box/box.jsx';
 import Waveform from '../waveform/waveform.jsx';
 import Meter from '../meter/meter.jsx';
 import AudioTrimmer from '../../containers/audio-trimmer.jsx';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
 import styles from './record-modal.css';
 import backIcon from './icon--back.svg';
 import stopIcon from './icon--stop-playback.svg';
 import playIcon from './icon--play.svg';
 
+const messages = defineMessages({
+    stopMsg: {
+        defaultMessage: 'Stop',
+        description: 'Stop/Play button in recording playback',
+        id: 'gui.playbackStep.stopMsg'
+    },
+    playMsg: {
+        defaultMessage: 'Play',
+        description: 'Stop/Play button in recording playback',
+        id: 'gui.playbackStep.playMsg'
+    },
+    loadingMsg: {
+        defaultMessage: 'Loading...',
+        description: 'Loading/Save button in recording playback',
+        id: 'gui.playbackStep.loadingMsg'
+    },
+    saveMsg: {
+        defaultMessage: 'Save',
+        description: 'Loading/Save button in recording playback',
+        id: 'gui.playbackStep.saveMsg'
+    }
+});
+
 const PlaybackStep = props => (
     <Box>
         <Box className={styles.visualizationContainer}>
@@ -48,7 +72,10 @@ const PlaybackStep = props => (
                 />
                 <div className={styles.helpText}>
                     <span className={styles.playingText}>
-                        {props.playing ? 'Stop' : 'Play'}
+                        {props.playing ?
+                            props.intl.formatMessage(messages.stopMsg) :
+                            props.intl.formatMessage(messages.playMsg)
+                        }
                     </span>
                 </div>
             </button>
@@ -68,14 +95,18 @@ const PlaybackStep = props => (
                 disabled={props.encoding}
                 onClick={props.onSubmit}
             >
-                {props.encoding ? 'Loading...' : 'Save'}
+                {props.encoding ?
+                    props.intl.formatMessage(messages.loadingMsg) :
+                    props.intl.formatMessage(messages.saveMsg)
+                }
             </button>
         </Box>
     </Box>
 );
 
 PlaybackStep.propTypes = {
     encoding: PropTypes.bool.isRequired,
+    intl: intlShape.isRequired,
     levels: PropTypes.arrayOf(PropTypes.number).isRequired,
     onBack: PropTypes.func.isRequired,
     onPlay: PropTypes.func.isRequired,
@@ -89,4 +120,4 @@ PlaybackStep.propTypes = {
     trimStart: PropTypes.number.isRequired
 };
 
-export default PlaybackStep;
+export default injectIntl(PlaybackStep);

src/components/record-modal/record-modal.jsx

@@ -1,15 +1,24 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Box from '../box/box.jsx';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import RecordingStep from '../../containers/recording-step.jsx';
 import PlaybackStep from '../../containers/playback-step.jsx';
 import Modal from '../modal/modal.jsx';
 import styles from './record-modal.css';
 
+const messages = defineMessages({
+    title: {
+        defaultMessage: 'Record Sound',
+        description: 'Recording modal title',
+        id: 'gui.recordModal.title'
+    }
+});
+
 const RecordModal = props => (
     <Modal
         className={styles.modalContent}
-        contentLabel={'Record Sound'}
+        contentLabel={props.intl.formatMessage(messages.title)}
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
@@ -44,6 +53,7 @@ const RecordModal = props => (
 
 RecordModal.propTypes = {
     encoding: PropTypes.bool.isRequired,
+    intl: intlShape.isRequired,
     levels: PropTypes.arrayOf(PropTypes.number),
     onBack: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
@@ -64,4 +74,4 @@ RecordModal.propTypes = {
     trimStart: PropTypes.number.isRequired
 };
 
-export default RecordModal;
+export default injectIntl(RecordModal);

src/components/sprite-info/sprite-info.jsx

@@ -7,6 +7,7 @@ import Box from '../box/box.jsx';
 import Label from '../forms/label.jsx';
 import Input from '../forms/input.jsx';
 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
+import {FormattedMessage} from 'react-intl';
 
 import layout from '../../lib/layout-constants.js';
 import styles from './sprite-info.css';
@@ -31,17 +32,52 @@ class SpriteInfo extends React.Component {
         );
     }
     render () {
+        const sprite = (
+            <FormattedMessage
+                defaultMessage="Sprite"
+                description="Sprite info label"
+                id="gui.SpriteInfo.sprite"
+            />
+        );
+        const spritePlaceholder = (
+            <FormattedMessage
+                defaultMessage="Name"
+                description="Placeholder text for sprite name"
+                id="gui.SpriteInfo.spritePlaceholder"
+            />
+        );
+        const showLabel = (
+            <FormattedMessage
+                defaultMessage="Show"
+                description="Sprite info show label"
+                id="gui.SpriteInfo.show"
+            />
+        );
+        const sizeLabel = (
+            <FormattedMessage
+                defaultMessage="Size"
+                description="Sprite info size label"
+                id="gui.SpriteInfo.size"
+            />
+        );
+        const directionLabel = (
+            <FormattedMessage
+                defaultMessage="Direction"
+                description="Sprite info direction label"
+                id="gui.SpriteInfo.direction"
+            />
+        );
         return (
             <Box
                 className={styles.spriteInfo}
             >
                 <div className={classNames(styles.row, styles.rowPrimary)}>
                     <div className={styles.group}>
-                        <Label text="Sprite">
+                        <Label text={sprite}>
                             <BufferedInput
                                 className={styles.spriteInput}
                                 disabled={this.props.disabled}
-                                placeholder="Name"
+                                placeholder={spritePlaceholder}
                                 tabIndex="0"
                                 type="text"
                                 value={this.props.disabled ? '' : this.props.name}
@@ -102,7 +138,7 @@ class SpriteInfo extends React.Component {
                         <MediaQuery minWidth={layout.fullSizeMinWidth}>
                             <Label
                                 secondary
-                                text="Show"
+                                text={showLabel}
                             />
                         </MediaQuery>
                         <div>
@@ -149,12 +185,12 @@ class SpriteInfo extends React.Component {
                     <div className={classNames(styles.group, styles.largerInput)}>
                         <Label
                             secondary
-                            text="Size"
+                            text={sizeLabel}
                         >
                             <BufferedInput
                                 small
                                 disabled={this.props.disabled}
-                                label="Size"
+                                label={sizeLabel}
                                 tabIndex="0"
                                 type="text"
                                 value={this.props.disabled ? '' : this.props.size}
@@ -165,12 +201,12 @@ class SpriteInfo extends React.Component {
                     <div className={classNames(styles.group, styles.largerInput)}>
                         <Label
                             secondary
-                            text="Direction"
+                            text={directionLabel}
                         >
                             <BufferedInput
                                 small
                                 disabled={this.props.disabled}
-                                label="Direction"
+                                label={directionLabel}
                                 tabIndex="0"
                                 type="text"
                                 value={this.props.disabled ? '' : this.props.direction}