Upgrade to React 15.2.1 (#3689)

package.json

@@ -32,19 +32,19 @@
     "po-catalog-loader": "^1.2.0",
     "query-string": "2.4.2",
     "raven-js": "3.2.1",
-    "react": "0.14.7",
-    "react-addons-css-transition-group": "0.14.7",
-    "react-addons-pure-render-mixin": "0.14.7",
-    "react-addons-test-utils": "0.14.7",
-    "react-addons-update": "0.14.7",
-    "react-bootstrap": "0.28.3",
+    "react": "15.2.1",
+    "react-addons-css-transition-group": "15.2.1",
+    "react-addons-pure-render-mixin": "15.2.1",
+    "react-addons-test-utils": "15.2.1",
+    "react-addons-update": "15.2.1",
+    "react-bootstrap": "^0.29.5",
     "react-document-title": "1.0.4",
-    "react-dom": "0.14.7",
-    "react-lazy-load": "2.0.1",
+    "react-dom": "15.2.1",
+    "react-lazy-load": "3.0.10",
     "react-router": "1.0.0",
-    "react-sparklines": "1.5.0",
-    "react-sticky": "3.0.0",
-    "reflux": "0.3.0",
+    "react-sparklines": "1.6.0",
+    "react-sticky": "5.0.4",
+    "reflux": "0.4.1",
     "select2": "3.5.1",
     "sprintf-js": "^1.0.3",
     "style-loader": "0.12.4",
@@ -64,7 +64,7 @@
   "devDependencies": {
     "babel-eslint": "5.0.0-beta9",
     "chai": "3.4.1",
-    "enzyme": "2.1.0",
+    "enzyme": "2.4.1",
     "eslint": "1.9.0",
     "eslint-plugin-getsentry": "1.0.0",
     "eslint-plugin-react": "3.11.2",

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

@@ -31,8 +31,9 @@ const DateTime = React.createClass({
       date = new Date(date);
     }
 
+    let carriedProps = _.omit(this.props, 'date', 'seconds');
     return (
-      <time {...this.props}>{moment(date).format(format)}</time>
+      <time {...carriedProps}>{moment(date).format(format)}</time>
     );
   }
 });

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

