From 0373f1d9f75ee833ed2e2b2cb5892746f7ce1ebe Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Mon, 10 Oct 2016 18:09:37 -0700 Subject: [PATCH 1/3] Added url shortner for sharing query link --- .../SqlLab/components/CopyQueryTabUrl.jsx | 15 +-------- .../SqlLab/components/TabbedSqlEditors.jsx | 12 +------ .../components/CopyToClipboard.jsx | 31 +++++++++++++++++-- .../explore/components/URLShortLinkButton.jsx | 26 +--------------- 4 files changed, 32 insertions(+), 52 deletions(-) diff --git a/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx b/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx index e1bfcc091fd0..1d8524b618e1 100644 --- a/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx +++ b/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx @@ -10,19 +10,6 @@ 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, - }; - } - getQueryLink() { const params = []; const qe = this.props.qe; @@ -33,7 +20,7 @@ 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; return queryLink; } diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx index 2ae4ac550b5a..6bf5e8fb5f9a 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'; let queryCount = 1; @@ -39,16 +39,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/components/CopyToClipboard.jsx b/caravel/assets/javascripts/components/CopyToClipboard.jsx index 5330f8de7a1f..2ad86ad4a79b 100644 --- a/caravel/assets/javascripts/components/CopyToClipboard.jsx +++ b/caravel/assets/javascripts/components/CopyToClipboard.jsx @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; +import $ from 'jquery'; const propTypes = { copyNode: PropTypes.node, @@ -23,6 +24,7 @@ export default class CopyToClipboard extends React.Component { super(props); this.state = { hasCopied: false, + shortUrl: '', }; // bindings @@ -31,17 +33,42 @@ export default class CopyToClipboard extends React.Component { this.onMouseOut = this.onMouseOut.bind(this); } + componentWillMount() { + this.getShortUrl(); + } + onMouseOut() { // delay to avoid flash of text change on tooltip setTimeout(this.resetTooltipText, 200); } + getShortUrl() { + $.ajax({ + type: 'POST', + url: '/r/shortner/', + data: { + data: '/' + this.props.text, + }, + success: (data) => { + this.setState({ + shortUrl: data, + }); + }, + error: (error) => { + /* eslint no-console: 0 */ + if (console && console.warn) { + console.warn('Something went wrong...'); + console.warn(error); + } + }, + }); + } resetTooltipText() { this.setState({ hasCopied: false }); } copyToClipboard() { - const textToCopy = this.props.text; + const textToCopy = this.state.shortUrl; const textArea = document.createElement('textarea'); textArea.style.position = 'fixed'; @@ -76,7 +103,7 @@ export default class CopyToClipboard extends React.Component { return ( {this.props.shouldShowText && - {this.props.text} + {this.state.shortUrl} }      diff --git a/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx b/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx index fd80039c26cf..f56fa7bcd182 100644 --- a/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx +++ b/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx @@ -1,7 +1,6 @@ import React, { PropTypes } from 'react'; import { Popover, OverlayTrigger } from 'react-bootstrap'; import CopyToClipboard from './../../components/CopyToClipboard'; -import $ from 'jquery'; const propTypes = { slice: PropTypes.object.isRequired, @@ -15,33 +14,11 @@ 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); - } - }, - }); - } - renderPopover() { return ( } /> @@ -54,7 +31,6 @@ export default class URLShortLinkButton extends React.Component { trigger="click" rootClose placement="left" - onEnter={this.getShortUrl.bind(this)} overlay={this.renderPopover()} > From ad662ccc0430ad9fa65c3350278086b0b9b2bda9 Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Tue, 11 Oct 2016 11:13:17 -0700 Subject: [PATCH 2/3] Move shortener outside CopyToClipboard and move ajax call to common.js --- .../SqlLab/components/CopyQueryTabUrl.jsx | 19 ++++++++++-- .../components/CopyToClipboard.jsx | 31 ++----------------- .../explore/components/URLShortLinkButton.jsx | 15 ++++++++- caravel/assets/utils/common.js | 21 +++++++++++++ 4 files changed, 53 insertions(+), 33 deletions(-) diff --git a/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx b/caravel/assets/javascripts/SqlLab/components/CopyQueryTabUrl.jsx index 1d8524b618e1..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, @@ -10,7 +11,14 @@ const defaultProps = { }; export default class CopyQueryTabUrl extends React.Component { - getQueryLink() { + constructor(props) { + super(props); + this.state = { + shortUrl: '', + }; + } + + componentWillMount() { const params = []; const qe = this.props.qe; if (qe.dbId) params.push('dbid=' + qe.dbId); @@ -21,15 +29,20 @@ export default class CopyQueryTabUrl extends React.Component { const queryString = params.join('&'); 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/components/CopyToClipboard.jsx b/caravel/assets/javascripts/components/CopyToClipboard.jsx index 2ad86ad4a79b..5330f8de7a1f 100644 --- a/caravel/assets/javascripts/components/CopyToClipboard.jsx +++ b/caravel/assets/javascripts/components/CopyToClipboard.jsx @@ -1,6 +1,5 @@ import React, { PropTypes } from 'react'; import { Button, Tooltip, OverlayTrigger } from 'react-bootstrap'; -import $ from 'jquery'; const propTypes = { copyNode: PropTypes.node, @@ -24,7 +23,6 @@ export default class CopyToClipboard extends React.Component { super(props); this.state = { hasCopied: false, - shortUrl: '', }; // bindings @@ -33,42 +31,17 @@ export default class CopyToClipboard extends React.Component { this.onMouseOut = this.onMouseOut.bind(this); } - componentWillMount() { - this.getShortUrl(); - } - onMouseOut() { // delay to avoid flash of text change on tooltip setTimeout(this.resetTooltipText, 200); } - getShortUrl() { - $.ajax({ - type: 'POST', - url: '/r/shortner/', - data: { - data: '/' + this.props.text, - }, - success: (data) => { - this.setState({ - shortUrl: data, - }); - }, - error: (error) => { - /* eslint no-console: 0 */ - if (console && console.warn) { - console.warn('Something went wrong...'); - console.warn(error); - } - }, - }); - } resetTooltipText() { this.setState({ hasCopied: false }); } copyToClipboard() { - const textToCopy = this.state.shortUrl; + const textToCopy = this.props.text; const textArea = document.createElement('textarea'); textArea.style.position = 'fixed'; @@ -103,7 +76,7 @@ export default class CopyToClipboard extends React.Component { return ( {this.props.shouldShowText && - {this.state.shortUrl} + {this.props.text} }      diff --git a/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx b/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx index f56fa7bcd182..ac6adb475e2f 100644 --- a/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx +++ b/caravel/assets/javascripts/explore/components/URLShortLinkButton.jsx @@ -1,6 +1,7 @@ import React, { PropTypes } from 'react'; import { Popover, OverlayTrigger } from 'react-bootstrap'; import CopyToClipboard from './../../components/CopyToClipboard'; +import { getShortUrl } from '../../../utils/common'; const propTypes = { slice: PropTypes.object.isRequired, @@ -14,11 +15,22 @@ export default class URLShortLinkButton extends React.Component { }; } + onShortUrlSuccess(data) { + this.setState({ + shortUrl: data, + }); + } + + getCopyUrl() { + const longUrl = window.location.pathname + window.location.search; + getShortUrl(longUrl, this.onShortUrlSuccess.bind(this)); + } + renderPopover() { return ( } /> @@ -31,6 +43,7 @@ export default class URLShortLinkButton extends React.Component { trigger="click" rootClose placement="left" + 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); + } + }, + }); +} From b0bac1e8d639d0436a1666a71ca93150e275cd36 Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Wed, 12 Oct 2016 12:51:09 -0700 Subject: [PATCH 3/3] transfer dbId to int to avoid failed prop --- .../assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx index 6bf5e8fb5f9a..120c54ed42de 100644 --- a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx +++ b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx @@ -29,7 +29,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'),