Upgrade to react 0.14

package.json

@@ -25,12 +25,14 @@
     "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-addons-pure-render-mixin": "^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-sticky": "^2.5.2",
+    "react-dom": "^0.14.0",
+    "react-lazy-load": "benvinegar/react-lazy-load#64fd716d9fb243e43b1b8040f7fba52f2191f2cb",
+    "react-router": "benvinegar/react-router#46998d030de3802ace768a673b07272586f7bf99",
+    "react-sticky": "^3.0.0",
     "reflux": "^0.3.0",
     "select2": "^3.5.1",
     "style-loader": "^0.12.4",

src/sentry/static/sentry/app/components/alertMessage.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import AlertActions from '../actions/alertActions';
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 var AlertMessage = React.createClass({
   mixins: [PureRenderMixin],

src/sentry/static/sentry/app/components/alerts.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Reflux from "reflux";
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import AlertStore from '../stores/alertStore';
 import AlertMessage from './alertMessage';

src/sentry/static/sentry/app/components/assigneeSelector.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import Reflux from "reflux";
 import classNames from "classnames";
 import api from "../api";
@@ -87,7 +88,7 @@ var AssigneeSelector = React.createClass({
   },
 
   onDropdownOpen() {
-    this.refs.filter.getDOMNode().focus();
+    ReactDOM.findDOMNode(this.refs.filter).focus();
   },
 
   onDropdownClose() {
@@ -118,7 +119,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(ReactDOM.findDOMNode(this.refs.container));
     node.hide().show(0);
   },
 

src/sentry/static/sentry/app/components/autoSelectText.jsx

@@ -1,19 +1,20 @@
-import jQuery from "jquery";
 import React from "react";
+import jQuery from "jquery";
+import ReactDOM from "react-dom";
 
 const AutoSelectText = React.createClass({
   componentDidMount() {
-    let ref = this.refs.element.getDOMNode();
+    let ref = ReactDOM.findDOMNode(this.refs.element);
     jQuery(ref).bind('click', this.selectText);
   },
 
   componentWillUnmount() {
-    let ref = this.refs.element.getDOMNode();
+    let ref = ReactDOM.findDOMNode(this.refs.element);
     jQuery(ref).unbind('click', this.selectText);
   },
 
   selectText() {
-    var node = this.refs.element.getDOMNode().firstChild;
+    var node = ReactDOM.findDOMNode(this.refs.element).firstChild;
     if (document.selection) {
       let range = document.body.createTextRange();
       range.moveToElementText(node);

src/sentry/static/sentry/app/components/clippedBox.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 
 var ClippedBox = React.createClass({
   propTypes: {
@@ -20,7 +21,7 @@ var ClippedBox = React.createClass({
   },
 
   componentDidMount() {
-    var renderedHeight = this.getDOMNode().offsetHeight;
+    var renderedHeight = ReactDOM.findDOMNode(this).offsetHeight;
 
     if (renderedHeight > this.props.clipHeight ) {
       /*eslint react/no-did-mount-set-state:0*/

src/sentry/static/sentry/app/components/dropdownLink.jsx

@@ -1,6 +1,6 @@
-import joinClasses from "react/lib/joinClasses";
-import classNames from "classnames";
 import React from "react";
+import ReactDOM from "react-dom";
+import classNames from "classnames";
 
 require("bootstrap/js/dropdown");
 
@@ -21,11 +21,11 @@ var DropdownLink = React.createClass({
   },
 
   isOpen() {
-    return this.getDOMNode().classList.contains("open");
+    return ReactDOM.findDOMNode(this).classList.contains("open");
   },
 
   close() {
-    this.getDOMNode().classList.remove("open");
+    ReactDOM.findDOMNode(this).classList.remove("open");
   },
 
   onToggle(e) {
@@ -51,14 +51,14 @@ var DropdownLink = React.createClass({
     });
 
     return (
-      <span className={joinClasses(this.props.topLevelClasses, topLevelClasses)}>
-        <a className={joinClasses(this.props.className, className)} data-toggle="dropdown" onClick={this.onToggle}>
+      <span className={classNames(this.props.topLevelClasses, topLevelClasses)}>
+        <a className={classNames(this.props.className, className)} data-toggle="dropdown" onClick={this.onToggle}>
           {this.props.title}
           {this.props.caret &&
             <i className="icon-arrow-down" />
           }
         </a>
-        <ul className={joinClasses(this.props.menuClasses, "dropdown-menu")}>
+        <ul className={classNames(this.props.menuClasses, "dropdown-menu")}>
           {this.props.children}
         </ul>
       </span>

src/sentry/static/sentry/app/components/flotChart.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import jQuery from 'jquery';
 import moment from 'moment';
 
@@ -113,7 +114,7 @@ var FlotChart = React.createClass({
       lines: { show: false }
     };
 
-    var chart = this.refs.chartNode.getDOMNode();
+    var chart = ReactDOM.findDOMNode(this.refs.chartNode);
     jQuery.plot(chart, series, plotOptions);
   },
 

src/sentry/static/sentry/app/components/group/chart.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import BarChart from "../../components/barChart";
 import PropTypes from "../../proptypes";
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 var GroupChart = React.createClass({
   mixins: [PureRenderMixin],

src/sentry/static/sentry/app/components/linkWithConfirmation.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Modal from "react-bootstrap/lib/Modal";
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 var LinkWithConfirmation = React.createClass({
   mixins: [PureRenderMixin],

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 (
-      <div className={joinClasses(this.props.className, className)}>
+      <div className={classNames(this.props.className, className)}>
         <div className="loading-mask"></div>
         <div className="loading-indicator"></div>
         <div className="loading-message">{this.props.children}</div>

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 (
       <li {...this.props} role="presentation" title={null} href={null}
-        className={joinClasses(this.props.className, classNames(classes))}>
+        className={classNames(this.props.className, classes)}>
         {children}
       </li>
     );

src/sentry/static/sentry/app/components/mutedBox.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 var MutedBox = React.createClass({
   mixins: [PureRenderMixin],

src/sentry/static/sentry/app/components/projectHeader/projectSelector.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import Router from "react-router";
 import jQuery from "jquery";
 import ConfigStore from "../../stores/configStore";
@@ -132,7 +133,7 @@ var ProjectSelector = React.createClass({
   },
 
   onOpen(evt) {
-    this.refs.filter.getDOMNode().focus();
+    ReactDOM.findDOMNode(this.refs.filter).focus();
   },
 
   onClose() {
@@ -143,7 +144,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(ReactDOM.findDOMNode(this.refs.container));
     node.hide().show(0);
   },
 

src/sentry/static/sentry/app/components/searchBar.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import ReactDOM from "react-dom";
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 var SearchBar = React.createClass({
   contextTypes: {
@@ -24,7 +25,7 @@ var SearchBar = React.createClass({
   },
 
   blur() {
-    this.refs.searchInput.getDOMNode().blur();
+    ReactDOM.findDOMNode(this.refs.searchInput).blur();
   },
 
   onSubmit(evt) {

src/sentry/static/sentry/app/components/selectInput.jsx

@@ -23,12 +23,12 @@ var SelectInput = React.createClass({
   },
 
   create() {
-    this.select2 = jQuery(this.refs.select.getDOMNode()).select2();
+    this.select2 = jQuery(this.refs.select).select2();
     this.select2.on('change', this.onChange);
   },
 
   destroy() {
-    jQuery(this.refs.select.getDOMNode()).select2('destroy');
+    jQuery(this.refs.select).select2('destroy');
   },
 
   onChange(...args) {

src/sentry/static/sentry/app/components/timeSince.jsx

@@ -1,7 +1,12 @@
 import React from "react";
 import moment from "moment";
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 var TimeSince = React.createClass({
+  mixins: [
+    PureRenderMixin
+  ],
+
   propTypes: {
     date: React.PropTypes.any.isRequired,
     suffix: React.PropTypes.string
@@ -31,10 +36,6 @@ var TimeSince = React.createClass({
     this.forceUpdate();
   },
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.props.date !== nextProps.date;
-  },
-
   render() {
     var date = this.props.date;
 

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: {

src/sentry/static/sentry/app/mixins/tooltip.jsx

@@ -1,3 +1,4 @@
+import ReactDOM from "react-dom";
 import $ from "jquery";
 import "bootstrap/js/tooltip";
 
@@ -10,18 +11,18 @@ export default function (options) {
 
     componentWillUnmount() {
       this.removeTooltips();
-      $(this.getDOMNode()).unbind();
+      $(ReactDOM.findDOMNode(this)).unbind();
     },
 
     attachTooltips() {
-      $(this.getDOMNode()).tooltip(
+      $(ReactDOM.findDOMNode(this)).tooltip(
         Object.prototype.toString.call(options) === '[object Function]' ?
           options.call(this) : options
       );
     },
 
     removeTooltips() {
-      $(this.getDOMNode())
+      $(ReactDOM.findDOMNode(this))
         .tooltip("destroy") // destroy tooltips on parent ...
         .find(options.selector)
           .tooltip("destroy"); // ... and descendents

src/sentry/static/sentry/app/views/groupActivity/noteInput.jsx

@@ -6,7 +6,7 @@ import IndicatorStore from "../../stores/indicatorStore";
 import {logException} from "../../utils/logging";
 import {getItem, setItem} from "../../utils/localStorage";
 
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 const localStorageKey = 'noteinput:latest';
 const DEFAULT_ERROR_JSON = {detail: 'Unknown error. Please try again.'};
 

src/sentry/static/sentry/app/views/organizationStats/projectTable.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ConfigStore from "../../stores/configStore";
 import Count from "../../components/count";
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 var getPercent = (item, total) => {
   if (total === 0) {

src/sentry/static/sentry/app/views/projectEvents/actions.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 var EventActions = React.createClass({
   mixins: [

src/sentry/static/sentry/app/views/ruleEditor/index.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import $ from "jquery";
 import api from "../../api";
 import IndicatorStore from '../../stores/indicatorStore';
@@ -31,13 +32,13 @@ var RuleEditor = React.createClass({
 
   componentDidUpdate() {
     if (this.state.error) {
-      $(document.body).scrollTop($(this.refs.form.getDOMNode()).offset().top);
+      $(document.body).scrollTop($(ReactDOM.findDOMNode(this.refs.form)).offset().top);
     }
   },
 
   onSubmit(e) {
     e.preventDefault();
-    var form = $(this.refs.form.getDOMNode());
+    var form = $(ReactDOM.findDOMNode(this.refs.form));
     var conditions = [];
     form.find('.rule-condition-list .rule-form').each((_, el) => {
       conditions.push(this.serializeNode(el));
@@ -46,8 +47,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 = $(ReactDOM.findDOMNode(this.refs.actionMatch)).val();
+    var name = $(ReactDOM.findDOMNode(this.refs.name)).val();
     var data = {
       actionMatch: actionMatch,
       actions: actions,

src/sentry/static/sentry/app/views/ruleEditor/ruleNode.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import $ from "jquery";
 
 var RuleNode = React.createClass({
@@ -10,7 +11,7 @@ var RuleNode = React.createClass({
   },
 
   componentDidMount() {
-    let $html = $(this.refs.html.getDOMNode());
+    let $html = $(ReactDOM.findDOMNode(this.refs.html));
 
     $html.find('select, input, textarea').each((_, el) => {
       let $el = $(el);