ref(metrics): Re-style components (#74414)

static/app/components/metrics/equationSymbol.tsx

@@ -1,8 +1,11 @@
 import {forwardRef} from 'react';
 
-import {Symbol} from './querySymbol';
+import {hasMetricsNewInputs} from 'sentry/utils/metrics/features';
+import useOrganization from 'sentry/utils/useOrganization';
 
-interface EquationSymbolProps extends React.ComponentProps<typeof Symbol> {
+import {DeprecatedSymbol, Symbol} from './querySymbol';
+
+interface EquationSymbolProps extends React.ComponentProps<typeof DeprecatedSymbol> {
   equationId: number;
 }
 
@@ -12,12 +15,14 @@ export function getEquationSymbol(equationId: number) {
 
 export const EquationSymbol = forwardRef<HTMLSpanElement, EquationSymbolProps>(
   function EquationSymbol({equationId, ...props}, ref) {
+    const organization = useOrganization();
+    const Component = hasMetricsNewInputs(organization) ? Symbol : DeprecatedSymbol;
     return (
-      <Symbol ref={ref} {...props}>
+      <Component ref={ref} {...props}>
         <span>
           ƒ<sub>{equationId + 1}</sub>
         </span>
-      </Symbol>
+      </Component>
     );
   }
 );

static/app/components/metrics/querySymbol.tsx

@@ -2,6 +2,8 @@ import {forwardRef} from 'react';
 import styled from '@emotion/styled';
 
 import {space} from 'sentry/styles/space';
+import {hasMetricsNewInputs} from 'sentry/utils/metrics/features';
+import useOrganization from 'sentry/utils/useOrganization';
 
 const indexToChar = 'abcdefghijklmnopqrstuvwxyz';
 
@@ -15,7 +17,9 @@ export const getQuerySymbol = (index: number) => {
   return result;
 };
 
-export const Symbol = styled('span')<{isHidden?: boolean}>`
+export const DeprecatedSymbol = styled('span')<{
+  isHidden?: boolean;
+}>`
   display: flex;
   width: 38px;
   height: 38px;
@@ -29,7 +33,6 @@ export const Symbol = styled('span')<{isHidden?: boolean}>`
   color: ${p => p.theme.white};
   font-size: 14px;
   background: ${p => p.theme.purple300};
-
   ${p =>
     p.isHidden &&
     `
@@ -39,19 +42,32 @@ export const Symbol = styled('span')<{isHidden?: boolean}>`
   `}
 `;
 
+export const Symbol = styled(DeprecatedSymbol)`
+  color: ${p => p.theme.purple300};
+  border: 1px solid ${p => p.theme.purple200};
+  background: ${p => p.theme.purple100};
+  text-transform: uppercase;
+  font-weight: 500;
+`;
+
 interface QuerySymbolProps extends React.ComponentProps<typeof Symbol> {
   queryId: number;
 }
 
 export const QuerySymbol = forwardRef<HTMLSpanElement, QuerySymbolProps>(
   function QuerySymbol({queryId, ...props}, ref) {
+    const organization = useOrganization();
+
     if (queryId < 0) {
       return null;
     }
+
+    const Component = hasMetricsNewInputs(organization) ? Symbol : DeprecatedSymbol;
+
     return (
-      <Symbol ref={ref} {...props}>
+      <Component ref={ref} {...props}>
         <span>{getQuerySymbol(queryId)}</span>
-      </Symbol>
+      </Component>
     );
   }
 );

static/app/utils/metrics/features.tsx

@@ -24,6 +24,10 @@ export function hasMetricsExtrapolationFeature(organization: Organization) {
   return organization.features.includes('metrics-extrapolation');
 }
 
+export function hasMetricsNewInputs(organization: Organization) {
+  return organization.features.includes('metrics-new-inputs');
+}
+
 /**
  * Returns the forceMetricsLayer query param for the alert
  * wrapped in an object so it can be spread into existing query params