PLT-7: Refactoring frontend (chunk 6)

- User settings

web/react/components/user_settings/user_settings_developer.jsx

@@ -5,7 +5,20 @@ import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import * as EventHelpers from '../../dispatcher/event_helpers.jsx';
 
-export default class DeveloperTab extends React.Component {
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    applicationsPreview: {
+        id: 'user.settings.developer.applicationsPreview',
+        defaultMessage: 'Applications (Preview)'
+    },
+    thirdParty: {
+        id: 'user.settings.developer.thirdParty',
+        defaultMessage: 'Open to register a new third-party application'
+    }
+});
+
+class DeveloperTab extends React.Component {
     constructor(props) {
         super(props);
 
@@ -20,6 +33,7 @@ export default class DeveloperTab extends React.Component {
     render() {
         var appSection;
         var self = this;
+        const {formatMessage} = this.props.intl;
         if (this.props.activeSection === 'app') {
             var inputs = [];
 
@@ -33,7 +47,10 @@ export default class DeveloperTab extends React.Component {
                             className='btn btn-sm btn-primary'
                             onClick={this.register}
                         >
-                            {'Register New Application'}
+                            <FormattedMessage
+                                id='user.settings.developer.register'
+                                defaultMessage='Register New Application'
+                            />
                         </a>
                     </div>
                 </div>
@@ -41,7 +58,7 @@ export default class DeveloperTab extends React.Component {
 
             appSection = (
                 <SettingItemMax
-                    title='Applications (Preview)'
+                    title={formatMessage(holders.applicationsPreview)}
                     inputs={inputs}
                     updateSection={function updateSection(e) {
                         self.props.updateSection('');
@@ -52,8 +69,8 @@ export default class DeveloperTab extends React.Component {
         } else {
             appSection = (
                 <SettingItemMin
-                    title='Applications (Preview)'
-                    describe='Open to register a new third-party application'
+                    title={formatMessage(holders.applicationsPreview)}
+                    describe={formatMessage(holders.thirdParty)}
                     updateSection={function updateSection() {
                         self.props.updateSection('app');
                     }}
@@ -81,11 +98,19 @@ export default class DeveloperTab extends React.Component {
                             className='modal-back'
                             onClick={this.props.collapseModal}
                         />
-                        {'Developer Settings'}
+                        <FormattedMessage
+                            id='user.settings.developer.title'
+                            defaultMessage='Developer Settings'
+                        />
                     </h4>
                 </div>
                 <div className='user-settings'>
-                    <h3 className='tab-header'>{'Developer Settings'}</h3>
+                    <h3 className='tab-header'>
+                        <FormattedMessage
+                            id='user.settings.developer.title'
+                            defaultMessage='Developer Settings'
+                        />
+                    </h3>
                     <div className='divider-dark first'/>
                     {appSection}
                     <div className='divider-dark'/>
@@ -99,8 +124,11 @@ DeveloperTab.defaultProps = {
     activeSection: ''
 };
 DeveloperTab.propTypes = {
+    intl: intlShape.isRequired,
     activeSection: React.PropTypes.string,
     updateSection: React.PropTypes.func,
     closeModal: React.PropTypes.func.isRequired,
     collapseModal: React.PropTypes.func.isRequired
 };
+
+export default injectIntl(DeveloperTab);