Tooltips with react-intl (#4549)

* Tooltips support intl strings

* FormattedMessage for strings to Tooltip

* Fix TabBar tooltip display

* r after o (PR comment)

js/src/views/Accounts/accounts.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import ContentAdd from 'material-ui/svg-icons/content/add';
@@ -88,7 +89,12 @@ class Accounts extends Component {
         <Page>
           <Tooltip
             className={ styles.accountTooltip }
-            text='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account'
+            text={
+              <FormattedMessage
+                id='accounts.tooltip.overview'
+                defaultMessage='your accounts are visible for easy access, allowing you to edit the meta information, make transfers, view transactions and fund the account'
+              />
+            }
           />
 
           { this.renderWallets() }
@@ -228,7 +234,12 @@ class Accounts extends Component {
         <Tooltip
           className={ styles.toolbarTooltip }
           right
-          text='actions relating to the current view are available on the toolbar for quick access, be it for performing actions or creating a new item'
+          text={
+            <FormattedMessage
+              id='accounts.tooltip.actions'
+              defaultMessage='actions relating to the current view are available on the toolbar for quick access, be it for performing actions or creating a new item'
+            />
+          }
         />
       </Actionbar>
     );

js/src/views/Application/TabBar/Tab/tab.js

@@ -26,13 +26,12 @@ const SIGNER_ID = 'signer';
 
 export default class Tab extends Component {
   static propTypes = {
-    children: PropTypes.node,
     pendings: PropTypes.number,
     view: PropTypes.object.isRequired
   };
 
   render () {
-    const { view, children } = this.props;
+    const { view } = this.props;
 
     return (
       <MUITab
@@ -42,9 +41,7 @@ export default class Tab extends Component {
             ? this.renderSignerLabel()
             : this.renderLabel(view.id)
         }
-      >
-        { children }
-      </MUITab>
+      />
     );
   }
 

js/src/views/Application/TabBar/Tab/tabs.spec.js

@@ -26,7 +26,6 @@ let instance;
 function render (id = 'signer') {
   component = shallow(
     <Tab
-      children={ <div>testChildren</div> }
       pending={ 5 }
       view={ { id } }
     />

js/src/views/Application/TabBar/tabBar.css

@@ -60,8 +60,8 @@
 }
 
 .tabbarTooltip {
-  left: 3.3em;
-  top: 0.5em;
+  left: 3em;
+  top: 4em;
 }
 
 .label {

js/src/views/Application/TabBar/tabBar.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
@@ -49,6 +50,15 @@ class TabBar extends Component {
         </ToolbarGroup>
         <div className={ styles.tabs }>
           { this.renderTabItems() }
+          <Tooltip
+            className={ styles.tabbarTooltip }
+            text={
+              <FormattedMessage
+                id='tabBar.tooltip.overview'
+                defaultMessage='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view'
+              />
+            }
+          />
         </div>
         <ToolbarGroup className={ styles.last }>
           <div />
@@ -61,15 +71,6 @@ class TabBar extends Component {
     const { views, pending } = this.props;
 
     return views.map((view, index) => {
-      const body = (view.id === 'accounts')
-        ? (
-          <Tooltip
-            className={ styles.tabbarTooltip }
-            text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view'
-          />
-        )
-        : null;
-
       return (
         <Link
           activeClassName={ styles.tabactive }
@@ -80,9 +81,7 @@ class TabBar extends Component {
           <Tab
             pendings={ pending.length }
             view={ view }
-          >
-            { body }
-          </Tab>
+          />
         </Link>
       );
     });