build: Audit and update lint rules for Gazebo (#3508)

.storybook/main.ts

@@ -10,7 +10,6 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/preset-create-react-app',
     '@chromatic-com/storybook',
   ],
   docs: {},

package.json

@@ -88,6 +88,7 @@
   },
   "devDependencies": {
     "@acemarke/react-prod-sourcemaps": "^0.3.1",
+    "@babel/eslint-parser": "^7.25.9",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1",
     "@codecov/vite-plugin": "^1.2.1",
@@ -100,21 +101,22 @@
     "@storybook/builder-vite": "^8.3.4",
     "@storybook/manager-api": "^8.3.4",
     "@storybook/node-logger": "^8.3.4",
-    "@storybook/preset-create-react-app": "^8.3.4",
     "@storybook/react": "^8.3.4",
     "@storybook/react-vite": "^8.3.4",
     "@storybook/theming": "^8.3.4",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tanstack/eslint-plugin-query": "^4.29.4",
+    "@tanstack/eslint-plugin-query": "^4.38.0",
     "@tanstack/react-query-devtools": "^4.29.6",
     "@testing-library/dom": "10.3.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@total-typescript/ts-reset": "^0.4.2",
+    "@types/confusing-browser-globals": "^1",
     "@types/d3": "7.4.3",
     "@types/d3-array": "3.2.1",
     "@types/d3-scale": "4.0.8",
+    "@types/eslint-plugin-jsx-a11y": "^6.9.0",
     "@types/js-cookie": "3.0.6",
     "@types/lodash": "4.17.6",
     "@types/node": "^20.5.7",
@@ -126,27 +128,33 @@
     "@types/react-modal": "^3.16.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/semver": "^7",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
     "@vitejs/plugin-legacy": "^5.4.3",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-istanbul": "^2.1.3",
     "@vitest/eslint-plugin": "^1.1.7",
     "@vitest/ui": "^2.1.3",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.39.0",
+    "babel-preset-react-app": "^10.0.1",
+    "confusing-browser-globals": "^1.0.11",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-tailwindcss": "^3.17.4",
-    "eslint-plugin-testing-library": "^6.3.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
+    "eslint-plugin-testing-library": "^6.4.0",
     "http-proxy-middleware": "^2.0.7",
     "husky": "^9.1.4",
     "jsdom": "^25.0.0",
     "lint-staged": "^15.2.8",
     "msw": "^2.4.11",
     "postcss": "^8.4.31",
     "prettier": "^3.3.3",
-    "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.3.1",
     "remark-gfm": "^3.0.1",
     "resolve-url-loader": "^5.0.0",

src/pages/CommitDetailPage/CommitCoverage/routes/ComponentsSelector/ComponentsSelector.tsx

@@ -40,7 +40,7 @@ function ComponentsSelector() {
     try {
       const regex = new RegExp(componentSearch, 'i')
       return Array.from(names).filter((name: string) => regex.test(name))
-    } catch (e) {
+    } catch (_e) {
       return Array.from(names).filter((name: string) =>
         name.toLowerCase().includes(componentSearch.toLowerCase())
       )

src/pages/PullRequestPage/PullCoverage/routes/ComponentsSelector/ComponentsSelector.tsx

@@ -42,7 +42,7 @@ function ComponentsSelector() {
     try {
       const regex = new RegExp(componentSearch, 'i')
       return Array.from(names).filter((name: string) => regex.test(name))
-    } catch (e) {
+    } catch (_e) {
       return Array.from(names).filter((name: string) =>
         name.toLowerCase().includes(componentSearch.toLowerCase())
       )

src/pages/RepoPage/CoverageTab/OverviewTab/subroute/ComponentsMultiSelect/ComponentsMultiSelect.tsx

@@ -54,7 +54,7 @@ export default function ComponentsMultiSelect() {
     try {
       const regex = new RegExp(componentSearch, 'i')
       return Array.from(names).filter((name: string) => regex.test(name))
-    } catch (e) {
+    } catch (_e) {
       return Array.from(names).filter((name: string) =>
         name.toLowerCase().includes(componentSearch.toLowerCase())
       )

src/pages/TermsOfService/hooks/useTermsOfService.ts

@@ -15,20 +15,23 @@ export type SaveTermsAgreementInput = z.infer<
   typeof SaveTermsAgreementInputConfig
 >
 
-// TODO need to figure out where/how to share api resolver error type and to reflect the graphql schema. Maybe do resolver level schema validation in shared?
-// Lets discuss this as we migrate more of the api to typescript.
+// TODO this mutation is not handling all potential union types, there is also
+// unauthenticated error and validation error types that also need to be handled
+// With the migration to TS Query V5, we should also actually use the zod schema
+// to validate the response that is returned from the mutationFn.
+
 const ResolverError = z.object({
   message: z.string(),
 })
-const SaveTermsAgreementPayloadConfig = z.object({
+const _SaveTermsAgreementPayloadConfig = z.object({
   data: z.object({
     saveTermsAgreement: z.object({
       error: z.union([ResolverError, ResolverError]).nullish(),
     }),
   }),
 })
 export type SaveTermsAgreementPayload = z.infer<
-  typeof SaveTermsAgreementPayloadConfig
+  typeof _SaveTermsAgreementPayloadConfig
 >
 
 interface SaveTermsAgreementOptions {

src/services/charts/useBranchCoverageMeasurements.tsx

@@ -9,13 +9,10 @@ import Api from 'shared/api'
 import { NetworkErrorObject } from 'shared/api/helpers'
 import A from 'ui/A'
 
-const MEASUREMENT_INTERVALS = {
-  INTERVAL_1_DAY: 'INTERVAL_1_DAY',
-  INTERVAL_7_DAY: 'INTERVAL_7_DAY',
-  INTERVAL_30_DAY: 'INTERVAL_30_DAY',
-} as const
-
-type MeasurementIntervals = keyof typeof MEASUREMENT_INTERVALS
+type MeasurementIntervals =
+  | 'INTERVAL_1_DAY'
+  | 'INTERVAL_7_DAY'
+  | 'INTERVAL_30_DAY'
 
 const MeasurementsSchema = z.object({
   measurements: z.array(

src/services/commit/useCommitTeam.tsx

@@ -36,10 +36,10 @@ export const OrderingParameter = {
   PATCH_COVERAGE: 'PATCH_COVERAGE',
 } as const
 
-const ImpactedFilesOrdering = z.object({
-  direction: z.nativeEnum(OrderingDirection).optional(),
-  parameter: z.nativeEnum(OrderingParameter).optional(),
-})
+interface ImpactedFilesOrdering {
+  direction?: (typeof OrderingDirection)[keyof typeof OrderingDirection]
+  parameter?: (typeof OrderingParameter)[keyof typeof OrderingParameter]
+}
 
 const CoverageObjSchema = z.object({
   coverage: z.number().nullable(),
@@ -275,7 +275,7 @@ interface UseCommitTeamArgs {
   filters?: {
     hasUnintendedChanges?: boolean
     flags?: Array<string>
-    ordering?: z.infer<typeof ImpactedFilesOrdering>
+    ordering?: ImpactedFilesOrdering
   }
   refetchInterval?: number
 }

src/services/pull/usePull.tsx

@@ -33,10 +33,10 @@ export const OrderingParameter = {
   CHANGE_COVERAGE: 'CHANGE_COVERAGE',
 } as const
 
-const ImpactedFilesOrdering = z.object({
-  direction: z.nativeEnum(OrderingDirection).optional(),
-  parameter: z.nativeEnum(OrderingParameter).optional(),
-})
+interface ImpactedFilesOrdering {
+  direction?: (typeof OrderingDirection)[keyof typeof OrderingDirection]
+  parameter?: (typeof OrderingParameter)[keyof typeof OrderingParameter]
+}
 
 const percentCoveredSchema = z.object({
   percentCovered: z.number().nullable(),
@@ -290,7 +290,7 @@ interface UsePullArgs {
   pullId: string
   filters?: {
     hasUnintendedChanges?: boolean
-    ordering?: z.infer<typeof ImpactedFilesOrdering>
+    ordering?: ImpactedFilesOrdering
   }
   options?: {
     suspense?: boolean

src/services/pull/usePullTeam.tsx

@@ -30,10 +30,10 @@ export const OrderingParameter = {
   PATCH_COVERAGE: 'PATCH_COVERAGE',
 } as const
 
-const ImpactedFilesOrdering = z.object({
-  direction: z.nativeEnum(OrderingDirection).optional(),
-  parameter: z.nativeEnum(OrderingParameter).optional(),
-})
+interface ImpactedFilesOrdering {
+  direction?: (typeof OrderingDirection)[keyof typeof OrderingDirection]
+  parameter?: (typeof OrderingParameter)[keyof typeof OrderingParameter]
+}
 
 const CoverageObjSchema = z
   .object({
@@ -177,7 +177,7 @@ interface UsePullTeamArgs {
   pullId: string
   filters?: {
     hasUnintendedChanges?: boolean
-    ordering?: z.infer<typeof ImpactedFilesOrdering>
+    ordering?: ImpactedFilesOrdering
   }
   refetchInterval?: number
 }

src/services/user/useInternalUser.ts

@@ -47,7 +47,7 @@ export const useInternalUser = (opts: UseInternalUserArgs) =>
           path: '/user',
           signal,
         })
-      } catch (e) {
+      } catch (_e) {
         return {} as InternalUserData
       }