Translate Spaces component (#24411)

* Translate Spaces component

* fix one little error

* update Spaces component

* update translation of Spaces components

* Update snapshots

* update Space translation - intl type

* update Space translation - remove view/views id namespace

* rename ids

* use testing helper functions instead of shallow, render, mount from enzyme

* fix unit tests

* fix ts path for enzyme test helpers

* fix path to enzyme helpers test functions

* Update snapshots

* fix path to enzyme test helpers

* Remove unused dependency.

Author: tibmt

x-pack/dev-tools/jest/create_jest_config.js

@@ -24,7 +24,8 @@ export function createJestConfig({
       "^ui/(.*)": `${kibanaDirectory}/src/ui/public/$1`,
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
         `${kibanaDirectory}/src/dev/jest/mocks/file_mock.js`,
-      "\\.(css|less|scss)$": `${kibanaDirectory}/src/dev/jest/mocks/style_mock.js`
+      "\\.(css|less|scss)$": `${kibanaDirectory}/src/dev/jest/mocks/style_mock.js`,
+      "^test_utils/enzyme_helpers": `${xPackKibanaDirectory}/test_utils/enzyme_helpers.tsx`
     },
     setupFiles: [
       `${kibanaDirectory}/src/dev/jest/setup/babel_polyfill.js`,

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

@@ -5,8 +5,8 @@
  */
 
 import { EuiFlyout, EuiLink } from '@elastic/eui';
-import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { ImpactedSpacesFlyout } from './impacted_spaces_flyout';
 import { PrivilegeSpaceTable } from './privilege_space_table';
 
@@ -52,16 +52,16 @@ const buildProps = (customProps = {}) => {
 
 describe('<ImpactedSpacesFlyout>', () => {
   it('renders without crashing', () => {
-    expect(shallow(<ImpactedSpacesFlyout {...buildProps()} />)).toMatchSnapshot();
+    expect(shallowWithIntl(<ImpactedSpacesFlyout {...buildProps()} />)).toMatchSnapshot();
   });
 
   it('does not immediately show the flyout', () => {
-    const wrapper = mount(<ImpactedSpacesFlyout {...buildProps()} />);
+    const wrapper = mountWithIntl(<ImpactedSpacesFlyout {...buildProps()} />);
     expect(wrapper.find(EuiFlyout)).toHaveLength(0);
   });
 
   it('shows the flyout after clicking the link', () => {
-    const wrapper = mount(<ImpactedSpacesFlyout {...buildProps()} />);
+    const wrapper = mountWithIntl(<ImpactedSpacesFlyout {...buildProps()} />);
     wrapper.find(EuiLink).simulate('click');
     expect(wrapper.find(EuiFlyout)).toHaveLength(1);
   });
@@ -82,7 +82,7 @@ describe('<ImpactedSpacesFlyout>', () => {
         },
       });
 
-      const wrapper = shallow(<ImpactedSpacesFlyout {...props} />);
+      const wrapper = shallowWithIntl(<ImpactedSpacesFlyout {...props} />);
       wrapper.find(EuiLink).simulate('click');
 
       const table = wrapper.find(PrivilegeSpaceTable);
@@ -112,7 +112,7 @@ describe('<ImpactedSpacesFlyout>', () => {
         },
       });
 
-      const wrapper = shallow(<ImpactedSpacesFlyout {...props} />);
+      const wrapper = shallowWithIntl(<ImpactedSpacesFlyout {...props} />);
       wrapper.find(EuiLink).simulate('click');
 
       const table = wrapper.find(PrivilegeSpaceTable);
@@ -141,7 +141,7 @@ describe('<ImpactedSpacesFlyout>', () => {
         },
       });
 
-      const wrapper = shallow(<ImpactedSpacesFlyout {...props} />);
+      const wrapper = shallowWithIntl(<ImpactedSpacesFlyout {...props} />);
       wrapper.find(EuiLink).simulate('click');
 
       const table = wrapper.find(PrivilegeSpaceTable);

x-pack/plugins/spaces/public/components/__snapshots__/manage_spaces_button.test.tsx.snap

@@ -11,6 +11,10 @@ exports[`ManageSpacesButton renders as expected 1`] = `
   size="s"
   type="button"
 >
-  Manage spaces
+  <FormattedMessage
+    defaultMessage="Manage spaces"
+    id="xpack.spaces.manageSpacesButton.manageSpacesButtonLabel"
+    values={Object {}}
+  />
 </EuiButton>
 `;

x-pack/plugins/spaces/public/components/manage_spaces_button.test.tsx

@@ -3,8 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { shallow } from 'enzyme';
 import React from 'react';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { UserProfileProvider } from '../../../xpack_main/public/services/user_profile';
 import { ManageSpacesButton } from './manage_spaces_button';
 
@@ -15,11 +15,11 @@ const buildUserProfile = (canManageSpaces: boolean) => {
 describe('ManageSpacesButton', () => {
   it('renders as expected', () => {
     const component = <ManageSpacesButton userProfile={buildUserProfile(true)} />;
-    expect(shallow(component)).toMatchSnapshot();
+    expect(shallowWithIntl(component)).toMatchSnapshot();
   });
 
   it(`doesn't render if user profile forbids managing spaces`, () => {
     const component = <ManageSpacesButton userProfile={buildUserProfile(false)} />;
-    expect(shallow(component)).toMatchSnapshot();
+    expect(shallowWithIntl(component)).toMatchSnapshot();
   });
 });

x-pack/plugins/spaces/public/components/manage_spaces_button.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiButton } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component, CSSProperties } from 'react';
 import { UserProfile } from '../../../xpack_main/public/services/user_profile';
 import { MANAGE_SPACES_URL } from '../lib/constants';
@@ -32,7 +33,10 @@ export class ManageSpacesButton extends Component<Props, {}> {
         onClick={this.navigateToManageSpaces}
         style={this.props.style}
       >
-        Manage spaces
+        <FormattedMessage
+          id="xpack.spaces.manageSpacesButton.manageSpacesButtonLabel"
+          defaultMessage="Manage spaces"
+        />
       </EuiButton>
     );
   }

x-pack/plugins/spaces/public/lib/spaces_manager.ts

@@ -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 { i18n } from '@kbn/i18n';
 import { toastNotifications } from 'ui/notify';
 
 import { IHttpResponse } from 'angular';
@@ -66,8 +67,12 @@ export class SpacesManager extends EventEmitter {
 
   public _displayError() {
     toastNotifications.addDanger({
-      title: 'Unable to change your Space',
-      text: 'please try again later',
+      title: i18n.translate('xpack.spaces.spacesManager.unableToChangeSpaceWarningTitle', {
+        defaultMessage: 'Unable to change your Space',
+      }),
+      text: i18n.translate('xpack.spaces.spacesManager.unableToChangeSpaceWarningDescription', {
+        defaultMessage: 'please try again later',
+      }),
     });
   }
 }

x-pack/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap

@@ -11,8 +11,15 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
       <EuiModalHeaderTitle
         data-test-subj="confirmModalTitleText"
       >
-        Delete space 
-        'My Space'
+        <FormattedMessage
+          defaultMessage="Delete space {spaceName}"
+          id="xpack.spaces.management.confirmDeleteModal.confirmDeleteSpaceButtonLabel"
+          values={
+            Object {
+              "spaceName": "'My Space'",
+            }
+          }
+        />
       </EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>
@@ -22,12 +29,21 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
         size="m"
       >
         <p>
-          Deleting a space permanently removes the space and
-           
-          <strong>
-            all of its contents
-          </strong>
-          . You can't undo this action.
+          <FormattedMessage
+            defaultMessage="Deleting a space permanently removes the space and {allContents}. You can't undo this action."
+            id="xpack.spaces.management.confirmDeleteModal.deletingSpaceWarningMessage"
+            values={
+              Object {
+                "allContents": <strong>
+                  <FormattedMessage
+                    defaultMessage="all of its contents"
+                    id="xpack.spaces.management.confirmDeleteModal.allContentsText"
+                    values={Object {}}
+                  />
+                </strong>,
+              }
+            }
+          />
         </p>
         <EuiFormRow
           describedByIds={Array []}
@@ -54,15 +70,21 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
             grow={true}
             size="m"
           >
-            You are about to delete your current space 
-            <span>
-              (
-              <strong>
-                My Space
-              </strong>
-              )
-            </span>
-            . You will be redirected to choose a different space if you continue.
+            <FormattedMessage
+              defaultMessage="You are about to delete your current space {name}. You will be redirected to choose a different space if you continue."
+              id="xpack.spaces.management.confirmDeleteModal.redirectAfterDeletingCurrentSpaceWarningMessage"
+              values={
+                Object {
+                  "name": <span>
+                    (
+                    <strong>
+                      My Space
+                    </strong>
+                    )
+                  </span>,
+                }
+              }
+            />
           </EuiText>
         </EuiCallOut>
       </EuiText>
@@ -76,7 +98,11 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
         onClick={[MockFunction]}
         type="button"
       >
-        Cancel
+        <FormattedMessage
+          defaultMessage="Cancel"
+          id="xpack.spaces.management.confirmDeleteModal.cancelButtonLabel"
+          values={Object {}}
+        />
       </EuiButtonEmpty>
       <EuiButton
         color="danger"
@@ -87,7 +113,11 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
         onClick={[Function]}
         type="button"
       >
-        Delete space and all contents
+        <FormattedMessage
+          defaultMessage=" Delete space and all contents"
+          id="xpack.spaces.management.confirmDeleteModal.deleteSpaceAndAllContentsButtonLabel"
+          values={Object {}}
+        />
       </EuiButton>
     </EuiModalFooter>
   </EuiModal>

x-pack/plugins/spaces/public/views/management/components/__snapshots__/unauthorized_prompt.test.tsx.snap

@@ -6,14 +6,22 @@ exports[`UnauthorizedPrompt renders as expected 1`] = `
     <p
       data-test-subj="permissionDeniedMessage"
     >
-      You do not have permission to manage spaces.
+      <FormattedMessage
+        defaultMessage="You do not have permission to manage spaces."
+        id="xpack.spaces.management.unauthorizedPrompt.permissionDeniedDescription"
+        values={Object {}}
+      />
     </p>
   }
   iconColor="danger"
   iconType="spacesApp"
   title={
     <h2>
-      Permission denied
+      <FormattedMessage
+        defaultMessage="Permission denied"
+        id="xpack.spaces.management.unauthorizedPrompt.permissionDeniedTitle"
+        values={Object {}}
+      />
     </h2>
   }
 />

x-pack/plugins/spaces/public/views/management/components/advanced_settings_subtitle/__snapshots__/advanced_settings_subtitle.test.tsx.snap

@@ -11,11 +11,17 @@ exports[`AdvancedSettingsSubtitle renders as expected 1`] = `
     size="m"
     title={
       <p>
-        The settings on this page apply to the 
-        <strong>
-          My Space
-        </strong>
-         space, unless otherwise specified.
+        <FormattedMessage
+          defaultMessage="The settings on this page apply to the {spaceName} space, unless otherwise specified."
+          id="xpack.spaces.management.advancedSettingsSubtitle.applyingSettingsOnPageToSpaceDescription"
+          values={
+            Object {
+              "spaceName": <strong>
+                My Space
+              </strong>,
+            }
+          }
+        />
       </p>
     }
   />

x-pack/plugins/spaces/public/views/management/components/advanced_settings_subtitle/advanced_settings_subtitle.test.tsx

@@ -3,8 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { shallow } from 'enzyme';
 import React from 'react';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { AdvancedSettingsSubtitle } from './advanced_settings_subtitle';
 
 describe('AdvancedSettingsSubtitle', () => {
@@ -13,6 +13,6 @@ describe('AdvancedSettingsSubtitle', () => {
       id: 'my-space',
       name: 'My Space',
     };
-    expect(shallow(<AdvancedSettingsSubtitle space={space} />)).toMatchSnapshot();
+    expect(shallowWithIntl(<AdvancedSettingsSubtitle space={space} />)).toMatchSnapshot();
   });
 });