diff --git a/src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap b/src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap index cd291871ae71a..d92769d3101f7 100644 --- a/src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap +++ b/src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap @@ -7,7 +7,7 @@ exports[`should only render permalink panel when there are no other panels 1`] = panels={ Array [ Object { - "content": , @@ -26,7 +26,7 @@ exports[`should render context menu panel when there are more than one panel 1`] panels={ Array [ Object { - "content": , @@ -34,7 +34,7 @@ exports[`should render context menu panel when there are more than one panel 1`] "title": "Permalink", }, Object { - "content": + } + label={ + + } > - Snapshot + + } position="bottom" type="questionInCircle" /> @@ -66,7 +96,11 @@ exports[`render 1`] = ` component="div" grow={true} > - Saved object + + } position="bottom" type="questionInCircle" /> @@ -106,7 +150,13 @@ exports[`render 1`] = ` + } onChange={[Function]} /> @@ -116,10 +166,16 @@ exports[`render 1`] = ` > + } position="bottom" type="questionInCircle" /> @@ -143,7 +199,13 @@ exports[`should enable saved object export option when objectId is provided 1`] describedByIds={Array []} fullWidth={false} hasEmptyLabelSpace={false} - label="Generate the link as" + label={ + + } > - Snapshot + + } position="bottom" type="questionInCircle" /> @@ -199,7 +275,11 @@ exports[`should enable saved object export option when objectId is provided 1`] component="div" grow={true} > - Saved object + + } position="bottom" type="questionInCircle" /> @@ -239,7 +329,13 @@ exports[`should enable saved object export option when objectId is provided 1`] + } onChange={[Function]} /> @@ -249,10 +345,16 @@ exports[`should enable saved object export option when objectId is provided 1`] > + } position="bottom" type="questionInCircle" /> diff --git a/src/ui/public/share/components/share_context_menu.test.js b/src/ui/public/share/components/share_context_menu.test.js index 385441fef5d8a..175c6bd9952f8 100644 --- a/src/ui/public/share/components/share_context_menu.test.js +++ b/src/ui/public/share/components/share_context_menu.test.js @@ -20,14 +20,14 @@ jest.mock('../lib/url_shortener', () => ({})); import React from 'react'; -import { shallow } from 'enzyme'; +import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import { ShareContextMenu, } from './share_context_menu'; test('should render context menu panel when there are more than one panel', () => { - const component = shallow( {}} @@ -36,7 +36,7 @@ test('should render context menu panel when there are more than one panel', () = }); test('should only render permalink panel when there are no other panels', () => { - const component = shallow( {}} diff --git a/src/ui/public/share/components/share_context_menu.tsx b/src/ui/public/share/components/share_context_menu.tsx index 3093fe33ae2b6..b68d75b40bc56 100644 --- a/src/ui/public/share/components/share_context_menu.tsx +++ b/src/ui/public/share/components/share_context_menu.tsx @@ -23,6 +23,7 @@ import './share_panel_content.less'; import { EuiContextMenuPanelDescriptor } from '@elastic/eui'; import { EuiContextMenu } from '@elastic/eui'; +import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; import { ShareAction, ShareActionProvider, ShareContextMenuPanelItem } from 'ui/share/share_action'; import { UrlPanelContent } from './url_panel_content'; @@ -35,9 +36,10 @@ interface Props { sharingData: any; isDirty: boolean; onClose: () => void; + intl: InjectedIntl; } -export class ShareContextMenu extends Component { +class ShareContextMenuUI extends Component { public render() { const { panels, initialPanelId } = this.getPanels(); return ( @@ -52,10 +54,14 @@ export class ShareContextMenu extends Component { private getPanels = () => { const panels: EuiContextMenuPanelDescriptor[] = []; const menuItems: ShareContextMenuPanelItem[] = []; + const { intl } = this.props; const permalinkPanel = { id: panels.length + 1, - title: 'Permalink', + title: intl.formatMessage({ + id: 'common.ui.share.contextMenu.permalinkPanelTitle', + defaultMessage: 'Permalink', + }), content: ( { ), }; menuItems.push({ - name: 'Permalinks', + name: intl.formatMessage({ + id: 'common.ui.share.contextMenu.permalinksLabel', + defaultMessage: 'Permalinks', + }), icon: 'link', panel: permalinkPanel.id, sortOrder: 0, @@ -75,7 +84,10 @@ export class ShareContextMenu extends Component { if (this.props.allowEmbed) { const embedPanel = { id: panels.length + 1, - title: 'Embed Code', + title: intl.formatMessage({ + id: 'common.ui.share.contextMenu.embedCodePanelTitle', + defaultMessage: 'Embed Code', + }), content: ( { }; panels.push(embedPanel); menuItems.push({ - name: 'Embed code', + name: intl.formatMessage({ + id: 'common.ui.share.contextMenu.embedCodeLabel', + defaultMessage: 'Embed code', + }), icon: 'console', panel: embedPanel.id, sortOrder: 0, @@ -130,7 +145,15 @@ export class ShareContextMenu extends Component { if (menuItems.length > 1) { const topLevelMenuPanel = { id: panels.length + 1, - title: `Share this ${this.props.objectType}`, + title: intl.formatMessage( + { + id: 'common.ui.share.contextMenuTitle', + defaultMessage: 'Share this {objectType}', + }, + { + objectType: this.props.objectType, + } + ), items: menuItems .map(menuItem => { menuItem['data-test-subj'] = `sharePanel-${menuItem.name.replace(' ', '')}`; @@ -161,3 +184,5 @@ export class ShareContextMenu extends Component { return { panels, initialPanelId }; }; } + +export const ShareContextMenu = injectI18n(ShareContextMenuUI); diff --git a/src/ui/public/share/components/url_panel_content.test.js b/src/ui/public/share/components/url_panel_content.test.js index 025c282c83bc8..550631a47b02c 100644 --- a/src/ui/public/share/components/url_panel_content.test.js +++ b/src/ui/public/share/components/url_panel_content.test.js @@ -20,14 +20,14 @@ jest.mock('../lib/url_shortener', () => ({})); import React from 'react'; -import { shallow } from 'enzyme'; +import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import { UrlPanelContent, } from './url_panel_content'; test('render', () => { - const component = shallow( {}} />); @@ -35,7 +35,7 @@ test('render', () => { }); test('should enable saved object export option when objectId is provided', () => { - const component = shallow( {}} diff --git a/src/ui/public/share/components/url_panel_content.tsx b/src/ui/public/share/components/url_panel_content.tsx index 9e781ceb0f673..6b0109e3967fe 100644 --- a/src/ui/public/share/components/url_panel_content.tsx +++ b/src/ui/public/share/components/url_panel_content.tsx @@ -37,6 +37,8 @@ import { format as formatUrl, parse as parseUrl } from 'url'; import { unhashUrl } from '../../state_management/state_hashing'; import { shortenUrl } from '../lib/url_shortener'; +import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react'; + // TODO: Remove once EuiIconTip supports "content" prop const FixedEuiIconTip = EuiIconTip as React.SFC; @@ -45,6 +47,7 @@ interface Props { objectId?: string; objectType: string; getUnhashableStates: () => object[]; + intl: InjectedIntl; } enum ExportUrlAsType { @@ -60,7 +63,7 @@ interface State { shortUrlErrorMsg?: string; } -export class UrlPanelContent extends Component { +class UrlPanelContentUI extends Component { private mounted?: boolean; private shortUrlCache?: string; @@ -108,7 +111,17 @@ export class UrlPanelContent extends Component { data-test-subj="copyShareUrlButton" size="s" > - Copy {this.props.isEmbedded ? 'iFrame code' : 'link'} + {this.props.isEmbedded ? ( + + ) : ( + + )} )} @@ -250,7 +263,15 @@ export class UrlPanelContent extends Component { { useShortUrl: false, isCreatingShortUrl: false, - shortUrlErrorMsg: `Unable to create short URL. Error: ${fetchError.message}`, + shortUrlErrorMsg: this.props.intl.formatMessage( + { + id: 'common.ui.share.urlPanel.unableCreateShortUrlErrorMessage', + defaultMessage: 'Unable to create short URL. Error: {errorMessage}', + }, + { + errorMessage: fetchError.message, + } + ), }, this.setUrl ); @@ -263,9 +284,16 @@ export class UrlPanelContent extends Component { { id: ExportUrlAsType.EXPORT_URL_AS_SNAPSHOT, label: this.renderWithIconTip( - 'Snapshot', - `Snapshot URLs encode the current state of the ${this.props.objectType} in the URL itself. - Edits to the saved ${this.props.objectType} won't be visible via this URL.` + , + ), ['data-test-subj']: 'exportAsSnapshot', }, @@ -273,10 +301,15 @@ export class UrlPanelContent extends Component { id: ExportUrlAsType.EXPORT_URL_AS_SAVED_OBJECT, disabled: this.isNotSaved(), label: this.renderWithIconTip( - 'Saved object', - `You can share this URL with people to let them load the most recent saved version of this ${ - this.props.objectType - }.` + , + ), ['data-test-subj']: 'exportAsSavedObject', }, @@ -295,11 +328,25 @@ export class UrlPanelContent extends Component { }; private renderExportAsRadioGroup = () => { - const generateLinkAsHelp = this.isNotSaved() - ? `Can't share as saved object until the ${this.props.objectType} has been saved.` - : undefined; + const generateLinkAsHelp = this.isNotSaved() ? ( + + ) : ( + undefined + ); return ( - + + } + helpText={generateLinkAsHelp} + > { if (this.state.exportUrlAs === ExportUrlAsType.EXPORT_URL_AS_SAVED_OBJECT) { return; } - + const shortUrlLabel = ( + + ); const switchLabel = this.state.isCreatingShortUrl ? ( - Short URL + {shortUrlLabel} ) : ( - 'Short URL' + shortUrlLabel ); const switchComponent = ( { data-test-subj="useShortUrl" /> ); - const tipContent = `We recommend sharing shortened snapshot URLs for maximum compatibility. - Internet Explorer has URL length restrictions, - and some wiki and markup parsers don't do well with the full-length version of the snapshot URL, - but the short URL should work great.`; + const tipContent = ( + + ); return ( @@ -341,3 +395,5 @@ export class UrlPanelContent extends Component { ); }; } + +export const UrlPanelContent = injectI18n(UrlPanelContentUI);