Skip to content

Commit

Permalink
Fix saved object share link (elastic#66771) (elastic#67041)
Browse files Browse the repository at this point in the history
  • Loading branch information
@flash1293
flash1293 authored May 20, 2020
1 parent e251463 commit 68fad28
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 20 deletions.
6 changes: 3 additions & 3 deletions src/plugins/share/public/components/__snapshots__/url_panel_content.test.tsx.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

185 changes: 170 additions & 15 deletions src/plugins/share/public/components/url_panel_content.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,16 @@
* under the License.
*/

jest.mock('../lib/url_shortener', () => ({}));
import { EuiCopy, EuiRadioGroup, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';

jest.mock('../lib/url_shortener', () => ({ shortenUrl: jest.fn() }));

import React from 'react';
import { shallow } from 'enzyme';

import { UrlPanelContent } from './url_panel_content';
import { ExportUrlAsType, UrlPanelContent } from './url_panel_content';
import { act } from 'react-dom/test-utils';
import { shortenUrl } from '../lib/url_shortener';

const defaultProps = {
allowShortUrl: true,
Expand All @@ -31,19 +35,170 @@ const defaultProps = {
post: () => Promise.resolve({} as any),
};

test('render', () => {
const component = shallow(<UrlPanelContent {...defaultProps} />);
expect(component).toMatchSnapshot();
});
describe('share url panel content', () => {
test('render', () => {
const component = shallow(<UrlPanelContent {...defaultProps} />);
expect(component).toMatchSnapshot();
});

test('should enable saved object export option when objectId is provided', () => {
const component = shallow(<UrlPanelContent {...defaultProps} objectId="id1" />);
expect(component).toMatchSnapshot();
});
test('should enable saved object export option when objectId is provided', () => {
const component = shallow(<UrlPanelContent {...defaultProps} objectId="id1" />);
expect(component).toMatchSnapshot();
});

test('should hide short url section when allowShortUrl is false', () => {
const component = shallow(
<UrlPanelContent {...defaultProps} allowShortUrl={false} objectId="id1" />
);
expect(component).toMatchSnapshot();
});

test('should remove _a query parameter in saved object mode', () => {
const component = shallow(
<UrlPanelContent
{...defaultProps}
shareableUrl="http://localhost:5601/app/myapp#/?_g=()&_a=()"
allowShortUrl={false}
objectId="id1"
/>
);
act(() => {
component.find(EuiRadioGroup).prop('onChange')!(ExportUrlAsType.EXPORT_URL_AS_SAVED_OBJECT);
});
expect(component.find(EuiCopy).prop('textToCopy')).toEqual(
'http://localhost:5601/app/myapp#/?_g=()'
);
});

describe('short url', () => {
test('should generate short url and put it in copy button', async () => {
const shortenUrlMock = shortenUrl as jest.Mock;
shortenUrlMock.mockReset();
shortenUrlMock.mockResolvedValue('http://localhost/short/url');

const component = shallow(
<UrlPanelContent
{...defaultProps}
shareableUrl="http://localhost:5601/app/myapp#/?_g=()&_a=()"
objectId="id1"
/>
);
await act(async () => {
component.find(EuiSwitch).prop('onChange')!(({
target: { checked: true },
} as unknown) as EuiSwitchEvent);
});
expect(shortenUrlMock).toHaveBeenCalledWith(
'http://localhost:5601/app/myapp#/?_g=()&_a=()',
expect.anything()
);
expect(component.find(EuiCopy).prop('textToCopy')).toContain('http://localhost/short/url');
});

test('should hide short url for saved object mode', async () => {
const component = shallow(
<UrlPanelContent
{...defaultProps}
shareableUrl="http://localhost:5601/app/myapp#/"
objectId="id1"
/>
);
act(() => {
component.find(EuiRadioGroup).prop('onChange')!(ExportUrlAsType.EXPORT_URL_AS_SAVED_OBJECT);
});
expect(component.exists(EuiSwitch)).toEqual(false);
});
});

describe('embedded', () => {
const asIframe = (url: string) => `<iframe src="${url}" height="600" width="800"></iframe>`;

test('should add embedded flag to target code in snapshot mode', () => {
const component = shallow(
<UrlPanelContent
{...defaultProps}
shareableUrl="http://localhost:5601/app/myapp#/"
isEmbedded
allowShortUrl={false}
objectId="id1"
/>
);
expect(component.find(EuiCopy).prop('textToCopy')).toEqual(
asIframe('http://localhost:5601/app/myapp#/?embed=true')
);
});

test('should add embedded flag to target code in snapshot mode with existing query parameters', () => {
const component = shallow(
<UrlPanelContent
{...defaultProps}
shareableUrl="http://localhost:5601/app/myapp#/?_g=()&_a=()"
isEmbedded
allowShortUrl={false}
objectId="id1"
/>
);
expect(component.find(EuiCopy).prop('textToCopy')).toEqual(
asIframe('http://localhost:5601/app/myapp#/?embed=true&_g=()&_a=()')
);
});

test('should remove _a query parameter and add embedded flag in saved object mode', () => {
const component = shallow(
<UrlPanelContent
{...defaultProps}
shareableUrl="http://localhost:5601/app/myapp#/?_g=()&_a=()"
isEmbedded
allowShortUrl={false}
objectId="id1"
/>
);
act(() => {
component.find(EuiRadioGroup).prop('onChange')!(ExportUrlAsType.EXPORT_URL_AS_SAVED_OBJECT);
});
expect(component.find(EuiCopy).prop('textToCopy')).toEqual(
asIframe('http://localhost:5601/app/myapp#/?embed=true&_g=()')
);
});

test('should generate short url with embed flag and put it in copy button', async () => {
const shortenUrlMock = shortenUrl as jest.Mock;
shortenUrlMock.mockReset();
shortenUrlMock.mockResolvedValue('http://localhost/short/url');

const component = shallow(
<UrlPanelContent
{...defaultProps}
isEmbedded
shareableUrl="http://localhost:5601/app/myapp#/?_g=()&_a=()"
objectId="id1"
/>
);
await act(async () => {
component.find(EuiSwitch).prop('onChange')!(({
target: { checked: true },
} as unknown) as EuiSwitchEvent);
});
expect(shortenUrlMock).toHaveBeenCalledWith(
'http://localhost:5601/app/myapp#/?embed=true&_g=()&_a=()',
expect.anything()
);
expect(component.find(EuiCopy).prop('textToCopy')).toContain('http://localhost/short/url');
});

test('should hide short url section when allowShortUrl is false', () => {
const component = shallow(
<UrlPanelContent {...defaultProps} allowShortUrl={false} objectId="id1" />
);
expect(component).toMatchSnapshot();
test('should hide short url for saved object mode', async () => {
const component = shallow(
<UrlPanelContent
{...defaultProps}
isEmbedded
shareableUrl="http://localhost:5601/app/myapp#/"
objectId="id1"
/>
);
act(() => {
component.find(EuiRadioGroup).prop('onChange')!(ExportUrlAsType.EXPORT_URL_AS_SAVED_OBJECT);
});
expect(component.exists(EuiSwitch)).toEqual(false);
});
});
});
4 changes: 2 additions & 2 deletions src/plugins/share/public/components/url_panel_content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ interface Props {
post: HttpStart['post'];
}

enum ExportUrlAsType {
export enum ExportUrlAsType {
EXPORT_URL_AS_SAVED_OBJECT = 'savedObject',
EXPORT_URL_AS_SNAPSHOT = 'snapshot',
}
Expand Down Expand Up @@ -181,7 +181,7 @@ export class UrlPanelContent extends Component<Props, State> {
}),
});
if (this.props.isEmbedded) {
formattedUrl = this.makeUrlEmbeddable(url);
formattedUrl = this.makeUrlEmbeddable(formattedUrl);
}

return formattedUrl;
Expand Down

0 comments on commit 68fad28

Please sign in to comment.