feat(perf): Landing change frontend tabs (#30448)

To avoid confusion due to specific performance terms (pageload etc.) we're going to split the frontend tabs into both 'Web Vitals' and a general 'Frontend' tab. This way it's more clear that one view is specific to improve web vitals, which is only a portion of frontend performance. The other tab can handle overall frontend performance, including 'interactions' if we add them in the future.

static/app/views/performance/content.tsx

@@ -54,7 +54,7 @@ function PerformanceContent({selection, location, demoMode}: Props) {
   const previousDateTime = usePrevious(selection.datetime);
 
   const [state, setState] = useState<State>({
-    eventView: generatePerformanceEventView(location, projects, {
+    eventView: generatePerformanceEventView(location, organization, projects, {
       isMetricsData,
     }),
     error: undefined,
@@ -74,7 +74,7 @@ function PerformanceContent({selection, location, demoMode}: Props) {
   useEffect(() => {
     setState({
       ...state,
-      eventView: generatePerformanceEventView(location, projects, {
+      eventView: generatePerformanceEventView(location, organization, projects, {
         isMetricsData,
       }),
     });

static/app/views/performance/data.tsx

@@ -675,6 +675,7 @@ function generateFrontendPageloadPerformanceEventView(
 
 function generateFrontendOtherPerformanceEventView(
   location: Location,
+  organization: Organization,
   isMetricsData: boolean
 ): EventView {
   const {query} = location;
@@ -734,14 +735,18 @@ function generateFrontendOtherPerformanceEventView(
   savedQuery.query = conditions.formatString();
 
   const eventView = EventView.fromNewQueryWithLocation(savedQuery, location);
-  eventView.additionalConditions
-    .addFilterValues('event.type', ['transaction'])
-    .addFilterValues('!transaction.op', ['pageload']);
+  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;
 }
 
 export function generatePerformanceEventView(
   location: Location,
+  organization: Organization,
   projects: Project[],
   {isTrends = false, isMetricsData = false} = {}
 ) {
@@ -756,7 +761,11 @@ export function generatePerformanceEventView(
     case LandingDisplayField.FRONTEND_PAGELOAD:
       return generateFrontendPageloadPerformanceEventView(location, isMetricsData);
     case LandingDisplayField.FRONTEND_OTHER:
-      return generateFrontendOtherPerformanceEventView(location, isMetricsData);
+      return generateFrontendOtherPerformanceEventView(
+        location,
+        organization, // TODO(k-fish): Remove with tag change
+        isMetricsData
+      );
     case LandingDisplayField.BACKEND:
       return generateBackendPerformanceEventView(location, isMetricsData);
     case LandingDisplayField.MOBILE:

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

@@ -32,7 +32,7 @@ import {MobileView} from './views/mobileView';
 import {
   getCurrentLandingDisplay,
   handleLandingDisplayChange,
-  LANDING_DISPLAYS,
+  LANDING_V3_DISPLAYS,
   LandingDisplayField,
 } from './utils';
 
@@ -74,7 +74,7 @@ export function PerformanceLanding(props: Props) {
 
   const showOnboarding = shouldShowOnboarding;
 
-  const shownLandingDisplays = LANDING_DISPLAYS.filter(
+  const shownLandingDisplays = LANDING_V3_DISPLAYS.filter(
     ({isShown}) => !isShown || isShown(organization)
   );
 

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

@@ -61,6 +61,31 @@ export const LANDING_DISPLAYS = [
   },
 ];
 
+export const LANDING_V3_DISPLAYS = [
+  {
+    label: 'All Transactions',
+    field: LandingDisplayField.ALL,
+  },
+  {
+    label: 'Web Vitals',
+    field: LandingDisplayField.FRONTEND_PAGELOAD,
+  },
+  {
+    label: 'Frontend',
+    field: LandingDisplayField.FRONTEND_OTHER,
+  },
+  {
+    label: 'Backend',
+    field: LandingDisplayField.BACKEND,
+  },
+  {
+    label: 'Mobile',
+    field: LandingDisplayField.MOBILE,
+    isShown: (organization: Organization) =>
+      organization.features.includes('performance-mobile-vitals'),
+  },
+];
+
 export function excludeTransaction(
   transaction: string | React.ReactText,
   props: {eventView: EventView; location: Location}

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

@@ -34,16 +34,26 @@ class TrendsSummary extends Component<Props, State> {
   static getDerivedStateFromProps(nextProps: Readonly<Props>, prevState: State): State {
     return {
       ...prevState,
-      eventView: generatePerformanceEventView(nextProps.location, nextProps.projects, {
-        isTrends: true,
-      }),
+      eventView: generatePerformanceEventView(
+        nextProps.location,
+        nextProps.organization,
+        nextProps.projects,
+        {
+          isTrends: true,
+        }
+      ),
     };
   }
 
   state: State = {
-    eventView: generatePerformanceEventView(this.props.location, this.props.projects, {
-      isTrends: true,
-    }),
+    eventView: generatePerformanceEventView(
+      this.props.location,
+      this.props.organization,
+      this.props.projects,
+      {
+        isTrends: true,
+      }
+    ),
     error: undefined,
   };