chore(ts): Use UPPER_CASE for SpanOperationBreakdownFilter (#50372)

static/app/utils/discover/fieldRenderers.tsx

@@ -856,7 +856,7 @@ export const spanOperationRelativeBreakdownRenderer = (
                   }
                   event.stopPropagation();
                   const filter = stringToFilter(operationName);
-                  if (filter === SpanOperationBreakdownFilter.None) {
+                  if (filter === SpanOperationBreakdownFilter.NONE) {
                     return;
                   }
                   trackAnalytics('performance_views.relative_breakdown.selection', {

static/app/utils/performance/contexts/operationBreakdownFilter.tsx

@@ -6,7 +6,7 @@ const OpBreakdownFilterContext = createContext<{
   opBreakdownFilter: SpanOperationBreakdownFilter;
   setOpBreakdownFilter: (filter: SpanOperationBreakdownFilter) => void;
 }>({
-  opBreakdownFilter: SpanOperationBreakdownFilter.None,
+  opBreakdownFilter: SpanOperationBreakdownFilter.NONE,
   setOpBreakdownFilter: (_: SpanOperationBreakdownFilter) => {},
 });
 
@@ -21,7 +21,7 @@ export function OpBreakdownFilterProvider({
   return (
     <OpBreakdownFilterContext.Provider
       value={{
-        opBreakdownFilter: opBreakdownFilter ?? SpanOperationBreakdownFilter.None,
+        opBreakdownFilter: opBreakdownFilter ?? SpanOperationBreakdownFilter.NONE,
         setOpBreakdownFilter,
       }}
     >

static/app/views/performance/transactionSummary/filter.tsx

@@ -15,30 +15,30 @@ import {decodeHistogramZoom} from './transactionOverview/latencyChart/utils';
 
 // Make sure to update other instances like trends column fields, discover field types.
 export enum SpanOperationBreakdownFilter {
-  None = 'none',
-  Http = 'http',
-  Db = 'db',
-  Browser = 'browser',
-  Resource = 'resource',
-  Ui = 'ui',
+  NONE = 'none',
+  HTTP = 'http',
+  DB = 'db',
+  BROWSER = 'browser',
+  RESOURCE = 'resource',
+  UI = 'ui',
 }
 
 export const SPAN_OPERATION_BREAKDOWN_FILTER_TO_FIELD: Partial<
   Record<SpanOperationBreakdownFilter, string>
 > = {
-  [SpanOperationBreakdownFilter.Http]: SpanOpBreakdown.SPANS_HTTP,
-  [SpanOperationBreakdownFilter.Db]: SpanOpBreakdown.SPANS_DB,
-  [SpanOperationBreakdownFilter.Browser]: SpanOpBreakdown.SPANS_BROWSER,
-  [SpanOperationBreakdownFilter.Resource]: SpanOpBreakdown.SPANS_RESOURCE,
-  [SpanOperationBreakdownFilter.Ui]: SpanOpBreakdown.SPANS_UI,
+  [SpanOperationBreakdownFilter.HTTP]: SpanOpBreakdown.SPANS_HTTP,
+  [SpanOperationBreakdownFilter.DB]: SpanOpBreakdown.SPANS_DB,
+  [SpanOperationBreakdownFilter.BROWSER]: SpanOpBreakdown.SPANS_BROWSER,
+  [SpanOperationBreakdownFilter.RESOURCE]: SpanOpBreakdown.SPANS_RESOURCE,
+  [SpanOperationBreakdownFilter.UI]: SpanOpBreakdown.SPANS_UI,
 };
 
 const OPTIONS: SpanOperationBreakdownFilter[] = [
-  SpanOperationBreakdownFilter.Http,
-  SpanOperationBreakdownFilter.Db,
-  SpanOperationBreakdownFilter.Browser,
-  SpanOperationBreakdownFilter.Resource,
-  SpanOperationBreakdownFilter.Ui,
+  SpanOperationBreakdownFilter.HTTP,
+  SpanOperationBreakdownFilter.DB,
+  SpanOperationBreakdownFilter.BROWSER,
+  SpanOperationBreakdownFilter.RESOURCE,
+  SpanOperationBreakdownFilter.UI,
 ];
 
 export const spanOperationBreakdownSingleColumns = OPTIONS.map(o => `spans.${o}`);
@@ -72,7 +72,7 @@ function Filter(props: Props) {
           'aria-label': t('Filter by operation'),
         }}
         triggerLabel={
-          currentFilter === SpanOperationBreakdownFilter.None
+          currentFilter === SpanOperationBreakdownFilter.NONE
             ? t('Filter')
             : currentFilter
         }
@@ -91,7 +91,7 @@ const OperationDot = styled('div')<{backgroundColor: string}>`
 
 export function filterToField(option: SpanOperationBreakdownFilter) {
   switch (option) {
-    case SpanOperationBreakdownFilter.None:
+    case SpanOperationBreakdownFilter.NONE:
       return undefined;
     default: {
       return `spans.${option}`;
@@ -119,7 +119,7 @@ export function filterToSearchConditions(
     query = `${query} ${field}:<${max}ms`;
   }
   switch (option) {
-    case SpanOperationBreakdownFilter.None:
+    case SpanOperationBreakdownFilter.NONE:
       return query ? query.trim() : undefined;
     default: {
       return `${query} has:${filterToField(option)}`.trim();
@@ -129,7 +129,7 @@ export function filterToSearchConditions(
 
 export function filterToColor(option: SpanOperationBreakdownFilter) {
   switch (option) {
-    case SpanOperationBreakdownFilter.None:
+    case SpanOperationBreakdownFilter.NONE:
       return pickBarColor('');
     default: {
       return pickBarColor(option);
@@ -146,12 +146,12 @@ export function stringToFilter(option: string) {
     return option as SpanOperationBreakdownFilter;
   }
 
-  return SpanOperationBreakdownFilter.None;
+  return SpanOperationBreakdownFilter.NONE;
 }
 
 export function decodeFilterFromLocation(location: Location) {
   return stringToFilter(
-    decodeScalar(location.query.breakdown, SpanOperationBreakdownFilter.None)
+    decodeScalar(location.query.breakdown, SpanOperationBreakdownFilter.NONE)
   );
 }
 

static/app/views/performance/transactionSummary/transactionEvents/content.spec.tsx

@@ -181,7 +181,7 @@ describe('Performance Transaction Events Content', function () {
           organization={initialData.organization}
           location={initialData.router.location}
           transactionName={transactionName}
-          spanOperationBreakdownFilter={SpanOperationBreakdownFilter.None}
+          spanOperationBreakdownFilter={SpanOperationBreakdownFilter.NONE}
           onChangeSpanOperationBreakdownFilter={() => {}}
           eventsDisplayFilterName={EventsDisplayFilterName.p100}
           onChangeEventsDisplayFilter={() => {}}
@@ -221,7 +221,7 @@ describe('Performance Transaction Events Content', function () {
           organization={initialData.organization}
           location={initialData.router.location}
           transactionName={transactionName}
-          spanOperationBreakdownFilter={SpanOperationBreakdownFilter.None}
+          spanOperationBreakdownFilter={SpanOperationBreakdownFilter.NONE}
           onChangeSpanOperationBreakdownFilter={() => {}}
           eventsDisplayFilterName={EventsDisplayFilterName.p100}
           onChangeEventsDisplayFilter={() => {}}
@@ -267,7 +267,7 @@ describe('Performance Transaction Events Content', function () {
           organization={initialData.organization}
           location={initialData.router.location}
           transactionName={transactionName}
-          spanOperationBreakdownFilter={SpanOperationBreakdownFilter.None}
+          spanOperationBreakdownFilter={SpanOperationBreakdownFilter.NONE}
           onChangeSpanOperationBreakdownFilter={() => {}}
           eventsDisplayFilterName={EventsDisplayFilterName.p100}
           onChangeEventsDisplayFilter={() => {}}

static/app/views/performance/transactionSummary/transactionEvents/index.tsx

@@ -121,7 +121,7 @@ function EventsContentWrapper(props: ChildProps) {
       ...sortQuery,
     };
 
-    if (newFilter === SpanOperationBreakdownFilter.None) {
+    if (newFilter === SpanOperationBreakdownFilter.NONE) {
       delete nextQuery.breakdown;
     }
     browserHistory.push({
@@ -244,7 +244,7 @@ function generateEventView({
     'timestamp',
   ];
   const breakdown = decodeFilterFromLocation(location);
-  if (breakdown !== SpanOperationBreakdownFilter.None) {
+  if (breakdown !== SpanOperationBreakdownFilter.NONE) {
     fields.splice(2, 1, `spans.${breakdown}`);
   } else {
     fields.push(...SPAN_OP_BREAKDOWN_FIELDS);

static/app/views/performance/transactionSummary/transactionOverview/charts.tsx

@@ -37,7 +37,7 @@ import VitalsChart from './vitalsChart';
 function generateDisplayOptions(
   currentFilter: SpanOperationBreakdownFilter
 ): SelectValue<string>[] {
-  if (currentFilter === SpanOperationBreakdownFilter.None) {
+  if (currentFilter === SpanOperationBreakdownFilter.NONE) {
     return [
       {value: DisplayModes.DURATION, label: t('Duration Breakdown')},
       {value: DisplayModes.DURATION_PERCENTILE, label: t('Duration Percentiles')},

static/app/views/performance/transactionSummary/transactionOverview/content.spec.tsx

@@ -36,7 +36,7 @@ function initialize(project, query, additionalFeatures: string[] = []) {
     initialData.router.location
   );
 
-  const spanOperationBreakdownFilter = SpanOperationBreakdownFilter.None;
+  const spanOperationBreakdownFilter = SpanOperationBreakdownFilter.NONE;
   const transactionName = 'example-transaction';
 
   return {

static/app/views/performance/transactionSummary/transactionOverview/content.tsx

@@ -173,7 +173,7 @@ function SummaryContent({
     });
     const sortedEventView = transactionsListEventView.withSorts([selected.sort]);
 
-    if (spanOperationBreakdownFilter === SpanOperationBreakdownFilter.None) {
+    if (spanOperationBreakdownFilter === SpanOperationBreakdownFilter.NONE) {
       const fields = [
         // Remove the extra field columns
         ...sortedEventView.fields.slice(0, transactionsListTitles.length),
@@ -294,7 +294,7 @@ function SummaryContent({
   // update header titles of transactions list
 
   const operationDurationTableTitle =
-    spanOperationBreakdownFilter === SpanOperationBreakdownFilter.None
+    spanOperationBreakdownFilter === SpanOperationBreakdownFilter.NONE
       ? t('operation duration')
       : `${spanOperationBreakdownFilter} duration`;
 
@@ -305,14 +305,14 @@ function SummaryContent({
   // field renderer to be used to generate the relative ops breakdown
   let durationField = SPAN_OP_RELATIVE_BREAKDOWN_FIELD;
 
-  if (spanOperationBreakdownFilter !== SpanOperationBreakdownFilter.None) {
+  if (spanOperationBreakdownFilter !== SpanOperationBreakdownFilter.NONE) {
     durationField = filterToField(spanOperationBreakdownFilter)!;
   }
 
   // add ops breakdown duration column as the 3rd column
   fields.splice(2, 0, {field: durationField});
 
-  if (spanOperationBreakdownFilter === SpanOperationBreakdownFilter.None) {
+  if (spanOperationBreakdownFilter === SpanOperationBreakdownFilter.NONE) {
     fields.push(
       ...SPAN_OP_BREAKDOWN_FIELDS.map(field => {
         return {field};
@@ -490,7 +490,7 @@ function getFilterOptions({
   p95: number;
   spanOperationBreakdownFilter: SpanOperationBreakdownFilter;
 }): DropdownOption[] {
-  if (spanOperationBreakdownFilter === SpanOperationBreakdownFilter.None) {
+  if (spanOperationBreakdownFilter === SpanOperationBreakdownFilter.NONE) {
     return [
       {
         sort: {kind: 'asc', field: 'transaction.duration'},

static/app/views/performance/transactionSummary/transactionOverview/durationChart/index.tsx

@@ -117,7 +117,7 @@ function DurationChart({
 
   const header = (
     <HeaderTitleLegend>
-      {currentFilter === SpanOperationBreakdownFilter.None
+      {currentFilter === SpanOperationBreakdownFilter.NONE
         ? t('Duration Breakdown')
         : tct('Span Operation Breakdown - [operationName]', {
             operationName: currentFilter,

static/app/views/performance/transactionSummary/transactionOverview/durationPercentileChart/content.tsx

@@ -115,7 +115,7 @@ class Content extends AsyncComponent<Props, State> {
     }
 
     const colors = (theme: Theme) =>
-      currentFilter === SpanOperationBreakdownFilter.None
+      currentFilter === SpanOperationBreakdownFilter.NONE
         ? theme.charts.getColorPalette(1)
         : [filterToColor(currentFilter)];