Revert "Upgrade to React 15.2.1 [try 2] (#3689) (#3734)" (#3743)

This reverts commit 7fdcc5f.
getsentry · Jul 18, 2016 · 798b5a7 · 798b5a7
1 parent e32bc13
commit 798b5a7
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 86 deletions.
diff --git a/package.json b/package.json
@@ -32,19 +32,19 @@
     "po-catalog-loader": "^1.2.0",
     "query-string": "2.4.2",
     "raven-js": "3.2.1",
-    "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": "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-document-title": "1.0.4",
-    "react-dom": "15.2.1",
-    "react-lazy-load": "3.0.10",
+    "react-dom": "0.14.7",
+    "react-lazy-load": "2.0.1",
     "react-router": "1.0.0",
-    "react-sparklines": "1.6.0",
-    "react-sticky": "5.0.4",
-    "reflux": "0.4.1",
+    "react-sparklines": "1.5.0",
+    "react-sticky": "3.0.0",
+    "reflux": "0.3.0",
     "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.4.1",
+    "enzyme": "2.1.0",
     "eslint": "1.9.0",
     "eslint-plugin-getsentry": "1.0.0",
     "eslint-plugin-react": "3.11.2",

diff --git a/src/sentry/static/sentry/app/components/dateTime.jsx b/src/sentry/static/sentry/app/components/dateTime.jsx
@@ -31,9 +31,8 @@ const DateTime = React.createClass({
       date = new Date(date);
     }
 
-    let carriedProps = _.omit(this.props, 'date', 'seconds');
     return (
-      <time {...carriedProps}>{moment(date).format(format)}</time>
+      <time {...this.props}>{moment(date).format(format)}</time>
     );
   }
 });

