build: Apply recommended lint rules

.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/App.test.tsx

@@ -180,56 +180,56 @@ describe('App', () => {
     hasSession?: boolean
   }) {
     server.use(
-      http.get('/internal/user', (info) => {
+      http.get('/internal/user', () => {
         if (hasSession) {
           return HttpResponse.json(internalUser)
         } else {
           return HttpResponse.json({})
         }
       }),
-      http.get('/internal/users/current', (info) => {
+      http.get('/internal/users/current', () => {
         return HttpResponse.json({})
       }),
-      graphql.query('DetailOwner', (info) =>
+      graphql.query('DetailOwner', () =>
         HttpResponse.json({ data: { owner: 'codecov' } })
       ),
-      graphql.query('CurrentUser', (info) => {
+      graphql.query('CurrentUser', () => {
         if (hasLoggedInUser) {
           return HttpResponse.json({ data: user })
         }
         HttpResponse.json({ data: {} })
       }),
-      graphql.query('GetPlanData', (info) => {
+      graphql.query('GetPlanData', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('OwnerTier', (info) => {
+      graphql.query('OwnerTier', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('Seats', (info) => {
+      graphql.query('Seats', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('HasAdmins', (info) => {
+      graphql.query('HasAdmins', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('owner', (info) => {
+      graphql.query('owner', () => {
         return HttpResponse.json({ data: { owner: { isAdmin: true } } })
       }),
-      graphql.query('MyContexts', (info) => {
+      graphql.query('MyContexts', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('GetOktaConfig', (info) => {
+      graphql.query('GetOktaConfig', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('OwnerPageData', (info) => {
+      graphql.query('OwnerPageData', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.mutation('updateDefaultOrganization', (info) => {
+      graphql.mutation('updateDefaultOrganization', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('GetRepoOverview', (info) => {
+      graphql.query('GetRepoOverview', () => {
         return HttpResponse.json({ data: mockRepoOverview })
       }),
-      graphql.query('GetUploadTokenRequired', (info) => {
+      graphql.query('GetUploadTokenRequired', () => {
         return HttpResponse.json({ data: {} })
       })
     )

src/index.tsx

@@ -22,6 +22,7 @@ if (
   process.env.NODE_ENV === 'development' &&
   process.env.REACT_APP_MSW_BROWSER
 ) {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   const { worker } = require('./mocks/browser')
   worker.start()
 }

src/layouts/BaseLayout/BaseLayout.test.tsx

@@ -222,29 +222,29 @@ describe('BaseLayout', () => {
     mockedUseImpersonate.mockReturnValue({ isImpersonating })
 
     server.use(
-      http.get('/internal/user', (info) => {
+      http.get('/internal/user', () => {
         return HttpResponse.json(internalUser)
       }),
-      graphql.query('CurrentUser', (info) => {
+      graphql.query('CurrentUser', () => {
         return HttpResponse.json({ data: currentUser })
       }),
-      graphql.query('DetailOwner', (info) => {
+      graphql.query('DetailOwner', () => {
         return HttpResponse.json({ data: mockOwner })
       }),
-      http.get('/internal/:provider/:owner/account-details', (info) => {
+      http.get('/internal/:provider/:owner/account-details', () => {
         return HttpResponse.json({})
       }),
       // Self hosted only
-      graphql.query('HasAdmins', (info) => {
+      graphql.query('HasAdmins', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('Seats', (info) => {
+      graphql.query('Seats', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('TermsOfService', (info) => {
+      graphql.query('TermsOfService', () => {
         return HttpResponse.json({ data: {} })
       }),
-      graphql.query('UseMyOrganizations', (info) => {
+      graphql.query('UseMyOrganizations', () => {
         return HttpResponse.json({
           data: {
             myOrganizationsData: {
@@ -258,10 +258,10 @@ describe('BaseLayout', () => {
           },
         })
       }),
-      graphql.mutation('updateDefaultOrganization', (info) => {
+      graphql.mutation('updateDefaultOrganization', () => {
         return HttpResponse.json({ data: {} })
       }),
-      http.get('/internal/users/current', (info) => {
+      http.get('/internal/users/current', () => {
         return HttpResponse.json({})
       })
     )

src/layouts/BaseLayout/InstallationHelpBanner/InstallationHelpBanner.test.jsx

@@ -48,7 +48,7 @@ describe('InstallationHelpBanner', () => {
     const mockGetItem = vi.spyOn(window.localStorage.__proto__, 'getItem')
 
     server.use(
-      graphql.query('IsSyncing', (info) => {
+      graphql.query('IsSyncing', () => {
         return HttpResponse.json({
           data: {
             me: {

src/layouts/BaseLayout/hooks/useUserAccessGate.test.tsx

@@ -31,7 +31,7 @@ const queryClient = new QueryClient({
 })
 const server = setupServer()
 
-let testLocation: { pathname: string; search: string } = {
+const testLocation: { pathname: string; search: string } = {
   pathname: '',
   search: '',
 }
@@ -255,11 +255,11 @@ describe('useUserAccessGate', () => {
     const mockMutationVariables = vi.fn()
 
     server.use(
-      http.get('/internal/user', (info) => {
+      http.get('/internal/user', () => {
         return HttpResponse.json(internalUser)
       }),
 
-      graphql.query('CurrentUser', (info) => {
+      graphql.query('CurrentUser', () => {
         return HttpResponse.json({ data: user })
       }),
       graphql.mutation('updateDefaultOrganization', async (info) => {

src/layouts/Header/Header.test.tsx

@@ -115,7 +115,7 @@ describe('Header', () => {
   function setup({ user = mockUser }: SetupArgs) {
     mockedUseImpersonate.mockReturnValue({ isImpersonating: false })
     server.use(
-      graphql.query('CurrentUser', (info) => {
+      graphql.query('CurrentUser', () => {
         return HttpResponse.json({ data: user })
       })
     )

src/layouts/Header/components/AdminLink/AdminLink.test.tsx

@@ -43,7 +43,7 @@ afterAll(() => {
 describe('AdminLink', () => {
   function setup(data = {}) {
     server.use(
-      http.get('/internal/users/current', (info) => {
+      http.get('/internal/users/current', () => {
         return HttpResponse.json(data)
       })
     )

src/layouts/Header/components/Navigator/MyContextSwitcher.test.tsx

@@ -82,7 +82,7 @@ describe('MyContextSwitcher', () => {
           return HttpResponse.json({ data: { me: null } })
         }
 
-        const orgList = !!info.variables?.after ? org2 : org1
+        const orgList = info.variables?.after ? org2 : org1
         const hasNextPage = info.variables?.after ? false : true
         const endCursor = info.variables?.after ? 'second' : 'first'
 
@@ -105,7 +105,7 @@ describe('MyContextSwitcher', () => {
 
         return HttpResponse.json({ data: queryData })
       }),
-      graphql.query('DetailOwner', (info) => {
+      graphql.query('DetailOwner', () => {
         if (noData) {
           return HttpResponse.json({ data: { me: null } })
         }

src/layouts/Header/components/Navigator/Navigator.test.tsx

@@ -181,17 +181,17 @@ interface SetupArgs {
 describe('Header Navigator', () => {
   function setup({ isMyOrg = true }: SetupArgs) {
     server.use(
-      graphql.query('MyContexts', (info) => {
+      graphql.query('MyContexts', () => {
         return HttpResponse.json({ data: mockMyContexts })
       }),
-      graphql.query('DetailOwner', (info) => {
+      graphql.query('DetailOwner', () => {
         if (!isMyOrg) {
           return HttpResponse.json({ data: mockDetailOwnerNotMyOrg })
         }
 
         return HttpResponse.json({ data: mockDetailOwner })
       }),
-      graphql.query('OwnerPageData', (info) => {
+      graphql.query('OwnerPageData', () => {
         if (isMyOrg) {
           return HttpResponse.json({ data: mockOwnerPageData })
         }

src/layouts/Header/components/SeatDetails/SeatDetails.test.tsx

@@ -54,7 +54,7 @@ afterAll(() => {
 describe('SeatDetails', () => {
   function setup({ data = mockData }: { data?: any }) {
     server.use(
-      graphql.query('Seats', (info) => {
+      graphql.query('Seats', () => {
         return HttpResponse.json({ data })
       })
     )

src/layouts/Header/components/ThemeToggle/ThemeToggle.test.tsx

@@ -73,7 +73,7 @@ describe('ThemeToggle', () => {
 
   it('assumes light mode when there is no theme in local storage', () => {
     setup({ isMediaPrefersDark: false })
-    mockGetItem.mockImplementation((key) => null)
+    mockGetItem.mockImplementation(() => null)
     render(
       <ThemeContextProvider>
         <ThemeToggle />

src/layouts/Header/components/UserDropdown/UserDropdown.test.tsx

@@ -113,10 +113,10 @@ describe('UserDropdown', () => {
     config.API_URL = ''
 
     server.use(
-      http.post('/logout', (info) => {
+      http.post('/logout', () => {
         return HttpResponse.json({}, { status: 205 })
       }),
-      graphql.query('CurrentUser', (info) => {
+      graphql.query('CurrentUser', () => {
         return HttpResponse.json({ data: mockUser })
       })
     )

src/layouts/LoginLayout/LoginLayout.test.tsx

@@ -59,7 +59,7 @@ afterAll(() => {
 describe('LoginLayout', () => {
   function setup() {
     server.use(
-      graphql.query('CurrentUser', (info) => {
+      graphql.query('CurrentUser', () => {
         return HttpResponse.json({ data: { me: null } })
       })
     )

src/layouts/shared/ErrorBoundary/ErrorBoundary.test.tsx

@@ -117,7 +117,7 @@ describe('Error Boundary', () => {
     beforeEach(() => {
       const spySentry = vi.spyOn(Sentry, 'withScope')
       spySentry.mockImplementation((callback) => {
-        // @ts-ignore - this test is skipped
+        // @ts-expect-error - this test is skipped
         callback({ setTag: sentryMockScope })
       })
     })