[i18n] Translate ML - settings - calendar management (elastic#27839)

* Translate settings -> calendar management * Update snapshots * Update test for calendar form * Minor fix for id name
pavel06081991 · Jan 3, 2019 · 73f28f4 · 73f28f4
1 parent 8ac9387
commit 73f28f4
Show file tree

Hide file tree

Showing 27 changed files with 524 additions and 189 deletions.
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap b/x-pack/plugins/ml/public/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap
@@ -11,7 +11,7 @@ exports[`NewCalendar Renders new calendar form 1`] = `
     panelPaddingSize="l"
     verticalPosition="center"
   >
-    <CalendarForm
+    <InjectIntl(CalendarForm)
       calendarId=""
       canCreateCalendar={true}
       canDeleteCalendar={true}

diff --git a/.../ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/.../ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
@@ -1,20 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CalendarForm CalendarId shown as title when editing 1`] = `
+<EuiTitle
+  size="m"
+  textTransform="none"
+>
+  <h1
+    className="euiTitle euiTitle--medium"
+  >
+    <FormattedMessage
+      defaultMessage="Calendar {calendarId}"
+      id="xpack.ml.calendarsEdit.calendarForm.calendarTitle"
+      values={
+        Object {
+          "calendarId": "test-calendar",
+        }
+      }
+    >
+      Calendar test-calendar
+    </FormattedMessage>
+  </h1>
+</EuiTitle>
+`;
+
 exports[`CalendarForm Renders calendar form 1`] = `
 <EuiForm>
   <React.Fragment>
     <EuiFormRow
       describedByIds={Array []}
       error={
         Array [
-          "Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores;
-    must start and end with an alphanumeric character",
+          "Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores; must start and end with an alphanumeric character",
         ]
       }
       fullWidth={false}
       hasEmptyLabelSpace={false}
       isInvalid={true}
-      label="Calendar ID"
+      label={
+        <FormattedMessage
+          defaultMessage="Calendar ID"
+          id="xpack.ml.calendarsEdit.calendarForm.calendarIdLabel"
+          values={Object {}}
+        />
+      }
     >
       <EuiFieldText
         compressed={false}
@@ -30,7 +58,13 @@ exports[`CalendarForm Renders calendar form 1`] = `
       describedByIds={Array []}
       fullWidth={false}
       hasEmptyLabelSpace={false}
-      label="Description"
+      label={
+        <FormattedMessage
+          defaultMessage="Description"
+          id="xpack.ml.calendarsEdit.calendarForm.descriptionLabel"
+          values={Object {}}
+        />
+      }
     >
       <EuiFieldText
         compressed={false}
@@ -47,7 +81,13 @@ exports[`CalendarForm Renders calendar form 1`] = `
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    label="Jobs"
+    label={
+      <FormattedMessage
+        defaultMessage="Jobs"
+        id="xpack.ml.calendarsEdit.calendarForm.jobsLabel"
+        values={Object {}}
+      />
+    }
   >
     <EuiComboBox
       compressed={false}
@@ -64,7 +104,13 @@ exports[`CalendarForm Renders calendar form 1`] = `
     describedByIds={Array []}
     fullWidth={false}
     hasEmptyLabelSpace={false}
-    label="Groups"
+    label={
+      <FormattedMessage
+        defaultMessage="Groups"
+        id="xpack.ml.calendarsEdit.calendarForm.groupsLabel"
+        values={Object {}}
+      />
+    }
   >
     <EuiComboBox
       compressed={false}
@@ -85,9 +131,15 @@ exports[`CalendarForm Renders calendar form 1`] = `
     describedByIds={Array []}
     fullWidth={true}
     hasEmptyLabelSpace={false}
-    label="Events"
+    label={
+      <FormattedMessage
+        defaultMessage="Events"
+        id="xpack.ml.calendarsEdit.calendarForm.eventsLabel"
+        values={Object {}}
+      />
+    }
   >
-    <EventsTable
+    <InjectIntl(EventsTable)
       canCreateCalendar={true}
       canDeleteCalendar={true}
       eventsList={Array []}
@@ -122,7 +174,11 @@ exports[`CalendarForm Renders calendar form 1`] = `
         onClick={[MockFunction]}
         type="button"
       >
