feat(alerts): Change rules/settings order in alerts page (#12724)

Also extracts header into a shared component.

Closes SEN-435

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

@@ -246,7 +246,10 @@ function routes() {
         component={errorHandler(LazyLoad)}
       />
       <Route name="Alerts" path="alerts/">
-        <IndexRoute
+        <IndexRedirect to="rules/" />
+        <Route
+          path="settings/"
+          name="Settings"
           component={errorHandler(LazyLoad)}
           componentPromise={() =>
             import(/* webpackChunkName: "ProjectAlertSettings" */ './views/settings/projectAlerts/projectAlertSettings')

src/sentry/static/sentry/app/views/settings/components/settingsPageHeader.jsx

@@ -22,7 +22,7 @@ class SettingsPageHeading extends React.Component {
 
   render() {
     return (
-      <Wrapper tabs={this.props.tabs}>
+      <Wrapper>
         <Flex align="center">
           {this.props.icon && <Box pr={1}>{this.props.icon}</Box>}
           {this.props.title && (

src/sentry/static/sentry/app/views/settings/projectAlerts/projectAlertHeader.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {t} from 'app/locale';
+import SentryTypes from 'app/sentryTypes';
+import Button from 'app/components/button';
+import ListLink from 'app/components/listLink';
+import NavTabs from 'app/components/navTabs';
+
+import Tooltip from 'app/components/tooltip';
+
+import SettingsPageHeader from 'app/views/settings/components/settingsPageHeader';
+
+import withOrganization from 'app/utils/withOrganization';
+
+export default withOrganization(
+  class ProjectAlertHeader extends React.Component {
+    static propTypes = {
+      organization: SentryTypes.Organization.isRequired,
+      projectId: PropTypes.string.isRequired,
+    };
+
+    render() {
+      const {organization, projectId} = this.props;
+
+      const canEditRule = organization.access.includes('project:write');
+
+      const basePath = `/settings/${organization.slug}/projects/${projectId}/alerts/`;
+
+      return (
+        <SettingsPageHeader
+          title={t('Alerts')}
+          action={
+            <Tooltip
+              disabled={canEditRule}
+              title={t('You do not have permission to edit alert rules.')}
+            >
+              <Button
+                to={`${basePath}rules/new/`}
+                disabled={!canEditRule}
+                priority="primary"
+                size="small"
+                icon="icon-circle-add"
+              >
+                {t('New Alert Rule')}
+              </Button>
+            </Tooltip>
+          }
+          tabs={
+            <NavTabs underlined={true}>
+              <ListLink to={`${basePath}rules/`}>{t('Rules')}</ListLink>
+              <ListLink to={`${basePath}settings/`}>{t('Settings')}</ListLink>
+            </NavTabs>
+          }
+        />
+      );
+    }
+  }
+);

src/sentry/static/sentry/app/views/settings/projectAlerts/projectAlertRules.jsx

@@ -19,15 +19,14 @@ import Confirm from 'app/components/confirm';
 import Duration from 'app/components/duration';
 import EmptyStateWarning from 'app/components/emptyStateWarning';
 import EnvironmentStore from 'app/stores/environmentStore';
-import ListLink from 'app/components/listLink';
-import NavTabs from 'app/components/navTabs';
 import PermissionAlert from 'app/views/settings/project/permissionAlert';
 import SentryTypes from 'app/sentryTypes';
-import SettingsPageHeader from 'app/views/settings/components/settingsPageHeader';
 import Tooltip from 'app/components/tooltip';
 import recreateRoute from 'app/utils/recreateRoute';
 import withApi from 'app/utils/withApi';
 
+import ProjectAlertHeader from './projectAlertHeader';
+
 const TextColorLink = styled(Link)`
   color: ${p => p.theme.gray3};
 `;
@@ -258,38 +257,11 @@ class ProjectAlertRules extends AsyncView {
 
   renderBody() {
     const {ruleList} = this.state;
-    const {organization} = this.context;
-    const canEditRule = organization.access.includes('project:write');
+    const {projectId} = this.props.params;
 
     return (
       <React.Fragment>
-        <SettingsPageHeader
-          title={t('Alerts')}
-          action={
-            <Tooltip
-              disabled={canEditRule}
-              title={t('You do not have permission to edit alert rules.')}
-            >
-              <Button
-                disabled={!canEditRule}
-                to={recreateRoute('new/', this.props)}
-                priority="primary"
-                size="small"
-                icon="icon-circle-add"
-              >
-                {t('New Alert Rule')}
-              </Button>
-            </Tooltip>
-          }
-          tabs={
-            <NavTabs underlined={true}>
-              <ListLink to={recreateRoute('alerts', {...this.props, stepBack: -4})}>
-                {t('Settings')}
-              </ListLink>
-              <ListLink to={recreateRoute('', this.props)}>{t('Rules')}</ListLink>
-            </NavTabs>
-          }
-        />
+        <ProjectAlertHeader projectId={projectId} />
         <PermissionAlert />
         {!!ruleList.length && this.renderResults()}
         {!ruleList.length && this.renderEmpty()}

src/sentry/static/sentry/app/views/settings/projectAlerts/projectAlertSettings.jsx

@@ -6,17 +6,12 @@ import {t} from 'app/locale';
 import Access from 'app/components/acl/access';
 import AlertLink from 'app/components/alertLink';
 import AsyncView from 'app/views/asyncView';
-import Button from 'app/components/button';
 import Form from 'app/views/settings/components/forms/form';
 import JsonForm from 'app/views/settings/components/forms/jsonForm';
-import ListLink from 'app/components/listLink';
-import NavTabs from 'app/components/navTabs';
 import PermissionAlert from 'app/views/settings/project/permissionAlert';
 import PluginList from 'app/components/pluginList';
 import SentryTypes from 'app/sentryTypes';
-import SettingsPageHeader from 'app/views/settings/components/settingsPageHeader';
-import Tooltip from 'app/components/tooltip';
-import recreateRoute from 'app/utils/recreateRoute';
+import ProjectAlertHeader from './projectAlertHeader';
 
 export default class ProjectAlertSettings extends AsyncView {
   static propTypes = {
@@ -71,43 +66,16 @@ export default class ProjectAlertSettings extends AsyncView {
   }
 
   renderBody() {
-    const {orgId, projectId} = this.props.params;
-    const {organization} = this.props;
-    const canEditRule = organization.access.includes('project:write');
+    const {
+      organization,
+      params: {orgId, projectId},
+    } = this.props;
 
     return (
       <Access access={['project:write']}>
         {({hasAccess}) => (
           <React.Fragment>
-            <SettingsPageHeader
-              title={t('Alerts')}
-              action={
-                <Tooltip
-                  disabled={canEditRule}
-                  title={t('You do not have permission to edit alert rules.')}
-                >
-                  <Button
-                    to={recreateRoute('rules/new/', this.props)}
-                    disabled={!canEditRule}
-                    priority="primary"
-                    size="small"
-                    icon="icon-circle-add"
-                  >
-                    {t('New Alert Rule')}
-                  </Button>
-                </Tooltip>
-              }
-              tabs={
-                <NavTabs underlined={true}>
-                  <ListLink to={recreateRoute('', this.props)} index={true}>
-                    {t('Settings')}
-                  </ListLink>
-                  <ListLink to={recreateRoute('rules/', this.props)}>
-                    {t('Rules')}
-                  </ListLink>
-                </NavTabs>
-              }
-            />
+            <ProjectAlertHeader projectId={projectId} />
             <PermissionAlert />
             <AlertLink to={'/settings/account/notifications/'} icon="icon-mail">
               {t(

tests/acceptance/test_project_alert_settings.py

@@ -42,8 +42,8 @@ class ProjectAlertSettingsTest(AcceptanceTestCase):
         )
 
         self.login_as(self.user)
-        self.path1 = u'/{}/{}/settings/alerts/'.format(self.org.slug, self.project.slug)
-        self.path2 = u'/{}/{}/settings/alerts/rules/'.format(self.org.slug, self.project.slug)
+        self.path1 = u'/settings/{}/projects/{}/alerts/settings/'.format(self.org.slug, self.project.slug)
+        self.path2 = u'/settings/{}/projects/{}/alerts/rules/'.format(self.org.slug, self.project.slug)
 
     def test_settings_load(self):
         self.browser.get(self.path1)

tests/js/spec/views/__snapshots__/projectAlertRules.spec.jsx.snap

@@ -16,131 +16,97 @@ exports[`projectAlertRules renders 1`] = `
     <DocumentTitle
       title="Sentry"
     >
-      <SettingsPageHeading
-        action={
-          <Tooltip
-            disabled={true}
-            title="You do not have permission to edit alert rules."
-          >
-            <Button
-              disabled={false}
-              icon="icon-circle-add"
-              priority="primary"
-              size="small"
-              to="new/"
-            >
-              New Alert Rule
-            </Button>
-          </Tooltip>
-        }
-        noTitleStyles={false}
-        tabs={
-          <NavTabs
-            underlined={true}
-          >
-            <ListLink
-              activeClassName="active"
-              index={false}
-              to="alerts"
-            >
-              Settings
-            </ListLink>
-            <ListLink
-              activeClassName="active"
-              index={false}
-              to=""
-            >
-              Rules
-            </ListLink>
-          </NavTabs>
-        }
-        title="Alerts"
+      <WithOrganizationMockWrapper
+        projectId="project1"
       >
-        <Wrapper
-          tabs={
-            <NavTabs
-              underlined={true}
-            >
-              <ListLink
-                activeClassName="active"
-                index={false}
-                to="alerts"
-              >
-                Settings
-              </ListLink>
-              <ListLink
-                activeClassName="active"
-                index={false}
-                to=""
-              >
-                Rules
-              </ListLink>
-            </NavTabs>
+        <ProjectAlertHeader
+          organization={
+            Object {
+              "access": Array [
+                "org:read",
+                "org:write",
+                "org:admin",
+                "org:integrations",
+                "project:read",
+                "project:write",
+                "project:admin",
+                "team:read",
+                "team:write",
+                "team:admin",
+              ],
+              "features": Array [],
+              "id": "3",
+              "name": "Organization Name",
+              "onboardingTasks": Array [],
+              "projects": Array [],
+              "scrapeJavaScript": true,
+              "slug": "org-slug",
+              "status": Object {
+                "id": "active",
+                "name": "active",
+              },
+              "teams": Array [],
+            }
           }
+          projectId="project1"
         >
-          <div
-            className="css-1r5ylk7-Wrapper e1kblvez2"
+          <SettingsPageHeading
+            action={
+              <Tooltip
+                disabled={true}
+                title="You do not have permission to edit alert rules."
+              >
+                <Button
+                  disabled={false}
+                  icon="icon-circle-add"
+                  priority="primary"
+                  size="small"
+                  to="/settings/org-slug/projects/project1/alerts/rules/new/"
+                >
+                  New Alert Rule
+                </Button>
+              </Tooltip>
+            }
+            noTitleStyles={false}
+            tabs={
+              <NavTabs
+                underlined={true}
+              >
+                <ListLink
+                  activeClassName="active"
+                  index={false}
+                  to="/settings/org-slug/projects/project1/alerts/rules/"
+                >
+                  Rules
+                </ListLink>
+                <ListLink
+                  activeClassName="active"
+                  index={false}
+                  to="/settings/org-slug/projects/project1/alerts/settings/"
+                >
+                  Settings
+                </ListLink>
+              </NavTabs>
+            }
+            title="Alerts"
           >
-            <Flex
-              align="center"
-            >
-              <Base
-                align="center"
-                className="css-5ipae5"
+            <Wrapper>
+              <div
+                className="css-1r5ylk7-Wrapper e1kblvez2"
               >
-                <div
-                  className="css-5ipae5"
-                  is={null}
+                <Flex
+                  align="center"
                 >
-                  <Title
-                    styled={false}
-                    tabs={
-                      <NavTabs
-                        underlined={true}
-                      >
-                        <ListLink
-                          activeClassName="active"
-                          index={false}
-                          to="alerts"
-                        >
-                          Settings
-                        </ListLink>
-                        <ListLink
-                          activeClassName="active"
-                          index={false}
-                          to=""
-                        >
-                          Rules
-                        </ListLink>
-                      </NavTabs>
-                    }
+                  <Base
+                    align="center"
+                    className="css-5ipae5"
                   >
-                    <Base
-                      className="css-zs9eah-Title e1kblvez0"
-                      tabs={
-                        <NavTabs
-                          underlined={true}
-                        >
-                          <ListLink
-                            activeClassName="active"
-                            index={false}
-                            to="alerts"
-                          >
-                            Settings
-                          </ListLink>
-                          <ListLink
-                            activeClassName="active"
-                            index={false}
-                            to=""
-                          >
-                            Rules
-                          </ListLink>
-                        </NavTabs>
-                      }
+                    <div
+                      className="css-5ipae5"
+                      is={null}
                     >
-                      <div
-                        className="css-zs9eah-Title e1kblvez0"
-                        is={null}
+                      <Title
+                        styled={false}
                         tabs={
                           <NavTabs
                             underlined={true}
@@ -148,233 +114,283 @@ exports[`projectAlertRules renders 1`] = `
                             <ListLink
                               activeClassName="active"
                               index={false}
-                              to="alerts"
+                              to="/settings/org-slug/projects/project1/alerts/rules/"
                             >
-                              Settings
+                              Rules
                             </ListLink>
                             <ListLink
                               activeClassName="active"
                               index={false}
-                              to=""
+                              to="/settings/org-slug/projects/project1/alerts/settings/"
                             >
-                              Rules
+                              Settings
                             </ListLink>
                           </NavTabs>
                         }
                       >
-                        <HeaderTitle>
-                          <h4
-                            className="css-1w8ttcn-HeaderTitle e6lvex72"
-                          >
-                            Alerts
-                          </h4>
-                        </HeaderTitle>
-                      </div>
-                    </Base>
-                  </Title>
-                  <Action
-                    tabs={
-                      <NavTabs
-                        underlined={true}
-                      >
-                        <ListLink
-                          activeClassName="active"
-                          index={false}
-                          to="alerts"
-                        >
-                          Settings
-                        </ListLink>
-                        <ListLink
-                          activeClassName="active"
-                          index={false}
-                          to=""
+                        <Base
+                          className="css-zs9eah-Title e1kblvez0"
+                          tabs={
+                            <NavTabs
+                              underlined={true}
+                            >
+                              <ListLink
+                                activeClassName="active"
+                                index={false}
+                                to="/settings/org-slug/projects/project1/alerts/rules/"
+                              >
+                                Rules
+                              </ListLink>
+                              <ListLink
+                                activeClassName="active"
+                                index={false}
+                                to="/settings/org-slug/projects/project1/alerts/settings/"
+                              >
+                                Settings
+                              </ListLink>
+                            </NavTabs>
+                          }
                         >
-                          Rules
-                        </ListLink>
-                      </NavTabs>
-                    }
-                  >
-                    <div
-                      className="css-1lt2zte-Action e1kblvez1"
-                    >
-                      <Tooltip
-                        disabled={true}
-                        title="You do not have permission to edit alert rules."
+                          <div
+                            className="css-zs9eah-Title e1kblvez0"
+                            is={null}
+                            tabs={
+                              <NavTabs
+                                underlined={true}
+                              >
+                                <ListLink
+                                  activeClassName="active"
+                                  index={false}
+                                  to="/settings/org-slug/projects/project1/alerts/rules/"
+                                >
+                                  Rules
+                                </ListLink>
+                                <ListLink
+                                  activeClassName="active"
+                                  index={false}
+                                  to="/settings/org-slug/projects/project1/alerts/settings/"
+                                >
+                                  Settings
+                                </ListLink>
+                              </NavTabs>
+                            }
+                          >
+                            <HeaderTitle>
+                              <h4
+                                className="css-1w8ttcn-HeaderTitle e6lvex72"
+                              >
+                                Alerts
+                              </h4>
+                            </HeaderTitle>
+                          </div>
+                        </Base>
+                      </Title>
+                      <Action
+                        tabs={
+                          <NavTabs
+                            underlined={true}
+                          >
+                            <ListLink
+                              activeClassName="active"
+                              index={false}
+                              to="/settings/org-slug/projects/project1/alerts/rules/"
+                            >
+                              Rules
+                            </ListLink>
+                            <ListLink
+                              activeClassName="active"
+                              index={false}
+                              to="/settings/org-slug/projects/project1/alerts/settings/"
+                            >
+                              Settings
+                            </ListLink>
+                          </NavTabs>
+                        }
                       >
-                        <Button
-                          disabled={false}
-                          icon="icon-circle-add"
-                          priority="primary"
-                          size="small"
-                          to="new/"
+                        <div
+                          className="css-1lt2zte-Action e1kblvez1"
                         >
-                          <StyledButton
-                            aria-disabled={false}
-                            aria-label="New Alert Rule"
-                            disabled={false}
-                            onClick={[Function]}
-                            priority="primary"
-                            role="button"
-                            size="small"
-                            to="new/"
+                          <Tooltip
+                            disabled={true}
+                            title="You do not have permission to edit alert rules."
                           >
-                            <Component
-                              aria-disabled={false}
-                              aria-label="New Alert Rule"
-                              className="css-zvpqlo-StyledButton-getColors eqrebog0"
-                              onClick={[Function]}
-                              role="button"
+                            <Button
+                              disabled={false}
+                              icon="icon-circle-add"
+                              priority="primary"
                               size="small"
-                              to="new/"
+                              to="/settings/org-slug/projects/project1/alerts/rules/new/"
                             >
-                              <Link
+                              <StyledButton
                                 aria-disabled={false}
                                 aria-label="New Alert Rule"
-                                className="css-zvpqlo-StyledButton-getColors eqrebog0"
+                                disabled={false}
                                 onClick={[Function]}
-                                onlyActiveOnIndex={false}
+                                priority="primary"
                                 role="button"
                                 size="small"
-                                style={Object {}}
-                                to="new/"
+                                to="/settings/org-slug/projects/project1/alerts/rules/new/"
                               >
-                                <a
+                                <Component
                                   aria-disabled={false}
                                   aria-label="New Alert Rule"
                                   className="css-zvpqlo-StyledButton-getColors eqrebog0"
                                   onClick={[Function]}
                                   role="button"
                                   size="small"
-                                  style={Object {}}
+                                  to="/settings/org-slug/projects/project1/alerts/rules/new/"
                                 >
-                                  <ButtonLabel
-                                    priority="primary"
+                                  <Link
+                                    aria-disabled={false}
+                                    aria-label="New Alert Rule"
+                                    className="css-zvpqlo-StyledButton-getColors eqrebog0"
+                                    onClick={[Function]}
+                                    onlyActiveOnIndex={false}
+                                    role="button"
                                     size="small"
+                                    style={Object {}}
+                                    to="/settings/org-slug/projects/project1/alerts/rules/new/"
                                   >
-                                    <Component
-                                      className="css-7ui8bl-ButtonLabel eqrebog1"
-                                      priority="primary"
+                                    <a
+                                      aria-disabled={false}
+                                      aria-label="New Alert Rule"
+                                      className="css-zvpqlo-StyledButton-getColors eqrebog0"
+                                      onClick={[Function]}
+                                      role="button"
                                       size="small"
+                                      style={Object {}}
                                     >
-                                      <span
-                                        className="css-7ui8bl-ButtonLabel eqrebog1"
+                                      <ButtonLabel
+                                        priority="primary"
+                                        size="small"
                                       >
-                                        <Icon
-                                          hasChildren={true}
+                                        <Component
+                                          className="css-7ui8bl-ButtonLabel eqrebog1"
+                                          priority="primary"
                                           size="small"
                                         >
-                                          <Component
-                                            className="css-1vdnsie-Icon eqrebog2"
-                                            hasChildren={true}
-                                            size="small"
+                                          <span
+                                            className="css-7ui8bl-ButtonLabel eqrebog1"
                                           >
-                                            <span
-                                              className="css-1vdnsie-Icon eqrebog2"
+                                            <Icon
+                                              hasChildren={true}
                                               size="small"
                                             >
-                                              <StyledInlineSvg
-                                                size="12px"
-                                                src="icon-circle-add"
+                                              <Component
+                                                className="css-1vdnsie-Icon eqrebog2"
+                                                hasChildren={true}
+                                                size="small"
                                               >
-                                                <InlineSvg
-                                                  className="css-1ov3rcq-StyledInlineSvg eqrebog3"
-                                                  size="12px"
-                                                  src="icon-circle-add"
+                                                <span
+                                                  className="css-1vdnsie-Icon eqrebog2"
+                                                  size="small"
                                                 >
-                                                  <StyledSvg
-                                                    className="css-1ov3rcq-StyledInlineSvg eqrebog3"
-                                                    height="12px"
-                                                    viewBox={Object {}}
-                                                    width="12px"
+                                                  <StyledInlineSvg
+                                                    size="12px"
+                                                    src="icon-circle-add"
                                                   >
-                                                    <svg
-                                                      className="eqrebog3 css-1jjmnki-StyledSvg-StyledInlineSvg e2idor0"
-                                                      height="12px"
-                                                      viewBox={Object {}}
-                                                      width="12px"
+                                                    <InlineSvg
+                                                      className="css-1ov3rcq-StyledInlineSvg eqrebog3"
+                                                      size="12px"
+                                                      src="icon-circle-add"
                                                     >
-                                                      <use
-                                                        href="#test"
-                                                        xlinkHref="#test"
-                                                      />
-                                                    </svg>
-                                                  </StyledSvg>
-                                                </InlineSvg>
-                                              </StyledInlineSvg>
-                                            </span>
-                                          </Component>
-                                        </Icon>
-                                        New Alert Rule
-                                      </span>
-                                    </Component>
-                                  </ButtonLabel>
-                                </a>
-                              </Link>
-                            </Component>
-                          </StyledButton>
-                        </Button>
-                      </Tooltip>
+                                                      <StyledSvg
+                                                        className="css-1ov3rcq-StyledInlineSvg eqrebog3"
+                                                        height="12px"
+                                                        viewBox={Object {}}
+                                                        width="12px"
+                                                      >
+                                                        <svg
+                                                          className="eqrebog3 css-1jjmnki-StyledSvg-StyledInlineSvg e2idor0"
+                                                          height="12px"
+                                                          viewBox={Object {}}
+                                                          width="12px"
+                                                        >
+                                                          <use
+                                                            href="#test"
+                                                            xlinkHref="#test"
+                                                          />
+                                                        </svg>
+                                                      </StyledSvg>
+                                                    </InlineSvg>
+                                                  </StyledInlineSvg>
+                                                </span>
+                                              </Component>
+                                            </Icon>
+                                            New Alert Rule
+                                          </span>
+                                        </Component>
+                                      </ButtonLabel>
+                                    </a>
+                                  </Link>
+                                </Component>
+                              </StyledButton>
+                            </Button>
+                          </Tooltip>
+                        </div>
+                      </Action>
                     </div>
-                  </Action>
-                </div>
-              </Base>
-            </Flex>
-            <div>
-              <NavTabs
-                underlined={true}
-              >
-                <ul
-                  className="nav nav-tabs border-bottom"
-                >
-                  <ListLink
-                    activeClassName="active"
-                    index={false}
-                    to="alerts"
+                  </Base>
+                </Flex>
+                <div>
+                  <NavTabs
+                    underlined={true}
                   >
-                    <li
-                      className=""
+                    <ul
+                      className="nav nav-tabs border-bottom"
                     >
-                      <Link
-                        onlyActiveOnIndex={false}
-                        style={Object {}}
-                        to="alerts"
+                      <ListLink
+                        activeClassName="active"
+                        index={false}
+                        to="/settings/org-slug/projects/project1/alerts/rules/"
                       >
-                        <a
-                          onClick={[Function]}
-                          style={Object {}}
+                        <li
+                          className=""
                         >
-                          Settings
-                        </a>
-                      </Link>
-                    </li>
-                  </ListLink>
-                  <ListLink
-                    activeClassName="active"
-                    index={false}
-                    to=""
-                  >
-                    <li
-                      className=""
-                    >
-                      <Link
-                        onlyActiveOnIndex={false}
-                        style={Object {}}
-                        to=""
+                          <Link
+                            onlyActiveOnIndex={false}
+                            style={Object {}}
+                            to="/settings/org-slug/projects/project1/alerts/rules/"
+                          >
+                            <a
+                              onClick={[Function]}
+                              style={Object {}}
+                            >
+                              Rules
+                            </a>
+                          </Link>
+                        </li>
+                      </ListLink>
+                      <ListLink
+                        activeClassName="active"
+                        index={false}
+                        to="/settings/org-slug/projects/project1/alerts/settings/"
                       >
-                        <a
-                          style={Object {}}
+                        <li
+                          className=""
                         >
-                          Rules
-                        </a>
-                      </Link>
-                    </li>
-                  </ListLink>
-                </ul>
-              </NavTabs>
-            </div>
-          </div>
-        </Wrapper>
-      </SettingsPageHeading>
+                          <Link
+                            onlyActiveOnIndex={false}
+                            style={Object {}}
+                            to="/settings/org-slug/projects/project1/alerts/settings/"
+                          >
+                            <a
+                              onClick={[Function]}
+                              style={Object {}}
+                            >
+                              Settings
+                            </a>
+                          </Link>
+                        </li>
+                      </ListLink>
+                    </ul>
+                  </NavTabs>
+                </div>
+              </div>
+            </Wrapper>
+          </SettingsPageHeading>
+        </ProjectAlertHeader>
+      </WithOrganizationMockWrapper>
       <PermissionAlert
         access={
           Array [

tests/js/spec/views/__snapshots__/projectEnvironments.spec.jsx.snap

@@ -42,30 +42,7 @@ exports[`ProjectEnvironments render active renders empty message 1`] = `
       }
       title="Manage Environments"
     >
-      <Wrapper
-        tabs={
-          <NavTabs
-            underlined={true}
-          >
-            <ListLink
-              activeClassName="active"
-              index={true}
-              isActive={[Function]}
-              to="/org-slug/project-slug/settings/environments/"
-            >
-              Environments
-            </ListLink>
-            <ListLink
-              activeClassName="active"
-              index={true}
-              isActive={[Function]}
-              to="/org-slug/project-slug/settings/environments/hidden/"
-            >
-              Hidden
-            </ListLink>
-          </NavTabs>
-        }
-      >
+      <Wrapper>
         <div
           className="css-1r5ylk7-Wrapper e1kblvez2"
         >
@@ -460,30 +437,7 @@ exports[`ProjectEnvironments render active renders environment list and sets sta
       }
       title="Manage Environments"
     >
-      <Wrapper
-        tabs={
-          <NavTabs
-            underlined={true}
-          >
-            <ListLink
-              activeClassName="active"
-              index={true}
-              isActive={[Function]}
-              to="/org-slug/project-slug/settings/environments/"
-            >
-              Environments
-            </ListLink>
-            <ListLink
-              activeClassName="active"
-              index={true}
-              isActive={[Function]}
-              to="/org-slug/project-slug/settings/environments/hidden/"
-            >
-              Hidden
-            </ListLink>
-          </NavTabs>
-        }
-      >
+      <Wrapper>
         <div
           className="css-1r5ylk7-Wrapper e1kblvez2"
         >
@@ -1607,30 +1561,7 @@ exports[`ProjectEnvironments render hidden renders empty message 1`] = `
       }
       title="Manage Environments"
     >
-      <Wrapper
-        tabs={
-          <NavTabs
-            underlined={true}
-          >
-            <ListLink
-              activeClassName="active"
-              index={true}
-              isActive={[Function]}
-              to="/org-slug/project-slug/settings/environments/"
-            >
-              Environments
-            </ListLink>
-            <ListLink
-              activeClassName="active"
-              index={true}
-              isActive={[Function]}
-              to="/org-slug/project-slug/settings/environments/hidden/"
-            >
-              Hidden
-            </ListLink>
-          </NavTabs>
-        }
-      >
+      <Wrapper>
         <div
           className="css-1r5ylk7-Wrapper e1kblvez2"
         >
@@ -2025,30 +1956,7 @@ exports[`ProjectEnvironments render hidden renders environment list 1`] = `
       }
       title="Manage Environments"
     >
-      <Wrapper
-        tabs={
-          <NavTabs
-            underlined={true}
-          >
-            <ListLink
-              activeClassName="active"
-              index={true}
-              isActive={[Function]}
-              to="/org-slug/project-slug/settings/environments/"
-            >
-              Environments
-            </ListLink>
-            <ListLink
-              activeClassName="active"
-              index={true}
-              isActive={[Function]}
-              to="/org-slug/project-slug/settings/environments/hidden/"
-            >
-              Hidden
-            </ListLink>
-          </NavTabs>
-        }
-      >
+      <Wrapper>
         <div
           className="css-1r5ylk7-Wrapper e1kblvez2"
         >