Feature/translate new nav bar (#24326) (#24730)

translate new_nav_bar

src/ui/public/chrome/directives/header_global_nav/components/header.tsx

@@ -36,6 +36,7 @@ import { HeaderAppMenu } from './header_app_menu';
 import { HeaderBreadcrumbs } from './header_breadcrumbs';
 import { HeaderNavControls } from './header_nav_controls';
 
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { ChromeHeaderNavControlsRegistry } from 'ui/registry/chrome_header_nav_controls';
 import { Breadcrumb, NavControlSide, NavLink } from '../';
 
@@ -46,12 +47,22 @@ interface Props {
   isVisible: boolean;
   navLinks: NavLink[];
   navControls: ChromeHeaderNavControlsRegistry;
+  intl: InjectedIntl;
 }
 
-export class Header extends Component<Props> {
+class HeaderUI extends Component<Props> {
   public renderLogo() {
-    const { homeHref } = this.props;
-    return <EuiHeaderLogo iconType="logoKibana" href={homeHref} aria-label="Go to home page" />;
+    const { homeHref, intl } = this.props;
+    return (
+      <EuiHeaderLogo
+        iconType="logoKibana"
+        href={homeHref}
+        aria-label={intl.formatMessage({
+          id: 'common.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel',
+          defaultMessage: 'Go to home page',
+        })}
+      />
+    );
   }
 
   public render() {
@@ -85,3 +96,5 @@ export class Header extends Component<Props> {
     );
   }
 }
+
+export const Header = injectI18n(HeaderUI);

src/ui/public/chrome/directives/header_global_nav/components/header_app_menu.tsx

@@ -32,17 +32,19 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { NavLink } from '../';
 
 interface Props {
   navLinks: NavLink[];
+  intl: InjectedIntl;
 }
 
 interface State {
   isOpen: boolean;
 }
 
-export class HeaderAppMenu extends Component<Props, State> {
+class HeaderAppMenuUI extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
@@ -52,14 +54,17 @@ export class HeaderAppMenu extends Component<Props, State> {
   }
 
   public render() {
-    const { navLinks = [] } = this.props;
+    const { navLinks = [], intl } = this.props;
 
     const button = (
       <EuiHeaderSectionItemButton
         aria-controls="keyPadMenu"
         aria-expanded={this.state.isOpen}
         aria-haspopup="true"
-        aria-label="Apps menu"
+        aria-label={intl.formatMessage({
+          id: 'common.ui.chrome.headerGlobalNav.appMenuButtonAriaLabel',
+          defaultMessage: 'Apps menu',
+        })}
         onClick={this.onMenuButtonClick}
       >
         <EuiIcon type="apps" size="m" />
@@ -106,3 +111,5 @@ export class HeaderAppMenu extends Component<Props, State> {
     </EuiKeyPadMenuItem>
   );
 }
+
+export const HeaderAppMenu = injectI18n(HeaderAppMenuUI);

src/ui/public/chrome/directives/header_global_nav/header_global_nav.js

@@ -23,6 +23,7 @@ import { Header } from './components/header';
 import './header_global_nav.less';
 import { chromeHeaderNavControlsRegistry } from 'ui/registry/chrome_header_nav_controls';
 import { breadcrumbs } from '../../services/breadcrumb_state';
+import { injectI18nProvider } from '@kbn/i18n/react';
 
 const module = uiModules.get('kibana');
 
@@ -31,7 +32,7 @@ module.directive('headerGlobalNav', (reactDirective, chrome, Private) => {
   const navLinks = chrome.getNavLinks();
   const homeHref = chrome.addBasePath('/app/kibana#/home');
 
-  return reactDirective(Header, [
+  return reactDirective(injectI18nProvider(Header), [
     // scope accepted by directive, passed in as React props
     'appTitle',
     'isVisible',