diff --git a/src/sentry/static/sentry/app/components/letterAvatar.jsx b/src/sentry/static/sentry/app/components/letterAvatar.jsx
@@ -58,7 +58,7 @@ const LetterAvatar = React.createClass({
 
   render() {
     return (
-      <svg viewBox="0 0 120 120" className={this.props.className}>
+      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" 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>

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

diff --git a/src/sentry/static/sentry/app/components/menuItem.jsx b/src/sentry/static/sentry/app/components/menuItem.jsx
@@ -66,7 +66,7 @@ const MenuItem = React.createClass({
     }
 
     return (
-      <li role="presentation" title={null} href={null}
+      <li {...this.props} role="presentation" title={null} href={null}
         className={classNames(this.props.className, classes)}>
         {children}
       </li>

diff --git a/src/sentry/static/sentry/app/views/groupDetails/header.jsx b/src/sentry/static/sentry/app/views/groupDetails/header.jsx
@@ -162,7 +162,7 @@ const GroupHeader = React.createClass({
                     <Count className="count" value={userCount} />
                   </Link>
                 :
-                  <span>0</span>
+                  0
                 }
               </div>
             </div>

diff --git a/src/sentry/static/sentry/app/views/stream.jsx b/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 {StickyContainer, Sticky} from 'react-sticky';
+import Sticky from 'react-sticky';
 import classNames from 'classnames';
 import _ from 'underscore';
 
@@ -575,54 +575,52 @@ const Stream = React.createClass({
     let access = this.getAccess();
 
     return (
-      <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>
-          <StreamSidebar
-            loading={this.state.tagsLoading}
-            tags={this.state.tags}
+      <div className={classNames(classes)}>
+        <div className="stream-content">
+          <StreamFilters
+            access={access}
+            orgId={orgId}
+            projectId={projectId}
             query={this.state.query}
-            onQueryChange={this.onSearch}
-            orgId={params.orgId}
-            projectId={params.projectId}
-            />
+            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>
-      </StickyContainer>
+        <StreamSidebar
+          loading={this.state.tagsLoading}
+          tags={this.state.tags}
+          query={this.state.query}
+          onQueryChange={this.onSearch}
+          orgId={params.orgId}
+          projectId={params.projectId}
+          />
+      </div>
     );
   }
 

diff --git a/src/sentry/static/sentry/app/views/stream/tagFilter.jsx b/src/sentry/static/sentry/app/views/stream/tagFilter.jsx
@@ -23,15 +23,15 @@ const StreamTagFilter = React.createClass({
   getDefaultProps() {
     return {
       tag: {},
-      value: ''
+      value: null
     };
   },
 
   getInitialState() {
     return {
       query: '',
       loading: false,
-      value: this.props.value
+      value: this.props.value,
     };
   },
 

diff --git a/src/sentry/templates/sentry/admin-queue.html b/src/sentry/templates/sentry/admin-queue.html
@@ -137,7 +137,7 @@ <h3 class="no-border">Tasks</h3>
         }
       ];
 
-      ReactDOM.render(React.createFactory(Sentry.FlotChart)({
+      React.render(React.createFactory(Sentry.FlotChart)({
         className: "chart",
         plotData: points
       }), parent);

diff --git a/src/sentry/templates/sentry/layout.html b/src/sentry/templates/sentry/layout.html
@@ -147,7 +147,7 @@
         <div id="blk_projectselect"></div>
         <script>
         $(function(){
-          ReactDOM.render(React.createFactory(Sentry.ProjectSelector)({
+          React.render(React.createFactory(Sentry.ProjectSelector)({
             organization: {% serialize_detailed_org organization %},
             projectId: {% if project %}'{{ project.slug }}'{% else %}null{% endif %},
           }), document.getElementById('blk_projectselect'));

diff --git a/src/sentry/templates/sentry/partial/alerts.html b/src/sentry/templates/sentry/partial/alerts.html
@@ -2,15 +2,15 @@
 <div id="blk_alerts" class="messages-container"></div>
 <script>
 $(function(){
-  ReactDOM.render(React.createFactory(Sentry.Alerts)({
+  React.render(React.createFactory(Sentry.Alerts)({
      className: "alert-list"
   }), document.getElementById('blk_alerts'));
 });
 </script>
 <div id="blk_indicators"></div>
 <script>
 $(function(){
-  ReactDOM.render(React.createFactory(Sentry.Indicators)({
+  React.render(React.createFactory(Sentry.Indicators)({
      className: "indicators-container"
   }), document.getElementById('blk_indicators'));
 });

diff --git a/src/sentry/templates/sentry/projects/rules/new.html b/src/sentry/templates/sentry/projects/rules/new.html
@@ -10,7 +10,7 @@
   <div id="blk_rule_editor"></div>
   <script>
   $(function(){
-    ReactDOM.render(React.createFactory(Sentry.RuleEditor)({
+    React.render(React.createFactory(Sentry.RuleEditor)({
       rule: {% serialize rule %},
       actions: {{ action_list|safe }},
       conditions: {{ condition_list|safe }},

diff --git a/tests/js/spec/components/eventsPerHour.spec.jsx b/tests/js/spec/components/eventsPerHour.spec.jsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+import TestUtils from 'react-addons-test-utils';
 import EventsPerHour from 'app/components/events/eventsPerHour';
 
+
 describe('EventsPerHour', function() {
   const data = {
     received: [[1461099600, 31734], [1461103200, 36790]],
     blacklisted: [[1461099600, 0], [1461103200, 0]],
     rejected: [[1461099600, 2867], [1461103200, 2742]]
   };
-
-  it('should work', function () {
-    sinon.stub(EventsPerHour.prototype, 'fetchData');
-    let eventsPerHour = shallow(<EventsPerHour/>).instance();
+  describe('formatData()', function() {
+    sinon.stub(EventsPerHour.prototype.__reactAutoBindMap, 'fetchData').returns(null);
+    let eventsPerHour = TestUtils.renderIntoDocument(<EventsPerHour />);
     expect(eventsPerHour.formatData(data)).to.deep.equal([{x: 1461099600, y: [28867, 2867, 0]},
                                                           {x: 1461103200, y: [34048, 2742, 0]}]);
   });

diff --git a/tests/js/spec/views/stream/searchBar.spec.jsx b/tests/js/spec/views/stream/searchBar.spec.jsx
@@ -216,8 +216,10 @@ describe('SearchBar', function() {
       };
       let searchBar = mount(<SearchBar {...props} />).instance();
       searchBar.updateAutoCompleteItems();
-      expect(searchBar.state.searchTerm).to.eql('fu');
-      expect(searchBar.state.searchItems.length).to.eql(0);
+      expect(searchBar.state.searchTerm).to.eql('unresolved');
+      expect(searchBar.state.searchItems.length).to.eql(1);
+      expect(searchBar.state.searchItems[0].desc).to.eql('unresolved');
+      expect(searchBar.state.searchItems[0].value).to.eql('unresolved');
       expect(searchBar.state.activeSearchItem).to.eql(0);
     });
 

diff --git a/tests/karma.conf.js b/tests/karma.conf.js
@@ -74,11 +74,7 @@ module.exports = function(config) {
       externals: { // see [1] above
         'jsdom': 'window', // can't simulate jsdom in browser
         'cheerio': 'window',
-
-        // for enzyme: https://github.com/airbnb/enzyme/issues/47
-        'react/addons': true,
-        'react/lib/ExecutionEnvironment': true,
-        'react/lib/ReactContext': true
+        'react/lib/ExecutionEnvironment': true
       }
     },