Upgrade react-router to 1.0

getsentry · Oct 26, 2015 · b557159 · b557159
1 parent e4e947d
commit b557159
Show file tree

Hide file tree

Showing 73 changed files with 712 additions and 1,187 deletions.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "eslint-plugin-react": "^3.3.0",
     "extract-text-webpack-plugin": "^0.8.2",
     "file-loader": "^0.8.4",
+    "history": "^1.9.1",
     "jquery": "^2.1.3",
     "json-loader": "^0.5.2",
     "less": "^2.3.1",
@@ -32,7 +33,7 @@
     "react-document-title": "^1.0.2",
     "react-dom": "^0.14.0",
     "react-lazy-load": "benvinegar/react-lazy-load#64fd716d9fb243e43b1b8040f7fba52f2191f2cb",
-    "react-router": "benvinegar/react-router#46998d030de3802ace768a673b07272586f7bf99",
+    "react-router": "^1.0.0-rc3",
     "react-sticky": "^3.0.0",
     "reflux": "^0.3.0",
     "select2": "^3.5.1",

diff --git a/src/sentry/static/sentry/app/components/events/eventEntries.jsx b/src/sentry/static/sentry/app/components/events/eventEntries.jsx
@@ -15,6 +15,8 @@ var EventEntries = React.createClass({
   propTypes: {
     group: PropTypes.Group.isRequired,
     event: PropTypes.Event.isRequired,
+    orgId: React.PropTypes.string.isRequired,
+    projectId: React.PropTypes.string.isRequired,
     // TODO(dcramer): ideally isShare would be replaced with simple permission
     // checks
     isShare: React.PropTypes.bool
@@ -75,6 +77,7 @@ var EventEntries = React.createClass({
       }
     });
 
+    let {orgId, projectId} = this.props;
     return (
       <div>
         {!utils.objectIsEmpty(evt.errors) &&
@@ -87,7 +90,9 @@ var EventEntries = React.createClass({
           event={evt} />
         <EventTags
           group={group}
-          event={evt} />
+          event={evt}
+          orgId={orgId}
+          projectId={projectId} />
         {!utils.objectIsEmpty(evt.user) &&
           <EventUser
             group={group}

diff --git a/src/sentry/static/sentry/app/components/events/eventTags.jsx b/src/sentry/static/sentry/app/components/events/eventTags.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Router from "react-router";
+import {Link} from "react-router";
 import _ from "underscore";
 
 import PropTypes from "../../proptypes";
@@ -8,22 +8,19 @@ import EventDataSection from "./eventDataSection";
 import {isUrl} from "../../utils";
 
 var EventTags = React.createClass({
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
   propTypes: {
     group: PropTypes.Group.isRequired,
-    event: PropTypes.Event.isRequired
+    event: PropTypes.Event.isRequired,
+    orgId: React.PropTypes.string.isRequired,
+    projectId: React.PropTypes.string.isRequired
   },
 
   render() {
-    var params = this.context.router.getCurrentParams();
-
     let tags = this.props.event.tags;
     if (_.isEmpty(tags))
       return null;
 
+    let {orgId, projectId} = this.props;
     return (
       <EventDataSection
           group={this.props.group}
@@ -34,12 +31,11 @@ var EventTags = React.createClass({
           {tags.map((tag) => {
             return (
               <li key={tag.key}>
-                {tag.key} = <Router.Link
-                  to="stream"
-                  params={params}
+                {tag.key} = <Link
+                  to={`/${orgId}/${projectId}/`}
                   query={{query: `${tag.key}:"${tag.value}"`}}>
                   {tag.value}
-                </Router.Link>
+                </Link>
                 {isUrl(tag.value) &&
                   <a href={tag.value} className="external-icon">
                     <em className="icon-open" />

diff --git a/src/sentry/static/sentry/app/components/group/seenInfo.jsx b/src/sentry/static/sentry/app/components/group/seenInfo.jsx
@@ -9,7 +9,9 @@ var SeenInfo = React.createClass({
     date: React.PropTypes.any.isRequired,
     release: React.PropTypes.shape({
       version: React.PropTypes.string.isRequired
-    })
+    }),
+    orgId: React.PropTypes.string.isRequired,
+    projectId: React.PropTypes.string.isRequired
   },
 
   render() {
@@ -22,7 +24,7 @@ var SeenInfo = React.createClass({
         <dd key={3}><DateTime date={date} /></dd>
         {utils.defined(release) && [
           <dt key={4}>Release:</dt>,
-          <dd key={5}><Version version={release.version} /></dd>
+          <dd key={5}><Version orgId={this.props.orgId} projectId={this.props.projectId} version={release.version} /></dd>
         ]}
       </dl>
     );

diff --git a/src/sentry/static/sentry/app/components/group/sidebar.jsx b/src/sentry/static/sentry/app/components/group/sidebar.jsx
@@ -43,6 +43,8 @@ var GroupSidebar = React.createClass({
           return (
             <TagDistributionMeter
               key={data.key}
+              orgId={orgId}
+              projectId={projectId}
               group={group}
               name={data.name}
               tag={data.key} />

diff --git a/src/sentry/static/sentry/app/components/group/tagDistributionMeter.jsx b/src/sentry/static/sentry/app/components/group/tagDistributionMeter.jsx
@@ -1,19 +1,17 @@
 import React from "react";
-import Router from "react-router";
+import {Link} from "react-router";
 import ApiMixin from "../../mixins/apiMixin";
 import PropTypes from "../../proptypes";
 import TooltipMixin from "../../mixins/tooltip";
 import {escape, percent} from "../../utils";
 
 var TagDistributionMeter = React.createClass({
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
   propTypes: {
     group: PropTypes.Group.isRequired,
     tag: React.PropTypes.string.isRequired,
-    name: React.PropTypes.string
+    name: React.PropTypes.string,
+    orgId: React.PropTypes.string.isRequired,
+    projectId: React.PropTypes.string.isRequired
   },
 
   mixins: [
@@ -82,41 +80,37 @@ var TagDistributionMeter = React.createClass({
     let otherPct = percent(totalValues - totalVisible, totalValues);
     let otherPctLabel = Math.floor(otherPct);
 
-    let params = {...this.context.router.getCurrentParams()};
-    params.tagKey = this.props.tag;
-
+    let {orgId, projectId} = this.props;
     return (
       <div className="segments">
         {data.topValues.map((value) => {
           var pct = percent(value.count, totalValues);
           var pctLabel = Math.floor(pct);
 
           return (
-            <Router.Link
+            <Link
                 key={value.value}
                 className="segment" style={{width: pct + "%"}}
-                to="groupTagValues"
-                params={params}
+                to={`/${orgId}/${projectId}/group/${this.props.group.id}/tags/${this.props.tag}/`}
                 title={'<div class="truncate">' + escape(value.name) + '</div>' + pctLabel + '%'}>
               <span className="tag-description">
                 <span className="tag-percentage">{pctLabel}%</span>
                 <span className="tag-label">{value.name}</span>
               </span>
-            </Router.Link>
+            </Link>
           );
         })}
         {hasOther &&
-          <Router.Link
+          <Link
               key="other"
               className="segment" style={{width: otherPct + "%"}}
-              to="groupTagValues"
-              params={params}
+              to={`/${orgId}/${projectId}/group/${this.props.group.id}/tags/${this.props.tag}/`}
               title={'Other<br/>' + otherPctLabel + '%'}>
             <span className="tag-description">
               <span className="tag-percentage">{otherPctLabel}%</span>
               <span className="tag-label">Other</span>
             </span>
-          </Router.Link>
+          </Link>
         }
       </div>
     );

diff --git a/src/sentry/static/sentry/app/components/groupList.jsx b/src/sentry/static/sentry/app/components/groupList.jsx
@@ -11,13 +11,15 @@ import StreamGroup from "../components/stream/group";
 import utils from "../utils";
 
 var GroupList = React.createClass({
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
   propTypes: {
     query: React.PropTypes.string.isRequired,
-    canSelectGroups: React.PropTypes.bool
+    canSelectGroups: React.PropTypes.bool,
+    orgId: React.PropTypes.string.isRequired,
+    projectId: React.PropTypes.string.isRequired
+  },
+
+  contextTypes: {
+    location: React.PropTypes.object
   },
 
   mixins: [
@@ -49,8 +51,11 @@ var GroupList = React.createClass({
     this.fetchData();
   },
 
-  routeDidChange() {
-    this.fetchData();
+  componentDidUpdate(prevProps) {
+    if (prevProps.orgId !== this.props.orgId ||
+      prevProps.projectId !== this.props.projectId) {
+      this.fetchData();
+    }
   },
 
   componentWillUnmount() {
@@ -85,15 +90,14 @@ var GroupList = React.createClass({
   },
 
   getGroupListEndpoint() {
-    var router = this.context.router;
-    var params = router.getCurrentParams();
-    var queryParams = router.getCurrentQuery();
+    var queryParams = this.context.location.query;
     queryParams.limit = 50;
     queryParams.sort = 'new';
     queryParams.query = this.props.query;
     var querystring = jQuery.param(queryParams);
 
-    return '/projects/' + params.orgId + '/' + params.projectId + '/groups/?' + querystring;
+    let props = this.props;
+    return '/projects/' + props.orgId + '/' + props.projectId + '/groups/?' + querystring;
   },
 
   onGroupChange() {
@@ -124,12 +128,22 @@ var GroupList = React.createClass({
       wrapperClass = "stream-no-bulk-actions";
     }
 
+    var {orgId, projectId} = this.props;
+
     return (
       <div className={wrapperClass}>
         <GroupListHeader />
         <ul className="group-list">
           {this.state.groupIds.map((id) => {
-            return <StreamGroup key={id} id={id} canSelect={this.props.canSelectGroups} />;
+            return (
+              <StreamGroup
+                key={id}
+                id={id}
+                orgId={orgId}
+                projectId={projectId}
+                canSelect={this.props.canSelectGroups} 
+              />
+            );
           })}
         </ul>
       </div>

diff --git a/src/sentry/static/sentry/app/components/header/index.jsx b/src/sentry/static/sentry/app/components/header/index.jsx
@@ -28,7 +28,7 @@ var Header = React.createClass({
             <li><a href="https://docs.getsentry.com">Docs</a></li>
           </ul>
           {this.props.orgId ?
-            <Link to="organizationDetails" params={{orgId: this.props.orgId}} className="logo">{logo}</Link>
+            <Link to={`/${this.props.orgId}/`}className="logo">{logo}</Link>
             :
             <a href="/" className="logo">{logo}</a>
           }

diff --git a/src/sentry/static/sentry/app/components/header/userNav.jsx b/src/sentry/static/sentry/app/components/header/userNav.jsx
@@ -29,7 +29,7 @@ var UserNav = React.createClass({
           title={title}>
         <MenuItem href={urlPrefix + '/account/settings/'}>Account</MenuItem>
         {user.isSuperuser &&
-          <MenuItem to="admin">Admin</MenuItem>
+          <MenuItem to="/manage/">Admin</MenuItem>
         }
         <MenuItem href={urlPrefix + '/auth/logout/'}>Sign out</MenuItem>
       </DropdownLink>

diff --git a/src/sentry/static/sentry/app/components/listLink.jsx b/src/sentry/static/sentry/app/components/listLink.jsx
@@ -1,14 +1,15 @@
 import React from "react";
-import Router from "react-router";
+import {Link, History} from "react-router";
 import classNames from 'classnames';
 
 var ListLink = React.createClass({
+  mixins: [History],
+
   displayName: 'ListLink',
 
   propTypes: {
     activeClassName: React.PropTypes.string.isRequired,
     to: React.PropTypes.string.isRequired,
-    params: React.PropTypes.object,
     query: React.PropTypes.object,
     onClick: React.PropTypes.func,
 
@@ -18,19 +19,14 @@ var ListLink = React.createClass({
     isActive: React.PropTypes.func
   },
 
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
   getDefaultProps() {
     return {
       activeClassName: 'active'
     };
   },
 
   isActive() {
-    return (this.props.isActive || this.context.router.isActive)
-      .call(this, this.props.to, this.props.params, this.props.query);
+    return (this.props.isActive || this.history.isActive)(this.props.to, this.props.query);
   },
 
   getClassName() {
@@ -39,7 +35,7 @@ var ListLink = React.createClass({
     if (this.props.className)
       _classNames[this.props.className] = true;
 
-    if (this.isActive(this.props.to, this.props.params, this.props.query))
+    if (this.isActive())
       _classNames[this.props.activeClassName] = true;
 
     return classNames(_classNames);
@@ -48,9 +44,9 @@ var ListLink = React.createClass({
   render() {
     return (
       <li className={this.getClassName()}>
-        <Router.Link {...this.props}>
+        <Link {...this.props}>
           {this.props.children}
-        </Router.Link>
+        </Link>
       </li>
     );
   }

diff --git a/src/sentry/static/sentry/app/components/menuItem.jsx b/src/sentry/static/sentry/app/components/menuItem.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Router from "react-router";
+import {Link} from "react-router";
 import classNames from "classnames";
 
 var MenuItem = React.createClass({
@@ -15,14 +15,9 @@ var MenuItem = React.createClass({
     href:      React.PropTypes.string,
     // router link
     to:        React.PropTypes.string,
-    params:    React.PropTypes.object,
     query:     React.PropTypes.object,
   },
 
-  contextTypes: {
-    router: React.PropTypes.func
-  },
-
   handleClick(e) {
     if (this.props.onSelect) {
       e.preventDefault();
@@ -33,16 +28,15 @@ var MenuItem = React.createClass({
   renderAnchor() {
     if (this.props.to) {
       return (
-        <Router.Link
+        <Link
             to={this.props.to}
-            params={this.props.params}
             query={this.props.query}
             title={this.props.title}
             onClick={this.handleClick}
             className={this.props.linkClassName}
             tabIndex="-1">
           {this.props.children}
-        </Router.Link>
+        </Link>
       );
     }
     return (