@@ -58,7 +58,7 @@ const LetterAvatar = React.createClass({
 
   render() {
     return (
-      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" className={this.props.className}>
+      <svg viewBox="0 0 120 120" className={this.props.className}>
         <rect x="0" y="0" width="120" height="120" rx="15" ry="15" fill={this.getColor()}/>
         <text x="50%" y="50%" fontSize="65" style={{'dominantBaseline': 'central'}}
               textAnchor="middle" fill="#FFFFFF">{this.getInitials()}</text>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'underscore';
 import {Link, History} from 'react-router';
 import classNames from 'classnames';
 
@@ -46,9 +47,10 @@ const ListLink = React.createClass({
   },
 
   render() {
+    let carriedProps = _.omit(this.props, 'activeClassName', 'isActive');
     return (
       <li className={this.getClassName()}>
-        <Link {...this.props} onlyActiveOnIndex={this.props.index}>{this.props.children}</Link>
+        <Link {...carriedProps} onlyActiveOnIndex={this.props.index}>{this.props.children}</Link>
       </li>
     );
   }

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

@@ -66,7 +66,7 @@ const MenuItem = React.createClass({
     }
 
     return (
-      <li {...this.props} role="presentation" title={null} href={null}
+      <li role="presentation" title={null} href={null}
         className={classNames(this.props.className, classes)}>
         {children}
       </li>

src/sentry/static/sentry/app/views/stream.jsx

@@ -3,7 +3,7 @@ import Reflux from 'reflux';
 import {History} from 'react-router';
 import {Link} from 'react-router';
 import Cookies from 'js-cookie';
-import Sticky from 'react-sticky';
+import {StickyContainer, Sticky} from 'react-sticky';
 import classNames from 'classnames';
 import _ from 'underscore';
 
@@ -568,52 +568,54 @@ const Stream = React.createClass({
     let access = this.getAccess();
 
     return (
-      <div className={classNames(classes)}>
-        <div className="stream-content">
-          <StreamFilters
-            access={access}
-            orgId={orgId}
-            projectId={projectId}
-            query={this.state.query}
-            sort={this.state.sort}
-            tags={this.state.tags}
-            searchId={searchId}
-            defaultQuery={this.props.defaultQuery}
-            onSortChange={this.onSortChange}
-            onSearch={this.onSearch}
-            onSavedSearchCreate={this.onSavedSearchCreate}
-            onSidebarToggle={this.onSidebarToggle}
-            isSearchDisabled={this.state.isSidebarVisible}
-            savedSearchList={this.state.savedSearchList}
-          />
-          <div className="group-header">
-            <Sticky onStickyStateChange={this.onStickyStateChange}>
-              <div className={this.state.isStickyHeader ? 'container' : null}>
-                <StreamActions
-                  orgId={params.orgId}
-                  projectId={params.projectId}
-                  query={this.state.query}
-                  onSelectStatsPeriod={this.onSelectStatsPeriod}
-                  onRealtimeChange={this.onRealtimeChange}
-                  realtimeActive={this.state.realtimeActive}
-                  statsPeriod={this.state.statsPeriod}
-                  groupIds={this.state.groupIds}
-                  allResultsVisible={this.allResultsVisible()}/>
-              </div>
-            </Sticky>
+      <StickyContainer>
+        <div className={classNames(classes)}>
+          <div className="stream-content">
+            <StreamFilters
+              access={access}
+              orgId={orgId}
+              projectId={projectId}
+              query={this.state.query}
+              sort={this.state.sort}
+              tags={this.state.tags}
+              searchId={searchId}
+              defaultQuery={this.props.defaultQuery}
+              onSortChange={this.onSortChange}
+              onSearch={this.onSearch}
+              onSavedSearchCreate={this.onSavedSearchCreate}
+              onSidebarToggle={this.onSidebarToggle}
+              isSearchDisabled={this.state.isSidebarVisible}
+              savedSearchList={this.state.savedSearchList}
+            />
+            <div className="group-header">
+              <Sticky onStickyStateChange={this.onStickyStateChange}>
+                <div className={this.state.isStickyHeader ? 'container' : null}>
+                  <StreamActions
+                    orgId={params.orgId}
+                    projectId={params.projectId}
+                    query={this.state.query}
+                    onSelectStatsPeriod={this.onSelectStatsPeriod}
+                    onRealtimeChange={this.onRealtimeChange}
+                    realtimeActive={this.state.realtimeActive}
+                    statsPeriod={this.state.statsPeriod}
+                    groupIds={this.state.groupIds}
+                    allResultsVisible={this.allResultsVisible()}/>
+                </div>
+              </Sticky>
+            </div>
+            {this.renderStreamBody()}
+            <Pagination pageLinks={this.state.pageLinks}/>
           </div>
-          {this.renderStreamBody()}
-          <Pagination pageLinks={this.state.pageLinks}/>
+          <StreamSidebar
+            loading={this.state.tagsLoading}
+            tags={this.state.tags}
+            query={this.state.query}
+            onQueryChange={this.onSearch}
+            orgId={params.orgId}
+            projectId={params.projectId}
+            />
         </div>
-        <StreamSidebar
-          loading={this.state.tagsLoading}
-          tags={this.state.tags}
-          query={this.state.query}
-          onQueryChange={this.onSearch}
-          orgId={params.orgId}
-          projectId={params.projectId}
-          />
-      </div>
+      </StickyContainer>
     );
   }
 

src/sentry/static/sentry/app/views/stream/tagFilter.jsx

@@ -23,7 +23,7 @@ const StreamTagFilter = React.createClass({
   getDefaultProps() {
     return {
       tag: {},
-      value: null
+      value: ''
     };
   },
 
@@ -31,7 +31,7 @@ const StreamTagFilter = React.createClass({
     return {
       query: '',
       loading: false,
-      value: this.props.value,
+      value: this.props.value
     };
   },
 

src/sentry/templates/sentry/admin-queue.html

@@ -137,7 +137,7 @@
         }
       ];
 
-      React.render(React.createFactory(Sentry.FlotChart)({
+      ReactDOM.render(React.createFactory(Sentry.FlotChart)({
         className: "chart",
         plotData: points
       }), parent);

src/sentry/templates/sentry/layout.html

@@ -146,7 +146,7 @@
         <div id="blk_projectselect"></div>
         <script>
         $(function(){
-          React.render(React.createFactory(Sentry.ProjectSelector)({
+          ReactDOM.render(React.createFactory(Sentry.ProjectSelector)({
             organization: {% serialize_detailed_org organization %},
             projectId: {% if project %}'{{ project.slug }}'{% else %}null{% endif %},
           }), document.getElementById('blk_projectselect'));

src/sentry/templates/sentry/partial/alerts.html

@@ -2,7 +2,7 @@
 <div id="blk_alerts" class="messages-container"></div>
 <script>
 $(function(){
-  React.render(React.createFactory(Sentry.Alerts)({
+  ReactDOM.render(React.createFactory(Sentry.Alerts)({
      className: "alert-list"
   }), document.getElementById('blk_alerts'));
 });
@@ -10,7 +10,7 @@ $(function(){
 <div id="blk_indicators"></div>
 <script>
 $(function(){
-  React.render(React.createFactory(Sentry.Indicators)({
+  ReactDOM.render(React.createFactory(Sentry.Indicators)({
      className: "indicators-container"
   }), document.getElementById('blk_indicators'));
 });