[7.x] [Canvas][i18n] Sidebar (#46090) (#47512)

*  This is a combination of 5 commits.

    Extracts i18n strings from sidebar_content

    Extracts i18n strings from element_settings

    Extracted i18n strings from workpad_config

    Extracts i18n strings from page_config

    Extracts i18n strings from group_settings

    Extracts i18n strings from element_config and multi_element_settings

    Extracted remaining strings from element_config

    Extracts i18n strings from sidebar_header

    Extracts i18n strings from custom_element_modal

    Fixed file picker placeholder

    Fixed i18n ids

    * Alphabetize keys

    * Fixed save button label

    * fixed merge conflict

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,13 +23,13 @@ export const PageConfig = ({
   return (
     <Fragment>
       <EuiTitle size="xs">
-        <h4>Page</h4>
+        <h4>{strings.getTitle()}</h4>
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiFormRow
         display="rowCompressed"
-        label="Background color"
-        helpText="Accepts HEX, RGB or HTML Color names"
+        label={strings.getBackgroundColorLabel()}
+        helpText={strings.getBackgroundColorDescription()}
       >
         <WorkpadColorPicker onChange={setBackground} value={background} />
       </EuiFormRow>
@@ -35,7 +38,7 @@ export const PageConfig = ({
         page, we use the second page's transition) */}
       {pageIndex > 0 ? (
         <Fragment>
-          <EuiFormRow label="Transition" display="rowCompressed">
+          <EuiFormRow label={strings.getTransitionLabel()} display="rowCompressed">
             <EuiSelect
               value={transition ? transition.name : ''}
               options={transitions}
@@ -44,7 +47,7 @@ export const PageConfig = ({
             />
           </EuiFormRow>
           {transition ? (
-            <EuiFormRow label="Preview" display="rowCompressed">
+            <EuiFormRow label={strings.getTransitionPreviewLabel()} display="rowCompressed">
               <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>
 );