Translate security/roles component

.i18nrc.json

@@ -10,7 +10,8 @@
     "statusPage": "src/core_plugins/status_page",
     "tagCloud": "src/core_plugins/tagcloud",
     "xpack.idxMgmt": "x-pack/plugins/index_management",
-    "xpack.watcher": "x-pack/plugins/watcher"
+    "xpack.watcher": "x-pack/plugins/watcher",
+    "xpack.security": "x-pack/plugins/security"
   },
   "exclude": [
     "src/ui/ui_render/bootstrap/app_bootstrap.js",

x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.tsx

@@ -13,6 +13,7 @@ import {
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component, Fragment } from 'react';
 import './collapsible_panel.less';
 
@@ -56,7 +57,19 @@ export class CollapsiblePanel extends Component<Props, State> {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiLink onClick={this.toggleCollapsed}>{this.state.collapsed ? 'show' : 'hide'}</EuiLink>
+          <EuiLink onClick={this.toggleCollapsed}>
+            {this.state.collapsed ? (
+              <FormattedMessage
+                id="xpack.security.views.management.editRoles.components.collapsiblePanel.showLinkText"
+                defaultMessage="show"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.security.views.management.editRoles.components.collapsiblePanel.hideLinkText"
+                defaultMessage="hide"
+              />
+            )}
+          </EuiLink>
         </EuiFlexItem>
       </EuiFlexGroup>
     );

x-pack/plugins/security/public/views/management/edit_role/components/delete_role_button.tsx

@@ -11,6 +11,7 @@ import {
   // @ts-ignore
   EuiOverlayMask,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component, Fragment } from 'react';
 
 interface Props {
@@ -35,29 +36,58 @@ export class DeleteRoleButton extends Component<Props, State> {
     return (
       <Fragment>
         <EuiButtonEmpty color={'danger'} onClick={this.showModal}>
-          Delete role
+          <FormattedMessage
+            id="xpack.security.views.management.editRoles.components.deleteRoleButton.deleteRoleButtonLabel"
+            defaultMessage="Delete role"
+          />
         </EuiButtonEmpty>
         {this.maybeShowModal()}
       </Fragment>
     );
   }
 
   public maybeShowModal = () => {
+    const { intl } = this.props;
     if (!this.state.showModal) {
       return null;
     }
     return (
       <EuiOverlayMask>
         <EuiConfirmModal
-          title={'Delete Role'}
+          title={
+            <FormattedMessage
+              id="xpack.security.views.management.editRoles.components.deleteRoleButton.deleteRoleTitle"
+              defaultMessage="Delete Role"
+            />
+          }
           onCancel={this.closeModal}
           onConfirm={this.onConfirmDelete}
-          cancelButtonText={"No, don't delete"}
-          confirmButtonText={'Yes, delete role'}
+          cancelButtonText={
+            <FormattedMessage
+              id="xpack.security.views.management.editRoles.components.deleteRoleButton.cancelButtonLabel"
+              defaultMessage="No, don't delete"
+            />
+          }
+          confirmButtonText={
+            <FormattedMessage
+              id="xpack.security.views.management.editRoles.components.deleteRoleButton.confirmButtonLabel"
+              defaultMessage="Yes, delete role"
+            />
+          }
           buttonColor={'danger'}
         >
-          <p>Are you sure you want to delete this role?</p>
-          <p>This action cannot be undone!</p>
+          <p>
+            <FormattedMessage
+              id="xpack.security.views.management.editRoles.components.deleteRoleButton.deletingRoleConfirmationText"
+              defaultMessage="Are you sure you want to delete this role?"
+            />
+          </p>
+          <p>
+            <FormattedMessage
+              id="xpack.security.views.management.editRoles.components.deleteRoleButton.deletingRoleWarningText"
+              defaultMessage="This action cannot be undone!"
+            />
+          </p>
         </EuiConfirmModal>
       </EuiOverlayMask>
     );

x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.tsx

@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -19,6 +20,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 import { get } from 'lodash';
 import React, { ChangeEvent, Component, Fragment, HTMLProps } from 'react';
 import { toastNotifications } from 'ui/notify';
@@ -54,7 +56,7 @@ interface State {
   formError: RoleValidationResult | null;
 }
 
-export class EditRolePage extends Component<Props, State> {
+export class EditRolePageUI extends Component<Props, State> {
   private validator: RoleValidator;
 
   constructor(props: Props) {
@@ -67,9 +69,17 @@ export class EditRolePage extends Component<Props, State> {
   }
 
   public render() {
-    const description = this.props.spacesEnabled
-      ? `Set privileges on your Elasticsearch data and control access to your Kibana spaces.`
-      : `Set privileges on your Elasticsearch data and control access to Kibana.`;
+    const description = this.props.spacesEnabled ? (
+      <FormattedMessage
+        id="xpack.security.views.management.editRoles.components.editRole.setPrivilegesToKibanaSpacesDescription"
+        defaultMessage="Set privileges on your Elasticsearch data and control access to your Kibana spaces."
+      />
+    ) : (
+      <FormattedMessage
+        id="xpack.security.views.management.editRoles.components.editRole.setPrivilegesToKibanaDescription"
+        defaultMessage="Set privileges on your Elasticsearch data and control access to Kibana."
+      />
+    );
 
     return (
       <EuiPage className="editRolePage" restrictWidth>
@@ -86,7 +96,10 @@ export class EditRolePage extends Component<Props, State> {
                 <EuiSpacer size="s" />
                 <EuiText size="s" color="subdued">
                   <p id="reservedRoleDescription" tabIndex={1}>
-                    Reserved roles are built-in and cannot be removed or modified.
+                    <FormattedMessage
+                      id="xpack.security.views.management.editRoles.components.editRole.modifyingReversedRolesDescription"
+                      defaultMessage="Reserved roles are built-in and cannot be removed or modified."
+                    />
                   </p>
                 </EuiText>
               </Fragment>
@@ -115,12 +128,27 @@ export class EditRolePage extends Component<Props, State> {
       tabIndex: 0,
     };
     if (isReservedRole(this.props.role)) {
-      titleText = 'Viewing role';
+      titleText = (
+        <FormattedMessage
+          id="xpack.security.views.management.editRoles.components.editRole.viewingRoleTitle"
+          defaultMessage="Viewing role"
+        />
+      );
       props['aria-describedby'] = 'reservedRoleDescription';
     } else if (this.editingExistingRole()) {
-      titleText = 'Edit role';
+      titleText = (
+        <FormattedMessage
+          id="xpack.security.views.management.editRoles.components.editRole.editRoleTitle"
+          defaultMessage="Edit role"
+        />
+      );
     } else {
-      titleText = 'Create role';
+      titleText = (
+        <FormattedMessage
+          id="xpack.security.views.management.editRoles.components.editRole.createRoleTitle"
+          defaultMessage="Create role"
+        />
+      );
     }
 
     return (
@@ -148,11 +176,21 @@ export class EditRolePage extends Component<Props, State> {
     return (
       <EuiPanel>
         <EuiFormRow
-          label={'Role name'}
+          label={
+            <FormattedMessage
+              id="xpack.security.views.management.editRoles.components.editRole.roleNameFormRowTitle"
+              defaultMessage="Role name"
+            />
+          }
           helpText={
-            !isReservedRole(this.props.role) && this.editingExistingRole()
-              ? "A role's name cannot be changed once it has been created."
-              : undefined
+            !isReservedRole(this.props.role) && this.editingExistingRole() ? (
+              <FormattedMessage
+                id="xpack.security.views.management.editRoles.components.editRole.roleNameFormRowHelpText"
+                defaultMessage="A role's name cannot be changed once it has been created."
+              />
+            ) : (
+              undefined
+            )
           }
           {...this.validator.validateRoleName(this.state.role)}
         >
@@ -225,10 +263,27 @@ export class EditRolePage extends Component<Props, State> {
 
   public getFormButtons = () => {
     if (isReservedRole(this.props.role)) {
-      return <EuiButton onClick={this.backToRoleList}>Return to role list</EuiButton>;
+      return (
+        <EuiButton onClick={this.backToRoleList}>
+          <FormattedMessage
+            id="xpack.security.views.management.editRoles.components.editRole.returnToRoleListButtonLabel"
+            defaultMessage="Return to role list"
+          />
+        </EuiButton>
+      );
     }
 
-    const saveText = this.editingExistingRole() ? 'Update role' : 'Create role';
+    const saveText = this.editingExistingRole() ? (
+      <FormattedMessage
+        id="xpack.security.views.management.editRoles.components.editRole.updateRoleText"
+        defaultMessage="Update role"
+      />
+    ) : (
+      <FormattedMessage
+        id="xpack.security.views.management.editRoles.components.editRole.createRoleText"
+        defaultMessage="Create role"
+      />
+    );
 
     return (
       <EuiFlexGroup responsive={false}>
@@ -244,7 +299,10 @@ export class EditRolePage extends Component<Props, State> {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty data-test-subj={`roleFormCancelButton`} onClick={this.backToRoleList}>
-            Cancel
+            <FormattedMessage
+              id="xpack.security.views.management.editRoles.components.editRole.cancelButtonLabel"
+              defaultMessage="Cancel"
+            />
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={true} />
@@ -274,7 +332,7 @@ export class EditRolePage extends Component<Props, State> {
         formError: null,
       });
 
-      const { httpClient } = this.props;
+      const { httpClient, intl } = this.props;
 
       const role = {
         ...this.state.role,
@@ -287,7 +345,13 @@ export class EditRolePage extends Component<Props, State> {
 
       saveRole(httpClient, role)
         .then(() => {
-          toastNotifications.addSuccess('Saved role');
+          toastNotifications.addSuccess(
+            intl.formatMessage({
+              id:
+                'xpack.security.views.management.editRoles.components.editRoles.roleSuccessfullySavedNotificationMessage',
+              defaultMessage: 'Saved role',
+            })
+          );
           this.backToRoleList();
         })
         .catch((error: any) => {
@@ -297,11 +361,17 @@ export class EditRolePage extends Component<Props, State> {
   };
 
   public handleDeleteRole = () => {
-    const { httpClient, role } = this.props;
+    const { httpClient, role, intl } = this.props;
 
     deleteRole(httpClient, role.name)
       .then(() => {
-        toastNotifications.addSuccess('Deleted role');
+        toastNotifications.addSuccess(
+          intl.formatMessage({
+            id:
+              'xpack.security.views.management.editRoles.components.editRoles.roleSuccessfullyDeletedNotificationMessage',
+            defaultMessage: 'Deleted role',
+          })
+        );
         this.backToRoleList();
       })
       .catch((error: any) => {
@@ -313,3 +383,5 @@ export class EditRolePage extends Component<Props, State> {
     window.location.hash = ROLES_PATH;
   };
 }
+
+export const EditRolePage = injectI18n(EditRolePageUI);