feat(environments): Add environment list to project settings

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

@@ -60,6 +60,7 @@ import OrganizationTeams from './views/organizationTeams';
 import ProjectAlertRules from './views/projectAlertRules';
 import ProjectAlertRuleDetails from './views/projectAlertRuleDetails';
 import ProjectAlertSettings from './views/projectAlertSettings';
+import ProjectEnvironments from './views/projectEnvironments';
 import ProjectTags from './views/projectTags';
 import ProjectChooser from './views/projectChooser';
 import ProjectCspSettings from './views/projectCspSettings';
@@ -242,6 +243,12 @@ const projectSettingsRoutes = [
     path="alerts/"
     component={errorHandler(ProjectAlertSettings)}
   />,
+  <Route
+    key="environments/"
+    name="Environments"
+    path="environments/"
+    component={errorHandler(ProjectEnvironments)}
+  />,
   <Route key="tags/" name="Tags" path="tags/" component={errorHandler(ProjectTags)} />,
   <Route
     key="alerts/rules/"

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import Reflux from 'reflux';
+import createReactClass from 'create-react-class';
+
+import EnvironmentStore from '../stores/environmentStore';
+import Panel from './settings/components/panel';
+import PanelHeader from './settings/components/panelHeader';
+import PanelBody from './settings/components/panelBody';
+import EmptyMessage from './settings/components/emptyMessage';
+import {t} from '../locale';
+import Row from './settings/components/row';
+import SettingsPageHeader from './settings/components/settingsPageHeader';
+import ListLink from '../components/listLink';
+
+const ProjectEnvironments = createReactClass({
+  mixins: [Reflux.listenTo(EnvironmentStore, 'onEnvironmentsChange')],
+  getInitialState() {
+    return {
+      environments: EnvironmentStore.getAll(),
+    };
+  },
+  onEnvironmentsChange() {
+    this.setState({
+      environments: EnvironmentStore.getAll(),
+    });
+  },
+  renderEmpty() {
+    return <EmptyMessage>{t("You don't have any environments yet.")}</EmptyMessage>;
+  },
+  renderEnvironmentList(envs) {
+    return envs.map(env => <Row key={env.id}>{env.displayName}</Row>);
+  },
+  render() {
+    let {environments} = this.state;
+    let {orgId, projectId} = this.props.params;
+
+    return (
+      <div>
+        <SettingsPageHeader
+          title={t('Manage Environments')}
+          tabs={
+            <ul className="nav nav-tabs" style={{borderBottom: '1px solid #ddd'}}>
+              <ListLink to={`/${orgId}/${projectId}/settings/environments/`} index={true}>
+                {t('Environments')}
+              </ListLink>
+            </ul>
+          }
+        />
+        <Panel>
+          <PanelHeader>{t('Environments')}</PanelHeader>
+          <PanelBody>
+            {environments.length
+              ? this.renderEnvironmentList(environments)
+              : this.renderEmpty()}
+          </PanelBody>
+        </Panel>
+      </div>
+    );
+  },
+});
+
+export default ProjectEnvironments;

src/sentry/static/sentry/app/views/projectSettings/index.jsx

@@ -104,6 +104,9 @@ const ProjectSettings = createReactClass({
             >
               {t('Alerts')}
             </ListLink>
+            <ListLink to={`/${orgId}/${projectId}/settings/environments/`}>
+              {t('Environments')}
+            </ListLink>
             <ListLink to={`/${orgId}/${projectId}/settings/tags/`}>{t('Tags')}</ListLink>
             <ListLink to={`/${orgId}/${projectId}/settings/issue-tracking/`}>
               {t('Issue Tracking')}