* fix(performance-landing): Show different column headers in react native view (#30838)

React Native has different columns than generic mobile views for now, so
the column headers need to reference these

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

@@ -37,6 +37,7 @@ import {
   REACT_NATIVE_COLUMN_TITLES,
 } from './data';
 import {
+  checkIsReactNative,
   getCurrentLandingDisplay,
   getDefaultDisplayFieldForPlatform,
   getDisplayAxes,
@@ -204,9 +205,7 @@ class LandingContent extends Component<Props, State> {
     const {leftAxis, rightAxis} = getDisplayAxes(axisOptions, location);
 
     // only react native should contain the stall percentage column
-    const isReactNative = Boolean(
-      eventView.getFields().find(field => field.includes('measurements.stall_percentage'))
-    );
+    const isReactNative = checkIsReactNative(eventView);
     const columnTitles = isReactNative
       ? REACT_NATIVE_COLUMN_TITLES
       : MOBILE_COLUMN_TITLES;

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

@@ -278,3 +278,10 @@ export function getDisplayAxes(options: AxisOption[], location: Location) {
     rightAxis,
   };
 }
+
+export function checkIsReactNative(eventView) {
+  // only react native should contain the stall percentage column
+  return Boolean(
+    eventView.getFields().find(field => field.includes('measurements.stall_percentage'))
+  );
+}

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

@@ -3,13 +3,17 @@ import {PerformanceDisplayProvider} from 'sentry/utils/performance/contexts/perf
 
 import Table from '../../table';
 import {PROJECT_PERFORMANCE_TYPE} from '../../utils';
-import {MOBILE_COLUMN_TITLES} from '../data';
+import {MOBILE_COLUMN_TITLES, REACT_NATIVE_COLUMN_TITLES} from '../data';
+import {checkIsReactNative} from '../utils';
 import {DoubleChartRow, TripleChartRow} from '../widgets/components/widgetChartRow';
 import {PerformanceWidgetSetting} from '../widgets/widgetDefinitions';
 
 import {BasePerformanceViewProps} from './types';
 
 export function MobileView(props: BasePerformanceViewProps) {
+  const columnTitles = checkIsReactNative(props.eventView)
+    ? REACT_NATIVE_COLUMN_TITLES
+    : MOBILE_COLUMN_TITLES;
   return (
     <PerformanceDisplayProvider value={{performanceType: PROJECT_PERFORMANCE_TYPE.ANY}}>
       <div>
@@ -34,7 +38,7 @@ export function MobileView(props: BasePerformanceViewProps) {
         />
         <Table
           {...props}
-          columnTitles={MOBILE_COLUMN_TITLES} // TODO(k-fish): Add react native column titles
+          columnTitles={columnTitles}
           setError={usePageError().setPageError}
         />
       </div>

tests/js/spec/views/performance/landing/index.spec.tsx

@@ -8,6 +8,8 @@ import TeamStore from 'sentry/stores/teamStore';
 import EventView from 'sentry/utils/discover/eventView';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 import {PerformanceLanding} from 'sentry/views/performance/landing';
+import {REACT_NATIVE_COLUMN_TITLES} from 'sentry/views/performance/landing/data';
+import * as utils from 'sentry/views/performance/landing/utils';
 import {LandingDisplayField} from 'sentry/views/performance/landing/utils';
 
 const WrappedComponent = ({data}) => {
@@ -153,6 +155,21 @@ describe('Performance > Landing > Index', function () {
     expect(wrapper.find('Table').exists()).toBe(true);
   });
 
+  it('renders react-native table headers in mobile view', async function () {
+    jest.spyOn(utils, 'checkIsReactNative').mockReturnValueOnce(true);
+    const data = initializeData({
+      query: {landingDisplay: LandingDisplayField.MOBILE},
+    });
+
+    wrapper = mountWithTheme(<WrappedComponent data={data} />, data.routerContext);
+    await tick();
+    wrapper.update();
+
+    const table = wrapper.find('Table');
+    expect(table.exists()).toBe(true);
+    expect(table.props().columnTitles).toEqual(REACT_NATIVE_COLUMN_TITLES);
+  });
+
   it('renders all transactions view', async function () {
     const data = initializeData({
       query: {landingDisplay: LandingDisplayField.ALL},