fix(mep): No compatible projects MEP alert (#37930)

This modifies the conditions for showing 'only view compatible projects' on the 'incompatible with server side sampling alert'. Previously it was possible if you enabled dynamic sampling but none of your projects were compatible to see this message, but clicking on the link would not do anything since you have no compatible projects to switch to. This changes the alert to only show the 'update sdk' CTA since that is the only action the user can do to start seeing metric-side data.

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

@@ -99,6 +99,22 @@ export function MetricsDataSwitcherAlert(
       </Link>
     );
     if (areMultipleProjectsSelected(props.eventView)) {
+      if ((props.compatibleProjects ?? []).length === 0) {
+        return (
+          <Alert
+            type="warning"
+            showIcon
+            data-test-id="landing-mep-alert-multi-project-all-incompatible"
+          >
+            {tct(
+              `A few projects are incompatible with server side sampling. To enable this feature [updateSDK].`,
+              {
+                updateSDK,
+              }
+            )}
+          </Alert>
+        );
+      }
       return (
         <Alert
           type="warning"

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

@@ -10,8 +10,10 @@ export function addMetricsDataMock(settings?: {
   metricsCount: number;
   nullCount: number;
   unparamCount: number;
+  compatibleProjects?: number[];
   dynamicSampledProjects?: number[];
 }) {
+  const compatible_projects = settings?.compatibleProjects ?? [];
   const metricsCount = settings?.metricsCount ?? 10;
   const unparamCount = settings?.unparamCount ?? 0;
   const nullCount = settings?.nullCount ?? 0;
@@ -21,7 +23,7 @@ export function addMetricsDataMock(settings?: {
     method: 'GET',
     url: `/organizations/org-slug/metrics-compatibility/`,
     body: {
-      compatible_projects: [],
+      compatible_projects,
       dynamic_sampling_projects,
     },
   });
@@ -234,11 +236,12 @@ describe('Performance > Landing > MetricsDataSwitcher', function () {
     ).toBeInTheDocument();
   });
 
-  it('renders with feature flag and any incompatible transactions on multiple projects', async function () {
+  it('renders with feature flag and any incompatible transactions on multiple projects with at least one compatible project', async function () {
     addMetricsDataMock({
       metricsCount: 100,
       nullCount: 1,
       unparamCount: 0,
+      compatibleProjects: [1],
     });
     const project = TestStubs.Project({id: 1});
     const project2 = TestStubs.Project({id: 2});
@@ -255,6 +258,28 @@ describe('Performance > Landing > MetricsDataSwitcher', function () {
     ).toBeInTheDocument();
   });
 
+  it('renders with feature flag and any incompatible transactions on multiple projects with no compatible project', async function () {
+    addMetricsDataMock({
+      metricsCount: 100,
+      nullCount: 1,
+      unparamCount: 0,
+      compatibleProjects: [],
+    });
+    const project = TestStubs.Project({id: 1});
+    const project2 = TestStubs.Project({id: 2});
+    const data = initializeData({
+      project: '-1',
+      projects: [project, project2],
+      features,
+    });
+
+    wrapper = render(<WrappedComponent data={data} />, data.routerContext);
+    expect(await screen.findByTestId('smart-search-bar')).toBeInTheDocument();
+    expect(
+      await screen.findByTestId('landing-mep-alert-multi-project-all-incompatible')
+    ).toBeInTheDocument();
+  });
+
   it('renders with feature flag and all other(unparam) transactions', async function () {
     addMetricsDataMock({
       metricsCount: 100,