fix(metrics): Handle project selection change (#75900)

Reset MRI and span metric condition if the currently selected value
cannot be found anymore.

static/app/components/metrics/metricQuerySelect.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react';
+import {useCallback, useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/button';
@@ -62,6 +62,13 @@ export function MetricQuerySelect({onChange, conditionId, mri}: Props) {
     pageFilters.selection.projects[0] === -1 ||
     pageFilters.selection.projects.length === 0;
 
+  // If the selected condition cannot be found, select the first condition
+  useEffect(() => {
+    if (!selectedCondition && spanConditions.length > 0) {
+      onChange(spanConditions[0].id);
+    }
+  }, [onChange, selectedCondition, spanConditions]);
+
   const options: SelectOptionOrSection<number>[] = useMemo(() => {
     let builtInOption: SelectOption<number> | null = null;
     const sectionMap = new Map<number, SelectOption<number>[]>();

static/app/components/metrics/mriSelect/index.tsx

@@ -19,6 +19,7 @@ import {
   isTransactionDuration,
   isTransactionMeasurement,
 } from 'sentry/utils/metrics';
+import {emptyMetricsQueryWidget} from 'sentry/utils/metrics/constants';
 import {
   hasCustomMetricsExtractionRules,
   hasMetricsNewInputs,
@@ -170,6 +171,14 @@ export const MRISelect = memo(function MRISelect({
   const metricsWithDuplicateNames = useMetricsWithDuplicateNames(metricsMeta);
   const filteredMRIs = useFilteredMRIs(metricsMeta, inputValue, mriMode);
 
+  // If the mri is not in the list of metrics, set it to the default metric
+  const selectedMeta = metricsMeta.find(metric => metric.mri === value);
+  useEffect(() => {
+    if (!selectedMeta) {
+      onChange(emptyMetricsQueryWidget.mri);
+    }
+  }, [onChange, selectedMeta]);
+
   const handleFilterOption = useCallback(
     (option: ComboBoxOption<MRI>) => {
       return filteredMRIs.has(option.value);