Add i18n strings to roles components

Change-Id: I638c8574dc59bc8cbefcfcbca6723d4ec8a4d40c
Closes-Bug: #1650565
Implements: blueprint tripleo-ui-i18n-support-for-js

src/js/components/roles/RoleDetail.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import Formsy from 'formsy-react';
 import { fromJS, is } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -18,6 +19,33 @@ import { ModalPanelBackdrop,
 import NavTab from '../ui/NavTab';
 import ParametersActions from '../../actions/ParametersActions';
 
+const messages = defineMessages({
+  networkConfiguration: {
+    id: 'RoleDetail.networkConfiguration',
+    defaultMessage: 'Network Configuration'
+  },
+  parameters: {
+    id: 'RoleDetail.parameters',
+    defaultMessage: 'Parameters'
+  },
+  role: {
+    id: 'RoleDetail.role',
+    defaultMessage: '{roleName} Role'
+  },
+  loadingParameters: {
+    id: 'RoleDetail.loadingParameters',
+    defaultMessage: 'Loading parameters...'
+  },
+  saveChanges: {
+    id: 'RoleDetail.saveChanges',
+    defaultMessage: 'Save Changes'
+  },
+  services: {
+    id: 'RoleDetail.services',
+    defaultMessage: 'Services'
+  }
+});
+
 class RoleDetail extends React.Component {
   constructor() {
     super();
@@ -91,14 +119,14 @@ class RoleDetail extends React.Component {
         <div className="row">
           <ul className="nav nav-tabs">
             <NavTab to={`/deployment-plan/roles/${this.props.params.roleIdentifier}/parameters`}>
-              Parameters
+              <FormattedMessage {...messages.parameters}/>
             </NavTab>
             <NavTab to={`/deployment-plan/roles/${this.props.params.roleIdentifier}/services`}>
-              Services
+              <FormattedMessage {...messages.services}/>
             </NavTab>
             <NavTab to={`/deployment-plan/roles/${this.props.params.roleIdentifier}`
                         + '/network-configuration'}>
-              Network Configuration
+              <FormattedMessage {...messages.networkConfiguration}/>
             </NavTab>
           </ul>
           <ModalFormErrorList errors={this.props.formErrors.toJS()}/>
@@ -109,6 +137,8 @@ class RoleDetail extends React.Component {
 
   render() {
     const dataLoaded = this.props.rolesLoaded && this.props.parametersLoaded;
+    const roleName = this.props.role ? this.props.role.name : null;
+
     return (
       <Formsy.Form ref="roleParametersForm"
                    role="form"
@@ -125,13 +155,13 @@ class RoleDetail extends React.Component {
               <span aria-hidden="true" className="pficon pficon-close"/>
             </Link>
             <h2 className="modal-title">
-              {this.props.role ? this.props.role.name : null} Role
+              <FormattedMessage {...messages.role} values={{ roleName: roleName }}/>
             </h2>
           </ModalPanelHeader>
           {this.renderRoleTabs()}
           <ModalPanelBody>
             <Loader height={60}
-                    content="Loading parameters..."
+                    content={this.props.intl.formatMessage(messages.loadingParameters)}
                     loaded={dataLoaded}>
               {this.props.children}
             </Loader>
@@ -140,7 +170,7 @@ class RoleDetail extends React.Component {
             <ModalPanelFooter>
               <button type="submit" disabled={!this.state.canSubmit}
                       className="btn btn-primary">
-                Save Changes
+                <FormattedMessage {...messages.saveChanges}/>
               </button>
             </ModalPanelFooter>
             : null}
@@ -156,6 +186,7 @@ RoleDetail.propTypes = {
   fetchParameters: React.PropTypes.func,
   formErrors: ImmutablePropTypes.list,
   formFieldErrors: ImmutablePropTypes.map,
+  intl: React.PropTypes.object,
   parametersLoaded: React.PropTypes.bool.isRequired,
   params: React.PropTypes.object.isRequired,
   role: ImmutablePropTypes.record,
@@ -188,4 +219,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(RoleDetail);
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(RoleDetail));

src/js/components/roles/RoleServices.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Map } from 'immutable';
 import React from 'react';
@@ -8,6 +9,17 @@ import { getRole } from '../../selectors/roles';
 import ParameterInputList from '../parameters/ParameterInputList';
 import Tab from '../ui/Tab';
 
+const messages = defineMessages({
+  noParameters: {
+    id: 'RoleServices.noParameters',
+    defaultMessage: 'There are currently no parameters to configure in this section.'
+  },
+  selectService: {
+    id: 'RoleServices.selectService',
+    defaultMessage: 'Please select service to configure.'
+  }
+});
+
 class RoleServices extends React.Component {
   constructor() {
     super();
@@ -38,6 +50,7 @@ class RoleServices extends React.Component {
   }
 
   render() {
+    const { formatMessage } = this.props.intl;
     return (
       <div className="row-eq-height">
         <div className="col-sm-4 sidebar-pf sidebar-pf-left">
@@ -47,9 +60,9 @@ class RoleServices extends React.Component {
         </div>
         <div className="col-sm-8">
           <ParameterInputList
-            emptyParametersMessage={this.state.selectedService ?
-                                    'There are currently no parameters to configure in this section'
-                                    : 'Please select service to configure'}
+            emptyParametersMessage={this.state.selectedService
+                                    ? formatMessage(messages.noParameters)
+                                    : formatMessage(messages.selectService)}
             parameters={this.props.services.getIn([this.state.selectedService, 'parameters'],
                                                   Map()).toList()}
             mistralParameters={this.props.mistralParameters}/>
@@ -59,6 +72,7 @@ class RoleServices extends React.Component {
   }
 }
 RoleServices.propTypes = {
+  intl: React.PropTypes.object,
   mistralParameters: ImmutablePropTypes.map.isRequired,
   params: React.PropTypes.object.isRequired,
   role: ImmutablePropTypes.record.isRequired,
@@ -73,4 +87,4 @@ function mapStateToProps(state, props) {
   };
 }
 
-export default connect(mapStateToProps)(RoleServices);
+export default connect(mapStateToProps)(injectIntl(RoleServices));