feat: Enable org activity and stats for Sentry 10 (#11703)

Hides the old project picker in Sentry 10 views

src/sentry/static/sentry/app/components/sidebar/index.jsx

@@ -320,50 +320,48 @@ class Sidebar extends React.Component {
               </SidebarSection>
 
               {!hasSentry10 && (
-                <React.Fragment>
-                  <SidebarSection>
-                    <SidebarItem
-                      {...sidebarItemProps}
-                      onClick={this.hidePanel}
-                      icon={<InlineSvg src="icon-user" />}
-                      label={t('Assigned to me')}
-                      to={`/organizations/${organization.slug}/issues/assigned/`}
-                    />
-                    <SidebarItem
-                      {...sidebarItemProps}
-                      onClick={this.hidePanel}
-                      icon={<InlineSvg src="icon-star" />}
-                      label={t('Bookmarked issues')}
-                      to={`/organizations/${organization.slug}/issues/bookmarks/`}
-                    />
-                    <SidebarItem
-                      {...sidebarItemProps}
-                      onClick={this.hidePanel}
-                      icon={<InlineSvg src="icon-history" />}
-                      label={t('Recently viewed')}
-                      to={`/organizations/${organization.slug}/issues/history/`}
-                    />
-                  </SidebarSection>
-
-                  <SidebarSection>
-                    <SidebarItem
-                      {...sidebarItemProps}
-                      onClick={this.hidePanel}
-                      icon={<InlineSvg src="icon-activity" />}
-                      label={t('Activity')}
-                      to={`/organizations/${organization.slug}/activity/`}
-                    />
-                    <SidebarItem
-                      {...sidebarItemProps}
-                      onClick={this.hidePanel}
-                      icon={<InlineSvg src="icon-stats" />}
-                      label={t('Stats')}
-                      to={`/organizations/${organization.slug}/stats/`}
-                    />
-                  </SidebarSection>
-                </React.Fragment>
+                <SidebarSection>
+                  <SidebarItem
+                    {...sidebarItemProps}
+                    onClick={this.hidePanel}
+                    icon={<InlineSvg src="icon-user" />}
+                    label={t('Assigned to me')}
+                    to={`/organizations/${organization.slug}/issues/assigned/`}
+                  />
+                  <SidebarItem
+                    {...sidebarItemProps}
+                    onClick={this.hidePanel}
+                    icon={<InlineSvg src="icon-star" />}
+                    label={t('Bookmarked issues')}
+                    to={`/organizations/${organization.slug}/issues/bookmarks/`}
+                  />
+                  <SidebarItem
+                    {...sidebarItemProps}
+                    onClick={this.hidePanel}
+                    icon={<InlineSvg src="icon-history" />}
+                    label={t('Recently viewed')}
+                    to={`/organizations/${organization.slug}/issues/history/`}
+                  />
+                </SidebarSection>
               )}
 
+              <SidebarSection>
+                <SidebarItem
+                  {...sidebarItemProps}
+                  onClick={this.hidePanel}
+                  icon={<InlineSvg src="icon-activity" />}
+                  label={t('Activity')}
+                  to={`/organizations/${organization.slug}/activity/`}
+                />
+                <SidebarItem
+                  {...sidebarItemProps}
+                  onClick={this.hidePanel}
+                  icon={<InlineSvg src="icon-stats" />}
+                  label={t('Stats')}
+                  to={`/organizations/${organization.slug}/stats/`}
+                />
+              </SidebarSection>
+
               <SidebarSection>
                 <SidebarItem
                   {...sidebarItemProps}

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

@@ -754,6 +754,14 @@ function routes() {
       <Route path="/:orgId/" component={errorHandler(OrganizationDetails)}>
         <Route component={errorHandler(OrganizationRoot)}>
           <IndexRoute component={errorHandler(OrganizationDashboard)} />
+          <Route
+            path="/organizations/:orgId/stats/"
+            component={errorHandler(OrganizationStats)}
+          />
+          <Route
+            path="/organizations/:orgId/activity/"
+            component={errorHandler(OrganizationActivity)}
+          />
           <Route
             path="/organizations/:orgId/dashboards/"
             componentPromise={() =>
@@ -775,10 +783,6 @@ function routes() {
             <Redirect path="saved/" to="/organizations/:orgId/discover/" />
             <Route path="saved/:savedQueryId/" />
           </Route>
-          <Route
-            path="/organizations/:orgId/activity/"
-            component={errorHandler(OrganizationActivity)}
-          />
           <Route
             path="/organizations/:orgId/events/"
             componentPromise={() =>
@@ -969,7 +973,6 @@ function routes() {
             />
             <Redirect path="rate-limits/" to="/settings/:orgId/rate-limits/" />
             <Redirect path="repos/" to="/settings/:orgId/repos/" />
-            <Route path="stats/" component={errorHandler(OrganizationStats)} />
           </Route>
           <Route
             path="/organizations/:orgId/projects/new/"

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'react-emotion';
 
 import AsyncView from 'app/views/asyncView';
 import ActivityFeed from 'app/components/activity/feed';
@@ -7,9 +6,13 @@ import OrganizationHomeContainer from 'app/components/organizations/homeContaine
 import PageHeading from 'app/components/pageHeading';
 
 import {t} from 'app/locale';
-import space from 'app/styles/space';
+import SentryTypes from 'app/sentryTypes';
+import {PageContent} from 'app/styles/organization';
 
 export default class OrganizationActivity extends AsyncView {
+  static contextTypes = {
+    organization: SentryTypes.Organization,
+  };
   getEndpoint() {
     return `/organizations/${this.props.params.orgId}/activity/`;
   }
@@ -18,10 +21,10 @@ export default class OrganizationActivity extends AsyncView {
     return 'Activity';
   }
 
-  render() {
+  renderActivityFeed() {
     return (
-      <OrganizationHomeContainer>
-        <StyledPageHeading>{t('Activity')}</StyledPageHeading>
+      <React.Fragment>
+        <PageHeading withMargins>{t('Activity')}</PageHeading>
         <ActivityFeed
           endpoint={this.getEndpoint()}
           query={{
@@ -30,12 +33,19 @@ export default class OrganizationActivity extends AsyncView {
           pagination={true}
           {...this.props}
         />
-      </OrganizationHomeContainer>
+      </React.Fragment>
     );
   }
-}
 
-const StyledPageHeading = styled(PageHeading)`
-  margin-top: ${space(0.25)};
-  margin-bottom: 24px;
-`;
+  render() {
+    const hasSentry10 = new Set(this.context.organization.features).has('sentry10');
+
+    return hasSentry10 ? (
+      <PageContent>
+        <div className="organization-home">{this.renderActivityFeed()}</div>
+      </PageContent>
+    ) : (
+      <OrganizationHomeContainer>{this.renderActivityFeed()}</OrganizationHomeContainer>
+    );
+  }
+}

src/sentry/static/sentry/app/views/organizationStats/organizationStatsDetails.jsx

@@ -15,6 +15,8 @@ import {
   ProjectTableLayout,
   ProjectTableDataElement,
 } from 'app/views/organizationStats/projectTableLayout';
+import ProjectNav from 'app/views/organizationProjectsDashboard/projectNav';
+import {PageContent} from 'app/styles/organization';
 
 class OrganizationStats extends React.Component {
   static propTypes = {
@@ -50,7 +52,7 @@ class OrganizationStats extends React.Component {
     );
   }
 
-  render() {
+  renderContent() {
     let {
       statsLoading,
       orgTotal,
@@ -137,6 +139,20 @@ class OrganizationStats extends React.Component {
       </div>
     );
   }
+
+  render() {
+    const hasSentry10 = new Set(this.props.organization.features).has('sentry10');
+    return (
+      <React.Fragment>
+        {!hasSentry10 && (
+          <div style={{width: '100%'}}>
+            <ProjectNav />
+          </div>
+        )}
+        <PageContent>{this.renderContent()}</PageContent>
+      </React.Fragment>
+    );
+  }
 }
 
 export default OrganizationStats;

tests/acceptance/test_organization_stats.py

@@ -22,9 +22,5 @@ class OrganizationStatsTest(AcceptanceTestCase):
     def test_simple(self):
         self.project.update(first_event=timezone.now())
         self.browser.get(self.path)
-        # dashboard is a bit complex to load since it has many subcomponents
-        # so we bank on the core container and the activity container being
-        # enough of a check
-        self.browser.wait_until('.organization-home')
         self.browser.wait_until_not('.loading-indicator')
         self.browser.snapshot('organization stats')

tests/js/spec/components/sidebar/index.spec.jsx

@@ -293,12 +293,10 @@ describe('Sidebar', function() {
       wrapper.setProps({organization: sentry10Org});
       wrapper.update();
       const labels = wrapper.find('SidebarItemLabel').map(node => node.text());
-      expect(labels).toHaveLength(5);
+      expect(labels).toHaveLength(7);
       expect(labels).not.toContain('Assigned to me');
       expect(labels).not.toContain('Bookmarked issues');
       expect(labels).not.toContain('Recently viewed');
-      expect(labels).not.toContain('Activity');
-      expect(labels).not.toContain('Stats');
     });
   });
 });