build(ui): Upgrade to React 16

package.json

@@ -32,7 +32,7 @@
     "diff": "^3.3.0",
     "emotion": "^8.0.2-12",
     "emotion-theming": "^8.0.2-10",
-    "enzyme-adapter-react-15": "^1.0.5",
+    "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "3.2.2",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "0.8.4",
@@ -61,20 +61,19 @@
     "prop-types": "^15.6.0",
     "query-string": "2.4.2",
     "raven-js": "3.19.1",
-    "react": "15.6.2",
+    "react": "16.2.0",
     "react-addons-css-transition-group": "15.6.2",
-    "react-addons-test-utils": "15.6.2",
-    "react-bootstrap": "^0.29.5",
-    "react-document-title": "1.0.4",
-    "react-dom": "15.6.2",
+    "react-bootstrap": "^0.32.0",
+    "react-document-title": "2.0.3",
+    "react-dom": "16.2.0",
     "react-emotion": "^8.0.2-12 ",
-    "react-hot-loader": "^3.0.0-beta.7",
+    "react-hot-loader": "^3.1.3",
     "react-icon-base": "^2.0.4",
-    "react-lazy-load": "3.0.10",
+    "react-lazy-load": "3.0.13",
     "react-mentions": "^1.0.0",
     "react-router": "3.2.0",
-    "react-sparklines": "1.6.0",
-    "react-sticky": "5.0.4",
+    "react-sparklines": "1.7.0",
+    "react-sticky": "6.0.1",
     "reflux": "0.4.1",
     "scroll-to-element": "^2.0.0",
     "select2": "3.5.1",
@@ -162,7 +161,7 @@
     "jest-glamor-react": "^3.1.2",
     "jest-junit": "^3.4.1",
     "prettier": "1.7.4",
-    "react-test-renderer": "15.6.2",
+    "react-test-renderer": "16.2.0",
     "sinon": "1.17.2",
     "sinon-chai": "2.8.0",
     "webpack-dev-server": "^2.7.1"

src/sentry/static/sentry/app/components/actions/actionLink.jsx

