mirror of https://github.com/apache/superset.git
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 * as exploreUtils from 'src/explore/exploreUtils';
|
||||
import * as common from 'src/utils/common';
|
||||
|
||||
describe('EmbedCodeButton', () => {
|
||||
const defaultProps = {
|
||||
|
@ -40,14 +41,32 @@ describe('EmbedCodeButton', () => {
|
|||
expect(wrapper.find(OverlayTrigger)).toExist();
|
||||
});
|
||||
|
||||
it('returns correct embed code', () => {
|
||||
const stub = sinon
|
||||
.stub(exploreUtils, 'getExploreLongUrl')
|
||||
.callsFake(() => 'endpoint_url');
|
||||
it('should create shorten, standalone, explore url', () => {
|
||||
const spy1 = sinon.spy(exploreUtils, 'getExploreLongUrl');
|
||||
const spy2 = sinon.spy(common, 'getShortUrl');
|
||||
|
||||
const wrapper = mount(<EmbedCodeButton {...defaultProps} />);
|
||||
wrapper.setState({
|
||||
height: '1000',
|
||||
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 =
|
||||
'<iframe\n' +
|
||||
|
@ -60,6 +79,5 @@ describe('EmbedCodeButton', () => {
|
|||
'>\n' +
|
||||
'</iframe>';
|
||||
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 CopyToClipboard from 'src/components/CopyToClipboard';
|
||||
import { getExploreLongUrl } from '../exploreUtils';
|
||||
import { getShortUrl } from '../../utils/common';
|
||||
|
||||
const propTypes = {
|
||||
latestQueryFormData: PropTypes.object.isRequired,
|
||||
|
@ -35,8 +36,28 @@ export default class EmbedCodeButton extends React.Component {
|
|||
this.state = {
|
||||
height: '400',
|
||||
width: '600',
|
||||
shortUrl: '',
|
||||
};
|
||||
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) {
|
||||
|
@ -48,10 +69,6 @@ export default class EmbedCodeButton extends React.Component {
|
|||
}
|
||||
|
||||
generateEmbedHTML() {
|
||||
const srcLink = `${
|
||||
window.location.origin +
|
||||
getExploreLongUrl(this.props.latestQueryFormData, 'standalone')
|
||||
}&height=${this.state.height}`;
|
||||
return (
|
||||
'<iframe\n' +
|
||||
` width="${this.state.width}"\n` +
|
||||
|
@ -59,7 +76,7 @@ export default class EmbedCodeButton extends React.Component {
|
|||
' seamless\n' +
|
||||
' frameBorder="0"\n' +
|
||||
' scrolling="no"\n' +
|
||||
` src="${srcLink}"\n` +
|
||||
` src="${this.state.shortUrl}"\n` +
|
||||
'>\n' +
|
||||
'</iframe>'
|
||||
);
|
||||
|
@ -135,6 +152,7 @@ export default class EmbedCodeButton extends React.Component {
|
|||
trigger="click"
|
||||
rootClose
|
||||
placement="left"
|
||||
onEnter={this.getCopyUrl}
|
||||
overlay={this.renderPopover()}
|
||||
>
|
||||
<span className="btn btn-default btn-sm" data-test="embed-code-button">
|
||||
|
|
Loading…
Reference in New Issue