chore(trends): Move trends to performance-view (#21851)

* chore(trends): Move trends to performance-view

src/sentry/api/endpoints/organization_events_trends.py

@@ -140,7 +140,7 @@ class OrganizationEventsTrendsEndpointBase(OrganizationEventsV2EndpointBase):
         ]
 
     def has_feature(self, organization, request):
-        return features.has("organizations:trends", organization, actor=request.user)
+        return features.has("organizations:performance-view", organization, actor=request.user)
 
     def get(self, request, organization):
         if not self.has_feature(organization, request):

src/sentry/conf/server.py

@@ -907,8 +907,6 @@ SENTRY_FEATURES = {
     "organizations:sso-migration": False,
     # Enable transaction comparison view for performance.
     "organizations:transaction-comparison": False,
-    # Enable trends view for performance.
-    "organizations:trends": False,
     # Enable graph for subscription quota for errors, transactions and
     # attachments
     "organizations:usage-stats-graph": False,

src/sentry/features/__init__.py

@@ -101,7 +101,6 @@ default_manager.add("organizations:sso-saml2", OrganizationFeature)  # NOQA
 default_manager.add("organizations:sso-migration", OrganizationFeature)  # NOQA
 default_manager.add("organizations:symbol-sources", OrganizationFeature)  # NOQA
 default_manager.add("organizations:transaction-comparison", OrganizationFeature)  # NOQA
-default_manager.add("organizations:trends", OrganizationFeature)  # NOQA
 default_manager.add("organizations:usage-stats-graph", OrganizationFeature)  # NOQA
 default_manager.add("organizations:inbox", OrganizationFeature)  # NOQA
 default_manager.add("organizations:unhandled-issue-flag", OrganizationFeature)  # NOQA

src/sentry/static/sentry/app/views/performance/landing.tsx

@@ -265,9 +265,7 @@ class PerformanceLanding extends React.Component<Props, State> {
     if (!organization.features.includes('key-transactions')) {
       views.push(FilterViews.KEY_TRANSACTIONS);
     }
-    if (organization.features.includes('trends')) {
-      views.push(FilterViews.TRENDS);
-    }
+    views.push(FilterViews.TRENDS);
     return (
       <ButtonBar merged active={this.getCurrentView()}>
         {views.map(viewKey => (

src/sentry/static/sentry/app/views/performance/transactionSummary/charts.tsx

@@ -13,7 +13,6 @@ import {
   SectionValue,
 } from 'app/components/charts/styles';
 import {decodeScalar} from 'app/utils/queryString';
-import Feature from 'app/components/acl/feature';
 import OptionSelector from 'app/components/charts/optionSelector';
 
 import {ChartContainer} from '../styles';
@@ -36,10 +35,6 @@ const DISPLAY_OPTIONS: SelectValue<string>[] = [
   {value: DisplayModes.DURATION, label: t('Duration Breakdown')},
   {value: DisplayModes.DURATION_PERCENTILE, label: t('Duration Percentiles')},
   {value: DisplayModes.LATENCY, label: t('Latency Distribution')},
-];
-
-const DISPLAY_OPTIONS_WITH_TRENDS: SelectValue<string>[] = [
-  ...DISPLAY_OPTIONS,
   {value: DisplayModes.TREND, label: t('Trends')},
 ];
 
@@ -150,16 +145,12 @@ class TransactionSummaryCharts extends React.Component<Props> {
                 onChange={this.handleTrendDisplayChange}
               />
             )}
-            <Feature features={['trends']}>
-              {({hasFeature}) => (
-                <OptionSelector
-                  title={t('Display')}
-                  selected={display}
-                  options={hasFeature ? DISPLAY_OPTIONS_WITH_TRENDS : DISPLAY_OPTIONS}
-                  onChange={this.handleDisplayChange}
-                />
-              )}
-            </Feature>
+            <OptionSelector
+              title={t('Display')}
+              selected={display}
+              options={DISPLAY_OPTIONS}
+              onChange={this.handleDisplayChange}
+            />
           </InlineContainer>
         </ChartControls>
       </Panel>

src/sentry/static/sentry/app/views/performance/trends/content.tsx

@@ -8,7 +8,6 @@ import EventView from 'app/utils/discover/eventView';
 import {generateAggregateFields} from 'app/utils/discover/fields';
 import DropdownControl, {DropdownItem} from 'app/components/dropdownControl';
 import {t} from 'app/locale';
-import Feature from 'app/components/acl/feature';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 import SearchBar from 'app/views/events/searchBar';
 import space from 'app/styles/space';
@@ -150,71 +149,69 @@ class TrendsContent extends React.Component<Props, State> {
     const query = getTransactionSearchQuery(location);
 
     return (
-      <Feature features={['trends']}>
-        <DefaultTrends location={location} eventView={eventView}>
-          <StyledSearchContainer>
-            <StyledSearchBar
-              organization={organization}
-              projectIds={trendView.project}
-              query={query}
-              fields={fields}
-              onSearch={this.handleSearch}
-            />
-            <TrendsDropdown>
-              <DropdownControl
-                buttonProps={{prefix: t('Confidence')}}
-                label={currentConfidenceLevel.label}
-              >
-                {CONFIDENCE_LEVELS.map(({label}) => (
-                  <DropdownItem
-                    key={label}
-                    onSelect={this.handleConfidenceChange}
-                    eventKey={label}
-                    data-test-id={label}
-                    isActive={label === currentConfidenceLevel.label}
-                  >
-                    {label}
-                  </DropdownItem>
-                ))}
-              </DropdownControl>
-            </TrendsDropdown>
-            <TrendsDropdown>
-              <DropdownControl
-                buttonProps={{prefix: t('Display')}}
-                label={currentTrendFunction.label}
-              >
-                {TRENDS_FUNCTIONS.map(({label, field}) => (
-                  <DropdownItem
-                    key={field}
-                    onSelect={this.handleTrendFunctionChange}
-                    eventKey={field}
-                    data-test-id={field}
-                    isActive={field === currentTrendFunction.field}
-                  >
-                    {label}
-                  </DropdownItem>
-                ))}
-              </DropdownControl>
-            </TrendsDropdown>
-          </StyledSearchContainer>
-          <TrendsLayoutContainer>
-            <ChangedTransactions
-              trendChangeType={TrendChangeType.IMPROVED}
-              previousTrendFunction={previousTrendFunction}
-              trendView={trendView}
-              location={location}
-              setError={setError}
-            />
-            <ChangedTransactions
-              trendChangeType={TrendChangeType.REGRESSION}
-              previousTrendFunction={previousTrendFunction}
-              trendView={trendView}
-              location={location}
-              setError={setError}
-            />
-          </TrendsLayoutContainer>
-        </DefaultTrends>
-      </Feature>
+      <DefaultTrends location={location} eventView={eventView}>
+        <StyledSearchContainer>
+          <StyledSearchBar
+            organization={organization}
+            projectIds={trendView.project}
+            query={query}
+            fields={fields}
+            onSearch={this.handleSearch}
+          />
+          <TrendsDropdown>
+            <DropdownControl
+              buttonProps={{prefix: t('Confidence')}}
+              label={currentConfidenceLevel.label}
+            >
+              {CONFIDENCE_LEVELS.map(({label}) => (
+                <DropdownItem
+                  key={label}
+                  onSelect={this.handleConfidenceChange}
+                  eventKey={label}
+                  data-test-id={label}
+                  isActive={label === currentConfidenceLevel.label}
+                >
+                  {label}
+                </DropdownItem>
+              ))}
+            </DropdownControl>
+          </TrendsDropdown>
+          <TrendsDropdown>
+            <DropdownControl
+              buttonProps={{prefix: t('Display')}}
+              label={currentTrendFunction.label}
+            >
+              {TRENDS_FUNCTIONS.map(({label, field}) => (
+                <DropdownItem
+                  key={field}
+                  onSelect={this.handleTrendFunctionChange}
+                  eventKey={field}
+                  data-test-id={field}
+                  isActive={field === currentTrendFunction.field}
+                >
+                  {label}
+                </DropdownItem>
+              ))}
+            </DropdownControl>
+          </TrendsDropdown>
+        </StyledSearchContainer>
+        <TrendsLayoutContainer>
+          <ChangedTransactions
+            trendChangeType={TrendChangeType.IMPROVED}
+            previousTrendFunction={previousTrendFunction}
+            trendView={trendView}
+            location={location}
+            setError={setError}
+          />
+          <ChangedTransactions
+            trendChangeType={TrendChangeType.REGRESSION}
+            previousTrendFunction={previousTrendFunction}
+            trendView={trendView}
+            location={location}
+            setError={setError}
+          />
+        </TrendsLayoutContainer>
+      </DefaultTrends>
     );
   }
 }

tests/acceptance/test_performance_trends.py

@@ -13,11 +13,6 @@ from sentry.utils.samples import load_data
 
 from .page_objects.base import BasePage
 
-FEATURE_NAMES = (
-    "organizations:trends",
-    "organizations:performance-view",
-)
-
 
 class PerformanceTrendsTest(AcceptanceTestCase, SnubaTestCase):
     def make_trend(
@@ -71,7 +66,7 @@ class PerformanceTrendsTest(AcceptanceTestCase, SnubaTestCase):
 
         self.project.update(flags=F("flags").bitor(Project.flags.has_transactions))
 
-        with self.feature(FEATURE_NAMES):
+        with self.feature("organizations:performance-view"):
             self.browser.get(self.path)
             self.page.wait_until_loaded()
             trend_item = '[data-test-id="trends-list-item-regression"]'

tests/js/spec/views/performance/landing.spec.jsx

@@ -29,13 +29,12 @@ function initializeData(projects, query, features = FEATURES) {
 }
 
 function initializeTrendsData(query, addDefaultQuery = true) {
-  const features = [...FEATURES, 'trends'];
   const projects = [
     TestStubs.Project({id: '1', firstTransactionEvent: false}),
     TestStubs.Project({id: '2', firstTransactionEvent: true}),
   ];
   const organization = TestStubs.Organization({
-    features,
+    FEATURES,
     projects,
   });
 
@@ -248,7 +247,7 @@ describe('Performance > Landing', function () {
     wrapper.update();
 
     // Check number of rendered tab buttons
-    expect(wrapper.find('ButtonBar Button')).toHaveLength(2);
+    expect(wrapper.find('ButtonBar Button')).toHaveLength(3);
 
     // No onboarding should show.
     expect(wrapper.find('Onboarding')).toHaveLength(0);
@@ -547,7 +546,7 @@ describe('Performance > Landing', function () {
     wrapper.update();
 
     // Check number of rendered tab buttons
-    expect(wrapper.find('ButtonBar Button')).toHaveLength(2);
+    expect(wrapper.find('ButtonBar Button')).toHaveLength(3);
 
     // Check to see if the key transaction column is not there
     expect(wrapper.find('IconStar[data-test-id="key-transaction-header"]')).toHaveLength(
@@ -574,7 +573,7 @@ describe('Performance > Landing', function () {
     wrapper.update();
 
     // Check number of rendered tab buttons
-    expect(wrapper.find('ButtonBar Button')).toHaveLength(1);
+    expect(wrapper.find('ButtonBar Button')).toHaveLength(2);
 
     // Check to see if the key transaction column is there
     expect(wrapper.find('IconStar[data-test-id="key-transaction-header"]')).toHaveLength(

tests/js/spec/views/performance/transactionSummary.spec.jsx

@@ -7,11 +7,8 @@ import {mountWithTheme} from 'sentry-test/enzyme';
 import ProjectsStore from 'app/stores/projectsStore';
 import TransactionSummary from 'app/views/performance/transactionSummary';
 
-function initializeData({hasTrendsFeature} = {}) {
+function initializeData() {
   const features = ['discover-basic', 'performance-view'];
-  if (hasTrendsFeature) {
-    features.push('trends');
-  }
   const organization = TestStubs.Organization({
     features,
     projects: [TestStubs.Project()],
@@ -358,44 +355,4 @@ describe('Performance > TransactionSummary', function () {
       },
     });
   });
-
-  it('Show trend display with beta feature', async function () {
-    const initialData = initializeData({hasTrendsFeature: true});
-    const wrapper = mountWithTheme(
-      <TransactionSummary
-        organization={initialData.organization}
-        location={initialData.router.location}
-      />,
-      initialData.routerContext
-    );
-    await tick();
-    wrapper.update();
-
-    const displayDropdown = wrapper.find('ChartControls OptionSelector');
-    expect(displayDropdown).toHaveLength(1);
-
-    const displayItems = displayDropdown.find('DropdownItem');
-    expect(displayItems).toHaveLength(4);
-
-    expect(displayItems.at(3).text()).toEqual('Trends');
-  });
-
-  it('Do not show trend display without beta feature', async function () {
-    const initialData = initializeData();
-    const wrapper = mountWithTheme(
-      <TransactionSummary
-        organization={initialData.organization}
-        location={initialData.router.location}
-      />,
-      initialData.routerContext
-    );
-    await tick();
-    wrapper.update();
-
-    const displayDropdown = wrapper.find('ChartControls OptionSelector');
-    expect(displayDropdown).toHaveLength(1);
-
-    const displayItems = displayDropdown.find('DropdownItem');
-    expect(displayItems).toHaveLength(3);
-  });
 });

tests/js/spec/views/performance/trends.spec.jsx

@@ -48,7 +48,7 @@ function selectConfidenceLevel(wrapper, label) {
 }
 
 function initializeData(projects, query) {
-  const features = ['transaction-event', 'performance-view', 'trends'];
+  const features = ['transaction-event', 'performance-view'];
   const organization = TestStubs.Organization({
     features,
     projects,