-        Save
+        <FormattedMessage
+          defaultMessage="Save"
+          id="xpack.ml.calendarsEdit.calendarForm.saveButtonLabel"
+          values={Object {}}
+        />
       </EuiButton>
     </EuiFlexItem>
     <EuiFlexItem
@@ -137,7 +193,11 @@ exports[`CalendarForm Renders calendar form 1`] = `
         isDisabled={false}
         type="button"
       >
-        Cancel
+        <FormattedMessage
+          defaultMessage="Cancel"
+          id="xpack.ml.calendarsEdit.calendarForm.cancelButtonLabel"
+          values={Object {}}
+        />
       </EuiButton>
     </EuiFlexItem>
   </EuiFlexGroup>

diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/calendar_form.js b/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/calendar_form.js
@@ -25,6 +25,8 @@ import {
 import chrome from 'ui/chrome';
 import { EventsTable } from '../events_table/';
 
+import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+
 
 function EditHeader({
   calendarId,
@@ -33,7 +35,13 @@ function EditHeader({
   return (
     <Fragment>
       <EuiTitle>
-        <h1>Calendar {calendarId}</h1>
+        <h1>
+          <FormattedMessage
+            id="xpack.ml.calendarsEdit.calendarForm.calendarTitle"
+            defaultMessage="Calendar {calendarId}"
+            values={{ calendarId }}
+          />
+        </h1>
       </EuiTitle>
       <EuiText>
         <p>
@@ -45,7 +53,7 @@ function EditHeader({
   );
 }
 
-export function CalendarForm({
+export const CalendarForm = injectI18n(function CalendarForm({
   calendarId,
   canCreateCalendar,
   canDeleteCalendar,
@@ -67,10 +75,14 @@ export function CalendarForm({
   saving,
   selectedGroupOptions,
   selectedJobOptions,
-  showNewEventModal
+  showNewEventModal,
+  intl
 }) {
-  const msg = `Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores;
-    must start and end with an alphanumeric character`;
+  const msg = intl.formatMessage({
+    id: 'xpack.ml.calendarsEdit.calendarForm.allowedCharactersDescription',
+    defaultMessage: 'Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores; ' +
+      'must start and end with an alphanumeric character'
+  });
   const helpText = (isNewCalendarIdValid === true && !isEdit) ? msg : undefined;
   const error = (isNewCalendarIdValid === false && !isEdit) ? [msg] : undefined;
   const saveButtonDisabled = (canCreateCalendar === false || saving || !isNewCalendarIdValid || calendarId === '');
@@ -80,7 +92,10 @@ export function CalendarForm({
       {!isEdit &&
         <Fragment>
           <EuiFormRow
-            label="Calendar ID"
+            label={<FormattedMessage
+              id="xpack.ml.calendarsEdit.calendarForm.calendarIdLabel"
+              defaultMessage="Calendar ID"
+            />}
             helpText={helpText}
             error={error}
             isInvalid={!isNewCalendarIdValid}
@@ -94,7 +109,10 @@ export function CalendarForm({
           </EuiFormRow>
 
           <EuiFormRow
-            label="Description"
+            label={<FormattedMessage
+              id="xpack.ml.calendarsEdit.calendarForm.descriptionLabel"
+              defaultMessage="Description"
+            />}
           >
             <EuiFieldText
               name="description"
@@ -111,7 +129,10 @@ export function CalendarForm({
           description={description}
         />}
       <EuiFormRow
-        label="Jobs"
+        label={<FormattedMessage
+          id="xpack.ml.calendarsEdit.calendarForm.jobsLabel"
+          defaultMessage="Jobs"
+        />}
       >
         <EuiComboBox
           options={jobIds}
@@ -122,7 +143,10 @@ export function CalendarForm({
       </EuiFormRow>
 
       <EuiFormRow
-        label="Groups"
+        label={<FormattedMessage
+          id="xpack.ml.calendarsEdit.calendarForm.groupsLabel"
+          defaultMessage="Groups"
+        />}
       >
         <EuiComboBox
           onCreateOption={onCreateGroupOption}
@@ -136,7 +160,10 @@ export function CalendarForm({
       <EuiSpacer size="xl" />
 
       <EuiFormRow
-        label="Events"
+        label={<FormattedMessage
+          id="xpack.ml.calendarsEdit.calendarForm.eventsLabel"
+          defaultMessage="Events"
+        />}
         fullWidth
       >
         <EventsTable
@@ -158,23 +185,32 @@ export function CalendarForm({
             onClick={isEdit ? onEdit : onCreate}
             isDisabled={saveButtonDisabled}
           >
-            {saving ? 'Saving...' : 'Save'}
+            {saving ? (<FormattedMessage
+              id="xpack.ml.calendarsEdit.calendarForm.savingButtonLabel"
+              defaultMessage="Saving…"
+            />) : (<FormattedMessage
+              id="xpack.ml.calendarsEdit.calendarForm.saveButtonLabel"
+              defaultMessage="Save"
+            />)}
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton
             isDisabled={saving}
             href={`${chrome.getBasePath()}/app/ml#/settings/calendars_list`}
           >
