[Canvas][i18n] Sidebar

x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx

@@ -31,10 +31,13 @@ import {
 import { VALID_IMAGE_TYPES } from '../../../common/lib/constants';
 import { encode } from '../../../common/lib/dataurl';
 import { ElementCard } from '../element_card';
+import { ComponentStrings } from '../../../i18n';
 
 const MAX_NAME_LENGTH = 40;
 const MAX_DESCRIPTION_LENGTH = 100;
 
+const { CustomElementModal: strings } = ComponentStrings;
+
 interface Props {
   /**
    * initial value of the name of the custom element
@@ -126,8 +129,8 @@ export class CustomElementModal extends PureComponent<Props, State> {
           <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
             <EuiFlexItem className="canvasCustomElementForm" grow={2}>
               <EuiFormRow
-                label="Name"
-                helpText={`${MAX_NAME_LENGTH - name.length} characters remaining`}
+                label={strings.getNameInputLabel()}
+                helpText={strings.getCharactersRemainingDescription(MAX_NAME_LENGTH - name.length)}
                 compressed
               >
                 <EuiFieldText
@@ -141,8 +144,10 @@ export class CustomElementModal extends PureComponent<Props, State> {
                 />
               </EuiFormRow>
               <EuiFormRow
-                label="Description"
-                helpText={`${MAX_DESCRIPTION_LENGTH - description.length} characters remaining`}
+                label={strings.getDescriptionInputLabel()}
+                helpText={strings.getCharactersRemainingDescription(
+                  MAX_DESCRIPTION_LENGTH - description.length
+                )}
               >
                 <EuiTextArea
                   value={description}
@@ -155,29 +160,26 @@ export class CustomElementModal extends PureComponent<Props, State> {
               </EuiFormRow>
               <EuiFormRow
                 className="canvasCustomElementForm__thumbnail"
-                label="Thumbnail image"
+                label={strings.getImageInputLabel()}
                 compressed
               >
                 <EuiFilePicker
-                  initialPromptText="Select or drag and drop an image"
+                  initialPromptText={strings.getImageFilePickerPlaceholder()}
                   onChange={this._handleUpload}
                   className="canvasImageUpload"
                   accept="image/*"
                 />
               </EuiFormRow>
               <EuiText className="canvasCustomElementForm__thumbnailHelp" size="xs">
-                <p>
-                  Take a screenshot of your element and upload it here. This can also be done after
-                  saving.
-                </p>
+                <p>{strings.getImageInputDescription()}</p>
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem
               className="canvasElementCard__wrapper canvasCustomElementForm__preview"
               grow={1}
             >
               <EuiTitle size="xxxs">
-                <h4>Element preview</h4>
+                <h4>{strings.getElementPreviewTitle()}</h4>
               </EuiTitle>
               <EuiSpacer size="s" />
               <ElementCard title={name} description={description} image={image} />
@@ -187,7 +189,7 @@ export class CustomElementModal extends PureComponent<Props, State> {
         <EuiModalFooter>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
+              <EuiButtonEmpty onClick={onCancel}>{strings.getCancelButtonLabel()}</EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiButton
@@ -196,7 +198,7 @@ export class CustomElementModal extends PureComponent<Props, State> {
                   onSave(name, description, image);
                 }}
               >
-                Save
+                {strings.getSaveButtonLabel()}
               </EuiButton>
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js

@@ -7,6 +7,9 @@
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiStat, EuiTitle } from '@elastic/eui';
 import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
+import { ComponentStrings } from '../../../i18n';
+
+const { ElementConfig: strings } = ComponentStrings;
 
 export const ElementConfig = ({ elementStats }) => {
   if (!elementStats) {
@@ -19,21 +22,21 @@ export const ElementConfig = ({ elementStats }) => {
   return (
     <Fragment>
       <EuiTitle size="xs">
-        <h4>Elements</h4>
+        <h4>{strings.getTitle()}</h4>
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiFlexGroup>
         <EuiFlexItem>
-          <EuiStat title={total} description="Total" titleSize="s" />
+          <EuiStat title={total} description={strings.getTotalLabel()} titleSize="s" />
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiStat title={ready} description="Loaded" titleSize="s" />
+          <EuiStat title={ready} description={strings.getLoadedLabel()} titleSize="s" />
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiStat title={error} description="Failed" titleSize="s" />
+          <EuiStat title={error} description={strings.getFailedLabel()} titleSize="s" />
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiStat title={progress + '%'} description="Progress" titleSize="s" />
+          <EuiStat title={progress + '%'} description={strings.getProgressLabel()} titleSize="s" />
         </EuiFlexItem>
       </EuiFlexGroup>
     </Fragment>

x-pack/legacy/plugins/canvas/public/components/page_config/index.js

@@ -9,8 +9,11 @@ import { get } from 'lodash';
 import { transitionsRegistry } from '../../lib/transitions_registry';
 import { getSelectedPageIndex, getPages } from '../../state/selectors/workpad';
 import { stylePage, setPageTransition } from '../../state/actions/pages';
+import { ComponentStrings } from '../../../i18n';
 import { PageConfig as Component } from './page_config';
 
+const { PageConfig: strings } = ComponentStrings;
+
 const mapStateToProps = state => {
   const pageIndex = getSelectedPageIndex(state);
   const page = getPages(state)[pageIndex];
@@ -28,7 +31,7 @@ const mergeProps = (stateProps, dispatchProps) => {
     },
     background: get(stateProps, 'page.style.background'),
     transition: transitionsRegistry.get(get(stateProps, 'page.transition.name')),
-    transitions: [{ value: '', text: 'None' }].concat(
+    transitions: [{ value: '', text: strings.getNoTransitionDropDownOptionLabel() }].concat(
       transitionsRegistry.toArray().map(({ name, displayName }) => ({
         value: name,
         text: displayName,

x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js

@@ -8,6 +8,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { EuiCard, EuiFormRow, EuiTitle, EuiSpacer, EuiSelect } from '@elastic/eui';
 import { WorkpadColorPicker } from '../workpad_color_picker';
+import { ComponentStrings } from '../../../i18n';
+
+const { PageConfig: strings } = ComponentStrings;
 
 export const PageConfig = ({
   pageIndex,
@@ -20,26 +23,29 @@ export const PageConfig = ({
   return (
     <Fragment>
       <EuiTitle size="xs">
-        <h4>Page</h4>
+        <h4>{strings.getTitle()}</h4>
       </EuiTitle>
       <EuiSpacer size="m" />
-      <EuiFormRow label="Background color" helpText="Accepts HEX, RGB or HTML Color names">
+      <EuiFormRow
+        label={strings.getBackgroundColorLabel()}
+        helpText={strings.getBackgroundColorDescription()}
+      >
         <WorkpadColorPicker onChange={setBackground} value={background} />
       </EuiFormRow>
       {/* No need to show the transition for the first page because transitions occur when
         switching between pages (for example, when moving from the first page to the second
         page, we use the second page's transition) */}
       {pageIndex > 0 ? (
         <Fragment>
-          <EuiFormRow label="Transition" compressed>
+          <EuiFormRow label={strings.getTransitionLabel()} compressed>
             <EuiSelect
               value={transition ? transition.name : ''}
               options={transitions}
               onChange={e => setTransition(e.target.value)}
             />
           </EuiFormRow>
           {transition ? (
-            <EuiFormRow label="Preview">
+            <EuiFormRow label={strings.getTransitionPreviewLabel()}>
               <EuiCard
                 title=""
                 description=""

x-pack/legacy/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx

@@ -12,6 +12,7 @@ import { Datasource } from '../../datasource';
 // @ts-ignore unconverted component
 import { FunctionFormList } from '../../function_form_list';
 import { PositionedElement } from '../../../../types';
+import { ComponentStrings } from '../../../../i18n';
 
 interface Props {
   /**
@@ -20,11 +21,13 @@ interface Props {
   element: PositionedElement;
 }
 
+const { ElementSettings: strings } = ComponentStrings;
+
 export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
   const tabs = [
     {
       id: 'edit',
-      name: 'Display',
+      name: strings.getDisplayTabLabel(),
       content: (
         <div className="canvasSidebar__pop">
           <EuiSpacer size="s" />
@@ -36,7 +39,7 @@ export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
     },
     {
       id: 'data',
-      name: 'Data',
+      name: strings.getDataTabLabel(),
       content: (
         <div className="canvasSidebar__pop">
           <EuiSpacer size="s" />

x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx

@@ -6,10 +6,13 @@
 
 import React, { FunctionComponent } from 'react';
 import { EuiText } from '@elastic/eui';
+import { ComponentStrings } from '../../../i18n';
+
+const { GroupSettings: strings } = ComponentStrings;
 
 export const GroupSettings: FunctionComponent = () => (
   <EuiText size="s">
-    <p>Ungroup (U) to edit individual element settings.</p>
-    <p>Save this group as a new element to re-use it throughout your workpad.</p>
+    <p>{strings.getUngroupDescription()}</p>
+    <p>{strings.getSaveGroupDescription()}</p>
   </EuiText>
 );

x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx

@@ -6,13 +6,13 @@
 
 import React, { FunctionComponent } from 'react';
 import { EuiText } from '@elastic/eui';
+import { ComponentStrings } from '../../../i18n';
+
+const { MultiElementSettings: strings } = ComponentStrings;
 
 export const MultiElementSettings: FunctionComponent = () => (
   <EuiText size="s">
-    <p>Multiple elements are currently selected.</p>
-    <p>
-      Deselect these elements to edit their individual settings, press (G) to group them, or save
-      this selection as a new element to re-use it throughout your workpad.
-    </p>
+    <p>{strings.getMultipleElementsDescription()}</p>
+    <p>{strings.getMultipleElementsActionsDescription()}</p>
   </EuiText>
 );

x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_content.js

@@ -11,11 +11,14 @@ import { EuiSpacer } from '@elastic/eui';
 import { getSelectedToplevelNodes, getSelectedElementId } from '../../state/selectors/workpad';
 import { SidebarHeader } from '../sidebar_header';
 import { globalStateUpdater } from '../workpad_page/integration_utils';
+import { ComponentStrings } from '../../../i18n';
 import { MultiElementSettings } from './multi_element_settings';
 import { GroupSettings } from './group_settings';
 import { GlobalConfig } from './global_config';
 import { ElementSettings } from './element_settings';
 
+const { SidebarContent: strings } = ComponentStrings;
+
 const mapStateToProps = state => ({
   selectedToplevelNodes: getSelectedToplevelNodes(state),
   selectedElementId: getSelectedElementId(state),
@@ -42,7 +45,10 @@ const withGlobalState = (commit, updateGlobalState) => (type, payload) => {
 
 const MultiElementSidebar = ({ commit, updateGlobalState }) => (
   <Fragment>
-    <SidebarHeader title="Multiple elements" commit={withGlobalState(commit, updateGlobalState)} />
+    <SidebarHeader
+      title={strings.getMultiElementSidebarTitle()}
+      commit={withGlobalState(commit, updateGlobalState)}
+    />
     <EuiSpacer />
     <MultiElementSettings />
   </Fragment>
@@ -51,7 +57,7 @@ const MultiElementSidebar = ({ commit, updateGlobalState }) => (
 const GroupedElementSidebar = ({ commit, updateGlobalState }) => (
   <Fragment>
     <SidebarHeader
-      title="Grouped element"
+      title={strings.getGroupedElementSidebarTitle()}
       commit={withGlobalState(commit, updateGlobalState)}
       groupIsSelected
     />
@@ -62,7 +68,7 @@ const GroupedElementSidebar = ({ commit, updateGlobalState }) => (
 
 const SingleElementSidebar = ({ selectedElementId }) => (
   <Fragment>
-    <SidebarHeader title="Selected element" showLayerControls />
+    <SidebarHeader title={strings.getSingleElementSidebarTitle()} showLayerControls />
     <ElementSettings selectedElementId={selectedElementId} />
   </Fragment>
 );