diff --git a/superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx b/superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx
index a6c578174219c..f91f7c64f0645 100644
--- a/superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx
+++ b/superset-frontend/spec/javascripts/explore/components/EmbedCodeButton_spec.jsx
@@ -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('should create shorten, standalone, explore url', () => {
+ const spy1 = sinon.spy(exploreUtils, 'getExploreLongUrl');
+ const spy2 = sinon.spy(common, 'getShortUrl');
+
+ const wrapper = mount();
+ 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 stub = sinon
- .stub(exploreUtils, 'getExploreLongUrl')
- .callsFake(() => 'endpoint_url');
const wrapper = mount();
wrapper.setState({
height: '1000',
width: '2000',
+ shortUrl: 'http://localhostendpoint_url&height=1000',
});
const embedHTML =
'';
expect(wrapper.instance().generateEmbedHTML()).toBe(embedHTML);
- stub.restore();
});
});
diff --git a/superset-frontend/src/explore/components/EmbedCodeButton.jsx b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
index 2ed67256ec132..e44e488223377 100644
--- a/superset-frontend/src/explore/components/EmbedCodeButton.jsx
+++ b/superset-frontend/src/explore/components/EmbedCodeButton.jsx
@@ -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 (
''
);
@@ -135,6 +152,7 @@ export default class EmbedCodeButton extends React.Component {
trigger="click"
rootClose
placement="left"
+ onEnter={this.getCopyUrl}
overlay={this.renderPopover()}
>