ref(stats): Correctly use DataCategoryInfo.apiName (#61557)

The upcoming monitor stats API name is different from the singularized
plural name, so the `slice` here no longer works.

We already had `apiName`, which was unused.

static/app/constants/index.tsx

@@ -244,7 +244,7 @@ export const DEFAULT_RELATIVE_PERIODS_PAGE_FILTER = {
 };
 
 // https://github.com/getsentry/relay/blob/master/relay-common/src/constants.rs
-export const DATA_CATEGORY_INFO: Record<DataCategoryExact, DataCategoryInfo> = {
+export const DATA_CATEGORY_INFO = {
   [DataCategoryExact.ERROR]: {
     name: DataCategoryExact.ERROR,
     apiName: 'error',
@@ -301,7 +301,7 @@ export const DATA_CATEGORY_INFO: Record<DataCategoryExact, DataCategoryInfo> = {
     titleName: t('Indexed Transactions'),
     uid: 9,
   },
-};
+} satisfies Record<DataCategoryExact, DataCategoryInfo>;
 
 // Special Search characters
 export const NEGATION_OPERATOR = '!';

static/app/views/organizationStats/index.tsx

@@ -74,32 +74,22 @@ export type OrganizationStatsProps = {
 } & RouteComponentProps<{}, {}>;
 
 export class OrganizationStats extends Component<OrganizationStatsProps> {
-  get dataCategory(): DataCategoryInfo['plural'] {
-    const dataCategory = this.props.location?.query?.dataCategory;
-
-    switch (dataCategory) {
-      case DATA_CATEGORY_INFO.error.plural:
-      case DATA_CATEGORY_INFO.transaction.plural:
-      case DATA_CATEGORY_INFO.attachment.plural:
-      case DATA_CATEGORY_INFO.profile.plural:
-      case DATA_CATEGORY_INFO.replay.plural:
-        return dataCategory;
-      default:
-        return DATA_CATEGORY_INFO.error.plural;
-    }
-  }
-
   get dataCategoryInfo(): DataCategoryInfo {
     const dataCategoryPlural = this.props.location?.query?.dataCategory;
-    const dataCategoryInfo =
-      Object.values(DATA_CATEGORY_INFO).find(
-        categoryInfo => categoryInfo.plural === dataCategoryPlural
-      ) ?? DATA_CATEGORY_INFO.error;
-    return dataCategoryInfo;
+
+    const categories = Object.values(DATA_CATEGORY_INFO);
+    const info = categories.find(c => c.plural === dataCategoryPlural);
+
+    // Default to errors
+    return info ?? DATA_CATEGORY_INFO.error;
+  }
+
+  get dataCategory() {
+    return this.dataCategoryInfo.plural;
   }
 
-  get dataCategoryName(): string {
-    return this.dataCategoryInfo.titleName ?? t('Unknown Data Category');
+  get dataCategoryName() {
+    return this.dataCategoryInfo.titleName;
   }
 
   get dataDatetime(): DateTimeObject {
@@ -362,7 +352,7 @@ export class OrganizationStats extends Component<OrganizationStatsProps> {
         projectIds={this.projectIds}
         organization={organization}
         dataCategory={this.dataCategory}
-        dataCategoryName={this.dataCategoryName}
+        dataCategoryName={this.dataCategoryInfo.titleName}
         dataDatetime={this.dataDatetime}
         chartTransform={this.chartTransform}
         handleChangeState={this.setStateOnUrl}
@@ -406,8 +396,8 @@ export class OrganizationStats extends Component<OrganizationStatsProps> {
               <ErrorBoundary mini>
                 <UsageStatsProjects
                   organization={organization}
-                  dataCategory={this.dataCategory}
-                  dataCategoryName={this.dataCategoryName}
+                  dataCategory={this.dataCategoryInfo}
+                  dataCategoryName={this.dataCategoryInfo.titleName}
                   isSingleProject={this.isSingleProject}
                   projectIds={this.projectIds}
                   dataDatetime={this.dataDatetime}

static/app/views/organizationStats/usageStatsProjects.tsx

@@ -21,7 +21,7 @@ import UsageTable, {CellProject, CellStat, TableStat} from './usageTable';
 import {getOffsetFromCursor, getPaginationPageLink} from './utils';
 
 type Props = {
-  dataCategory: DataCategoryInfo['plural'];
+  dataCategory: DataCategoryInfo;
   dataCategoryName: string;
   dataDatetime: DateTimeObject;
   getNextLocations: (project: Project) => Record<string, LocationDescriptorObject>;
@@ -115,7 +115,7 @@ class UsageStatsProjects extends DeprecatedAsyncComponent<Props, State> {
       field: ['sum(quantity)'],
       // If only one project is in selected, display the entire project list
       project: isSingleProject ? [ALL_ACCESS_PROJECTS] : projectIds,
-      category: dataCategory.slice(0, -1), // backend is singular
+      category: dataCategory.apiName,
     };
   }
 
@@ -276,7 +276,7 @@ class UsageStatsProjects extends DeprecatedAsyncComponent<Props, State> {
     const {performance, projectDetail, settings} = getNextLocations(project);
 
     if (
-      dataCategory === DATA_CATEGORY_INFO.transaction.plural &&
+      dataCategory === DATA_CATEGORY_INFO.transaction &&
       organization.features.includes('performance-view')
     ) {
       return {

static/app/views/organizationStats/usageTable.tsx

@@ -22,7 +22,7 @@ import {formatUsageWithUnits, getFormatUsageOptions} from './utils';
 const DOCS_URL = 'https://docs.sentry.io/product/accounts/membership/#restricting-access';
 
 type Props = {
-  dataCategory: DataCategoryInfo['plural'];
+  dataCategory: DataCategoryInfo;
   headers: React.ReactNode[];
   usageStats: TableStat[];
   errors?: Record<string, Error>;
@@ -84,24 +84,32 @@ class UsageTable extends Component<Props> {
         </Link>
       </CellProject>,
       <CellStat key={1}>
-        {formatUsageWithUnits(total, dataCategory, getFormatUsageOptions(dataCategory))}
+        {formatUsageWithUnits(
+          total,
+          dataCategory.plural,
+          getFormatUsageOptions(dataCategory.plural)
+        )}
       </CellStat>,
       <CellStat key={2}>
         {formatUsageWithUnits(
           accepted,
-          dataCategory,
-          getFormatUsageOptions(dataCategory)
+          dataCategory.plural,
+          getFormatUsageOptions(dataCategory.plural)
         )}
       </CellStat>,
       <CellStat key={3}>
         {formatUsageWithUnits(
           filtered,
-          dataCategory,
-          getFormatUsageOptions(dataCategory)
+          dataCategory.plural,
+          getFormatUsageOptions(dataCategory.plural)
         )}
       </CellStat>,
       <CellStat key={4}>
-        {formatUsageWithUnits(dropped, dataCategory, getFormatUsageOptions(dataCategory))}
+        {formatUsageWithUnits(
+          dropped,
+          dataCategory.plural,
+          getFormatUsageOptions(dataCategory.plural)
+        )}
       </CellStat>,
       <CellStat key={5}>
         <Button