[i18n] Translate Security -> Account and Nav control components (#26011) (#26689)

* translate login/logout visualization component

* Update login/logout component - change injecti18n name to injectI18n

* Update login/logout component - make needed changes

* update one snapshot

* update login translation

* update one snapshot

* Fix

* Fix unit test

* Localize logout tooltip

x-pack/plugins/security/public/views/account/account.html

@@ -16,9 +16,11 @@
   <div class="kuiBar kuiVerticalRhythm">
     <!-- Title -->
     <div class="kuiBarSection">
-      <h1 class="kuiTitle">
-        Account Settings
-      </h1>
+      <h1 
+        class="kuiTitle"
+        i18n-id="xpack.security.account.accountSettingsTitle"
+        i18n-default-message="Account Settings"  
+      ></h1>
     </div>
 
     <!-- Empty section to push content left -->
@@ -27,9 +29,11 @@
 
   <!-- Username -->
   <div class="kuiFormSection kuiVerticalRhythm">
-    <label class="kuiFormLabel">
-      Username
-    </label>
+    <label
+      class="kuiFormLabel"
+      i18n-id="xpack.security.account.usernameLabel"
+      i18n-default-message="Username"
+    ></label>
     <div class="euiText">
       <p ng-bind="::user.username"></p>
     </div>
@@ -37,9 +41,11 @@
 
   <!-- Email -->
   <div class="kuiFormSection">
-    <label class="kuiFormLabel">
-      Email
-    </label>
+    <label
+      class="kuiFormLabel"
+      i18n-id="xpack.security.account.emailLabel"
+      i18n-default-message="Email"  
+    ></label>
     <div class="euiText">
       <p ng-bind="::accountController.getEmail()"></p>
     </div>

x-pack/plugins/security/public/views/account/account.js

@@ -25,7 +25,7 @@ routes.when('/account', {
     }
   },
   controllerAs: 'accountController',
-  controller($scope, $route, Notifier) {
+  controller($scope, $route, Notifier, i18n) {
     $scope.user = $route.current.locals.user;
 
     const notifier = new Notifier();
@@ -38,7 +38,11 @@ routes.when('/account', {
       }
 
       $scope.user.$changePassword()
-        .then(() => toastNotifications.addSuccess('Updated password'))
+        .then(() => toastNotifications.addSuccess({
+          title: i18n('xpack.security.account.updatedPasswordTitle', {
+            defaultMessage: 'Updated password'
+          }),
+        }))
         .then(onSuccess)
         .catch(error => {
           if (error.status === 401) {
@@ -50,7 +54,9 @@ routes.when('/account', {
 
     this.getEmail = () => {
       if ($scope.user.email) return $scope.user.email;
-      return '(No email)';
+      return i18n('xpack.security.account.noEmailMessage', {
+        defaultMessage: '(No email)'
+      });
     };
   }
 });

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/__snapshots__/kibana_privileges.test.tsx.snap

@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<KibanaPrivileges> renders without crashing 1`] = `
-<I18nProvider>
-  <CollapsiblePanel
+<CollapsiblePanel
   iconType="logoKibana"
   title="Kibana"
-  >
+>
   <InjectIntl(SpaceAwarePrivilegeFormUI)
     editable={true}
     kibanaAppPrivileges={
@@ -53,6 +52,5 @@ exports[`<KibanaPrivileges> renders without crashing 1`] = `
       }
     }
   />
-  </CollapsiblePanel>
-</I18nProvider>
+</CollapsiblePanel>
 `;

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/kibana_privileges.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { I18nProvider } from '@kbn/i18n/react';
 import React, { Component } from 'react';
 import { Space } from '../../../../../../../../spaces/common/model/space';
 import { UserProfile } from '../../../../../../../../xpack_main/public/services/user_profile';
@@ -29,11 +28,9 @@ interface Props {
 export class KibanaPrivileges extends Component<Props, {}> {
   public render() {
     return (
-      <I18nProvider>
       <CollapsiblePanel iconType={'logoKibana'} title={'Kibana'}>
         {this.getForm()}
       </CollapsiblePanel>
-      </I18nProvider>
     );
   }
 

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/privilege_space_form.test.tsx

@@ -34,12 +34,15 @@ const buildProps = (customProps = {}) => {
     onChange: jest.fn(),
     onDelete: jest.fn(),
     validator: new RoleValidator(),
+    intl: {} as any,
     ...customProps,
   };
 };
 
 describe('<PrivilegeSpaceForm>', () => {
   it('renders without crashing', () => {
-    expect(shallowWithIntl(<PrivilegeSpaceForm {...buildProps()} />)).toMatchSnapshot();
+    expect(
+      shallowWithIntl(<PrivilegeSpaceForm.WrappedComponent {...buildProps()} />)
+    ).toMatchSnapshot();
   });
 });

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/privilege_space_form.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React, { Component } from 'react';
 import { Space } from '../../../../../../../../spaces/common/model/space';
 import { KibanaPrivilege } from '../../../../../../../common/model/kibana_privilege';
@@ -26,9 +26,10 @@ interface Props {
   ) => void;
   onDelete: () => void;
   validator: RoleValidator;
+  intl: InjectedIntl;
 }
 
-export class PrivilegeSpaceForm extends Component<Props, {}> {
+class PrivilegeSpaceFormUI extends Component<Props, {}> {
   public render() {
     const {
       availableSpaces,
@@ -36,6 +37,7 @@ export class PrivilegeSpaceForm extends Component<Props, {}> {
       availablePrivileges,
       selectedPrivilege,
       validator,
+      intl,
     } = this.props;
 
     return (
@@ -78,7 +80,11 @@ export class PrivilegeSpaceForm extends Component<Props, {}> {
         <EuiFlexItem grow={false}>
           <EuiFormRow hasEmptyLabelSpace>
             <EuiButtonIcon
-              aria-label={'Delete space privilege'}
+              aria-label={intl.formatMessage({
+                id:
+                  'xpack.security.management.editRoles.privilegeSpaceForm.deleteSpacePrivilegeAriaLabel',
+                defaultMessage: 'Delete space privilege',
+              })}
               color={'danger'}
               onClick={this.props.onDelete}
               iconType={'trash'}
@@ -103,3 +109,5 @@ export class PrivilegeSpaceForm extends Component<Props, {}> {
     });
   };
 }
+
+export const PrivilegeSpaceForm = injectI18n(PrivilegeSpaceFormUI);

x-pack/plugins/security/public/views/nav_control/nav_control.html

@@ -11,7 +11,7 @@
   <global-nav-link
     kbn-route="'/logout'"
     icon="'plugins/security/images/logout.svg'"
-    tooltip-content="formatTooltip('Logout')"
+    tooltip-content="formatTooltip(logoutLabel)"
     label="logoutLabel"
   ></global-nav-link>
 </div>

x-pack/plugins/security/public/views/nav_control/nav_control.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { constant } from 'lodash';
@@ -83,7 +84,12 @@ chromeHeaderNavControlsRegistry.register((ShieldUser, kbnBaseUrl, Private) => ({
 
     props.user.$promise.then(() => {
       // Wait for the user to be propogated before rendering into the DOM.
-      ReactDOM.render(<SecurityNavControl {...props} />, el);
+      ReactDOM.render(
+        <I18nProvider>
+          <SecurityNavControl {...props} />
+        </I18nProvider>,
+        el
+      );
     });
 
     return () => ReactDOM.unmountComponentAtNode(el);

x-pack/plugins/security/public/views/nav_control/nav_control_component.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, {
   Component,
 } from 'react';
@@ -51,7 +52,12 @@ export class SecurityNavControl extends Component {
         aria-controls="headerUserMenu"
         aria-expanded={this.state.isOpen}
         aria-haspopup="true"
-        aria-label="Account menu"
+        aria-label={
+          <FormattedMessage
+            id="xpack.security.navControlComponent.accountMenuAriaLabel"
+            defaultMessage="Account menu"
+          />
+        }
         onClick={this.onMenuButtonClick}
       >
         <EuiAvatar name={name} size="s" />
@@ -86,11 +92,21 @@ export class SecurityNavControl extends Component {
                 <EuiFlexItem>
                   <EuiFlexGroup justifyContent="spaceBetween">
                     <EuiFlexItem grow={false}>
-                      <EuiLink href={route}>Edit profile</EuiLink>
+                      <EuiLink href={route}>
+                        <FormattedMessage
+                          id="xpack.security.navControlComponent.editProfileLinkText"
+                          defaultMessage="Edit profile"
+                        />
+                      </EuiLink>
                     </EuiFlexItem>
 
                     <EuiFlexItem grow={false}>
-                      <EuiLink href="/logout">Log out</EuiLink>
+                      <EuiLink href="/logout">
+                        <FormattedMessage
+                          id="xpack.security.navControlComponent.logoutLinkText"
+                          defaultMessage="Log out"
+                        />
+                      </EuiLink>
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 </EuiFlexItem>