feat(ui): Upgrade eslint rules, remove unused constants (#78953)

package.json

@@ -191,8 +191,8 @@
     "babel-gettext-extractor": "^4.1.3",
     "babel-jest": "29.7.0",
     "benchmark": "^2.1.4",
-    "eslint": "8.57.0",
-    "eslint-config-sentry-app": "2.8.0",
+    "eslint": "8.57.1",
+    "eslint-config-sentry-app": "2.9.0",
     "html-webpack-plugin": "^5.6.0",
     "jest": "29.7.0",
     "jest-canvas-mock": "^2.5.2",
@@ -265,9 +265,7 @@
       "last 3 iOS major versions",
       "Firefox ESR"
     ],
-    "test": [
-      "current node"
-    ]
+    "test": ["current node"]
   },
   "volta": {
     "extends": ".volta.json"

static/app/components/avatar/baseAvatar.tsx

@@ -13,9 +13,8 @@ import Gravatar from './gravatar';
 import type {ImageStyleProps} from './styles';
 import {imageStyle} from './styles';
 
-type AllowedSize = (typeof ALLOWED_SIZES)[number];
+type AllowedSize = 20 | 32 | 36 | 48 | 52 | 64 | 80 | 96 | 120;
 
-const ALLOWED_SIZES = [20, 32, 36, 48, 52, 64, 80, 96, 120] as const;
 const DEFAULT_REMOTE_SIZE = 120 satisfies AllowedSize;
 
 interface BaseAvatarProps extends React.HTMLAttributes<HTMLSpanElement> {

static/app/components/charts/chartZoom.tsx

@@ -33,16 +33,15 @@ type Period = {
   start: DateString;
 };
 
-const ZoomPropKeys = [
-  'period',
-  'xAxis',
-  'onChartReady',
-  'onDataZoom',
-  'onRestore',
-  'onFinished',
-] as const;
-
-export interface ZoomRenderProps extends Pick<Props, (typeof ZoomPropKeys)[number]> {
+type ZoomPropKeys =
+  | 'period'
+  | 'xAxis'
+  | 'onChartReady'
+  | 'onDataZoom'
+  | 'onRestore'
+  | 'onFinished';
+
+export interface ZoomRenderProps extends Pick<Props, ZoomPropKeys> {
   dataZoom?: DataZoomComponentOption[];
   end?: Date;
   isGroupedByDate?: boolean;

static/app/components/profiling/functionsMiniGrid.tsx

@@ -14,15 +14,7 @@ import {defined} from 'sentry/utils';
 import type {EventsResults} from 'sentry/utils/profiling/hooks/types';
 import {generateProfileFlamechartRouteWithHighlightFrame} from 'sentry/utils/profiling/routes';
 
-const functionsFields = [
-  'package',
-  'function',
-  'count()',
-  'sum()',
-  'examples()',
-] as const;
-
-type FunctionsField = (typeof functionsFields)[number];
+type FunctionsField = 'package' | 'function' | 'count()' | 'sum()' | 'examples()';
 
 interface FunctionsMiniGridProps {
   functions: EventsResults<FunctionsField>['data'];

static/app/components/profiling/profileEventsTable.tsx

@@ -316,43 +316,40 @@ function getProjectForRow<F extends FieldType>(
   return project ?? null;
 }
 
-const FIELDS = [
-  'id',
-  'profile.id',
-  'profiler.id',
-  'thread.id',
-  'trace.transaction',
-  'trace',
-  'transaction',
-  'transaction.duration',
-  'precise.start_ts',
-  'precise.finish_ts',
-  'profile.duration',
-  'project',
-  'project.id',
-  'project.name',
-  'environment',
-  'timestamp',
-  'release',
-  'platform.name',
-  'device.arch',
-  'device.classification',
-  'device.locale',
-  'device.manufacturer',
-  'device.model',
-  'os.build',
-  'os.name',
-  'os.version',
-  'last_seen()',
-  'p50()',
-  'p75()',
-  'p95()',
-  'p99()',
-  'count()',
-  'user_misery()',
-] as const;
-
-type FieldType = (typeof FIELDS)[number];
+type FieldType =
+  | 'id'
+  | 'profile.id'
+  | 'profiler.id'
+  | 'thread.id'
+  | 'trace.transaction'
+  | 'trace'
+  | 'transaction'
+  | 'transaction.duration'
+  | 'precise.start_ts'
+  | 'precise.finish_ts'
+  | 'profile.duration'
+  | 'project'
+  | 'project.id'
+  | 'project.name'
+  | 'environment'
+  | 'timestamp'
+  | 'release'
+  | 'platform.name'
+  | 'device.arch'
+  | 'device.classification'
+  | 'device.locale'
+  | 'device.manufacturer'
+  | 'device.model'
+  | 'os.build'
+  | 'os.name'
+  | 'os.version'
+  | 'last_seen()'
+  | 'p50()'
+  | 'p75()'
+  | 'p95()'
+  | 'p99()'
+  | 'count()'
+  | 'user_misery()';
 
 const RIGHT_ALIGNED_FIELDS = new Set<FieldType>([
   'transaction.duration',

static/app/components/profiling/suspectFunctions/functionsTable.tsx

@@ -167,16 +167,13 @@ function ProfilingFunctionsTableCell({
   }
 }
 
-const FIELDS = [
-  'function',
-  'package',
-  'count()',
-  'p75()',
-  'sum()',
-  'examples()',
-] as const;
-
-type TableColumnKey = (typeof FIELDS)[number];
+type TableColumnKey =
+  | 'function'
+  | 'package'
+  | 'count()'
+  | 'p75()'
+  | 'sum()'
+  | 'examples()';
 
 type TableDataRow = Record<TableColumnKey, any>;
 

static/app/utils/profiling/hooks/useProfileEvents.tsx

@@ -89,30 +89,27 @@ export function formatError(error: any): string | null {
   return t('An unknown error occurred.');
 }
 
-const ALL_FIELDS = [
-  'id',
-  'trace',
-  'profile.id',
-  'profiler.id',
-  'thread.id',
-  'precise.start_ts',
-  'precise.finish_ts',
-  'project.name',
-  'timestamp',
-  'release',
-  'device.model',
-  'device.classification',
-  'device.arch',
-  'transaction.duration',
-  'p50()',
-  'p75()',
-  'p95()',
-  'p99()',
-  'count()',
-  'last_seen()',
-] as const;
-
-export type ProfilingFieldType = (typeof ALL_FIELDS)[number];
+export type ProfilingFieldType =
+  | 'id'
+  | 'trace'
+  | 'profile.id'
+  | 'profiler.id'
+  | 'thread.id'
+  | 'precise.start_ts'
+  | 'precise.finish_ts'
+  | 'project.name'
+  | 'timestamp'
+  | 'release'
+  | 'device.model'
+  | 'device.classification'
+  | 'device.arch'
+  | 'transaction.duration'
+  | 'p50()'
+  | 'p75()'
+  | 'p95()'
+  | 'p99()'
+  | 'count()'
+  | 'last_seen()';
 
 export function getProfilesTableFields(platform: Project['platform']) {
   if (mobile.includes(platform as any)) {

static/app/utils/profiling/platforms.tsx

@@ -1,39 +1,34 @@
 import type {Project} from 'sentry/types/project';
 
-const supportedProfilingPlatformSDKs = [
-  'android',
-  'apple-ios',
-  'flutter',
-  'dart-flutter',
-  'go',
-  'node',
-  'python',
-  'php',
-  'php',
-  'php-laravel',
-  'php-symfony2',
-  'ruby',
-  'javascript-angular',
-  'javascript-astro',
-  'javascript-ember',
-  'javascript-gatsby',
-  'javascript-nextjs',
-  'javascript-react',
-  'javascript-remix',
-  'javascript-svelte',
-  'javascript-solid',
-  'javascript-sveltekit',
-  'javascript-vue',
-  'javascript',
-  'react-native',
-] as const;
-export type SupportedProfilingPlatform = (typeof supportedProfilingPlatformSDKs)[number];
-export type SupportedProfilingPlatformSDK =
-  (typeof supportedProfilingPlatformSDKs)[number];
+type SupportedProfilingPlatformSDK =
+  | 'android'
+  | 'apple-ios'
+  | 'flutter'
+  | 'dart-flutter'
+  | 'go'
+  | 'node'
+  | 'python'
+  | 'php'
+  | 'php-laravel'
+  | 'php-symfony2'
+  | 'ruby'
+  | 'javascript-angular'
+  | 'javascript-astro'
+  | 'javascript-ember'
+  | 'javascript-gatsby'
+  | 'javascript-nextjs'
+  | 'javascript-react'
+  | 'javascript-remix'
+  | 'javascript-svelte'
+  | 'javascript-solid'
+  | 'javascript-sveltekit'
+  | 'javascript-vue'
+  | 'javascript'
+  | 'react-native';
 
 export function getDocsPlatformSDKForPlatform(
   platform: string | undefined
-): SupportedProfilingPlatform | null {
+): SupportedProfilingPlatformSDK | null {
   if (!platform) {
     return null;
   }

static/app/views/dashboards/exportDashboard.tsx

@@ -4,13 +4,7 @@ import {addErrorMessage} from 'sentry/actionCreators/indicator';
 
 import type {DashboardDetails} from './types';
 
-const deleteProperties = [
-  'createdBy',
-  'dateCreated',
-  'id',
-  'dashboardId',
-  'widgetId',
-] as const;
+type ExcludedProperties = 'createdBy' | 'dateCreated' | 'id' | 'dashboardId' | 'widgetId';
 
 async function exportDashboard() {
   try {
@@ -55,8 +49,8 @@ function getAPIParams(structure) {
 
 function normalizeData(
   source: DashboardDetails
-): Omit<DashboardDetails, (typeof deleteProperties)[number]> {
-  const payload: Omit<DashboardDetails, (typeof deleteProperties)[number]> = {
+): Omit<DashboardDetails, ExcludedProperties> {
+  const payload: Omit<DashboardDetails, ExcludedProperties> = {
     title: '',
     filters: {},
     projects: [],

static/app/views/insights/common/queries/useDiscover.ts

@@ -107,7 +107,6 @@ const useDiscover = <T extends Extract<keyof ResponseType, string>[], ResponseTy
   });
 
   // This type is a little awkward but it explicitly states that the response could be empty. This doesn't enable unchecked access errors, but it at least indicates that it's possible that there's no data
-  // eslint-disable-next-line @typescript-eslint/ban-types
   const data = (result?.data ?? []) as Pick<ResponseType, T[number]>[];
 
   return {