From 467b18ed978570324e48925c0b66b8d1cd0c8217 Mon Sep 17 00:00:00 2001
From: "Jason E. Rist" <jrist@redhat.com>
Date: Tue, 10 Jan 2017 14:03:38 -0700
Subject: [PATCH] Add i18n strings to the navigation bar

Change-Id: I1f2f93d2dba159986497b3604b692510e7709a39
Closes-Bug: #1650559
Implements: blueprint tripleo-ui-i18n-support-for-js
---
 src/js/components/NavBar.js | 39 +++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/js/components/NavBar.js b/src/js/components/NavBar.js
index 382b5cb5..f93d836f 100644
--- a/src/js/components/NavBar.js
+++ b/src/js/components/NavBar.js
@@ -1,3 +1,4 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
 import React from 'react';
 import { Link } from 'react-router';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -6,6 +7,26 @@ import NavTab from './ui/NavTab';
 
 import TripleoOwlSvg from '../../img/tripleo-owl.svg';
 
+const messages = defineMessages({
+  toggleNavigation: {
+    id: 'NavBar.toggleNavigation',
+    defaultMessage: 'Toggle navigation'
+  },
+  logoutLink: {
+    id: 'NavBar.logoutLink',
+    defaultMessage: 'Logout'
+  },
+  deploymentPlanTab: {
+    id: 'NavBar.deploymentPlanTab',
+    defaultMessage: 'Deployment Plan'
+  },
+  nodesTab: {
+    id: 'Navbar.nodesTab',
+    defaultMessage: 'Nodes'
+  }
+});
+
+
 export default class NavBar extends React.Component {
   logout(e) {
     e.preventDefault();
@@ -19,7 +40,9 @@ export default class NavBar extends React.Component {
           <button type="button" className="navbar-toggle collapsed"
                   data-toggle="collapse" data-target="#tripleo-navbar-collapse"
                   aria-expanded="false">
-            <span className="sr-only">Toggle navigation</span>
+            <span className="sr-only">
+              <FormattedMessage {...messages.toggleNavigation}/>
+            </span>
             <span className="icon-bar"></span>
             <span className="icon-bar"></span>
             <span className="icon-bar"></span>
@@ -36,11 +59,19 @@ export default class NavBar extends React.Component {
                 {this.props.user.get('username')}
               </a>
             </li>
-            <li><a href="#" onClick={this.logout.bind(this)} id="NavBar__logoutLink">Logout</a></li>
+            <li>
+              <a href="#" onClick={this.logout.bind(this)} id="NavBar__logoutLink">
+                <FormattedMessage {...messages.logoutLink}/>
+              </a>
+            </li>
           </ul>
           <ul className="nav navbar-nav navbar-primary">
-            <NavTab to="/deployment-plan" id="NavBar__deploymentPlanTab">Deployment Plan</NavTab>
-            <NavTab to="/nodes" id="NavBar__nodesTab">Nodes</NavTab>
+            <NavTab to="/deployment-plan" id="NavBar__deploymentPlanTab">
+              <FormattedMessage {...messages.deploymentPlanTab}/>
+            </NavTab>
+            <NavTab to="/nodes" id="NavBar__nodesTab">
+              <FormattedMessage {...messages.nodesTab}/>
+            </NavTab>
           </ul>
         </div>
       </nav>