mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
feat: use shorten url in standalone iframe (#10651)
This commit is contained in:
parent
b86c0e5727
commit
aa8ff8759c
@ -23,6 +23,7 @@ import sinon from 'sinon';
|
|||||||
|
|
||||||
import EmbedCodeButton from 'src/explore/components/EmbedCodeButton';
|
import EmbedCodeButton from 'src/explore/components/EmbedCodeButton';
|
||||||
import * as exploreUtils from 'src/explore/exploreUtils';
|
import * as exploreUtils from 'src/explore/exploreUtils';
|
||||||
|
import * as common from 'src/utils/common';
|
||||||
|
|
||||||
describe('EmbedCodeButton', () => {
|
describe('EmbedCodeButton', () => {
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
@ -40,14 +41,32 @@ describe('EmbedCodeButton', () => {
|
|||||||
expect(wrapper.find(OverlayTrigger)).toExist();
|
expect(wrapper.find(OverlayTrigger)).toExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns correct embed code', () => {
|
it('should create shorten, standalone, explore url', () => {
|
||||||
const stub = sinon
|
const spy1 = sinon.spy(exploreUtils, 'getExploreLongUrl');
|
||||||
.stub(exploreUtils, 'getExploreLongUrl')
|
const spy2 = sinon.spy(common, 'getShortUrl');
|
||||||
.callsFake(() => 'endpoint_url');
|
|
||||||
const wrapper = mount(<EmbedCodeButton {...defaultProps} />);
|
const wrapper = mount(<EmbedCodeButton {...defaultProps} />);
|
||||||
wrapper.setState({
|
wrapper.setState({
|
||||||
height: '1000',
|
height: '1000',
|
||||||
width: '2000',
|
width: '2000',
|
||||||
|
shortUrl: 'http://localhostendpoint_url&height=1000',
|
||||||
|
});
|
||||||
|
|
||||||
|
const trigger = wrapper.find(OverlayTrigger);
|
||||||
|
trigger.simulate('click');
|
||||||
|
expect(spy1.args[0][1]).toBe('standalone');
|
||||||
|
expect(spy2.callCount).toBe(1);
|
||||||
|
|
||||||
|
spy1.restore();
|
||||||
|
spy2.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns correct embed code', () => {
|
||||||
|
const wrapper = mount(<EmbedCodeButton {...defaultProps} />);
|
||||||
|
wrapper.setState({
|
||||||
|
height: '1000',
|
||||||
|
width: '2000',
|
||||||
|
shortUrl: 'http://localhostendpoint_url&height=1000',
|
||||||
});
|
});
|
||||||
const embedHTML =
|
const embedHTML =
|
||||||
'<iframe\n' +
|
'<iframe\n' +
|
||||||
@ -60,6 +79,5 @@ describe('EmbedCodeButton', () => {
|
|||||||
'>\n' +
|
'>\n' +
|
||||||
'</iframe>';
|
'</iframe>';
|
||||||
expect(wrapper.instance().generateEmbedHTML()).toBe(embedHTML);
|
expect(wrapper.instance().generateEmbedHTML()).toBe(embedHTML);
|
||||||
stub.restore();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -24,6 +24,7 @@ import { t } from '@superset-ui/translation';
|
|||||||
import FormLabel from 'src/components/FormLabel';
|
import FormLabel from 'src/components/FormLabel';
|
||||||
import CopyToClipboard from 'src/components/CopyToClipboard';
|
import CopyToClipboard from 'src/components/CopyToClipboard';
|
||||||
import { getExploreLongUrl } from '../exploreUtils';
|
import { getExploreLongUrl } from '../exploreUtils';
|
||||||
|
import { getShortUrl } from '../../utils/common';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
latestQueryFormData: PropTypes.object.isRequired,
|
latestQueryFormData: PropTypes.object.isRequired,
|
||||||
@ -35,8 +36,28 @@ export default class EmbedCodeButton extends React.Component {
|
|||||||
this.state = {
|
this.state = {
|
||||||
height: '400',
|
height: '400',
|
||||||
width: '600',
|
width: '600',
|
||||||
|
shortUrl: '',
|
||||||
};
|
};
|
||||||
this.handleInputChange = this.handleInputChange.bind(this);
|
this.handleInputChange = this.handleInputChange.bind(this);
|
||||||
|
this.getCopyUrl = this.getCopyUrl.bind(this);
|
||||||
|
this.onShortUrlSuccess = this.onShortUrlSuccess.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
onShortUrlSuccess(shortUrl) {
|
||||||
|
this.setState(() => ({
|
||||||
|
shortUrl,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
getCopyUrl() {
|
||||||
|
const srcLink = `${
|
||||||
|
window.location.origin +
|
||||||
|
getExploreLongUrl(this.props.latestQueryFormData, 'standalone')
|
||||||
|
}&height=${this.state.height}`;
|
||||||
|
|
||||||
|
return getShortUrl(srcLink)
|
||||||
|
.then(this.onShortUrlSuccess)
|
||||||
|
.catch(this.props.addDangerToast);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInputChange(e) {
|
handleInputChange(e) {
|
||||||
@ -48,10 +69,6 @@ export default class EmbedCodeButton extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
generateEmbedHTML() {
|
generateEmbedHTML() {
|
||||||
const srcLink = `${
|
|
||||||
window.location.origin +
|
|
||||||
getExploreLongUrl(this.props.latestQueryFormData, 'standalone')
|
|
||||||
}&height=${this.state.height}`;
|
|
||||||
return (
|
return (
|
||||||
'<iframe\n' +
|
'<iframe\n' +
|
||||||
` width="${this.state.width}"\n` +
|
` width="${this.state.width}"\n` +
|
||||||
@ -59,7 +76,7 @@ export default class EmbedCodeButton extends React.Component {
|
|||||||
' seamless\n' +
|
' seamless\n' +
|
||||||
' frameBorder="0"\n' +
|
' frameBorder="0"\n' +
|
||||||
' scrolling="no"\n' +
|
' scrolling="no"\n' +
|
||||||
` src="${srcLink}"\n` +
|
` src="${this.state.shortUrl}"\n` +
|
||||||
'>\n' +
|
'>\n' +
|
||||||
'</iframe>'
|
'</iframe>'
|
||||||
);
|
);
|
||||||
@ -135,6 +152,7 @@ export default class EmbedCodeButton extends React.Component {
|
|||||||
trigger="click"
|
trigger="click"
|
||||||
rootClose
|
rootClose
|
||||||
placement="left"
|
placement="left"
|
||||||
|
onEnter={this.getCopyUrl}
|
||||||
overlay={this.renderPopover()}
|
overlay={this.renderPopover()}
|
||||||
>
|
>
|
||||||
<span className="btn btn-default btn-sm" data-test="embed-code-button">
|
<span className="btn btn-default btn-sm" data-test="embed-code-button">
|
||||||
|
Loading…
Reference in New Issue
Block a user