github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Translate share (#26802) (#26950)

Browse source
This commit is contained in:
pavel06081991 2018-12-11 15:10:07 +03:00 • committed by Nox911
parent 2145431de1
commit 48c2928965
6 changed files with 242 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/ui/public/share/components/__snapshots__/share_context_menu.test.js.snap
View file

@ -7,7 +7,7 @@ exports[`should only render permalink panel when there are no other panels 1`] =
panels={
Array [
Object {
"content": <UrlPanelContent
"content": <InjectIntl(UrlPanelContentUI)
getUnhashableStates={[Function]}
objectType="dashboard"
/>,
@ -26,7 +26,7 @@ exports[`should render context menu panel when there are more than one panel 1`]
panels={
Array [
Object {
"content": <UrlPanelContent
"content": <InjectIntl(UrlPanelContentUI)
getUnhashableStates={[Function]}
objectType="dashboard"
/>,
@ -34,7 +34,7 @@ exports[`should render context menu panel when there are more than one panel 1`]
"title": "Permalink",
},
Object {
"content": <UrlPanelContent
"content": <InjectIntl(UrlPanelContentUI)
getUnhashableStates={[Function]}
isEmbedded={true}
objectType="dashboard"

148
src/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap
View file

@ -9,8 +9,24 @@ exports[`render 1`] = `
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
helpText="Can't share as saved object until the dashboard has been saved."
label="Generate the link as"
helpText={
<FormattedMessage
defaultMessage="Can't share as saved object until the {objectType} has been saved."
id="common.ui.share.urlPanel.canNotShareAsSavedObjectHelpText"
values={
Object {
"objectType": "dashboard",
}
}
/>
}
label={
<FormattedMessage
defaultMessage="Generate the link as"
id="common.ui.share.urlPanel.generateLinkAsLabel"
values={Object {}}
/>
}
>
<EuiRadioGroup
idSelected="snapshot"
@ -33,7 +49,11 @@ exports[`render 1`] = `
component="div"
grow={true}
>
Snapshot
<FormattedMessage
defaultMessage="Snapshot"
id="common.ui.share.urlPanel.snapshotLabel"
values={Object {}}
/>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -41,8 +61,18 @@ exports[`render 1`] = `
>
<EuiIconTip
aria-label="Info"
content="Snapshot URLs encode the current state of the dashboard in the URL itself.
Edits to the saved dashboard won't be visible via this URL."
content={
<FormattedMessage
defaultMessage="Snapshot URLs encode the current state of the {objectType} in the URL itself.
Edits to the saved {objectType} won't be visible via this URL."
id="common.ui.share.urlPanel.snapshotDescription"
values={
Object {
"objectType": "dashboard",
}
}
/>
}
position="bottom"
type="questionInCircle"
/>
@ -66,7 +96,11 @@ exports[`render 1`] = `
component="div"
grow={true}
>
Saved object
<FormattedMessage
defaultMessage="Saved object"
id="common.ui.share.urlPanel.savedObjectLabel"
values={Object {}}
/>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -74,7 +108,17 @@ exports[`render 1`] = `
>
<EuiIconTip
aria-label="Info"
content="You can share this URL with people to let them load the most recent saved version of this dashboard."
content={
<FormattedMessage
defaultMessage="You can share this URL with people to let them load the most recent saved version of this {objectType}."
id="common.ui.share.urlPanel.savedObjectDescription"
values={
Object {
"objectType": "dashboard",
}
}
/>
}
position="bottom"
type="questionInCircle"
/>
@ -106,7 +150,13 @@ exports[`render 1`] = `
<EuiSwitch
checked={false}
data-test-subj="useShortUrl"
label="Short URL"
label={
<FormattedMessage
defaultMessage="Short URL"
id="common.ui.share.urlPanel.shortUrlLabel"
values={Object {}}
/>
}
onChange={[Function]}
/>
</EuiFlexItem>
@ -116,10 +166,16 @@ exports[`render 1`] = `
>
<EuiIconTip
aria-label="Info"
content="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."
content={
<FormattedMessage
defaultMessage="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."
id="common.ui.share.urlPanel.shortUrlHelpText"
values={Object {}}
/>
}
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={
<FormattedMessage
defaultMessage="Generate the link as"
id="common.ui.share.urlPanel.generateLinkAsLabel"
values={Object {}}
/>
}
>
<EuiRadioGroup
idSelected="snapshot"
@ -166,7 +228,11 @@ exports[`should enable saved object export option when objectId is provided 1`]
component="div"
grow={true}
>
Snapshot
<FormattedMessage
defaultMessage="Snapshot"
id="common.ui.share.urlPanel.snapshotLabel"
values={Object {}}
/>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -174,8 +240,18 @@ exports[`should enable saved object export option when objectId is provided 1`]
>
<EuiIconTip
aria-label="Info"
content="Snapshot URLs encode the current state of the dashboard in the URL itself.
Edits to the saved dashboard won't be visible via this URL."
content={
<FormattedMessage
defaultMessage="Snapshot URLs encode the current state of the {objectType} in the URL itself.
Edits to the saved {objectType} won't be visible via this URL."
id="common.ui.share.urlPanel.snapshotDescription"
values={
Object {
"objectType": "dashboard",
}
}
/>
}
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
<FormattedMessage
defaultMessage="Saved object"
id="common.ui.share.urlPanel.savedObjectLabel"
values={Object {}}
/>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -207,7 +287,17 @@ exports[`should enable saved object export option when objectId is provided 1`]
>
<EuiIconTip
aria-label="Info"
content="You can share this URL with people to let them load the most recent saved version of this dashboard."
content={
<FormattedMessage
defaultMessage="You can share this URL with people to let them load the most recent saved version of this {objectType}."
id="common.ui.share.urlPanel.savedObjectDescription"
values={
Object {
"objectType": "dashboard",
}
}
/>
}
position="bottom"
type="questionInCircle"
/>
@ -239,7 +329,13 @@ exports[`should enable saved object export option when objectId is provided 1`]
<EuiSwitch
checked={false}
data-test-subj="useShortUrl"
label="Short URL"
label={
<FormattedMessage
defaultMessage="Short URL"
id="common.ui.share.urlPanel.shortUrlLabel"
values={Object {}}
/>
}
onChange={[Function]}
/>
</EuiFlexItem>
@ -249,10 +345,16 @@ exports[`should enable saved object export option when objectId is provided 1`]
>
<EuiIconTip
aria-label="Info"
content="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."
content={
<FormattedMessage
defaultMessage="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."
id="common.ui.share.urlPanel.shortUrlHelpText"
values={Object {}}
/>
}
position="bottom"
type="questionInCircle"
/>

6
src/ui/public/share/components/share_context_menu.test.js
View file

@ -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(<ShareContextMenu
const component = shallowWithIntl(<ShareContextMenu.WrappedComponent
allowEmbed
objectType="dashboard"
getUnhashableStates={() => {}}
@ -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(<ShareContextMenu
const component = shallowWithIntl(<ShareContextMenu.WrappedComponent
allowEmbed={false}
objectType="dashboard"
getUnhashableStates={() => {}}

37
src/ui/public/share/components/share_context_menu.tsx
View file

@ -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<Props> {
class ShareContextMenuUI extends Component<Props> {
public render() {
const { panels, initialPanelId } = this.getPanels();
return (
@ -52,10 +54,14 @@ export class ShareContextMenu extends Component<Props> {
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: (
<UrlPanelContent
objectId={this.props.objectId}
@ -65,7 +71,10 @@ export class ShareContextMenu extends Component<Props> {
),
};
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<Props> {
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: (
<UrlPanelContent
isEmbedded
@ -87,7 +99,10 @@ export class ShareContextMenu extends Component<Props> {
};
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<Props> {
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<Props> {
return { panels, initialPanelId };
};
}
export const ShareContextMenu = injectI18n(ShareContextMenuUI);

6
src/ui/public/share/components/url_panel_content.test.js
View file

@ -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(<UrlPanelContent
const component = shallowWithIntl(<UrlPanelContent.WrappedComponent
objectType="dashboard"
getUnhashableStates={() => {}}
/>);
@ -35,7 +35,7 @@ test('render', () => {
});
test('should enable saved object export option when objectId is provided', () => {
const component = shallow(<UrlPanelContent
const component = shallowWithIntl(<UrlPanelContent.WrappedComponent
objectId="id1"
objectType="dashboard"
getUnhashableStates={() => {}}

98
src/ui/public/share/components/url_panel_content.tsx
View file

@ -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<any>;
@ -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<Props, State> {
class UrlPanelContentUI extends Component<Props, State> {
private mounted?: boolean;
private shortUrlCache?: string;
@ -108,7 +111,17 @@ export class UrlPanelContent extends Component<Props, State> {
data-test-subj="copyShareUrlButton"
size="s"
>
Copy {this.props.isEmbedded ? 'iFrame code' : 'link'}
{this.props.isEmbedded ? (
<FormattedMessage
id="common.ui.share.urlPanel.copyIframeCodeButtonLabel"
defaultMessage="Copy iFrame code"
/>
) : (
<FormattedMessage
id="common.ui.share.urlPanel.copyLinkButtonLabel"
defaultMessage="Copy link"
/>
)}
</EuiButton>
</EuiFormRow>
)}
@ -250,7 +263,15 @@ export class UrlPanelContent extends Component<Props, State> {
{
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<Props, State> {
{
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.`
<FormattedMessage
id="common.ui.share.urlPanel.snapshotLabel"
defaultMessage="Snapshot"
/>,
<FormattedMessage
id="common.ui.share.urlPanel.snapshotDescription"
defaultMessage="Snapshot URLs encode the current state of the {objectType} in the URL itself.
Edits to the saved {objectType} won't be visible via this URL."
values={{ objectType: this.props.objectType }}
/>
),
['data-test-subj']: 'exportAsSnapshot',
},
@ -273,10 +301,15 @@ export class UrlPanelContent extends Component<Props, State> {
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
}.`
<FormattedMessage
id="common.ui.share.urlPanel.savedObjectLabel"
defaultMessage="Saved object"
/>,
<FormattedMessage
id="common.ui.share.urlPanel.savedObjectDescription"
defaultMessage="You can share this URL with people to let them load the most recent saved version of this {objectType}."
values={{ objectType: this.props.objectType }}
/>
),
['data-test-subj']: 'exportAsSavedObject',
},
@ -295,11 +328,25 @@ export class UrlPanelContent extends Component<Props, State> {
};
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() ? (
<FormattedMessage
id="common.ui.share.urlPanel.canNotShareAsSavedObjectHelpText"
defaultMessage="Can't share as saved object until the {objectType} has been saved."
values={{ objectType: this.props.objectType }}
/>
) : (
undefined
);
return (
<EuiFormRow label="Generate the link as" helpText={generateLinkAsHelp}>
<EuiFormRow
label={
<FormattedMessage
id="common.ui.share.urlPanel.generateLinkAsLabel"
defaultMessage="Generate the link as"
/>
}
helpText={generateLinkAsHelp}
>
<EuiRadioGroup
options={this.renderExportUrlAsOptions()}
idSelected={this.state.exportUrlAs}
@ -313,13 +360,15 @@ export class UrlPanelContent extends Component<Props, State> {
if (this.state.exportUrlAs === ExportUrlAsType.EXPORT_URL_AS_SAVED_OBJECT) {
return;
}
const shortUrlLabel = (
<FormattedMessage id="common.ui.share.urlPanel.shortUrlLabel" defaultMessage="Short URL" />
);
const switchLabel = this.state.isCreatingShortUrl ? (
<span>
<EuiLoadingSpinner size="s" /> Short URL
<EuiLoadingSpinner size="s" /> {shortUrlLabel}
</span>
) : (
'Short URL'
shortUrlLabel
);
const switchComponent = (
<EuiSwitch
@ -329,10 +378,15 @@ export class UrlPanelContent extends Component<Props, State> {
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 = (
<FormattedMessage
id="common.ui.share.urlPanel.shortUrlHelpText"
defaultMessage="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."
/>
);
return (
<EuiFormRow helpText={this.state.shortUrlErrorMsg}>
@ -341,3 +395,5 @@ export class UrlPanelContent extends Component<Props, State> {
);
};
}
export const UrlPanelContent = injectI18n(UrlPanelContentUI);