From 6f1e7c3016b53cf8d3c0e28dba3538861fe56086 Mon Sep 17 00:00:00 2001 From: vera-liu Date: Mon, 24 Oct 2016 17:49:23 -0700 Subject: [PATCH] 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 --- .../SqlLab/components/CopyQueryTabUrl.jsx | 22 ++++++------- .../SqlLab/components/TabbedSqlEditors.jsx | 14 ++------- .../explore/components/URLShortLinkButton.jsx | 31 ++++++------------- caravel/assets/utils/common.js | 21 +++++++++++++ 4 files changed, 44 insertions(+), 44 deletions(-) diff --git a/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx b/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx index e1bfcc091fd0..cd0a6e75e253 100644 --- 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 ( share query} 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 index c94fa590d6dd..f8bad415326f 100644 --- 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 index fd80039c26cf..ac6adb475e2f 100644 --- 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 ( @@ -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()} > diff --git a/caravel/assets/utils/common.js b/caravel/assets/utils/common.js index f851ae499440..5b3a0bb9388f 100644 --- 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); + } + }, + }); +}