feat(trends): Add a check for metrics compatibility (#49698)

We can't assume all orgs have metrics, so adding a cardinality check. If
`forceTransactionsOnly` is true then defaulting to old trends.

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

@@ -26,6 +26,7 @@ import {space} from 'sentry/styles/space';
 import {AvatarProject, Organization, Project} from 'sentry/types';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {formatPercentage, getDuration} from 'sentry/utils/formatters';
+import {useMetricsCardinalityContext} from 'sentry/utils/performance/contexts/metricsCardinality';
 import TrendsDiscoverQuery from 'sentry/utils/performance/trends/trendsDiscoverQuery';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
@@ -237,6 +238,8 @@ function ChangedTransactions(props: Props) {
   } = props;
   const api = useApi();
 
+  const {isLoading: isCardinalityCheckLoading, outcome} = useMetricsCardinalityContext();
+
   const trendView = props.trendView.clone();
   const chartTitle = getChartTitle(trendChangeType);
   modifyTrendView(trendView, location, trendChangeType, projects, organization);
@@ -260,7 +263,7 @@ function ChangedTransactions(props: Props) {
       cursor={cursor}
       limit={5}
       setError={error => setError(error?.message)}
-      withBreakpoint={withBreakpoint}
+      withBreakpoint={withBreakpoint && !outcome?.forceTransactionsOnly}
     >
       {({isLoading, trendsData, pageLinks}) => {
         const trendFunction = getCurrentTrendFunction(location);
@@ -298,10 +301,10 @@ function ChangedTransactions(props: Props) {
           <TransactionsListContainer data-test-id="changed-transactions">
             <TrendsTransactionPanel>
               <StyledHeaderTitleLegend>
-                {chartTitle} {!withBreakpoint && 'Indexed'}
+                {chartTitle}
                 <QuestionTooltip size="sm" position="top" title={titleTooltipContent} />
               </StyledHeaderTitleLegend>
-              {isLoading ? (
+              {isLoading || isCardinalityCheckLoading ? (
                 <LoadingIndicator
                   style={{
                     margin: '237px auto',

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

@@ -7,6 +7,7 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {Organization, PageFilters, Project} from 'sentry/types';
 import EventView from 'sentry/utils/discover/eventView';
+import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metricsCardinality';
 import withApi from 'sentry/utils/withApi';
 import withOrganization from 'sentry/utils/withOrganization';
 import withPageFilters from 'sentry/utils/withPageFilters';
@@ -78,11 +79,19 @@ class TrendsSummary extends Component<Props, State> {
   }
 
   render() {
-    const {organization} = this.props;
+    const {organization, location} = this.props;
 
     return (
       <SentryDocumentTitle title={this.getDocumentTitle()} orgSlug={organization.slug}>
-        <Layout.Page>{this.renderContent()}</Layout.Page>
+        <Layout.Page>
+          <MetricsCardinalityProvider
+            sendOutcomeAnalytics
+            organization={organization}
+            location={location}
+          >
+            {this.renderContent()}
+          </MetricsCardinalityProvider>
+        </Layout.Page>
       </SentryDocumentTitle>
     );
   }