Upgrade to React 15.2.1 (#3689) (#3747)

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/events/interfaces/crashHeader.jsx

@@ -13,7 +13,7 @@ const CrashHeader = React.createClass({
     stacktrace: React.PropTypes.object,
     stackView: React.PropTypes.string.isRequired,
     newestFirst: React.PropTypes.bool.isRequired,
-    stackType: React.PropTypes.string.isRequired,
+    stackType: React.PropTypes.string, // 'original', 'minified', or falsy (none)
     onChange: React.PropTypes.func,
   },
 

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/groupDetails/header.jsx

@@ -162,7 +162,7 @@ const GroupHeader = React.createClass({
                     <Count className="count" value={userCount} />
                   </Link>
                 :
-                  0
+                  <span>0</span>
                 }
               </div>
             </div>

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';
 
@@ -575,52 +575,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">
+      <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}
+            />
             <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 className="group-header">
+                <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>
               </div>
             </Sticky>
+            {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/static/sentry/less/stream.less

@@ -7,9 +7,10 @@
   // !important because react-sticky uses inline styles w/ hardcoded z-index
   z-index: 1000 !important;
 
-  .group-header {
-    margin-left: 220px;
-    margin-right: 20px;
+  .group-header .container {
+    width: 100% !important;
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .stream-actions {