feat(workflow): Move team insights under stats in the sidebar (#29398)

static/app/routes.tsx

@@ -926,19 +926,6 @@ function buildRoutes() {
     </Route>
   );
 
-  const teamInsightsRoutes = (
-    <Route
-      path="/organizations/:orgId/teamInsights/"
-      componentPromise={() => import('app/views/teamInsights')}
-      component={SafeLazyLoad}
-    >
-      <IndexRoute
-        componentPromise={() => import('app/views/teamInsights/overview')}
-        component={SafeLazyLoad}
-      />
-    </Route>
-  );
-
   const dashboardRoutes = (
     <Fragment>
       <Route
@@ -1151,6 +1138,21 @@ function buildRoutes() {
     />
   );
 
+  const teamStatsRoutes = (
+    <Route
+      path="/organizations/:orgId/stats/team/"
+      componentPromise={() => import('app/views/organizationStats/teamInsights')}
+      component={SafeLazyLoad}
+    >
+      <IndexRoute
+        componentPromise={() =>
+          import('app/views/organizationStats/teamInsights/overview')
+        }
+        component={SafeLazyLoad}
+      />
+    </Route>
+  );
+
   // TODO(mark) Long term this /queries route should go away and /discover
   // should be the canonical route for discover2. We have a redirect right now
   // as /discover was for discover 1 and most of the application is linking to
@@ -1762,7 +1764,6 @@ function buildRoutes() {
     <Route component={errorHandler(OrganizationDetails)}>
       {settingsRoutes}
       {projectsRoutes}
-      {teamInsightsRoutes}
       {dashboardRoutes}
       {userFeedbackRoutes}
       {issueListRoutes}
@@ -1772,6 +1773,7 @@ function buildRoutes() {
       {releasesRoutes}
       {activityRoutes}
       {statsRoutes}
+      {teamStatsRoutes}
       {discoverRoutes}
       {performanceRoutes}
       {adminManageRoutes}

static/app/views/organizationStats/header.tsx

@@ -0,0 +1,55 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+
+import FeatureBadge from 'app/components/featureBadge';
+import * as Layout from 'app/components/layouts/thirds';
+import Link from 'app/components/links/link';
+import {t} from 'app/locale';
+import space from 'app/styles/space';
+import {Organization} from 'app/types';
+
+type Props = {
+  organization: Organization;
+  activeTab: 'stats' | 'team';
+};
+
+function StatsHeader({organization, activeTab}: Props) {
+  return (
+    <Fragment>
+      <BorderlessHeader>
+        <StyledHeaderContent>
+          <StyledLayoutTitle>{t('Stats')}</StyledLayoutTitle>
+        </StyledHeaderContent>
+      </BorderlessHeader>
+      <Layout.Header>
+        <Layout.HeaderNavTabs underlined>
+          <li className={`${activeTab === 'stats' ? 'active' : ''}`}>
+            <Link to={`/organizations/${organization.slug}/stats/`}>
+              {t('Usage Stats')}
+            </Link>
+          </li>
+          <li className={`${activeTab === 'team' ? 'active' : ''}`}>
+            <Link to={`/organizations/${organization.slug}/stats/team/`}>
+              {t('Team Stats')}
+              <FeatureBadge type="beta" />
+            </Link>
+          </li>
+        </Layout.HeaderNavTabs>
+      </Layout.Header>
+    </Fragment>
+  );
+}
+
+export default StatsHeader;
+
+const BorderlessHeader = styled(Layout.Header)`
+  border-bottom: 0;
+`;
+
+const StyledHeaderContent = styled(Layout.HeaderContent)`
+  margin-bottom: 0;
+`;
+
+const StyledLayoutTitle = styled(Layout.Title)`
+  margin-top: ${space(0.5)};
+`;

static/app/views/organizationStats/index.tsx

@@ -27,6 +27,7 @@ import {
   RelativePeriod,
 } from 'app/types';
 import withOrganization from 'app/utils/withOrganization';
+import HeaderTabs from 'app/views/organizationStats/header';
 
 import {CHART_OPTIONS_DATACATEGORY, ChartDataTransform} from './usageChart';
 import UsageStatsOrg from './usageStatsOrg';
@@ -264,48 +265,58 @@ export class OrganizationStats extends Component<Props> {
 
   render() {
     const {organization} = this.props;
+    const hasTeamInsights = organization.features.includes('team-insights');
 
     return (
       <SentryDocumentTitle title="Usage Stats">
-        <PageContent>
-          <PageHeader>
-            <PageHeading>{t('Organization Usage Stats')}</PageHeading>
-          </PageHeader>
-
-          <p>
-            {t(
-              'We collect usage metrics on three types of events: errors, transactions, and attachments. The charts below reflect events that Sentry has received across your entire organization. You can also find them broken down by project in the table.'
+        <Fragment>
+          {hasTeamInsights && (
+            <HeaderTabs organization={organization} activeTab="stats" />
+          )}
+
+          <PageContent>
+            {!hasTeamInsights && (
+              <Fragment>
+                <PageHeader>
+                  <PageHeading>{t('Organization Usage Stats')}</PageHeading>
+                </PageHeader>
+                <p>
+                  {t(
+                    'We collect usage metrics on three types of events: errors, transactions, and attachments. The charts below reflect events that Sentry has received across your entire organization. You can also find them broken down by project in the table.'
+                  )}
+                </p>
+              </Fragment>
             )}
-          </p>
-
-          <PageGrid>
-            {this.renderPageControl()}
-
-            <ErrorBoundary mini>
-              <UsageStatsOrg
-                organization={organization}
-                dataCategory={this.dataCategory}
-                dataCategoryName={this.dataCategoryName}
-                dataDatetime={this.dataDatetime}
-                chartTransform={this.chartTransform}
-                handleChangeState={this.setStateOnUrl}
-              />
-            </ErrorBoundary>
-            <ErrorBoundary mini>
-              <UsageStatsProjects
-                organization={organization}
-                dataCategory={this.dataCategory}
-                dataCategoryName={this.dataCategoryName}
-                dataDatetime={this.dataDatetime}
-                tableSort={this.tableSort}
-                tableQuery={this.tableQuery}
-                tableCursor={this.tableCursor}
-                handleChangeState={this.setStateOnUrl}
-                getNextLocations={this.getNextLocations}
-              />
-            </ErrorBoundary>
-          </PageGrid>
-        </PageContent>
+
+            <PageGrid>
+              {this.renderPageControl()}
+
+              <ErrorBoundary mini>
+                <UsageStatsOrg
+                  organization={organization}
+                  dataCategory={this.dataCategory}
+                  dataCategoryName={this.dataCategoryName}
+                  dataDatetime={this.dataDatetime}
+                  chartTransform={this.chartTransform}
+                  handleChangeState={this.setStateOnUrl}
+                />
+              </ErrorBoundary>
+              <ErrorBoundary mini>
+                <UsageStatsProjects
+                  organization={organization}
+                  dataCategory={this.dataCategory}
+                  dataCategoryName={this.dataCategoryName}
+                  dataDatetime={this.dataDatetime}
+                  tableSort={this.tableSort}
+                  tableQuery={this.tableQuery}
+                  tableCursor={this.tableCursor}
+                  handleChangeState={this.setStateOnUrl}
+                  getNextLocations={this.getNextLocations}
+                />
+              </ErrorBoundary>
+            </PageGrid>
+          </PageContent>
+        </Fragment>
       </SentryDocumentTitle>
     );
   }

static/app/views/teamInsights/overview.tsx → static/app/views/organizationStats/teamInsights/overview.tsx

@@ -22,8 +22,9 @@ import withApi from 'app/utils/withApi';
 import withOrganization from 'app/utils/withOrganization';
 import withTeamsForUser from 'app/utils/withTeamsForUser';
 
+import Header from '../header';
+
 import DescriptionCard from './descriptionCard';
-import HeaderTabs from './headerTabs';
 import TeamAlertsTriggered from './teamAlertsTriggered';
 import TeamIssuesReviewed from './teamIssuesReviewed';
 import TeamMisery from './teamMisery';
@@ -165,14 +166,7 @@ function TeamInsightsOverview({
 
   return (
     <Fragment>
-      <BorderlessHeader>
-        <StyledHeaderContent>
-          <StyledLayoutTitle>{t('Projects')}</StyledLayoutTitle>
-        </StyledHeaderContent>
-      </BorderlessHeader>
-      <Layout.Header>
-        <HeaderTabs organization={organization} activeTab="teamInsights" />
-      </Layout.Header>
+      <Header organization={organization} activeTab="team" />
 
       <Body>
         {loadingTeams && <LoadingIndicator />}
@@ -349,18 +343,6 @@ const Body = styled(Layout.Body)`
   }
 `;
 
-const BorderlessHeader = styled(Layout.Header)`
-  border-bottom: 0;
-`;
-
-const StyledHeaderContent = styled(Layout.HeaderContent)`
-  margin-bottom: 0;
-`;
-
-const StyledLayoutTitle = styled(Layout.Title)`
-  margin-top: ${space(0.5)};
-`;
-
 const ControlsWrapper = styled('div')`
   display: grid;
   align-items: center;

static/app/views/teamInsights/teamMisery.tsx → static/app/views/organizationStats/teamInsights/teamMisery.tsx

@@ -18,7 +18,7 @@ import EventView from 'app/utils/discover/eventView';
 import {getFieldRenderer} from 'app/utils/discover/fieldRenderers';
 import type {Color} from 'app/utils/theme';
 
-import {transactionSummaryRouteWithQuery} from '../performance/transactionSummary/utils';
+import {transactionSummaryRouteWithQuery} from '../../performance/transactionSummary/utils';
 
 type TeamMiseryProps = {
   organization: Organization;