ref(metrics): Move equation and query symbol to components (#72192)

Move `EquationSymbol` and `QuerySymbol` to `components/metrics` folder.
Add tests.

Author: ArthurKnaus

static/app/components/metrics/equationSymbol.spec.tsx

@@ -0,0 +1,24 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {textWithMarkupMatcher} from 'sentry-test/utils';
+
+import {
+  EquationSymbol,
+  getEquationSymbol,
+} from 'sentry/components/metrics/equationSymbol';
+
+describe('getEquationSymbol', () => {
+  it('should return the correct symbol', () => {
+    expect(getEquationSymbol(0)).toBe('ƒ1');
+    expect(getEquationSymbol(1)).toBe('ƒ2');
+  });
+});
+
+describe('EquationSymbol', () => {
+  it('renders', () => {
+    render(<EquationSymbol equationId={0} />);
+    expect(screen.getByText(textWithMarkupMatcher('ƒ1'))).toBeInTheDocument();
+
+    render(<EquationSymbol equationId={5} />);
+    expect(screen.getByText(textWithMarkupMatcher('ƒ6'))).toBeInTheDocument();
+  });
+});

static/app/views/metrics/equationSymbol.tsx renamed to static/app/components/metrics/equationSymbol.tsx

@@ -0,0 +1,33 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {getQuerySymbol, QuerySymbol} from 'sentry/components/metrics/querySymbol';
+
+describe('getQuerySymbol', () => {
+  it('should return the correct symbol', () => {
+    expect(getQuerySymbol(0)).toBe('a');
+    expect(getQuerySymbol(1)).toBe('b');
+    expect(getQuerySymbol(25)).toBe('z');
+    expect(getQuerySymbol(26)).toBe('aa');
+    expect(getQuerySymbol(27)).toBe('ab');
+    expect(getQuerySymbol(52)).toBe('ba');
+    expect(getQuerySymbol(53)).toBe('bb');
+    expect(getQuerySymbol(77)).toBe('bz');
+    expect(getQuerySymbol(78)).toBe('ca');
+    expect(getQuerySymbol(702)).toBe('aaa');
+  });
+});
+
+describe('QuerySymbol', () => {
+  it('renders', () => {
+    render(<QuerySymbol queryId={0} />);
+    expect(screen.getByText('a')).toBeInTheDocument();
+
+    render(<QuerySymbol queryId={27} />);
+    expect(screen.getByText('ab')).toBeInTheDocument();
+  });
+
+  it('does not render for negative query ids', () => {
+    const {container} = render(<QuerySymbol queryId={-1} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

static/app/components/metrics/querySymbol.spec.tsx

@@ -8,7 +8,9 @@ import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import Input, {type InputProps} from 'sentry/components/input';
 import {CreateMetricAlertFeature} from 'sentry/components/metrics/createMetricAlertFeature';
+import {EquationSymbol} from 'sentry/components/metrics/equationSymbol';
 import {QueryBuilder} from 'sentry/components/metrics/queryBuilder';
+import {getQuerySymbol, QuerySymbol} from 'sentry/components/metrics/querySymbol';
 import {Tooltip} from 'sentry/components/tooltip';
 import {DEFAULT_DEBOUNCE_DURATION, SLOW_TOOLTIP_DELAY} from 'sentry/constants';
 import {
@@ -36,10 +38,8 @@ import type {
 } from 'sentry/views/dashboards/metrics/types';
 import {getMetricQueryName} from 'sentry/views/dashboards/metrics/utils';
 import {DisplayType} from 'sentry/views/dashboards/types';
-import {EquationSymbol} from 'sentry/views/metrics/equationSymbol';
 import {EquationInput} from 'sentry/views/metrics/formulaInput';
 import {getCreateAlert} from 'sentry/views/metrics/metricQueryContextMenu';
-import {getQuerySymbol, QuerySymbol} from 'sentry/views/metrics/querySymbol';
 
 interface Props {
   addEquation: () => void;

static/app/views/metrics/querySymbol.tsx renamed to static/app/components/metrics/querySymbol.tsx

@@ -1,10 +1,10 @@
 import {Client} from 'sentry/api';
+import {getQuerySymbol} from 'sentry/components/metrics/querySymbol';
 import type {MetricMeta, MRI} from 'sentry/types/metrics';
 import {convertToDashboardWidget} from 'sentry/utils/metrics/dashboard';
 import type {MetricsQuery} from 'sentry/utils/metrics/types';
 import {MetricDisplayType} from 'sentry/utils/metrics/types';
 import type {Widget} from 'sentry/views/dashboards/types';
-import {getQuerySymbol} from 'sentry/views/metrics/querySymbol';
 // import types
 export type ImportDashboard = {
   description: string;

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

@@ -1,5 +1,7 @@
 import {useMemo} from 'react';
 
+import {getEquationSymbol} from 'sentry/components/metrics/equationSymbol';
+import {getQuerySymbol} from 'sentry/components/metrics/querySymbol';
 import type {MRI} from 'sentry/types/metrics';
 import {unescapeMetricsFormula} from 'sentry/utils/metrics';
 import {NO_QUERY_ID} from 'sentry/utils/metrics/constants';
@@ -18,8 +20,6 @@ import {
   type WidgetQuery,
   WidgetType,
 } from 'sentry/views/dashboards/types';
-import {getEquationSymbol} from 'sentry/views/metrics/equationSymbol';
-import {getQuerySymbol} from 'sentry/views/metrics/querySymbol';
 import {getUniqueQueryIdGenerator} from 'sentry/views/metrics/utils/uniqueQueryId';
 
 function extendQuery(query = '', dashboardFilters?: DashboardFilters) {

static/app/utils/metrics/dashboardImport.tsx

@@ -8,6 +8,7 @@ import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {CreateMetricAlertFeature} from 'sentry/components/metrics/createMetricAlertFeature';
+import {QuerySymbol} from 'sentry/components/metrics/querySymbol';
 import {
   IconBookmark,
   IconDashboard,
@@ -25,7 +26,6 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useRouter from 'sentry/utils/useRouter';
 import {useMetricsContext} from 'sentry/views/metrics/context';
 import {getCreateAlert} from 'sentry/views/metrics/metricQueryContextMenu';
-import {QuerySymbol} from 'sentry/views/metrics/querySymbol';
 import {useCreateDashboard} from 'sentry/views/metrics/useCreateDashboard';
 import {useFormulaDependencies} from 'sentry/views/metrics/utils/useFormulaDependencies';
 

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

@@ -4,7 +4,9 @@ import * as echarts from 'echarts/core';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {Button} from 'sentry/components/button';
+import {EquationSymbol} from 'sentry/components/metrics/equationSymbol';
 import {QueryBuilder} from 'sentry/components/metrics/queryBuilder';
+import {getQuerySymbol, QuerySymbol} from 'sentry/components/metrics/querySymbol';
 import SwitchButton from 'sentry/components/switchButton';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconAdd} from 'sentry/icons';
@@ -23,11 +25,9 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {METRIC_CHART_GROUP} from 'sentry/views/metrics/constants';
 import {useMetricsContext} from 'sentry/views/metrics/context';
-import {EquationSymbol} from 'sentry/views/metrics/equationSymbol';
 import {EquationInput} from 'sentry/views/metrics/formulaInput';
 import {MetricFormulaContextMenu} from 'sentry/views/metrics/metricFormulaContextMenu';
 import {MetricQueryContextMenu} from 'sentry/views/metrics/metricQueryContextMenu';
-import {getQuerySymbol, QuerySymbol} from 'sentry/views/metrics/querySymbol';
 import {useFormulaDependencies} from 'sentry/views/metrics/utils/useFormulaDependencies';
 
 export function Queries() {