fix(metrics): Check for feature flag when uppercasing variable (#75143)

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

@@ -19,6 +19,7 @@ import {unescapeMetricsFormula} from 'sentry/utils/metrics';
 interface EquationInputProps
   extends Omit<React.ComponentProps<typeof Input>, 'onChange' | 'value'> {
   availableVariables: Set<string>;
+  metricsNewInputs: boolean;
   onChange: (equation: string) => void;
   value: string;
 }
@@ -48,6 +49,7 @@ export function EquationInput({
   availableVariables,
   value: valueProp,
   onChange,
+  metricsNewInputs,
   ...props
 }: EquationInputProps) {
   const [errors, setErrors] = useState<any>([]);
@@ -56,12 +58,12 @@ export function EquationInput({
 
   const validateVariable = useCallback(
     (variable: string): string | null => {
-      if (!availableVariables.has(variable)) {
+      if (!availableVariables.has(metricsNewInputs ? variable.toUpperCase() : variable)) {
         return t('Unknown query "%s"', variable);
       }
       return null;
     },
-    [availableVariables]
+    [availableVariables, metricsNewInputs]
   );
 
   const parseAndValidateFormula = useCallback(

static/app/components/modals/metricWidgetViewerModal/queries.tsx

@@ -167,6 +167,7 @@ export const Queries = memo(function Queries({
                   onChange={formula => onEquationChange({formula}, index)}
                   value={equation.formula}
                   availableVariables={availableVariables}
+                  metricsNewInputs={metricsNewInputs}
                 />
               </EquationInputWrapper>
               {equation.alias !== undefined && (

static/app/utils/metrics/useMetricsQuery.tsx

@@ -6,6 +6,7 @@ import {
   getMetricsInterval,
   isVirtualMetric,
 } from 'sentry/utils/metrics';
+import {hasMetricsNewInputs} from 'sentry/utils/metrics/features';
 import {getUseCaseFromMRI, MRIToField} from 'sentry/utils/metrics/mri';
 import {useVirtualMetricsContext} from 'sentry/utils/metrics/virtualMetricsContext';
 import {useApiQuery} from 'sentry/utils/queryClient';
@@ -196,6 +197,7 @@ export function useMetricsQuery(
   enableRefetch = true
 ) {
   const organization = useOrganization();
+  const metricsNewInputs = hasMetricsNewInputs(organization);
   const {resolveVirtualMRI, isLoading} = useVirtualMetricsContext();
 
   const resolvedQueries = useMemo(
@@ -203,6 +205,12 @@ export function useMetricsQuery(
       queries
         .map(query => {
           if (isMetricFormula(query)) {
+            if (metricsNewInputs) {
+              return {
+                ...query,
+                formula: query.formula.toUpperCase(),
+              };
+            }
             return query;
           }
           if (!isVirtualMetric(query)) {
@@ -220,7 +228,7 @@ export function useMetricsQuery(
           return {...query, mri, aggregation};
         })
         .filter(query => query !== null),
-    [queries, resolveVirtualMRI]
+    [queries, resolveVirtualMRI, metricsNewInputs]
   );
 
   const {query: queryToSend, body} = useMemo(

static/app/views/metrics/queries.tsx

@@ -115,6 +115,7 @@ export function Queries() {
                 isSelected={isMultiChartMode && index === selectedWidgetIndex}
                 canBeHidden={visibleWidgets.length > 1}
                 formulaDependencies={formulaDependencies}
+                metricsNewInputs={metricsNewInputs}
               />
             )}
           </Row>
@@ -235,6 +236,7 @@ interface FormulaProps {
   formulaDependencies: ReturnType<typeof useFormulaDependencies>;
   index: number;
   isSelected: boolean;
+  metricsNewInputs: boolean;
   onChange: (index: number, data: Partial<MetricsWidget>) => void;
   onToggleVisibility: (index: number) => void;
   showQuerySymbols: boolean;
@@ -251,6 +253,7 @@ function Formula({
   isSelected,
   showQuerySymbols,
   formulaDependencies,
+  metricsNewInputs,
 }: FormulaProps) {
   const handleToggle = useCallback(() => {
     onToggleVisibility(index);
@@ -281,6 +284,7 @@ function Formula({
         availableVariables={availableVariables}
         value={widget.formula}
         onChange={formula => handleChange({formula})}
+        metricsNewInputs={metricsNewInputs}
       />
       <MetricFormulaContextMenu
         widgetIndex={index}

static/app/views/metrics/utils/useFormulaDependencies.tsx

@@ -54,7 +54,9 @@ export function useFormulaDependencies() {
 
       tokens.forEach(token => {
         if (token.type === TokenType.VARIABLE) {
-          const widget = queriesLookup.get(token.content);
+          const widget = queriesLookup.get(
+            metricsNewInputs ? token.content.toUpperCase() : token.content
+          );
           if (widget) {
             dependencies.push(widget);
           } else {