-            Cancel
+            <FormattedMessage
+              id="xpack.ml.calendarsEdit.calendarForm.cancelButtonLabel"
+              defaultMessage="Cancel"
+            />
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiForm>
   );
-}
+});
 
-CalendarForm.propTypes = {
+CalendarForm.WrappedComponent.propTypes = {
   calendarId: PropTypes.string.isRequired,
   canCreateCalendar: PropTypes.bool.isRequired,
   canDeleteCalendar: PropTypes.bool.isRequired,

diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/calendar_form.test.js b/x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/calendar_form.test.js
@@ -11,7 +11,7 @@ jest.mock('ui/chrome', () => ({
 }));
 
 
-import { shallow, mount } from 'enzyme';
+import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { CalendarForm } from './calendar_form';
 
@@ -43,8 +43,8 @@ const testProps = {
 describe('CalendarForm', () => {
 
   test('Renders calendar form', () => {
-    const wrapper = shallow(
-      <CalendarForm {...testProps}/>
+    const wrapper = shallowWithIntl(
+      <CalendarForm.WrappedComponent {...testProps}/>
     );
 
     expect(wrapper).toMatchSnapshot();
@@ -57,16 +57,12 @@ describe('CalendarForm', () => {
       calendarId: 'test-calendar',
       description: 'test description',
     };
-    const wrapper = mount(
-      <CalendarForm {...editProps} />
+    const wrapper = mountWithIntl(
+      <CalendarForm.WrappedComponent {...editProps} />
     );
     const calendarId = wrapper.find('EuiTitle');
 
-    expect(
-      calendarId.containsMatchingElement(
-        <h1>Calendar test-calendar</h1>
-      )
-    ).toBeTruthy();
+    expect(calendarId).toMatchSnapshot();
   });
 
 });
diff --git a/x-pack/plugins/ml/public/settings/calendars/edit/directive.js b/x-pack/plugins/ml/public/settings/calendars/edit/directive.js
@@ -19,6 +19,8 @@ import { initPromise } from 'plugins/ml/util/promise';
 
 import uiRoutes from 'ui/routes';
 
+import { I18nProvider } from '@kbn/i18n/react';
+
 const template = `
   <ml-nav-menu name="settings" />
   <div class="mlCalendarManagement">
@@ -61,7 +63,9 @@ module.directive('mlNewCalendar', function ($route) {
       };
 
       ReactDOM.render(
-        React.createElement(NewCalendar, props),
+        <I18nProvider>
+          {React.createElement(NewCalendar, props)}
+        </I18nProvider>,
         element[0]
       );
     }

diff --git a/...ns/ml/public/settings/calendars/edit/events_table/__snapshots__/events_table.test.js.snap b/...ns/ml/public/settings/calendars/edit/events_table/__snapshots__/events_table.test.js.snap
@@ -140,7 +140,11 @@ exports[`EventsTable Renders events table with search bar 1`] = `
             size="s"
             type="button"
           >
-            New event
+            <FormattedMessage
+              defaultMessage="New event"
+              id="xpack.ml.calendarsEdit.eventsTable.newEventButtonLabel"
+              values={Object {}}
+            />
           </EuiButton>,
           <EuiButton
             color="primary"
@@ -153,7 +157,11 @@ exports[`EventsTable Renders events table with search bar 1`] = `
             size="s"
             type="button"
           >
-            Import events
+            <FormattedMessage
+              defaultMessage="Import events"
+              id="xpack.ml.calendarsEdit.eventsTable.importEventsButtonLabel"
+              values={Object {}}
+            />
           </EuiButton>,
         ],
       }