@@ -46,7 +46,7 @@ export default class ActionLink extends React.Component {
       return (
         <a
           className={classNames(className, {disabled})}
-          onClick={!disabled && onAction}
+          onClick={disabled ? undefined : onAction}
           disabled={disabled}
         >
           {children}

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

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import createReactClass from 'create-react-class';
 
 import AlertActions from '../actions/alertActions';
@@ -13,7 +12,6 @@ import {t} from '../locale';
 
 const AvatarSettings = createReactClass({
   displayName: 'AvatarSettings',
-
   propTypes: {
     userId: PropTypes.number,
   },

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

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Link} from 'react-router';
-import classNames from 'classnames';
 
 import ProjectSelector from './projectSelector';
 import BookmarkToggle from '../projects/bookmarkToggle';
@@ -43,19 +42,13 @@ class ProjectHeader extends React.Component {
       ? activeEnvironment.name
       : allEnvironmentsLabel;
 
-    let projectIconClass = classNames('project-select-bookmark icon icon-star-solid', {
-      active: project.isBookmarked,
-    });
-
     return (
       <div className="sub-header flex flex-container flex-vertically-centered">
         <div className="project-header p-t-1">
           <div className="project-header-main">
             <div className="project-select-wrapper">
               <ProjectSelector organization={org} projectId={project.slug} />
-              <BookmarkToggle orgId={org.slug} project={project}>
-                <a className={projectIconClass} />
-              </BookmarkToggle>
+              <BookmarkToggle />
             </div>
 
             <ul className="nav nav-tabs">

src/sentry/static/sentry/app/components/projects/bookmarkToggle.jsx

@@ -1,37 +1,44 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-
+import Reflux from 'reflux';
+import classNames from 'classnames';
 import createReactClass from 'create-react-class';
-
 import ApiMixin from '../../mixins/apiMixin';
-
 import {update as projectUpdate} from '../../actionCreators/projects';
+import LatestContextStore from '../../stores/latestContextStore';
 
 const BookmarkToggle = createReactClass({
   displayName: 'BookmarkToggle',
 
-  propTypes: {
-    orgId: PropTypes.string.isRequired,
-    project: PropTypes.object.isRequired,
-  },
-
-  mixins: [ApiMixin],
+  mixins: [ApiMixin, Reflux.connect(LatestContextStore, 'latestContext')],
 
   handleBookmarkClick() {
-    let {project} = this.props;
-    projectUpdate(this.api, {
-      orgId: this.props.orgId,
-      projectId: project.slug,
-      data: {
-        isBookmarked: !project.isBookmarked,
-      },
-    });
+    let {project, organization} = this.state.latestContext;
+    if (project && organization) {
+      projectUpdate(this.api, {
+        orgId: organization.slug,
+        projectId: project.slug,
+        data: {
+          isBookmarked: !project.isBookmarked,
+        },
+      });
+    }
   },
 
   render() {
     // TODO: can't guarantee that a <span> is appropriate here 100% of the time
     //       if this is to be truly re-usable
-    return <span onClick={this.handleBookmarkClick}>{this.props.children}</span>;
+    let project = this.state.latestContext.project;
+    let isActive = project ? project.isBookmarked : false;
+
+    let projectIconClass = classNames('project-select-bookmark icon icon-star-solid', {
+      active: isActive,
+    });
+
+    return (
+      <span onClick={this.handleBookmarkClick}>
+        <a className={projectIconClass} />
+      </span>
+    );
   },
 });
 

src/sentry/static/sentry/app/stores/latestContextStore.jsx

@@ -18,6 +18,7 @@ const LatestContextStore = Reflux.createStore({
   init() {
     this.reset();
     this.listenTo(ProjectActions.setActive, this.onSetActiveProject);
+    this.listenTo(ProjectActions.updateSuccess, this.onUpdateProject);
     this.listenTo(OrganizationsActions.setActive, this.onSetActiveOrganization);
     this.listenTo(OrganizationsActions.update, this.onUpdateOrganization);
     this.listenTo(EnvironmentActions.setActive, this.onSetActiveEnvironment);
@@ -67,6 +68,11 @@ const LatestContextStore = Reflux.createStore({
     this.trigger(this.state);
   },
 
+  onUpdateProject(project) {
+    this.state.project = project;
+    this.trigger(this.state);
+  },
+
   onSetActiveEnvironment(environment) {
     this.state.environment = environment;
 

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

@@ -770,23 +770,25 @@ const Stream = createReactClass({
               savedSearchList={this.state.savedSearchList}
             />
             <Sticky onStickyStateChange={this.onStickyStateChange}>
-              <div className="group-header">
-                <div className={this.state.isStickyHeader ? 'container' : null}>
-                  <StreamActions
-                    orgId={params.orgId}
-                    projectId={params.projectId}
-                    hasReleases={projectFeatures.has('releases')}
-                    latestRelease={this.context.project.latestRelease}
-                    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()}
-                  />
+              {props => (
+                <div className="group-header">
+                  <div className={this.state.isStickyHeader ? 'container' : null}>
+                    <StreamActions
+                      orgId={params.orgId}
+                      projectId={params.projectId}
+                      hasReleases={projectFeatures.has('releases')}
+                      latestRelease={this.context.project.latestRelease}
+                      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>
-              </div>
+              )}
             </Sticky>
             {this.renderProcessingIssuesHint()}
             {this.renderStreamBody()}

tests/js/setup.js

@@ -5,7 +5,7 @@ import MockDate from 'mockdate';
 import PropTypes from 'prop-types';
 
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 
 jest.mock('app/translations');
 jest.mock('app/api');

tests/js/spec/components/__snapshots__/confirm.spec.jsx.snap

@@ -16,11 +16,14 @@ exports[`Confirm renders 1`] = `
     keyboard={true}
     manager={
       ModalManager {
+        "add": [Function],
         "containers": Array [],
         "data": Array [],
         "handleContainerOverflow": true,
         "hideSiblingNodes": true,
+        "isTopModal": [Function],
         "modals": Array [],
+        "remove": [Function],
       }
     }
     onHide={[Function]}

tests/js/spec/components/__snapshots__/customResolutionModal.spec.jsx.snap

@@ -11,11 +11,14 @@ exports[`CustomResolutionModal render() renders correctly 1`] = `
   keyboard={true}
   manager={
     ModalManager {
+      "add": [Function],
       "containers": Array [],
       "data": Array [],
       "handleContainerOverflow": true,
       "hideSiblingNodes": true,
+      "isTopModal": [Function],
       "modals": Array [],
+      "remove": [Function],
     }
   }
   onHide={[Function]}