Added url shortner for sharing query link (#1314)

* Added url shortner for sharing query link * Move shortener outside CopyToClipboard and move ajax call to common.js * transfer dbId to int to avoid failed prop
apache · Oct 25, 2016 · 6f1e7c3 · 6f1e7c3
1 parent 9f81e23
commit 6f1e7c3
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 44 deletions.
diff --git a/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx b/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import CopyToClipboard from '../../components/CopyToClipboard';
+import { getShortUrl } from '../../../utils/common';
 
 const propTypes = {
   qe: React.PropTypes.object,
@@ -12,18 +13,12 @@ const defaultProps = {
 export default class CopyQueryTabUrl extends React.Component {
   constructor(props) {
     super(props);
-    const uri = window.location.toString();
-    const search = window.location.search;
-    const cleanUri = search ? uri.substring(0, uri.indexOf('?')) : uri;
-    const query = search.substring(1);
     this.state = {
-      uri,
-      cleanUri,
-      query,
+      shortUrl: '',
     };
   }
 
-  getQueryLink() {
+  componentWillMount() {
     const params = [];
     const qe = this.props.qe;
     if (qe.dbId) params.push('dbid=' + qe.dbId);
@@ -33,16 +28,21 @@ export default class CopyQueryTabUrl extends React.Component {
     if (qe.sql) params.push('sql=' + encodeURIComponent(qe.sql));
 
     const queryString = params.join('&');
-    const queryLink = this.state.cleanUri + '?' + queryString;
+    const queryLink = window.location.pathname + '?' + queryString;
+    getShortUrl(queryLink, this.onShortUrlSuccess.bind(this));
+  }
 
-    return queryLink;
+  onShortUrlSuccess(data) {
+    this.setState({
+      shortUrl: data,
+    });
   }
 
   render() {
     return (
       <CopyToClipboard
         inMenu
-        text={this.getQueryLink()}
+        text={this.state.shortUrl}
         copyNode={<span>share query</span>}
         tooltipText="copy URL to clipboard"
         shouldShowText={false}

diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
@@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
 import * as Actions from '../actions';
 import SqlEditor from './SqlEditor';
 import shortid from 'shortid';
-import { getParamFromQuery, getLink } from '../../../utils/common';
+import { getParamFromQuery } from '../../../utils/common';
 import CopyQueryTabUrl from './CopyQueryTabUrl';
 
 const propTypes = {
@@ -41,7 +41,7 @@ class TabbedSqlEditors extends React.Component {
       const queryEditorProps = {
         id: shortid.generate(),
         title: getParamFromQuery(this.state.query, 'title'),
-        dbId: getParamFromQuery(this.state.query, 'dbid'),
+        dbId: parseInt(getParamFromQuery(this.state.query, 'dbid'), 10),
         schema: getParamFromQuery(this.state.query, 'schema'),
         autorun: getParamFromQuery(this.state.query, 'autorun'),
         sql: getParamFromQuery(this.state.query, 'sql'),
@@ -51,16 +51,6 @@ class TabbedSqlEditors extends React.Component {
       window.history.replaceState({}, document.title, this.state.cleanUri);
     }
   }
-  getQueryLink(qe) {
-    const params = [];
-    if (qe.dbId) params.push('dbid=' + qe.dbId);
-    if (qe.title) params.push('title=' + qe.title);
-    if (qe.schema) params.push('schema=' + qe.schema);
-    if (qe.autorun) params.push('autorun=' + qe.autorun);
-    if (qe.sql) params.push('sql=' + qe.sql);
-
-    return getLink(this.state.cleanUri, params);
-  }
   renameTab(qe) {
     /* eslint no-alert: 0 */
     const newTitle = prompt('Enter a new title for the tab');

diff --git a/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx b/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { Popover, OverlayTrigger } from 'react-bootstrap';
 import CopyToClipboard from './../../components/CopyToClipboard';
-import $ from 'jquery';
+import { getShortUrl } from '../../../utils/common';
 
 const propTypes = {
   slice: PropTypes.object.isRequired,
@@ -15,28 +15,17 @@ export default class URLShortLinkButton extends React.Component {
     };
   }
 
-  getShortUrl() {
-    $.ajax({
-      type: 'POST',
-      url: '/r/shortner/',
-      data: {
-        data: '/' + window.location.pathname + window.location.search,
-      },
-      success: (data) => {
-        this.setState({
-          shortUrl: data,
-        });
-      },
-      error: (error) => {
-        /* eslint no-console: 0 */
-        if (console && console.warn) {
-          console.warn('Something went wrong...');
-          console.warn(error);
-        }
-      },
+  onShortUrlSuccess(data) {
+    this.setState({
+      shortUrl: data,
     });
   }
 
+  getCopyUrl() {
+    const longUrl = window.location.pathname + window.location.search;
+    getShortUrl(longUrl, this.onShortUrlSuccess.bind(this));
+  }
+
   renderPopover() {
     return (
       <Popover id="shorturl-popover">
@@ -54,7 +43,7 @@ export default class URLShortLinkButton extends React.Component {
         trigger="click"
         rootClose
         placement="left"
-        onEnter={this.getShortUrl.bind(this)}
+        onEnter={this.getCopyUrl.bind(this)}
         overlay={this.renderPopover()}
       >
         <span className="btn btn-default btn-sm">

diff --git a/caravel/assets/utils/common.js b/caravel/assets/utils/common.js
@@ -1,4 +1,5 @@
 /* eslint global-require: 0 */
+import $ from 'jquery';
 const d3 = window.d3 || require('d3');
 
 export const EARTH_CIRCUMFERENCE_KM = 40075.16;
@@ -53,3 +54,23 @@ export function getParamsFromUrl() {
   });
   return newParams;
 }
+
+export function getShortUrl(longUrl, callBack) {
+  $.ajax({
+    type: 'POST',
+    url: '/r/shortner/',
+    data: {
+      data: '/' + longUrl,
+    },
+    success: (data) => {
+      callBack(data);
+    },
+    error: (error) => {
+      /* eslint no-console: 0 */
+      if (console && console.warn) {
+        console.warn('Something went wrong...');
+        console.warn(error);
+      }
+    },
+  });
+}