From aa1102d011c62ebe2ed899a6266d81c4d4742b23 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Fri, 4 Oct 2019 18:21:45 -0700 Subject: [PATCH] [Canvas][i18n] Sidebar (#46090) * 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 --- .../legacy/plugins/canvas/i18n/components.ts | 353 +++++++++++++++++- .../custom_element_modal.tsx | 28 +- .../element_config/element_config.js | 13 +- .../public/components/page_config/index.js | 5 +- .../components/page_config/page_config.js | 13 +- .../element_settings/element_settings.tsx | 7 +- .../components/sidebar/group_settings.tsx | 7 +- .../sidebar/multi_element_settings.tsx | 10 +- .../components/sidebar/sidebar_content.js | 12 +- .../sidebar_header/sidebar_header.tsx | 92 +++-- .../workpad_config/workpad_config.js | 27 +- 11 files changed, 461 insertions(+), 106 deletions(-) diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts index 941db91c41722..b8f75a2f8c135 100644 --- a/x-pack/legacy/plugins/canvas/i18n/components.ts +++ b/x-pack/legacy/plugins/canvas/i18n/components.ts @@ -172,6 +172,48 @@ export const ComponentStrings = { defaultMessage: 'Remove Color', }), }, + CustomElementModal: { + getCancelButtonLabel: () => + i18n.translate('xpack.canvas.customElementModal.cancelButtonLabel', { + defaultMessage: 'Cancel', + }), + getCharactersRemainingDescription: (numberOfRemainingCharacter: number) => + i18n.translate('xpack.canvas.customElementModal.remainingCharactersDescription', { + defaultMessage: '{numberOfRemainingCharacter} characters remaining', + values: { + numberOfRemainingCharacter, + }, + }), + getDescriptionInputLabel: () => + i18n.translate('xpack.canvas.customElementModal.descriptionInputLabel', { + defaultMessage: 'Description', + }), + getElementPreviewTitle: () => + i18n.translate('xpack.canvas.customElementModal.elementPreviewTitle', { + defaultMessage: 'Element preview', + }), + getImageFilePickerPlaceholder: () => + i18n.translate('xpack.canvas.customElementModal.imageFilePickerPlaceholder', { + defaultMessage: 'Select or drag and drop an image', + }), + getImageInputLabel: () => + i18n.translate('xpack.canvas.customElementModal.imageInputLabel', { + defaultMessage: 'Thumbnail image', + }), + getImageInputDescription: () => + i18n.translate('xpack.canvas.customElementModal.imageInputDescription', { + defaultMessage: + 'Take a screenshot of your element and upload it here. This can also be done after saving.', + }), + getNameInputLabel: () => + i18n.translate('xpack.canvas.customElementModal.nameInputLabel', { + defaultMessage: 'Name', + }), + getSaveButtonLabel: () => + i18n.translate('xpack.canvas.customElementModal.saveButtonLabel', { + defaultMessage: 'Save', + }), + }, DatasourceDatasourceComponent: { getChangeButtonLabel: () => i18n.translate('xpack.canvas.datasourceDatasourceComponent.changeButtonLabel', { @@ -215,14 +257,64 @@ export const ComponentStrings = { defaultMessage: 'Datasource preview', }), }, - HelpMenu: { - getHelpMenuDescription: () => - i18n.translate('xpack.canvas.helpMenu.description', { - defaultMessage: 'For {CANVAS} specific information', + + ElementConfig: { + getFailedLabel: () => + i18n.translate('xpack.canvas.elementConfig.failedLabel', { + defaultMessage: 'Failed', + description: + 'The label for the total number of elements in a workpad that have thrown an error or failed to load', + }), + getLoadedLabel: () => + i18n.translate('xpack.canvas.elementConfig.loadedLabel', { + defaultMessage: 'Loaded', + description: 'The label for the number of elements in a workpad that have loaded', + }), + getProgressLabel: () => + i18n.translate('xpack.canvas.elementConfig.progressLabel', { + defaultMessage: 'Progress', + description: 'The label for the percentage of elements that have finished loading', + }), + getTitle: () => + i18n.translate('xpack.canvas.elementConfig.title', { + defaultMessage: 'Elements', + description: + '"Elements" refers to the individual text, images, or visualizations that you can add to a Canvas workpad', + }), + getTotalLabel: () => + i18n.translate('xpack.canvas.elementConfig.totalLabel', { + defaultMessage: 'Total', + description: 'The label for the total number of elements in a workpad', + }), + }, + ElementSettings: { + getDataTabLabel: () => + i18n.translate('xpack.canvas.elementSettings.dataTabLabel', { + defaultMessage: 'Data', + description: + 'This tab contains the settings for the data (i.e. Elasticsearch query) used as ' + + 'the source for a Canvas element', + }), + getDisplayTabLabel: () => + i18n.translate('xpack.canvas.elementSettings.displayTabLabel', { + defaultMessage: 'Display', + description: 'This tab contains the settings for how data is displayed in a Canvas element', + }), + }, + GroupSettings: { + getSaveGroupDescription: () => + i18n.translate('xpack.canvas.groupSettings.saveGroupDescription', { + defaultMessage: 'Save this group as a new element to re-use it throughout your workpad.', + }), + getUngroupDescription: () => + i18n.translate('xpack.canvas.groupSettings.ungroupDescription', { + defaultMessage: 'Ungroup ({uKey}) to edit individual element settings.', values: { - CANVAS, + uKey: 'U', }, }), + }, + HelpMenu: { getDocumentationLinkLabel: () => i18n.translate('xpack.canvas.helpMenu.documentationLinkLabel', { defaultMessage: '{CANVAS} documentation', @@ -230,15 +322,22 @@ export const ComponentStrings = { CANVAS, }, }), + getHelpMenuDescription: () => + i18n.translate('xpack.canvas.helpMenu.description', { + defaultMessage: 'For {CANVAS} specific information', + values: { + CANVAS, + }, + }), getKeyboardShortcutsLinkLabel: () => i18n.translate('xpack.canvas.helpMenu.keyboardShortcutsLinkLabel', { defaultMessage: 'Keyboard Shortcuts', }), }, KeyboardShortcutsDoc: { - getTitle: () => - i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyoutHeaderTitle', { - defaultMessage: 'Keyboard Shortcuts', + getFlyoutCloseButtonAriaLabel: () => + i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyout.closeButtonAriaLabel', { + defaultMessage: 'Closes keyboard shortcuts reference', }), getShortcutSeparator: () => i18n.translate('xpack.canvas.keyboardShortcutsDoc.shortcutListSeparator', { @@ -246,9 +345,227 @@ export const ComponentStrings = { description: 'Separates which keyboard shortcuts can be used for a single action. Example: "{shortcut1} or {shortcut2} or {shortcut3}"', }), - getFlyoutCloseButtonAriaLabel: () => - i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyout.closeButtonAriaLabel', { - defaultMessage: 'Closes keyboard shortcuts reference', + getTitle: () => + i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyoutHeaderTitle', { + defaultMessage: 'Keyboard Shortcuts', + }), + }, + MultiElementSettings: { + getMultipleElementsActionsDescription: () => + i18n.translate('xpack.canvas.groupSettings.multipleElementsActionsDescription', { + defaultMessage: + 'Deselect these elements to edit their individual settings, press ({gKey}) to group them, or save this selection as a new ' + + 'element to re-use it throughout your workpad.', + values: { + gKey: 'G', + }, + }), + getMultipleElementsDescription: () => + i18n.translate('xpack.canvas.groupSettings.multipleElementsDescription', { + defaultMessage: 'Multiple elements are currently selected.', + }), + }, + PageConfig: { + getBackgroundColorDescription: () => + i18n.translate('xpack.canvas.pageConfig.backgroundColorDescription', { + defaultMessage: 'Accepts HEX, RGB or HTML color names', + }), + getBackgroundColorLabel: () => + i18n.translate('xpack.canvas.pageConfig.backgroundColorLabel', { + defaultMessage: 'Background Color', + }), + getNoTransitionDropDownOptionLabel: () => + i18n.translate('xpack.canvas.pageConfig.transitions.noneDropDownOptionLabel', { + defaultMessage: 'None', + description: + 'This is the option the user should choose if they do not want any page transition (i.e. fade in, fade out, etc) to ' + + 'be applied to the current page.', + }), + getTitle: () => + i18n.translate('xpack.canvas.pageConfig.title', { + defaultMessage: 'Page', + }), + getTransitionLabel: () => + i18n.translate('xpack.canvas.pageConfig.transitionLabel', { + defaultMessage: 'Transition', + description: + 'This refers to the transition effect, such as fade in or rotate, applied to a page in presentation mode.', + }), + getTransitionPreviewLabel: () => + i18n.translate('xpack.canvas.pageConfig.transitionPreviewLabel', { + defaultMessage: 'Preview', + description: 'This is the label for a preview of the transition effect selected.', + }), + }, + SidebarContent: { + getGroupedElementSidebarTitle: () => + i18n.translate('xpack.canvas.sidebarContent.groupedElementSidebarTitle', { + defaultMessage: 'Grouped element', + description: + 'The title displayed when a grouped element is selected. "elements" refer to the different visualizations, images, ' + + 'text, etc that can be added in a Canvas workpad. These elements can be grouped into a larger "grouped element" ' + + 'that contains multiple individual elements.', + }), + getMultiElementSidebarTitle: () => + i18n.translate('xpack.canvas.sidebarContent.multiElementSidebarTitle', { + defaultMessage: 'Multiple elements', + description: + 'The title displayed when multiple elements are selected. "elements" refer to the different visualizations, images, ' + + 'text, etc that can be added in a Canvas workpad.', + }), + getSingleElementSidebarTitle: () => + i18n.translate('xpack.canvas.sidebarContent.singleElementSidebarTitle', { + defaultMessage: 'Selected element', + description: + 'The title displayed when a single element are selected. "element" refer to the different visualizations, images, ' + + 'text, etc that can be added in a Canvas workpad.', + }), + }, + SidebarHeader: { + getAlignmentMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.alignmentMenuItemLabel', { + defaultMessage: 'Alignment', + description: + 'This refers to the vertical (i.e. left, center, right) and horizontal (i.e. top, middle, bottom) ' + + 'alignment options of the selected elements', + }), + getBottomAlignMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.bottomAlignMenuItemLabel', { + defaultMessage: 'Bottom', + }), + getBringForwardAriaLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.bringForwardArialLabel', { + defaultMessage: 'Move element up one layer', + }), + getBringToFrontAriaLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.bringToFrontArialLabel', { + defaultMessage: 'Move element to top layer', + }), + getCenterAlignMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.centerAlignMenuItemLabel', { + defaultMessage: 'Center', + description: 'This refers to alignment centered horizontally.', + }), + getContextMenuTitle: () => + i18n.translate('xpack.canvas.sidebarHeader.contextMenuAriaLabel', { + defaultMessage: 'Element options', + }), + getCreateElementModalTitle: () => + i18n.translate('xpack.canvas.sidebarHeader.createElementModalTitle', { + defaultMessage: 'Create new element', + }), + getDistributionMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.distributionMenutItemLabel', { + defaultMessage: 'Distribution', + description: + 'This refers to the options to evenly spacing the selected elements horizontall or vertically.', + }), + getGroupMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.groupMenuItemLabel', { + defaultMessage: 'Group', + description: 'This refers to grouping multiple selected elements.', + }), + getHorizontalDistributionMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.horizontalDistributionMenutItemLabel', { + defaultMessage: 'Horizontal', + }), + getLeftAlignMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.leftAlignMenuItemLabel', { + defaultMessage: 'Left', + }), + getMiddleAlignMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.middleAlignMenuItemLabel', { + defaultMessage: 'Middle', + description: 'This refers to alignment centered vertically.', + }), + getOrderMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.orderMenuItemLabel', { + defaultMessage: 'Order', + description: 'Refers to the order of the elements displayed on the page from front to back', + }), + getRightAlignMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.rightAlignMenuItemLabel', { + defaultMessage: 'Right', + }), + getSaveElementMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.savedElementMenuItemLabel', { + defaultMessage: 'Save as new element', + }), + getSendBackwardAriaLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.sendBackwardArialLabel', { + defaultMessage: 'Move element down one layer', + }), + getSendToBackAriaLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.sendToBackArialLabel', { + defaultMessage: 'Move element to bottom layer', + }), + getTopAlignMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.topAlignMenuItemLabel', { + defaultMessage: 'Top', + }), + getUngroupMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.ungroupMenuItemLabel', { + defaultMessage: 'Ungroup', + description: 'This refers to ungrouping a grouped element', + }), + getVerticalDistributionMenuItemLabel: () => + i18n.translate('xpack.canvas.sidebarHeader.verticalDistributionMenutItemLabel', { + defaultMessage: 'Vertical', + }), + }, + WorkpadConfig: { + getApplyStylesheetButtonLabel: () => + i18n.translate('xpack.canvas.workpadConfig.applyStylesheetButtonLabel', { + defaultMessage: `Apply stylesheet`, + description: + '"stylesheet" refers to the collection of CSS style rules entered by the user.', + }), + getFlipDimensionAriaLabel: () => + i18n.translate('xpack.canvas.workpadConfig.swapDimensionsAriaLabel', { + defaultMessage: `Swap the page's width and height`, + }), + getFlipDimensionTooltip: () => + i18n.translate('xpack.canvas.workpadConfig.swapDimensionsTooltip', { + defaultMessage: 'Swap the width and height', + }), + getGlobalCSSLabel: () => + i18n.translate('xpack.canvas.workpadConfig.globalCSSLabel', { + defaultMessage: `Global CSS overrides`, + }), + getGlobalCSSTooltip: () => + i18n.translate('xpack.canvas.workpadConfig.globalCSSTooltip', { + defaultMessage: `Apply styles to all pages in this workpad`, + }), + getPageHeightLabel: () => + i18n.translate('xpack.canvas.workpadConfig.heightLabel', { + defaultMessage: 'Height', + }), + getPageSizeBadgeAriaLabel: (sizeName: string) => + i18n.translate('xpack.canvas.workpadConfig.pageSizeBadgeAriaLabel', { + defaultMessage: `Preset page size: {sizeName}`, + values: { + sizeName, + }, + }), + getPageSizeBadgeOnClickAriaLabel: (sizeName: string) => + i18n.translate('xpack.canvas.workpadConfig.pageSizeBadgeOnClickAriaLabel', { + defaultMessage: `Set page size to {sizeName}`, + values: { + sizeName, + }, + }), + getPageWidthLabel: () => + i18n.translate('xpack.canvas.workpadConfig.widthLabel', { + defaultMessage: 'Width', + }), + getTitle: () => + i18n.translate('xpack.canvas.workpadConfig.title', { + defaultMessage: 'Workpad', + }), + getUSLetterButtonLabel: () => + i18n.translate('xpack.canvas.workpadConfig.USLetterButtonLabel', { + defaultMessage: 'US Letter', + description: 'This is referring to the dimentions of U.S. standard letter paper.', }), }, PageManager: { @@ -737,6 +1054,13 @@ export const ComponentStrings = { }), }, WorkpadTemplates: { + getCloneTemplateLinkAriaLabel: (templateName: string) => + i18n.translate('xpack.canvas.workpadTemplate.cloneTemplateLinkAriaLabel', { + defaultMessage: `Clone workpad template '{templateName}'`, + values: { + templateName, + }, + }), getTableDescriptionColumnTitle: () => i18n.translate('xpack.canvas.workpadTemplates.table.descriptionColumnTitle', { defaultMessage: 'Description', @@ -756,12 +1080,5 @@ export const ComponentStrings = { i18n.translate('xpack.canvas.workpadTemplate.searchPlaceholder', { defaultMessage: 'Find template', }), - getCloneTemplateLinkAriaLabel: (templateName: string) => - i18n.translate('xpack.canvas.workpadTemplate.cloneTemplateLinkAriaLabel', { - defaultMessage: `Clone workpad template '{templateName}'`, - values: { - templateName, - }, - }), }, }; diff --git a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx b/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx index 5f6e0fc9e7bc6..b5d08d98072a3 100644 --- a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx +++ b/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 { { /> { -

- Take a screenshot of your element and upload it here. This can also be done after - saving. -

+

{strings.getImageInputDescription()}

 { grow={1} > -

Element preview

+

{strings.getElementPreviewTitle()}

 @@ -187,7 +189,7 @@ export class CustomElementModal extends PureComponent { - Cancel + {strings.getCancelButtonLabel()} { onSave(name, description, image); }} > - Save + {strings.getSaveButtonLabel()} diff --git a/x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js b/x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js index e5ae933655802..76007994e56bf 100644 --- a/x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js +++ b/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 ( -

Elements

+

{strings.getTitle()}

 - + - + - + - + diff --git a/x-pack/legacy/plugins/canvas/public/components/page_config/index.js b/x-pack/legacy/plugins/canvas/public/components/page_config/index.js index fb216af667631..a0692584d4986 100644 --- a/x-pack/legacy/plugins/canvas/public/components/page_config/index.js +++ b/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, diff --git a/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js b/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js index 5c6e91621d55a..2586b4ec61f04 100644 --- a/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js +++ b/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 ( -

Page

+

{strings.getTitle()}

 @@ -35,7 +38,7 @@ export const PageConfig = ({ page, we use the second page's transition) */} {pageIndex > 0 ? ( - + {transition ? ( - + = ({ element }) => { const tabs = [ { id: 'edit', - name: 'Display', + name: strings.getDisplayTabLabel(), content: (
@@ -36,7 +39,7 @@ export const ElementSettings: FunctionComponent = ({ element }) => { }, { id: 'data', - name: 'Data', + name: strings.getDataTabLabel(), content: (
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx b/x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx index a514ef15b6610..b46465d9ec775 100644 --- a/x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx +++ b/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 = () => ( -

Ungroup (U) to edit individual element settings.

-

Save this group as a new element to re-use it throughout your workpad.

+

{strings.getUngroupDescription()}

+

{strings.getSaveGroupDescription()}

 ); diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx b/x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx index a3922aaac864a..2de3a805c95e9 100644 --- a/x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx +++ b/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 = () => ( -

Multiple elements are currently selected.

-

- 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. -

+

{strings.getMultipleElementsDescription()}

+

{strings.getMultipleElementsActionsDescription()}

 ); diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_content.js b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_content.js index fe53203684f5d..825ea8a4f2494 100644 --- a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_content.js +++ b/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 }) => ( - + @@ -51,7 +57,7 @@ const MultiElementSidebar = ({ commit, updateGlobalState }) => ( const GroupedElementSidebar = ({ commit, updateGlobalState }) => ( @@ -62,7 +68,7 @@ const GroupedElementSidebar = ({ commit, updateGlobalState }) => ( const SingleElementSidebar = ({ selectedElementId }) => ( - + ); diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.tsx b/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.tsx index 5a76414019a27..3a0e191b9f4b5 100644 --- a/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.tsx +++ b/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.tsx @@ -20,9 +20,13 @@ import { import { Popover } from '../popover'; import { CustomElementModal } from '../custom_element_modal'; import { ToolTipShortcut } from '../tool_tip_shortcut/'; +import { ComponentStrings, ShortcutStrings } from '../../../i18n'; const topBorderClassName = 'canvasContextMenu--topBorder'; +const { SidebarHeader: strings } = ComponentStrings; +const shortcutHelp = ShortcutStrings.getShortcutHelp(); + interface Props { /** * title to display in the header @@ -139,7 +143,7 @@ const contextMenuButton = (handleClick: (event: MouseEvent) => void) => ( color="text" iconType="boxesVertical" onClick={handleClick} - aria-label="Element options" + aria-label={strings.getContextMenuTitle()} /> ); @@ -202,7 +206,7 @@ export class SidebarHeader extends Component { position="bottom" content={ - Bring to front + {shortcutHelp.BRING_TO_FRONT} } @@ -211,7 +215,7 @@ export class SidebarHeader extends Component { color="text" iconType="sortUp" onClick={bringToFront} - aria-label="Move element to top layer" + aria-label={strings.getBringToFrontAriaLabel()} /> @@ -220,7 +224,7 @@ export class SidebarHeader extends Component { position="bottom" content={ - Bring forward + {shortcutHelp.BRING_FORWARD} } @@ -229,7 +233,7 @@ export class SidebarHeader extends Component { color="text" iconType="arrowUp" onClick={bringForward} - aria-label="Move element up one layer" + aria-label={strings.getBringForwardAriaLabel()} /> @@ -238,7 +242,7 @@ export class SidebarHeader extends Component { position="bottom" content={ - Send backward + {shortcutHelp.SEND_BACKWARD} } @@ -247,7 +251,7 @@ export class SidebarHeader extends Component { color="text" iconType="arrowDown" onClick={sendBackward} - aria-label="Move element down one layer" + aria-label={strings.getSendBackwardAriaLabel()} /> @@ -256,7 +260,7 @@ export class SidebarHeader extends Component { position="bottom" content={ - Send to back + {shortcutHelp.SEND_TO_BACK} } @@ -265,7 +269,7 @@ export class SidebarHeader extends Component { color="text" iconType="sortDown" onClick={sendToBack} - aria-label="Move element to bottom layer" + aria-label={strings.getSendToBackAriaLabel()} /> @@ -277,28 +281,28 @@ export class SidebarHeader extends Component { const { bringToFront, bringForward, sendBackward, sendToBack } = this.props; return { - menuItem: { name: 'Order', className: topBorderClassName, panel: 1 }, + menuItem: { name: strings.getOrderMenuItemLabel(), className: topBorderClassName, panel: 1 }, panel: { id: 1, - title: 'Order', + title: strings.getOrderMenuItemLabel(), items: [ { - name: 'Bring to front', // TODO: check against current element position and disable if already top layer + name: shortcutHelp.BRING_TO_FRONT, // TODO: check against current element position and disable if already top layer icon: 'sortUp', onClick: bringToFront, }, { - name: 'Bring forward', // TODO: same as above + name: shortcutHelp.BRING_TO_FRONT, // TODO: same as above icon: 'arrowUp', onClick: bringForward, }, { - name: 'Send backward', // TODO: check against current element position and disable if already bottom layer + name: shortcutHelp.SEND_BACKWARD, // TODO: check against current element position and disable if already bottom layer icon: 'arrowDown', onClick: sendBackward, }, { - name: 'Send to back', // TODO: same as above + name: shortcutHelp.SEND_TO_BACK, // TODO: same as above icon: 'sortDown', onClick: sendToBack, }, @@ -311,38 +315,42 @@ export class SidebarHeader extends Component { const { alignLeft, alignCenter, alignRight, alignTop, alignMiddle, alignBottom } = this.props; return { - menuItem: { name: 'Align elements', className: 'canvasContextMenu', panel: 2 }, + menuItem: { + name: strings.getAlignmentMenuItemLabel(), + className: 'canvasContextMenu', + panel: 2, + }, panel: { id: 2, - title: 'Alignment', + title: strings.getAlignmentMenuItemLabel(), items: [ { - name: 'Left', + name: strings.getLeftAlignMenuItemLabel(), icon: 'editorItemAlignLeft', onClick: close(alignLeft), }, { - name: 'Center', + name: strings.getCenterAlignMenuItemLabel(), icon: 'editorItemAlignCenter', onClick: close(alignCenter), }, { - name: 'Right', + name: strings.getRightAlignMenuItemLabel(), icon: 'editorItemAlignRight', onClick: close(alignRight), }, { - name: 'Top', + name: strings.getTopAlignMenuItemLabel(), icon: 'editorItemAlignTop', onClick: close(alignTop), }, { - name: 'Middle', + name: strings.getMiddleAlignMenuItemLabel(), icon: 'editorItemAlignMiddle', onClick: close(alignMiddle), }, { - name: 'Bottom', + name: strings.getBottomAlignMenuItemLabel(), icon: 'editorItemAlignBottom', onClick: close(alignBottom), }, @@ -355,18 +363,22 @@ export class SidebarHeader extends Component { const { distributeHorizontally, distributeVertically } = this.props; return { - menuItem: { name: 'Distribute elements', className: 'canvasContextMenu', panel: 3 }, + menuItem: { + name: strings.getDistributionMenuItemLabel(), + className: 'canvasContextMenu', + panel: 3, + }, panel: { id: 3, - title: 'Distribution', + title: strings.getDistributionMenuItemLabel(), items: [ { - name: 'Horizontal', + name: strings.getHorizontalDistributionMenuItemLabel(), icon: 'editorDistributeHorizontal', onClick: close(distributeHorizontally), }, { - name: 'Vertical', + name: strings.getVerticalDistributionMenuItemLabel(), icon: 'editorDistributeVertical', onClick: close(distributeVertically), }, @@ -382,7 +394,7 @@ export class SidebarHeader extends Component { return groupIsSelected ? [ { - name: 'Ungroup', + name: strings.getUngroupMenuItemLabel(), className: topBorderClassName, onClick: close(ungroupNodes), }, @@ -390,7 +402,7 @@ export class SidebarHeader extends Component { : selectedNodes.length > 1 ? [ { - name: 'Group', + name: strings.getGroupMenuItemLabel(), className: topBorderClassName, onClick: close(groupNodes), }, @@ -416,27 +428,27 @@ export class SidebarHeader extends Component { const items: EuiContextMenuPanelItemDescriptor[] = [ { - name: 'Cut', + name: shortcutHelp.CUT, icon: 'cut', onClick: close(cutNodes), }, { - name: 'Copy', + name: shortcutHelp.COPY, icon: 'copy', onClick: copyNodes, }, { - name: 'Paste', // TODO: can this be disabled if clipboard is empty? + name: shortcutHelp.PASTE, // TODO: can this be disabled if clipboard is empty? icon: 'copyClipboard', onClick: close(pasteNodes), }, { - name: 'Delete', + name: shortcutHelp.DELETE, icon: 'trash', onClick: close(deleteNodes), }, { - name: 'Clone', + name: shortcutHelp.CLONE, onClick: close(cloneNodes), }, ...this._getGroupMenuItems(close), @@ -445,7 +457,7 @@ export class SidebarHeader extends Component { const panels: EuiContextMenuPanelDescriptor[] = [ { id: 0, - title: 'Element options', + title: strings.getContextMenuTitle(), items, }, ]; @@ -468,7 +480,7 @@ export class SidebarHeader extends Component { } items.push({ - name: 'Save as new element', + name: strings.getSaveElementMenuItemLabel(), icon: 'indexOpen', className: topBorderClassName, onClick: this._showModal, @@ -483,7 +495,7 @@ export class SidebarHeader extends Component { className="canvasContextMenu" button={contextMenuButton} panelPaddingSize="none" - tooltip="Element options" + tooltip={strings.getContextMenuTitle()} tooltipPosition="bottom" > {({ closePopover }: { closePopover: () => void }) => ( @@ -519,12 +531,12 @@ export class SidebarHeader extends Component { {showLayerControls ? this._renderLayoutControls() : null} - + @@ -535,7 +547,7 @@ export class SidebarHeader extends Component { {isModalVisible ? ( diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js b/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js index f1073f896e120..4eb8a336d14bc 100644 --- a/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js +++ b/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js @@ -23,6 +23,9 @@ import { EuiButton, } from '@elastic/eui'; import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants'; +import { ComponentStrings } from '../../../i18n'; + +const { WorkpadConfig: strings } = ComponentStrings; export class WorkpadConfig extends PureComponent { static propTypes = { @@ -57,7 +60,7 @@ export class WorkpadConfig extends PureComponent { size: { height: 842, width: 590 }, }, { - name: 'US Letter', + name: strings.getUSLetterButtonLabel(), size: { height: 792, width: 612 }, }, ]; @@ -65,7 +68,7 @@ export class WorkpadConfig extends PureComponent { return (
-

Workpad

+

{strings.getTitle()}

 @@ -78,7 +81,7 @@ export class WorkpadConfig extends PureComponent { - + setSize({ width: Number(e.target.value), height: size.height })} @@ -88,18 +91,18 @@ export class WorkpadConfig extends PureComponent { - + - + setSize({ height: Number(e.target.value), width: size.width })} @@ -117,8 +120,8 @@ export class WorkpadConfig extends PureComponent { key={`page-size-badge-${i}`} color="hollow" onClick={() => setSize(badge.size)} - aria-label={`Preset Page Size: ${badge.name}`} - onClickAriaLabel={`Set page size to ${badge.name}`} + aria-label={strings.getPageSizeBadgeAriaLabel(badge.name)} + onClickAriaLabel={strings.getPageSizeBadgeOnClickAriaLabel(badge.name)} > {badge.name} @@ -132,19 +135,19 @@ export class WorkpadConfig extends PureComponent { className="canvasArg__accordion" buttonContent={ - Global CSS overrides + {strings.getGlobalCSSLabel()} } >
this.setState({ css: e.target.value })} @@ -152,7 +155,7 @@ export class WorkpadConfig extends PureComponent { /> setWorkpadCSS(css || DEFAULT_WORKPAD_CSS)}> - Apply stylesheet + {strings.getApplyStylesheetButtonLabel()}