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

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}

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