chore(perf): Remove performance-landing-widgets and mobile-vitals feature flags (#31806)

* chore(perf): Remove performance-landing-widgets feature flag

* chore(perf): Remove performance-landing-widgets feature flag

* chore(perf): Remove old landing page

* chore(perf): Remove mobile vitals feature flag from measurements component

* chore(perf): Remove old landing displays

* revert backend flags

* fix backend flags

* update tests

static/app/components/events/searchBar.tsx

@@ -131,9 +131,8 @@ class SearchBar extends React.PureComponent<SearchBarProps> {
   }
 
   render() {
-    const {organization} = this.props;
     return (
-      <Measurements organization={organization}>
+      <Measurements>
         {({measurements}) => {
           const tags = this.getTagList(measurements);
           return (

static/app/components/modals/addDashboardWidgetModal.tsx

@@ -686,7 +686,7 @@ class AddDashboardWidgetModal extends React.Component<Props, State> {
       default:
         return (
           <React.Fragment>
-            <Measurements organization={organization}>
+            <Measurements>
               {({measurements}) => {
                 const measurementKeys = Object.values(measurements).map(({key}) => key);
                 const amendedFieldOptions = fieldOptions(measurementKeys);

static/app/utils/measurements/measurements.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import {Organization} from 'sentry/types';
 import {MobileVital, WebVital} from 'sentry/utils/discover/fields';
 import {
   MOBILE_VITAL_DETAILS,
@@ -40,13 +39,10 @@ type ChildrenProps = {
 
 type Props = {
   children: (props: ChildrenProps) => React.ReactNode;
-  organization: Organization;
 };
 
-function Measurements({organization, children}: Props) {
-  const measurements = organization.features.includes('performance-mobile-vitals')
-    ? {...WEB_MEASUREMENTS, ...MOBILE_MEASUREMENTS}
-    : WEB_MEASUREMENTS;
+function Measurements({children}: Props) {
+  const measurements = {...WEB_MEASUREMENTS, ...MOBILE_MEASUREMENTS};
   return <React.Fragment>{children({measurements})}</React.Fragment>;
 }
 

static/app/views/dashboardsV2/widgetBuilder/eventWidget/index.tsx

@@ -300,7 +300,7 @@ class EventWidget extends AsyncView<Props, State> {
                 errors={widgetErrors?.queries}
               />
             </BuildStep>
-            <Measurements organization={organization}>
+            <Measurements>
               {({measurements}) => {
                 const measurementKeys = Object.values(measurements).map(({key}) => key);
                 const amendedFieldOptions = fieldOptions(measurementKeys);

static/app/views/eventsV2/table/index.tsx

@@ -160,7 +160,7 @@ class Table extends PureComponent<TableProps, TableState> {
   };
 
   render() {
-    const {eventView, organization, tags} = this.props;
+    const {eventView, tags} = this.props;
     const {pageLinks, tableData, isLoading, error} = this.state;
     const tagKeys = Object.values(tags).map(({key}) => key);
 
@@ -170,7 +170,7 @@ class Table extends PureComponent<TableProps, TableState> {
 
     return (
       <Container>
-        <Measurements organization={organization}>
+        <Measurements>
           {({measurements}) => {
             const measurementKeys = Object.values(measurements).map(({key}) => key);
 

static/app/views/performance/content.tsx

@@ -5,18 +5,10 @@ import {Location} from 'history';
 import isEqual from 'lodash/isEqual';
 
 import {loadOrganizationTags} from 'sentry/actionCreators/tags';
-import Feature from 'sentry/components/acl/feature';
-import Alert from 'sentry/components/alert';
-import Button from 'sentry/components/button';
-import GlobalSdkUpdateAlert from 'sentry/components/globalSdkUpdateAlert';
-import NoProjectMessage from 'sentry/components/noProjectMessage';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
-import PageHeading from 'sentry/components/pageHeading';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
-import {IconFlag} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {PageContent, PageHeader} from 'sentry/styles/organization';
 import {PageFilters} from 'sentry/types';
 import {trackAnalyticsEvent} from 'sentry/utils/analytics';
 import {PerformanceEventViewProvider} from 'sentry/utils/performance/contexts/performanceEventViewContext';
@@ -26,11 +18,9 @@ import usePrevious from 'sentry/utils/usePrevious';
 import useProjects from 'sentry/utils/useProjects';
 import withPageFilters from 'sentry/utils/withPageFilters';
 
-import LandingContent from './landing/content';
 import {DEFAULT_STATS_PERIOD, generatePerformanceEventView} from './data';
 import {PerformanceLanding} from './landing';
 import {useMetricsSwitch} from './metricsSwitch';
-import Onboarding from './onboarding';
 import {addRoutePerformanceContext, handleTrendsClick} from './utils';
 
 type Props = {
@@ -76,8 +66,6 @@ function PerformanceContent({selection, location, demoMode}: Props) {
     }
   }, [selection.datetime]);
 
-  const {error} = state;
-
   function setError(newError?: string) {
     if (
       typeof newError === 'object' ||
@@ -109,19 +97,7 @@ function PerformanceContent({selection, location, demoMode}: Props) {
     });
   }
 
-  function renderError() {
-    if (!error) {
-      return null;
-    }
-
-    return (
-      <Alert type="error" icon={<IconFlag size="md" />}>
-        {error}
-      </Alert>
-    );
-  }
-
-  const eventView = generatePerformanceEventView(location, organization, projects, {
+  const eventView = generatePerformanceEventView(location, projects, {
     isMetricsData,
   });
 
@@ -152,69 +128,6 @@ function PerformanceContent({selection, location, demoMode}: Props) {
     );
   }
 
-  function renderBody() {
-    const showOnboarding = shouldShowOnboarding();
-
-    return (
-      <PageContent>
-        <NoProjectMessage organization={organization}>
-          <PageHeader>
-            <PageHeading>{t('Performance')}</PageHeading>
-            {!showOnboarding && (
-              <Button
-                priority="primary"
-                data-test-id="landing-header-trends"
-                onClick={() => handleTrendsClick({location, organization})}
-              >
-                {t('View Trends')}
-              </Button>
-            )}
-          </PageHeader>
-          <GlobalSdkUpdateAlert />
-          {renderError()}
-          {showOnboarding ? (
-            <Onboarding
-              organization={organization}
-              project={
-                selection.projects.length > 0
-                  ? // If some projects selected, use the first selection
-                    projects.find(
-                      project => selection.projects[0].toString() === project.id
-                    ) || projects[0]
-                  : // Otherwise, use the first project in the org
-                    projects[0]
-              }
-            />
-          ) : (
-            <LandingContent
-              eventView={eventView}
-              projects={projects}
-              organization={organization}
-              setError={setError}
-              handleSearch={handleSearch}
-            />
-          )}
-        </NoProjectMessage>
-      </PageContent>
-    );
-  }
-
-  function renderLandingV3() {
-    return (
-      <PerformanceLanding
-        eventView={eventView}
-        setError={setError}
-        handleSearch={handleSearch}
-        handleTrendsClick={() => handleTrendsClick({location, organization})}
-        shouldShowOnboarding={shouldShowOnboarding()}
-        organization={organization}
-        location={location}
-        projects={projects}
-        selection={selection}
-      />
-    );
-  }
-
   return (
     <SentryDocumentTitle title={t('Performance')} orgSlug={organization.slug}>
       <PerformanceEventViewProvider value={{eventView}}>
@@ -228,9 +141,17 @@ function PerformanceContent({selection, location, demoMode}: Props) {
             },
           }}
         >
-          <Feature features={['organizations:performance-landing-widgets']}>
-            {({hasFeature}) => (hasFeature ? renderLandingV3() : renderBody())}
-          </Feature>
+          <PerformanceLanding
+            eventView={eventView}
+            setError={setError}
+            handleSearch={handleSearch}
+            handleTrendsClick={() => handleTrendsClick({location, organization})}
+            shouldShowOnboarding={shouldShowOnboarding()}
+            organization={organization}
+            location={location}
+            projects={projects}
+            selection={selection}
+          />
         </PageFiltersContainer>
       </PerformanceEventViewProvider>
     </SentryDocumentTitle>

static/app/views/performance/data.tsx

@@ -708,7 +708,6 @@ function generateFrontendPageloadPerformanceEventView(
 
 function generateFrontendOtherPerformanceEventView(
   location: Location,
-  organization: Organization,
   isMetricsData: boolean
 ): EventView {
   const {query} = location;
@@ -773,11 +772,6 @@ function generateFrontendOtherPerformanceEventView(
   // in case the metric switch is disabled (for now).
   if (!isMetricsData) {
     eventView.additionalConditions.addFilterValues('event.type', ['transaction']);
-
-    if (!organization.features.includes('organizations:performance-landing-widgets')) {
-      // Original landing page still should use Frontend (other) with pageload excluded.
-      eventView.additionalConditions.addFilterValues('!transaction.op', ['pageload']);
-    }
   }
 
   return eventView;
@@ -785,7 +779,6 @@ function generateFrontendOtherPerformanceEventView(
 
 export function generatePerformanceEventView(
   location: Location,
-  organization: Organization,
   projects: Project[],
   {isTrends = false, isMetricsData = false} = {}
 ) {
@@ -800,11 +793,7 @@ export function generatePerformanceEventView(
     case LandingDisplayField.FRONTEND_PAGELOAD:
       return generateFrontendPageloadPerformanceEventView(location, isMetricsData);
     case LandingDisplayField.FRONTEND_OTHER:
-      return generateFrontendOtherPerformanceEventView(
-        location,
-        organization, // TODO(k-fish): Remove with tag change
-        isMetricsData
-      );
+      return generateFrontendOtherPerformanceEventView(location, isMetricsData);
     case LandingDisplayField.BACKEND:
       return generateBackendPerformanceEventView(location, isMetricsData);
     case LandingDisplayField.MOBILE:

static/app/views/performance/landing/content.tsx

@@ -1,337 +0,0 @@
-import {Component, Fragment} from 'react';
-import {browserHistory, withRouter, WithRouterProps} from 'react-router';
-import styled from '@emotion/styled';
-import {Location} from 'history';
-
-import DropdownControl, {DropdownItem} from 'sentry/components/dropdownControl';
-import SearchBar from 'sentry/components/events/searchBar';
-import LoadingIndicator from 'sentry/components/loadingIndicator';
-import * as TeamKeyTransactionManager from 'sentry/components/performance/teamKeyTransactionsManager';
-import {MAX_QUERY_LENGTH} from 'sentry/constants';
-import {t} from 'sentry/locale';
-import space from 'sentry/styles/space';
-import {Organization, Project} from 'sentry/types';
-import {trackAnalyticsEvent} from 'sentry/utils/analytics';
-import EventView from 'sentry/utils/discover/eventView';
-import {generateAggregateFields} from 'sentry/utils/discover/fields';
-import {decodeScalar} from 'sentry/utils/queryString';
-import Teams from 'sentry/utils/teams';
-import {MutableSearch} from 'sentry/utils/tokenizeSearch';
-
-import Charts from '../charts/index';
-import {
-  getBackendAxisOptions,
-  getFrontendAxisOptions,
-  getFrontendOtherAxisOptions,
-  getMobileAxisOptions,
-} from '../data';
-import Table from '../table';
-import {getTransactionSearchQuery} from '../utils';
-
-import DoubleAxisDisplay from './display/doubleAxisDisplay';
-import {
-  BACKEND_COLUMN_TITLES,
-  FRONTEND_OTHER_COLUMN_TITLES,
-  FRONTEND_PAGELOAD_COLUMN_TITLES,
-  MOBILE_COLUMN_TITLES,
-  REACT_NATIVE_COLUMN_TITLES,
-} from './data';
-import {
-  checkIsReactNative,
-  getCurrentLandingDisplay,
-  getDefaultDisplayFieldForPlatform,
-  getDisplayAxes,
-  LANDING_DISPLAYS,
-  LandingDisplayField,
-  LEFT_AXIS_QUERY_KEY,
-  RIGHT_AXIS_QUERY_KEY,
-} from './utils';
-import {BackendCards, FrontendCards, MobileCards} from './vitalsCards';
-
-type Props = {
-  eventView: EventView;
-  handleSearch: (searchQuery: string) => void;
-  location: Location;
-  organization: Organization;
-  projects: Project[];
-  setError: (msg: string | undefined) => void;
-} & WithRouterProps;
-
-type State = {};
-class LandingContent extends Component<Props, State> {
-  getSummaryConditions(query: string) {
-    const parsed = new MutableSearch(query);
-    parsed.freeText = [];
-
-    return parsed.formatString();
-  }
-
-  handleLandingDisplayChange = (field: string) => {
-    const {location, organization, eventView, projects} = this.props;
-
-    const newQuery = {...location.query};
-
-    delete newQuery[LEFT_AXIS_QUERY_KEY];
-    delete newQuery[RIGHT_AXIS_QUERY_KEY];
-
-    const defaultDisplay = getDefaultDisplayFieldForPlatform(projects, eventView);
-    const currentDisplay = decodeScalar(location.query.landingDisplay);
-
-    // Transaction op can affect the display and show no results if it is explicitly set.
-    const query = decodeScalar(location.query.query, '');
-    const searchConditions = new MutableSearch(query);
-    searchConditions.removeFilter('transaction.op');
-
-    trackAnalyticsEvent({
-      eventKey: 'performance_views.landingv2.display_change',
-      eventName: 'Performance Views: Landing v2 Display Change',
-      organization_id: parseInt(organization.id, 10),
-      change_to_display: field,
-      default_display: defaultDisplay,
-      current_display: currentDisplay,
-      is_default: defaultDisplay === currentDisplay,
-    });
-
-    browserHistory.push({
-      pathname: location.pathname,
-      query: {
-        ...newQuery,
-        query: searchConditions.formatString(),
-        landingDisplay: field,
-      },
-    });
-  };
-
-  renderSelectedDisplay(display) {
-    switch (display) {
-      case LandingDisplayField.ALL:
-        return this.renderLandingAll();
-      case LandingDisplayField.FRONTEND_PAGELOAD:
-        return this.renderLandingFrontend(true);
-      case LandingDisplayField.FRONTEND_OTHER:
-        return this.renderLandingFrontend(false);
-      case LandingDisplayField.BACKEND:
-        return this.renderLandingBackend();
-      case LandingDisplayField.MOBILE:
-        return this.renderLandingMobile();
-      default:
-        throw new Error(`Unknown display: ${display}`);
-    }
-  }
-
-  renderLandingFrontend = isPageload => {
-    const {organization, location, projects, eventView, setError} = this.props;
-
-    const columnTitles = isPageload
-      ? FRONTEND_PAGELOAD_COLUMN_TITLES
-      : FRONTEND_OTHER_COLUMN_TITLES;
-
-    const axisOptions = isPageload
-      ? getFrontendAxisOptions(organization)
-      : getFrontendOtherAxisOptions(organization);
-    const {leftAxis, rightAxis} = getDisplayAxes(axisOptions, location);
-
-    return (
-      <Fragment>
-        {isPageload && (
-          <FrontendCards
-            eventView={eventView}
-            organization={organization}
-            location={location}
-            projects={projects}
-          />
-        )}
-        <DoubleAxisDisplay
-          eventView={eventView}
-          organization={organization}
-          location={location}
-          axisOptions={axisOptions}
-          leftAxis={leftAxis}
-          rightAxis={rightAxis}
-        />
-        <Table
-          eventView={eventView}
-          projects={projects}
-          organization={organization}
-          location={location}
-          setError={setError}
-          summaryConditions={eventView.getQueryWithAdditionalConditions()}
-          columnTitles={columnTitles}
-        />
-      </Fragment>
-    );
-  };
-
-  renderLandingBackend = () => {
-    const {organization, location, projects, eventView, setError} = this.props;
-
-    const axisOptions = getBackendAxisOptions(organization);
-    const {leftAxis, rightAxis} = getDisplayAxes(axisOptions, location);
-
-    const columnTitles = BACKEND_COLUMN_TITLES;
-
-    return (
-      <Fragment>
-        <BackendCards
-          eventView={eventView}
-          organization={organization}
-          location={location}
-        />
-        <DoubleAxisDisplay
-          eventView={eventView}
-          organization={organization}
-          location={location}
-          axisOptions={axisOptions}
-          leftAxis={leftAxis}
-          rightAxis={rightAxis}
-        />
-        <Table
-          eventView={eventView}
-          projects={projects}
-          organization={organization}
-          location={location}
-          setError={setError}
-          summaryConditions={eventView.getQueryWithAdditionalConditions()}
-          columnTitles={columnTitles}
-        />
-      </Fragment>
-    );
-  };
-
-  renderLandingMobile = () => {
-    const {organization, location, projects, eventView, setError} = this.props;
-
-    const axisOptions = getMobileAxisOptions(organization);
-    const {leftAxis, rightAxis} = getDisplayAxes(axisOptions, location);
-
-    // only react native should contain the stall percentage column
-    const isReactNative = checkIsReactNative(eventView);
-    const columnTitles = isReactNative
-      ? REACT_NATIVE_COLUMN_TITLES
-      : MOBILE_COLUMN_TITLES;
-
-    return (
-      <Fragment>
-        <MobileCards
-          eventView={eventView}
-          organization={organization}
-          location={location}
-          showStallPercentage={isReactNative}
-        />
-        <DoubleAxisDisplay
-          eventView={eventView}
-          organization={organization}
-          location={location}
-          axisOptions={axisOptions}
-          leftAxis={leftAxis}
-          rightAxis={rightAxis}
-        />
-        <Table
-          eventView={eventView}
-          projects={projects}
-          organization={organization}
-          location={location}
-          setError={setError}
-          summaryConditions={eventView.getQueryWithAdditionalConditions()}
-          columnTitles={columnTitles}
-        />
-      </Fragment>
-    );
-  };
-
-  renderLandingAll = () => {
-    const {organization, location, router, projects, eventView, setError} = this.props;
-
-    return (
-      <Fragment>
-        <Charts
-          eventView={eventView}
-          organization={organization}
-          location={location}
-          router={router}
-        />
-        <Table
-          eventView={eventView}
-          projects={projects}
-          organization={organization}
-          location={location}
-          setError={setError}
-          summaryConditions={eventView.getQueryWithAdditionalConditions()}
-        />
-      </Fragment>
-    );
-  };
-
-  render() {
-    const {organization, location, eventView, projects, handleSearch} = this.props;
-
-    const currentLandingDisplay = getCurrentLandingDisplay(location, projects, eventView);
-    const filterString = getTransactionSearchQuery(location, eventView.query);
-
-    return (
-      <Fragment>
-        <SearchContainer>
-          <SearchBar
-            searchSource="performance_landing"
-            organization={organization}
-            projectIds={eventView.project}
-            query={filterString}
-            fields={generateAggregateFields(
-              organization,
-              [...eventView.fields, {field: 'tps()'}],
-              ['epm()', 'eps()']
-            )}
-            onSearch={handleSearch}
-            maxQueryLength={MAX_QUERY_LENGTH}
-          />
-          <DropdownControl
-            buttonProps={{prefix: t('Display')}}
-            label={currentLandingDisplay.label}
-          >
-            {LANDING_DISPLAYS.filter(
-              ({isShown}) => !isShown || isShown(organization)
-            ).map(({label, field}) => (
-              <DropdownItem
-                key={field}
-                onSelect={this.handleLandingDisplayChange}
-                eventKey={field}
-                data-test-id={field}
-                isActive={field === currentLandingDisplay.field}
-              >
-                {label}
-              </DropdownItem>
-            ))}
-          </DropdownControl>
-        </SearchContainer>
-        <Teams provideUserTeams>
-          {({teams, initiallyLoaded}) =>
-            initiallyLoaded ? (
-              <TeamKeyTransactionManager.Provider
-                organization={organization}
-                teams={teams}
-                selectedTeams={['myteams']}
-                selectedProjects={eventView.project.map(String)}
-              >
-                {this.renderSelectedDisplay(currentLandingDisplay.field)}
-              </TeamKeyTransactionManager.Provider>
-            ) : (
-              <LoadingIndicator />
-            )
-          }
-        </Teams>
-      </Fragment>
-    );
-  }
-}
-
-const SearchContainer = styled('div')`
-  display: grid;
-  gap: ${space(2)};
-  margin-bottom: ${space(2)};
-
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    grid-template-columns: 1fr min-content;
-  }
-`;
-
-export default withRouter(LandingContent);

static/app/views/performance/landing/index.tsx

@@ -35,7 +35,7 @@ import {
   getDefaultDisplayForPlatform,
   getLandingDisplayFromParam,
   handleLandingDisplayChange,
-  LANDING_V3_DISPLAYS,
+  LANDING_DISPLAYS,
   LandingDisplayField,
 } from './utils';
 
@@ -101,10 +101,6 @@ export function PerformanceLanding(props: Props) {
 
   const showOnboarding = shouldShowOnboarding;
 
-  const shownLandingDisplays = LANDING_V3_DISPLAYS.filter(
-    ({isShown}) => !isShown || isShown(organization)
-  );
-
   const ViewComponent = fieldToViewMap[landingDisplay.field];
 
   return (
@@ -129,7 +125,7 @@ export function PerformanceLanding(props: Props) {
         </Layout.HeaderActions>
 
         <Layout.HeaderNavTabs>
-          {shownLandingDisplays.map(({label, field}) => (
+          {LANDING_DISPLAYS.map(({label, field}) => (
             <li key={label} className={landingDisplay.field === field ? 'active' : ''}>
               <a
                 href="#"

static/app/views/performance/landing/utils.tsx

@@ -37,31 +37,6 @@ export enum LandingDisplayField {
 }
 
 export const LANDING_DISPLAYS = [
-  {
-    label: 'All Transactions',
-    field: LandingDisplayField.ALL,
-  },
-  {
-    label: 'Frontend (Pageload)',
-    field: LandingDisplayField.FRONTEND_PAGELOAD,
-  },
-  {
-    label: 'Frontend (Other)',
-    field: LandingDisplayField.FRONTEND_OTHER,
-  },
-  {
-    label: 'Backend',
-    field: LandingDisplayField.BACKEND,
-  },
-  {
-    label: 'Mobile',
-    field: LandingDisplayField.MOBILE,
-    isShown: (organization: Organization) =>
-      organization.features.includes('performance-mobile-vitals'),
-  },
-];
-
-export const LANDING_V3_DISPLAYS = [
   {
     label: 'All Transactions',
     field: LandingDisplayField.ALL,
@@ -81,8 +56,6 @@ export const LANDING_V3_DISPLAYS = [
   {
     label: 'Mobile',
     field: LandingDisplayField.MOBILE,
-    isShown: (organization: Organization) =>
-      organization.features.includes('performance-mobile-vitals'),
   },
 ];