ref(js): Remove old Organization Teams views (#8449)

* Move all Organization Teams views into `app/views/settings`
* Remove old views
* LazyLoad in routes instead of intermediary components
* remove unused `getSettingsComponent`
* redirect old org teams links to new settings, update acceptance tests + add new ones

src/sentry/static/sentry/app/routes.jsx

@@ -53,7 +53,6 @@ import OrganizationRoot from 'app/views/organizationRoot';
 import OrganizationRepositoriesView from 'app/views/organizationRepositoriesView';
 import OrganizationGeneralSettingsView from 'app/views/settings/organization/general/organizationGeneralSettingsView';
 import OrganizationStats from 'app/views/organizationStats';
-import OrganizationTeams from 'app/views/organizationTeams';
 import ProjectEnvironments from 'app/views/projectEnvironments';
 import ProjectTags from 'app/views/projectTags';
 import ProjectChooser from 'app/views/projectChooser';
@@ -83,10 +82,6 @@ import RouteNotFound from 'app/views/routeNotFound';
 import SettingsProjectProvider from 'app/views/settings/components/settingsProjectProvider';
 import SettingsWrapper from 'app/views/settings/components/settingsWrapper';
 import Stream from 'app/views/stream';
-import TeamDetails from 'app/views/teamDetails';
-import TeamMembers from 'app/views/teamMembers';
-import TeamSettings from 'app/views/teamSettings';
-import TeamProjects from 'app/views/settings/team/teamProjects';
 import errorHandler from 'app/utils/errorHandler';
 
 function appendTrailingSlash(nextState, replace) {
@@ -533,33 +528,40 @@ function routes() {
       <Route path="settings/" component={errorHandler(OrganizationGeneralSettingsView)} />
 
       <Route name="Teams" path="teams/">
-        <IndexRoute component={errorHandler(OrganizationTeams)} />
-
-        <Route
-          path="all-teams/"
-          name="All Teams"
-          allTeams
-          component={errorHandler(OrganizationTeams)}
+        <IndexRoute
+          componentPromise={() =>
+            import(/*webpackChunkName: OrganizationTeams*/ './views/settings/organizationTeams')}
+          component={errorHandler(LazyLoad)}
         />
 
         <Route
-          name="Your Teams"
-          path="your-teams/"
-          component={errorHandler(OrganizationTeams)}
-        />
-
-        <Route name="Team" path=":teamId/" component={errorHandler(TeamDetails)}>
+          name="Team"
+          path=":teamId/"
+          componentPromise={() =>
+            import(/*webpackChunkName: TeamDetails*/ './views/settings/organizationTeams/teamDetails')}
+          component={errorHandler(LazyLoad)}
+        >
           <IndexRedirect to="members/" />
-          <Route path="members/" name="Members" component={errorHandler(TeamMembers)} />
+          <Route
+            path="members/"
+            name="Members"
+            componentPromise={() =>
+              import(/*webpackChunkName: TeamMembers*/ './views/settings/organizationTeams/teamMembers')}
+            component={errorHandler(LazyLoad)}
+          />
           <Route
             path="projects/"
             name="Projects"
-            component={errorHandler(TeamProjects)}
+            componentPromise={() =>
+              import(/*webpackChunkName: TeamProjects*/ './views/settings/organizationTeams/teamProjects')}
+            component={errorHandler(LazyLoad)}
           />
           <Route
             path="settings/"
             name="settings"
-            component={errorHandler(TeamSettings)}
+            componentPromise={() =>
+              import(/*webpackChunkName: TeamSettings*/ './views/settings/organizationTeams/teamSettings')}
+            component={errorHandler(LazyLoad)}
           />
         </Route>
       </Route>
@@ -689,6 +691,22 @@ function routes() {
           <Route path="/organizations/:orgId/" component={OrganizationHomeContainer}>
             <Redirect from="projects/" to="/:orgId/" />
             {hooksOrgRoutes}
+            <Redirect path="teams/" to="/settings/:orgId/teams/" />
+            <Redirect path="teams/your-teams/" to="/settings/:orgId/teams/" />
+            <Redirect path="teams/all-teams/" to="/settings/:orgId/teams/" />
+            <Redirect path="teams/:teamId/" to="/settings/:orgId/teams/:teamId/" />
+            <Redirect
+              path="teams/:teamId/members/"
+              to="/settings/:orgId/teams/:teamId/members/"
+            />
+            <Redirect
+              path="teams/:teamId/projects/"
+              to="/settings/:orgId/teams/:teamId/projects/"
+            />
+            <Redirect
+              path="teams/:teamId/settings/"
+              to="/settings/:orgId/teams/:teamId/settings/"
+            />
             {orgSettingsRoutes}
             <Route path="stats/" component={errorHandler(OrganizationStats)} />
           </Route>

src/sentry/static/sentry/app/utils/getSettingsComponent.jsx

@@ -1,13 +0,0 @@
-// Load components based on route properties
-//
-// This is for new/old settings pages
-//
-// @return Promise<React.Component>
-export default function getSettingsComponent(newComponent, oldComponent, routes) {
-  // Use property on Route to see if it should be apart of new settings
-  if (routes && routes.length > 0 && routes[1] && routes[1].newnew) {
-    return newComponent().then(mod => mod.default);
-  }
-
-  return oldComponent().then(mod => mod.default);
-}

src/sentry/static/sentry/app/views/organizationTeams/allTeamsList.jsx

@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {Link} from 'react-router';
-
-import SentryTypes from 'app/proptypes';
-
-import AllTeamsRow from 'app/views/organizationTeams/allTeamsRow';
-import {tct} from 'app/locale';
-
-class AllTeamsList extends React.Component {
-  static propTypes = {
-    access: PropTypes.object,
-    organization: SentryTypes.Organization,
-    teamList: PropTypes.arrayOf(SentryTypes.Team),
-    openMembership: PropTypes.bool,
-  };
-
-  render() {
-    let {access, organization, openMembership} = this.props;
-    let teamNodes = this.props.teamList.map((team, teamIdx) => {
-      return (
-        <AllTeamsRow
-          access={access}
-          team={team}
-          organization={organization}
-          openMembership={openMembership}
-          key={team.slug}
-        />
-      );
-    });
-
-    if (teamNodes.length !== 0) {
-      return (
-        <div className="panel panel-default">
-          <table className="table">
-            <tbody>{teamNodes}</tbody>
-          </table>
-        </div>
-      );
-    }
-
-    return tct(
-      "You don't have any teams for this organization yet. Get started by [link:creating your first team].",
-      {
-        root: <p />,
-        link: <Link to={`/organizations/${organization.slug}/teams/new/`} />,
-      }
-    );
-  }
-}
-
-export default AllTeamsList;

src/sentry/static/sentry/app/views/organizationTeams/allTeamsRow.jsx

@@ -1,137 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import createReactClass from 'create-react-class';
-import {Link} from 'react-router';
-
-import ApiMixin from 'app/mixins/apiMixin';
-import IndicatorStore from 'app/stores/indicatorStore';
-import {joinTeam, leaveTeam} from 'app/actionCreators/teams';
-import {t} from 'app/locale';
-
-// TODO(dcramer): this isnt great UX
-
-const AllTeamsRow = createReactClass({
-  displayName: 'AllTeamsRow',
-
-  propTypes: {
-    access: PropTypes.object.isRequired,
-    organization: PropTypes.object.isRequired,
-    team: PropTypes.object.isRequired,
-    openMembership: PropTypes.bool.isRequired,
-  },
-
-  mixins: [ApiMixin],
-
-  getInitialState() {
-    return {
-      loading: false,
-      error: false,
-    };
-  },
-
-  joinTeam() {
-    this.setState({
-      loading: true,
-    });
-
-    joinTeam(
-      this.api,
-      {
-        orgId: this.props.organization.slug,
-        teamId: this.props.team.slug,
-      },
-      {
-        success: () => {
-          this.setState({
-            loading: false,
-            error: false,
-          });
-        },
-        error: () => {
-          this.setState({
-            loading: false,
-            error: true,
-          });
-          IndicatorStore.add(
-            t('There was an error while trying to join the team.'),
-            'error'
-          );
-        },
-      }
-    );
-  },
-
-  leaveTeam() {
-    this.setState({
-      loading: true,
-    });
-
-    leaveTeam(
-      this.api,
-      {
-        orgId: this.props.organization.slug,
-        teamId: this.props.team.slug,
-      },
-      {
-        success: () => {
-          this.setState({
-            loading: false,
-            error: false,
-          });
-        },
-        error: () => {
-          this.setState({
-            loading: false,
-            error: true,
-          });
-          IndicatorStore.add(
-            t('There was an error while trying to leave the team.'),
-            'error'
-          );
-        },
-      }
-    );
-  },
-
-  render() {
-    let {access, team, openMembership} = this.props;
-    let orgId = this.props.organization.slug;
-    return (
-      <tr>
-        <td>
-          <h5>#{team.slug}</h5>
-        </td>
-        <td className="actions align-right">
-          {this.state.loading ? (
-            <a className="btn btn-default btn-sm btn-loading btn-disabled">...</a>
-          ) : team.isMember ? (
-            <a className="leave-team btn btn-default btn-sm" onClick={this.leaveTeam}>
-              {t('Leave Team')}
-            </a>
-          ) : team.isPending ? (
-            <a className="btn btn-default btn-sm btn-disabled">{t('Request Pending')}</a>
-          ) : openMembership ? (
-            <a className="btn btn-default btn-sm" onClick={this.joinTeam}>
-              {t('Join Team')}
-            </a>
-          ) : (
-            <a className="btn btn-default btn-sm" onClick={this.joinTeam}>
-              {t('Request Access')}
-            </a>
-          )}
-          {access.has('team:write') && (
-            <Link
-              className="btn btn-default btn-sm"
-              to={`/organizations/${orgId}/teams/${team.slug}/settings/`}
-              style={{marginLeft: 5}}
-            >
-              {t('Team Settings')}
-            </Link>
-          )}
-        </td>
-      </tr>
-    );
-  },
-});
-
-export default AllTeamsRow;

src/sentry/static/sentry/app/views/organizationTeams/expandedTeamList.jsx

@@ -1,236 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import createReactClass from 'create-react-class';
-import {Link} from 'react-router';
-import LazyLoad from 'react-lazyload';
-
-import ApiMixin from 'app/mixins/apiMixin';
-import {update as projectUpdate} from 'app/actionCreators/projects';
-import {leaveTeam} from 'app/actionCreators/teams';
-import IndicatorStore from 'app/stores/indicatorStore';
-import BarChart from 'app/components/barChart';
-import ProjectLabel from 'app/components/projectLabel';
-import SentryTypes from 'app/proptypes';
-import TooltipMixin from 'app/mixins/tooltip';
-import {sortArray} from 'app/utils';
-import {t, tct} from 'app/locale';
-
-const ExpandedTeamList = createReactClass({
-  displayName: 'ExpandedTeamList',
-
-  propTypes: {
-    access: PropTypes.object.isRequired,
-    organization: SentryTypes.Organization.isRequired,
-    teamList: PropTypes.arrayOf(SentryTypes.Team).isRequired,
-    projectList: PropTypes.arrayOf(SentryTypes.Project).isRequired,
-    hasTeams: PropTypes.bool,
-  },
-
-  mixins: [
-    ApiMixin,
-    TooltipMixin(function() {
-      return {
-        selector: '.tip',
-        title: function(instance) {
-          return this.getAttribute('data-isbookmarked') === 'true'
-            ? 'Remove from bookmarks'
-            : 'Add to bookmarks';
-        },
-      };
-    }),
-  ],
-
-  leaveTeam(team) {
-    // TODO(dcramer): handle loading indicator
-    leaveTeam(
-      this.api,
-      {
-        orgId: this.props.organization.slug,
-        teamId: team.slug,
-      },
-      {
-        error: () => {
-          IndicatorStore.add(
-            t('There was an error while trying to leave the team.'),
-            'error'
-          );
-        },
-      }
-    );
-  },
-
-  urlPrefix() {
-    let org = this.props.organization;
-    return `/organizations/${org.slug}`;
-  },
-
-  getProjectsForTeam(team) {
-    return sortArray(
-      this.props.projectList.filter(p => !!p.teams.find(t1 => t1.slug == team.slug)),
-      function(o) {
-        return o.name;
-      }
-    );
-  },
-
-  renderProjectList(team, projects) {
-    return <tbody>{projects.map(this.renderProject)}</tbody>;
-  },
-
-  renderNoProjects(team) {
-    return (
-      <tbody>
-        <tr>
-          <td>
-            <p className="project-list-empty">
-              {tct(
-                'There are no projects in this team. Get started by [link:creating your first project].',
-                {
-                  link: (
-                    <a href={this.urlPrefix() + '/projects/new/?team=' + team.slug} />
-                  ),
-                }
-              )}
-            </p>
-          </td>
-        </tr>
-      </tbody>
-    );
-  },
-
-  renderTeamNode(team, urlPrefix) {
-    // TODO: make this cleaner
-    let access = this.props.access;
-    let projects = this.getProjectsForTeam(team);
-    let orgId = this.props.organization.slug;
-    return (
-      <div className="box" key={team.slug}>
-        <div className="box-header">
-          <div className="pull-right actions hidden-xs">
-            <a className="leave-team" onClick={this.leaveTeam.bind(this, team)}>
-              {t('Leave Team')}
-            </a>
-            {access.has('team:write') && (
-              <Link
-                className="team-settings"
-                to={`/organizations/${orgId}/teams/${team.slug}/settings/`}
-              >
-                {t('Team Settings')}
-              </Link>
-            )}
-          </div>
-          <h3>#{team.slug}</h3>
-        </div>
-        <div className="box-content">
-          <table className="table table-no-top-border m-b-0">
-            {projects.length
-              ? this.renderProjectList(team, projects)
-              : this.renderNoProjects(team)}
-          </table>
-        </div>
-      </div>
-    );
-  },
-
-  toggleBookmark(project) {
-    projectUpdate(this.api, {
-      orgId: this.props.organization.slug,
-      projectId: project.slug,
-      data: {
-        isBookmarked: !project.isBookmarked,
-      },
-    });
-  },
-
-  renderProject(project) {
-    let org = this.props.organization;
-    let chartData =
-      project.stats &&
-      project.stats.map(point => {
-        return {x: point[0], y: point[1]};
-      });
-
-    return (
-      <tr key={project.id} className={project.isBookmarked ? 'isBookmarked' : null}>
-        <td>
-          <h5>
-            <a
-              onClick={this.toggleBookmark.bind(this, project)}
-              className="tip"
-              data-isbookmarked={project.isBookmarked}
-            >
-              {project.isBookmarked ? (
-                <span className="icon-star-solid bookmark" />
-              ) : (
-                <span className="icon-star-outline bookmark" />
-              )}
-            </a>
-            <Link to={`/${org.slug}/${project.slug}/`}>
-              <ProjectLabel project={project} organization={this.props.organization} />
-            </Link>
-          </h5>
-        </td>
-        <td className="align-right project-chart">
-          {chartData && (
-            <LazyLoad>
-              <BarChart points={chartData} label="events" />
-            </LazyLoad>
-          )}
-        </td>
-      </tr>
-    );
-  },
-
-  renderEmpty() {
-    if (this.props.hasTeams) {
-      return (
-        <p>
-          {this.props.access.has('project:write')
-            ? tct(
-                'You are not a member of any teams. [joinLink:Join an existing team] or [createLink:create a new one].',
-                {
-                  joinLink: (
-                    <Link
-                      to={`/organizations/${this.props.organization
-                        .slug}/teams/all-teams/`}
-                    />
-                  ),
-                  createLink: <Link to={this.urlPrefix() + '/teams/new/'} />,
-                }
-              )
-            : tct('You are not a member of any teams. [joinLink:Join a team].', {
-                joinLink: (
-                  <Link
-                    to={`/organizations/${this.props.organization.slug}/teams/all-teams/`}
-                  />
-                ),
-              })}
-        </p>
-      );
-    }
-    return (
-      <p>
-        {tct(
-          'You dont have any teams for this organization yet. Get started by [link:creating your first team].',
-          {
-            link: <Link to={this.urlPrefix() + '/teams/new/'} />,
-          }
-        )}
-      </p>
-    );
-  },
-
-  renderTeamNodes() {
-    return this.props.teamList.map(team => {
-      return this.renderTeamNode(team);
-    });
-  },
-
-  render() {
-    let hasTeams = this.props.teamList.length > 0;
-
-    return <div>{hasTeams ? this.renderTeamNodes() : this.renderEmpty()}</div>;
-  },
-});
-
-export default ExpandedTeamList;

src/sentry/static/sentry/app/views/organizationTeams/organizationStatOverview.jsx

@@ -1,100 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import createReactClass from 'create-react-class';
-import {Link} from 'react-router';
-import classNames from 'classnames';
-
-import ApiMixin from 'app/mixins/apiMixin';
-import OrganizationState from 'app/mixins/organizationState';
-
-import {defined} from 'app/utils';
-import {t} from 'app/locale';
-
-const OrganizationStatOverview = createReactClass({
-  displayName: 'OrganizationStatOverview',
-
-  propTypes: {
-    orgId: PropTypes.string,
-  },
-
-  contextTypes: {
-    location: PropTypes.object,
-  },
-
-  mixins: [ApiMixin, OrganizationState],
-
-  getInitialState() {
-    return {
-      totalRejected: null,
-      epm: null,
-    };
-  },
-
-  componentWillMount() {
-    this.fetchData();
-  },
-
-  getOrganizationStatsEndpoint() {
-    return '/organizations/' + this.props.orgId + '/stats/';
-  },
-
-  fetchData() {
-    let statsEndpoint = this.getOrganizationStatsEndpoint();
-    this.api.request(statsEndpoint, {
-      query: {
-        since: new Date().getTime() / 1000 - 3600 * 24,
-        stat: 'rejected',
-      },
-      success: data => {
-        let totalRejected = 0;
-        data.forEach(point => {
-          totalRejected += point[1];
-        });
-        this.setState({totalRejected});
-      },
-    });
-    this.api.request(statsEndpoint, {
-      query: {
-        since: new Date().getTime() / 1000 - 3600 * 3,
-        resolution: '1h',
-        stat: 'received',
-      },
-      success: data => {
-        let received = [0, 0];
-        data.forEach(point => {
-          if (point[1] > 0) {
-            received[0] += point[1];
-            received[1] += 1;
-          }
-        });
-        let epm = received[1] ? parseInt(received[0] / received[1] / 60, 10) : 0;
-        this.setState({epm});
-      },
-    });
-  },
-
-  render() {
-    if (!defined(this.state.epm) || !defined(this.state.totalRejected)) return null;
-
-    let access = this.getAccess();
-
-    let rejectedClasses = ['count'];
-    if (this.state.totalRejected > 0) rejectedClasses.push('rejected');
-
-    return (
-      <div className={this.props.className}>
-        <h6 className="nav-header">{t('Events Per Minute')}</h6>
-        <p className="count">{this.state.epm}</p>
-        <h6 className="nav-header">{t('Rejected in last 24h')}</h6>
-        <p className={classNames(rejectedClasses)}>{this.state.totalRejected}</p>
-        {access.has('org:read') && (
-          <Link to={`/organizations/${this.props.orgId}/stats/`} className="stats-link">
-            {t('View all stats')}
-          </Link>
-        )}
-      </div>
-    );
-  },
-});
-
-export default OrganizationStatOverview;

src/sentry/static/sentry/app/views/organizationTeams/organizationTeamsView.jsx

@@ -1,100 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import SentryTypes from 'app/proptypes';
-import {t} from 'app/locale';
-import ExpandedTeamList from 'app/views/organizationTeams/expandedTeamList';
-import AllTeamsList from 'app/views/organizationTeams/allTeamsList';
-import ListLink from 'app/components/listLink';
-import OrganizationStatOverview from 'app/views/organizationTeams/organizationStatOverview';
-import recreateRoute from 'app/utils/recreateRoute';
-
-class OrganizationTeamsView extends React.Component {
-  static propTypes = {
-    allTeams: PropTypes.arrayOf(SentryTypes.Team),
-    activeTeams: PropTypes.arrayOf(SentryTypes.Team),
-    projectList: PropTypes.arrayOf(SentryTypes.Project),
-    projectStats: PropTypes.array,
-    organization: SentryTypes.Organization,
-    access: PropTypes.object,
-    features: PropTypes.object,
-    route: PropTypes.object,
-    routes: PropTypes.array,
-    params: PropTypes.object,
-  };
-
-  static contextTypes = {
-    location: PropTypes.object.isRequired,
-  };
-
-  render() {
-    let {
-      allTeams,
-      activeTeams,
-      projectList,
-      projectStats,
-      organization,
-      access,
-      features,
-      route,
-      routes,
-      params,
-    } = this.props;
-    let org = organization;
-
-    if (!organization) return null;
-
-    let urlPrefix = recreateRoute('', {routes, params, stepBack: -2});
-
-    return (
-      <div className="row">
-        <div className="col-md-9">
-          <div className="team-list">
-            <ul className="nav nav-tabs border-bottom">
-              <ListLink
-                to={`${urlPrefix}teams/your-teams/`}
-                isActive={loc => {
-                  let pathname = this.context.location.pathname;
-                  return pathname === `${urlPrefix}teams/` || pathname === loc.pathname;
-                }}
-              >
-                {t('Your Teams')}
-              </ListLink>
-              <ListLink to={`${urlPrefix}teams/all-teams/`}>
-                {t('All Teams')}{' '}
-                <span className="badge badge-soft">{allTeams.length}</span>
-              </ListLink>
-            </ul>
-            {route.allTeams /* should be AllTeamsList */ ? (
-              <AllTeamsList
-                urlPrefix={urlPrefix}
-                organization={org}
-                teamList={allTeams}
-                access={access}
-                openMembership={
-                  features.has('open-membership') || access.has('org:write')
-                }
-              />
-            ) : (
-              <ExpandedTeamList
-                urlPrefix={urlPrefix}
-                organization={org}
-                teamList={activeTeams}
-                projectList={projectList}
-                projectStats={projectStats}
-                hasTeams={allTeams.length !== 0}
-                access={access}
-              />
-            )}
-          </div>
-        </div>
-        <OrganizationStatOverview
-          orgId={this.props.params.orgId}
-          className="col-md-3 stats-column"
-        />
-      </div>
-    );
-  }
-}
-
-export default OrganizationTeamsView;

src/sentry/static/sentry/app/views/settings/team/allTeamsList.jsx → src/sentry/static/sentry/app/views/settings/organizationTeams/allTeamsList.jsx

@@ -4,11 +4,12 @@ import React from 'react';
 
 import {openCreateTeamModal} from 'app/actionCreators/modal';
 import {tct} from 'app/locale';
-import AllTeamsRow from 'app/views/settings/team/allTeamsRow';
 import EmptyMessage from 'app/views/settings/components/emptyMessage';
 import SentryTypes from 'app/proptypes';
 import TextBlock from 'app/views/settings/components/text/textBlock';
 
+import AllTeamsRow from './allTeamsRow';
+
 class AllTeamsList extends React.Component {
   static propTypes = {
     urlPrefix: PropTypes.string,

src/sentry/static/sentry/app/views/organizationTeams/index.jsx → src/sentry/static/sentry/app/views/settings/organizationTeams/index.jsx

@@ -6,14 +6,13 @@ import Reflux from 'reflux';
 import {loadStats} from 'app/actionCreators/projects';
 import {sortArray} from 'app/utils';
 import ApiMixin from 'app/mixins/apiMixin';
-import LoadingIndicator from 'app/components/loadingIndicator';
 import OrganizationState from 'app/mixins/organizationState';
 import ProjectsStore from 'app/stores/projectsStore';
 import TeamStore from 'app/stores/teamStore';
-import getSettingsComponent from 'app/utils/getSettingsComponent';
+import OrganizationTeams from './organizationTeams';
 
-const OrganizationTeams = createReactClass({
-  displayName: 'OrganizationTeams',
+const OrganizationTeamsContainer = createReactClass({
+  displayName: 'OrganizationTeamsContainer',
 
   propTypes: {
     routes: PropTypes.arrayOf(PropTypes.object),
@@ -28,7 +27,6 @@ const OrganizationTeams = createReactClass({
 
   getInitialState() {
     return {
-      Component: null,
       teamList: sortArray(TeamStore.getAll(), function(o) {
         return o && o.name;
       }),
@@ -41,16 +39,6 @@ const OrganizationTeams = createReactClass({
 
   componentDidMount() {
     this.fetchStats();
-
-    getSettingsComponent(
-      () =>
-        import(/* webpackChunkName: "organizationTeamsView" */ '../settings/team/organizationTeamsView'),
-      () =>
-        import(/* webpackChunkName: "organizationTeamsView.old" */ './organizationTeamsView'),
-      this.props.routes
-    ).then(Component => {
-      this.setState({Component});
-    });
   },
 
   fetchStats() {
@@ -86,7 +74,6 @@ const OrganizationTeams = createReactClass({
 
   render() {
     if (!this.context.organization) return null;
-    if (!this.state.Component) return <LoadingIndicator />;
 
     let access = this.getAccess();
     let features = this.getFeatures();
@@ -96,7 +83,7 @@ const OrganizationTeams = createReactClass({
     let activeTeams = this.state.teamList.filter(team => team.isMember);
 
     return (
-      <this.state.Component
+      <OrganizationTeams
         {...this.props}
         access={access}
         features={features}
@@ -109,4 +96,4 @@ const OrganizationTeams = createReactClass({
   },
 });
 
-export default OrganizationTeams;
+export default OrganizationTeamsContainer;