feat: use shorten url in standalone iframe (#10651)

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('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();
   });
 });

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 (
       '<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">