From c8cacf4103ed75d5055ef9582c44a6baecc480ea Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Wed, 30 Sep 2015 15:55:56 -0700 Subject: [PATCH 01/12] Remove calls to getDOMNode (deprecated in 0.14.x) --- .../static/sentry/app/components/assigneeSelector.jsx | 4 ++-- .../static/sentry/app/components/autoSelectText.jsx | 6 +++--- src/sentry/static/sentry/app/components/clippedBox.jsx | 2 +- src/sentry/static/sentry/app/components/dropdownLink.jsx | 4 ++-- src/sentry/static/sentry/app/components/flotChart.jsx | 2 +- .../app/components/projectHeader/projectSelector.jsx | 4 ++-- src/sentry/static/sentry/app/components/searchBar.jsx | 2 +- src/sentry/static/sentry/app/views/ruleEditor/index.jsx | 8 ++++---- .../static/sentry/app/views/ruleEditor/ruleNode.jsx | 2 +- src/sentry/static/sentry/app/views/stream/searchBar.jsx | 8 ++++---- .../static/sentry/app/views/stream/streamSearchBar.jsx | 0 src/sentry/static/sentry/app/views/stream/tagFilter.jsx | 4 ++-- 12 files changed, 23 insertions(+), 23 deletions(-) delete mode 100644 src/sentry/static/sentry/app/views/stream/streamSearchBar.jsx diff --git a/src/sentry/static/sentry/app/components/assigneeSelector.jsx b/src/sentry/static/sentry/app/components/assigneeSelector.jsx index 65457dbe596807..071df29e571b2a 100644 --- a/src/sentry/static/sentry/app/components/assigneeSelector.jsx +++ b/src/sentry/static/sentry/app/components/assigneeSelector.jsx @@ -87,7 +87,7 @@ var AssigneeSelector = React.createClass({ }, onDropdownOpen() { - this.refs.filter.getDOMNode().focus(); + React.findDOMNode(this.refs.filter).focus(); }, onDropdownClose() { @@ -118,7 +118,7 @@ var AssigneeSelector = React.createClass({ componentDidUpdate(prevProps, prevState) { // XXX(dcramer): fix odd dedraw issue as of Chrome 45.0.2454.15 dev (64-bit) - var node = jQuery(this.refs.container.getDOMNode()); + var node = jQuery(React.findDOMNode(this.refs.container)); node.hide().show(0); }, diff --git a/src/sentry/static/sentry/app/components/autoSelectText.jsx b/src/sentry/static/sentry/app/components/autoSelectText.jsx index 07fe971604a83f..ed62e60328e35b 100644 --- a/src/sentry/static/sentry/app/components/autoSelectText.jsx +++ b/src/sentry/static/sentry/app/components/autoSelectText.jsx @@ -3,17 +3,17 @@ import React from "react"; const AutoSelectText = React.createClass({ componentDidMount() { - let ref = this.refs.element.getDOMNode(); + let ref = React.findDOMNode(this.refs.element); jQuery(ref).bind('click', this.selectText); }, componentWillUnmount() { - let ref = this.refs.element.getDOMNode(); + let ref = React.findDOMNode(this.refs.element); jQuery(ref).unbind('click', this.selectText); }, selectText() { - var node = this.refs.element.getDOMNode().firstChild; + var node = React.findDOMNode(this.refs.element).firstChild; if (document.selection) { let range = document.body.createTextRange(); range.moveToElementText(node); diff --git a/src/sentry/static/sentry/app/components/clippedBox.jsx b/src/sentry/static/sentry/app/components/clippedBox.jsx index fee68c695e12c1..2b55b5a5c4b8b9 100644 --- a/src/sentry/static/sentry/app/components/clippedBox.jsx +++ b/src/sentry/static/sentry/app/components/clippedBox.jsx @@ -20,7 +20,7 @@ var ClippedBox = React.createClass({ }, componentDidMount() { - var renderedHeight = this.getDOMNode().offsetHeight; + var renderedHeight = React.findDOMNode(this).offsetHeight; if (renderedHeight > this.props.clipHeight ) { /*eslint react/no-did-mount-set-state:0*/ diff --git a/src/sentry/static/sentry/app/components/dropdownLink.jsx b/src/sentry/static/sentry/app/components/dropdownLink.jsx index 8b6839989442fc..7e14cca36b6134 100644 --- a/src/sentry/static/sentry/app/components/dropdownLink.jsx +++ b/src/sentry/static/sentry/app/components/dropdownLink.jsx @@ -21,11 +21,11 @@ var DropdownLink = React.createClass({ }, isOpen() { - return this.getDOMNode().classList.contains("open"); + return React.findDOMNode(this).classList.contains("open"); }, close() { - this.getDOMNode().classList.remove("open"); + React.findDOMNode(this).classList.remove("open"); }, onToggle(e) { diff --git a/src/sentry/static/sentry/app/components/flotChart.jsx b/src/sentry/static/sentry/app/components/flotChart.jsx index 71d07341a27c18..c32857867103d7 100644 --- a/src/sentry/static/sentry/app/components/flotChart.jsx +++ b/src/sentry/static/sentry/app/components/flotChart.jsx @@ -113,7 +113,7 @@ var FlotChart = React.createClass({ lines: { show: false } }; - var chart = this.refs.chartNode.getDOMNode(); + var chart = React.findDOMNode(this.refs.chartNode); jQuery.plot(chart, series, plotOptions); }, diff --git a/src/sentry/static/sentry/app/components/projectHeader/projectSelector.jsx b/src/sentry/static/sentry/app/components/projectHeader/projectSelector.jsx index 0c59fe100bb798..c03e15add0a0da 100644 --- a/src/sentry/static/sentry/app/components/projectHeader/projectSelector.jsx +++ b/src/sentry/static/sentry/app/components/projectHeader/projectSelector.jsx @@ -132,7 +132,7 @@ var ProjectSelector = React.createClass({ }, onOpen(evt) { - this.refs.filter.getDOMNode().focus(); + React.findDOMNode(this.refs.filter).focus(); }, onClose() { @@ -143,7 +143,7 @@ var ProjectSelector = React.createClass({ componentDidUpdate(prevProps, prevState) { // XXX(dcramer): fix odd dedraw issue as of Chrome 45.0.2454.15 dev (64-bit) - var node = jQuery(this.refs.container.getDOMNode()); + var node = jQuery(React.findDOMNode(this.refs.container)); node.hide().show(0); }, diff --git a/src/sentry/static/sentry/app/components/searchBar.jsx b/src/sentry/static/sentry/app/components/searchBar.jsx index 69a3e753c4c4b6..5a70aab97bae60 100644 --- a/src/sentry/static/sentry/app/components/searchBar.jsx +++ b/src/sentry/static/sentry/app/components/searchBar.jsx @@ -24,7 +24,7 @@ var SearchBar = React.createClass({ }, blur() { - this.refs.searchInput.getDOMNode().blur(); + React.findDOMNode(this.refs.searchInput).blur(); }, onSubmit(evt) { diff --git a/src/sentry/static/sentry/app/views/ruleEditor/index.jsx b/src/sentry/static/sentry/app/views/ruleEditor/index.jsx index 62e2fbb2c53fbf..816f7e92e2f75c 100644 --- a/src/sentry/static/sentry/app/views/ruleEditor/index.jsx +++ b/src/sentry/static/sentry/app/views/ruleEditor/index.jsx @@ -31,13 +31,13 @@ var RuleEditor = React.createClass({ componentDidUpdate() { if (this.state.error) { - $(document.body).scrollTop($(this.refs.form.getDOMNode()).offset().top); + $(document.body).scrollTop($(React.findDOMNode(this.refs.form)).offset().top); } }, onSubmit(e) { e.preventDefault(); - var form = $(this.refs.form.getDOMNode()); + var form = $(React.findDOMNode(this.refs.form)); var conditions = []; form.find('.rule-condition-list .rule-form').each((_, el) => { conditions.push(this.serializeNode(el)); @@ -46,8 +46,8 @@ var RuleEditor = React.createClass({ form.find('.rule-action-list .rule-form').each((_, el) => { actions.push(this.serializeNode(el)); }); - var actionMatch = $(this.refs.actionMatch.getDOMNode()).val(); - var name = $(this.refs.name.getDOMNode()).val(); + var actionMatch = $(React.findDOMNode(this.refs.actionMatch)).val(); + var name = $(React.findDOMNode(this.refs.name)).val(); var data = { actionMatch: actionMatch, actions: actions, diff --git a/src/sentry/static/sentry/app/views/ruleEditor/ruleNode.jsx b/src/sentry/static/sentry/app/views/ruleEditor/ruleNode.jsx index aff4a85fd38186..fbe218fe0a8709 100644 --- a/src/sentry/static/sentry/app/views/ruleEditor/ruleNode.jsx +++ b/src/sentry/static/sentry/app/views/ruleEditor/ruleNode.jsx @@ -10,7 +10,7 @@ var RuleNode = React.createClass({ }, componentDidMount() { - let $html = $(this.refs.html.getDOMNode()); + let $html = $(React.findDOMNode(this.refs.html)); $html.find('select, input, textarea').each((_, el) => { let $el = $(el); diff --git a/src/sentry/static/sentry/app/views/stream/searchBar.jsx b/src/sentry/static/sentry/app/views/stream/searchBar.jsx index 888403013f5dff..edfb7a32029f10 100644 --- a/src/sentry/static/sentry/app/views/stream/searchBar.jsx +++ b/src/sentry/static/sentry/app/views/stream/searchBar.jsx @@ -109,7 +109,7 @@ var SearchBar = React.createClass({ }, blur() { - this.refs.searchInput.getDOMNode().blur(); + React.findDOMNode(this.refs.searchInput).blur(); }, onSubmit(evt) { @@ -155,7 +155,7 @@ var SearchBar = React.createClass({ }, getCursorPosition() { - return this.refs.searchInput.getDOMNode().selectionStart; + return React.findDOMNode(this.refs.searchInput).selectionStart; }, /** @@ -217,7 +217,7 @@ var SearchBar = React.createClass({ this.setState( { query: this.state.query + ' ' }, () => { - this.refs.searchInput.getDOMNode().setSelectionRange(cursor + 1, cursor + 1); + React.findDOMNode(this.refs.searchInput).setSelectionRange(cursor + 1, cursor + 1); this.updateAutoCompleteItems(); } ); @@ -376,7 +376,7 @@ var SearchBar = React.createClass({ query: newQuery }, () => { // setting a new input value will lose focus; restore it - var node = this.refs.searchInput.getDOMNode(); + var node = React.findDOMNode(this.refs.searchInput); node.focus(); // then update the autocomplete box with new contextTypes diff --git a/src/sentry/static/sentry/app/views/stream/streamSearchBar.jsx b/src/sentry/static/sentry/app/views/stream/streamSearchBar.jsx deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/src/sentry/static/sentry/app/views/stream/tagFilter.jsx b/src/sentry/static/sentry/app/views/stream/tagFilter.jsx index e8aca9c7596d31..7cd011938fae56 100644 --- a/src/sentry/static/sentry/app/views/stream/tagFilter.jsx +++ b/src/sentry/static/sentry/app/views/stream/tagFilter.jsx @@ -46,7 +46,7 @@ var StreamTagFilter = React.createClass({ }, componentDidMount() { - let select = this.refs.select.getDOMNode(); + let select = React.findDOMNode(this.refs.select); let selectOpts = { placeholder: '--', @@ -84,7 +84,7 @@ var StreamTagFilter = React.createClass({ }, componentWillUnmount() { - let select = this.refs.select.getDOMNode(); + let select = React.findDOMNode(this.refs.select); $(select).select2('destroy'); }, From 0c2628168f3f446cbc3ff2444d61aea99e417a2b Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Tue, 13 Oct 2015 11:28:33 -0700 Subject: [PATCH 02/12] Remove joinClasses (deprecated in react 0.14) --- src/sentry/static/sentry/app/components/dropdownLink.jsx | 7 +++---- .../static/sentry/app/components/loadingIndicator.jsx | 3 +-- src/sentry/static/sentry/app/components/menuItem.jsx | 3 +-- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/sentry/static/sentry/app/components/dropdownLink.jsx b/src/sentry/static/sentry/app/components/dropdownLink.jsx index 7e14cca36b6134..2769aa6a42ad41 100644 --- a/src/sentry/static/sentry/app/components/dropdownLink.jsx +++ b/src/sentry/static/sentry/app/components/dropdownLink.jsx @@ -1,4 +1,3 @@ -import joinClasses from "react/lib/joinClasses"; import classNames from "classnames"; import React from "react"; @@ -51,14 +50,14 @@ var DropdownLink = React.createClass({ }); return ( - - + + {this.props.title} {this.props.caret && } -
    +
      {this.props.children}
    diff --git a/src/sentry/static/sentry/app/components/loadingIndicator.jsx b/src/sentry/static/sentry/app/components/loadingIndicator.jsx index 92959cfd4a4dea..84a44a77f35d98 100644 --- a/src/sentry/static/sentry/app/components/loadingIndicator.jsx +++ b/src/sentry/static/sentry/app/components/loadingIndicator.jsx @@ -1,4 +1,3 @@ -import joinClasses from "react/lib/joinClasses"; import classNames from "classnames"; import React from "react"; @@ -22,7 +21,7 @@ var LoadingIndicator = React.createClass({ }); return ( -
    +
    {this.props.children}
    diff --git a/src/sentry/static/sentry/app/components/menuItem.jsx b/src/sentry/static/sentry/app/components/menuItem.jsx index b85d493398d409..15c42bb9e720f4 100644 --- a/src/sentry/static/sentry/app/components/menuItem.jsx +++ b/src/sentry/static/sentry/app/components/menuItem.jsx @@ -1,6 +1,5 @@ import React from "react"; import Router from "react-router"; -import joinClasses from "react/lib/joinClasses"; import classNames from "classnames"; var MenuItem = React.createClass({ @@ -73,7 +72,7 @@ var MenuItem = React.createClass({ return (
  • + className={classNames(this.props.className, classes)}> {children}
    • ); From 027669993a56dae2bcf6703222ff86e8cc08dcd1 Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Tue, 13 Oct 2015 15:56:05 -0700 Subject: [PATCH 03/12] Point at 0.14 compatible react libs --- package.json | 8 ++++---- src/sentry/static/sentry/app/index.js | 1 + src/sentry/templates/sentry/bases/react.html | 2 +- webpack.config.js | 1 + 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index bd41b2d7ec9a4a..706b849981454d 100644 --- a/package.json +++ b/package.json @@ -25,11 +25,11 @@ "node-libs-browser": "^0.5.2", "query-string": "^2.4.0", "raven-js": "^1.1.20", - "react": "^0.13.3", - "react-bootstrap": "^0.26.4", + "react": "0.14.0", + "react-bootstrap": "^0.27.0", "react-document-title": "^1.0.2", - "react-lazy-load": "^1.0.4", - "react-router": "^0.13.3", + "react-lazy-load": "git@github.com:benvinegar/react-lazy-load.git#3abc798f58afdf34e4bf691e6324bcc636c579ae", + "react-router": "git@github.com:benvinegar/react-router.git#f1ff6c68facff8cd5948e56e3bf9742ffe30625c", "react-sticky": "^2.5.2", "reflux": "^0.3.0", "select2": "^3.5.1", diff --git a/src/sentry/static/sentry/app/index.js b/src/sentry/static/sentry/app/index.js index f20498d7ecc321..cd920224b931c0 100644 --- a/src/sentry/static/sentry/app/index.js +++ b/src/sentry/static/sentry/app/index.js @@ -38,6 +38,7 @@ export default { moment: require("moment"), Raven: require("raven-js"), React: require("react"), + ReactDOM: require("react-dom"), Router: require("react-router"), Sentry: { diff --git a/src/sentry/templates/sentry/bases/react.html b/src/sentry/templates/sentry/bases/react.html index 2b48e67fdd672c..1ef5c6d87c6b5d 100644 --- a/src/sentry/templates/sentry/bases/react.html +++ b/src/sentry/templates/sentry/bases/react.html @@ -17,7 +17,7 @@