Migrate away from @remix-run/eslint-config.

LanDinh · Dec 19, 2024 · 23879e1 · 23879e1
1 parent 23947ef
commit 23879e1
Show file tree

Hide file tree

Showing 20 changed files with 190 additions and 771 deletions.
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
@@ -1,7 +1,29 @@
 // noinspection JSUnresolvedReference
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: [ "@remix-run/eslint-config", "@remix-run/eslint-config/node" ],
+  extends: [ "eslint:recommended" ],
+  overrides: [
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      rules: {
+        "jsx-a11y/aria-role": [2, { "allowedInvalidRoles": ["icon"] }]
+      }
+    },
+    {
+      files: ["**/*.{ts,tsx}"],
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    }
+  ],
   ignorePatterns: [ "/app/khaleesi/proto/*.d.ts" ],
   rules: {
     "max-len": [2, { code: 100, tabWidth: 2, ignorePattern: "\\s*<path", ignoreUrls: true }],

diff --git a/frontend/khaleesi/app/khaleesi/auth/login.tsx b/frontend/khaleesi/app/khaleesi/auth/login.tsx
@@ -22,7 +22,7 @@ export const meta: MetaFunction = () => {
   ]
 }
 
-export const action = async ({ request }: ActionFunctionArgs): Promise<any> => {
+export const action = async ({ request }: ActionFunctionArgs): Promise<any> => {  // eslint-disable-line @typescript-eslint/no-explicit-any, max-len
   const session = new Session()
   await session.init(request)
   const form = await request.formData()

diff --git a/frontend/khaleesi/app/khaleesi/auth/logout.tsx b/frontend/khaleesi/app/khaleesi/auth/logout.tsx
@@ -21,7 +21,7 @@ export const meta: MetaFunction = () => {
   ]
 }
 
-export const action = async ({ request }: ActionFunctionArgs): Promise<TypedResponse<any>> => {
+export const action = async ({ request }: ActionFunctionArgs): Promise<TypedResponse<any>> => {  // eslint-disable-line @typescript-eslint/no-explicit-any, max-len
   const session = new Session()
   await session.init(request)
   return session.destroy('/')

diff --git a/frontend/khaleesi/app/khaleesi/grpc/util.server.ts b/frontend/khaleesi/app/khaleesi/grpc/util.server.ts
@@ -21,9 +21,9 @@ export class Client<Type extends $protobuf.rpc.Service> {
     const Channel = makeGenericClientConstructor({}, serviceName)
     const channel = new Channel(serviceUrl, credentials.createInsecure())
 
-    // @ts-ignore
+    // @ts-expect-error any
     this.stub = khaleesi[site][app][stubName].create(
-      (method: any, requestData: any, callback: any) => channel.makeUnaryRequest(
+      (method: any, requestData: any, callback: any) => channel.makeUnaryRequest(  // eslint-disable-line @typescript-eslint/no-explicit-any, max-len
         `/${serviceName}/${method.name}`,
           arg => arg,
           arg => arg,
@@ -35,7 +35,7 @@ export class Client<Type extends $protobuf.rpc.Service> {
 }
 
 export const Singleton = <Value>(site: string, app: string, valueFactory: () => Value): Value => {
-  const g = global as any
+  const g = global as any  // eslint-disable-line @typescript-eslint/no-explicit-any
   g.__singletons ??= {}
   g.__singletons['grpc'] ??= {}
   g.__singletons['grpc'][site] ??= valueFactory()

diff --git a/frontend/khaleesi/app/khaleesi/home/content.tsx b/frontend/khaleesi/app/khaleesi/home/content.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react'
 
 
-export function Content({ children }: PropsWithChildren<{}>): JSX.Element {
+export function Content({ children }: PropsWithChildren<unknown>): JSX.Element {
   return <main id="khaleesi-content">
     {children}
   </main>

diff --git a/frontend/khaleesi/app/khaleesi/home/document.tsx b/frontend/khaleesi/app/khaleesi/home/document.tsx
@@ -14,14 +14,10 @@ import { Navigation } from '../navigation/navigation'
 import type { NavigationElementProperties } from '../navigation/navigationElement'
 import { Content } from './content'
 import { ErrorPage } from './error'
-// @ts-ignore: styles have no types
-import rootStyles from '../styles/root.css?url'
-// @ts-ignore: styles have no types
-import navigationStyles from '../styles/navigation.css?url'
-// @ts-ignore: styles have no types
-import chipStyles from '../styles/chip.css?url'
-// @ts-ignore: styles have no types
-import tableStyles from '../styles/table.css?url'
+import rootStyles from '../styles/root.css?url'  // eslint-disable-line import/no-unresolved
+import navigationStyles from '../styles/navigation.css?url'  // eslint-disable-line import/no-unresolved, max-len
+import chipStyles from '../styles/chip.css?url'  // eslint-disable-line import/no-unresolved
+import tableStyles from '../styles/table.css?url'  // eslint-disable-line import/no-unresolved
 import {
   homeNavigationData,
   topNavigationData,

diff --git a/frontend/khaleesi/app/khaleesi/navigation/breadcrumb.tsx b/frontend/khaleesi/app/khaleesi/navigation/breadcrumb.tsx
@@ -11,7 +11,7 @@ export function breadcrumb(
     breadcrumb: (): JSX.Element => <NavigationElement element={element} />,
   }
 }
-export type RouteMatch = UIMatch<any, { breadcrumb?: (match?: RouteMatch) => JSX.Element }>
+export type RouteMatch = UIMatch<any, { breadcrumb?: (match?: RouteMatch) => JSX.Element }>  // eslint-disable-line @typescript-eslint/no-explicit-any, max-len
 
 export function BreadCrumbs(): JSX.Element {
   const rawMatches: RouteMatch[] = useMatches() as RouteMatch[]

diff --git a/frontend/khaleesi/app/khaleesi/navigation/navigation.tsx b/frontend/khaleesi/app/khaleesi/navigation/navigation.tsx
@@ -68,8 +68,10 @@ export function Navigation(
     document.getElementById('khaleesi-navigation')!.toggleAttribute('open')
   }, [ open ])
 
-  return <details id="khaleesi-navigation">
-    <div id="khaleesi-navigation-background" onClick={closeMenu}/>
+  return <details id="khaleesi-navigation"> {
+    // eslint-disable-next-line max-len
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+   }<div id="khaleesi-navigation-background" onClick={closeMenu}/>
     <summary id="khaleesi-navigation-button" className="khaleesi-navigation-icon">
       <MenuIcon />
     </summary>

diff --git a/frontend/khaleesi/app/khaleesi/navigation/navigationElement.tsx b/frontend/khaleesi/app/khaleesi/navigation/navigationElement.tsx
@@ -27,9 +27,9 @@ export function NavigationMenuElement({
   onClick: () => void,
 }): JSX.Element {
   let icon = <div>Icon missing!</div>
-  if (commonIconLookup.hasOwnProperty(element.label)) {
+  if (commonIconLookup.hasOwnProperty(element.label)) {  // eslint-disable-line no-prototype-builtins, max-len
     icon = commonIconLookup[element.label]
-  } else if (iconLookup.hasOwnProperty(element.label)) {
+  } else if (iconLookup.hasOwnProperty(element.label)) {  // eslint-disable-line no-prototype-builtins, max-len
     icon = iconLookup[element.label]
   }
   return <div className="khaleesi-navigation-item">

diff --git a/frontend/khaleesi/app/khaleesi/testUtil/consoleLogging.tsx b/frontend/khaleesi/app/khaleesi/testUtil/consoleLogging.tsx
@@ -1,18 +1,20 @@
-type ConsoleFunction = (data: any[]) => void
+type ConsoleFunction = (data: any[]) => void  // eslint-disable-line @typescript-eslint/no-explicit-any, max-len
 
 export function suppressConsoleFunction(
   errorNames     : string[],
   originalConsole: ConsoleFunction,
 ): ConsoleFunction {
-  return (message: any[]): void => {
+  return (message: any[]): void => {  // eslint-disable-line @typescript-eslint/no-explicit-any
     let passed = true
     for (const errorName of errorNames) {
       if (message.toString().includes(errorName)) {
         passed = false
         break
       }
     }
-    passed && originalConsole(message)
+    if(passed) {
+      originalConsole(message)
+    }
   }
 }
 

diff --git a/frontend/khaleesi_frontend_tests/tests/testAuth/testLogin.tsx b/frontend/khaleesi_frontend_tests/tests/testAuth/testLogin.tsx
@@ -45,7 +45,7 @@ const buildActionArguments = (user: string | Blob): ActionFunctionArgs => {
 
 test('Rendering the login form.', () => {
   // Prepare data.
-  let RemixStub = createTestingStub(LoginRoute)
+  const RemixStub = createTestingStub(LoginRoute)
   // Execute test.
   render(<RemixStub />)
   // Assert result.

diff --git a/frontend/khaleesi_frontend_tests/tests/testAuth/testLogout.tsx b/frontend/khaleesi_frontend_tests/tests/testAuth/testLogout.tsx
@@ -39,7 +39,7 @@ const buildActionArguments = (): ActionFunctionArgs => {
 
 test('Rendering the logout form.', () => {
   // Prepare data.
-  let RemixStub = createTestingStub(LogoutRoute)
+  const RemixStub = createTestingStub(LogoutRoute)
   // Execute test.
   render(<RemixStub />)
   // Assert result.

diff --git a/frontend/khaleesi_frontend_tests/tests/testComponents/testTable/testPaginator.tsx b/frontend/khaleesi_frontend_tests/tests/testComponents/testTable/testPaginator.tsx
@@ -23,7 +23,7 @@ describe('Rendering.', () => {
     const size = 5
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}
@@ -57,7 +57,7 @@ describe('Rendering.', () => {
     const size = 25
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}
@@ -87,7 +87,7 @@ describe('Rendering.', () => {
     const size = 25
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}
@@ -110,7 +110,7 @@ describe('Rendering.', () => {
     const size = 5
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}
@@ -146,7 +146,7 @@ describe('Size changing', () => {
     const size = 5
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}
@@ -170,7 +170,7 @@ describe('Page navigation', () => {
     const size = 5
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}
@@ -192,7 +192,7 @@ describe('Page navigation', () => {
     const size = 5
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}
@@ -214,7 +214,7 @@ describe('Page navigation', () => {
     const size = 5
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}
@@ -236,7 +236,7 @@ describe('Page navigation', () => {
     const size = 5
     const handleSizeChange = jest.fn()
     const handlePageChange = jest.fn()
-    let RemixStub = createTestingStub(() => <Paginator
+    const RemixStub = createTestingStub(() => <Paginator
       total={total}
       page={page}
       size={size}

diff --git a/frontend/khaleesi_frontend_tests/tests/testComponents/testTable/testTable.tsx b/frontend/khaleesi_frontend_tests/tests/testComponents/testTable/testTable.tsx
@@ -18,7 +18,7 @@ const originalWarning = console.warn.bind(console.warn)
 jest.mock('../../../app/khaleesi/components/table/paginator')
 jest.mock('@remix-run/react', () => ({
   ...jest.requireActual('@remix-run/react'),
-  useSearchParams: (): any[] => ([ { has: () => false }, jest.fn() ]),
+  useSearchParams: (): any[] => ([ { has: () => false }, jest.fn() ]),  // eslint-disable-line @typescript-eslint/no-explicit-any, max-len
 }))
 
 beforeAll(() => {
@@ -40,7 +40,7 @@ test('Table renders as expected.', () => {
   const mockPaginator = Paginator as jest.MockedFunction<typeof Paginator>
   mockPaginator.mockImplementation(() => <></>)
 
-  let RemixStub = createTestingStub(() => <Table<Data>
+  const RemixStub = createTestingStub(() => <Table<Data>
     columns={columns}
     rowId={rowId}
     data={data}

diff --git a/frontend/khaleesi_frontend_tests/tests/testHome/testDocument.tsx b/frontend/khaleesi_frontend_tests/tests/testHome/testDocument.tsx
@@ -62,7 +62,7 @@ test('App gets rendered without errors.', () => {
   mockContent.mockImplementation(() => <></>)
   const mockBreadCrumbs = BreadCrumbs as jest.MockedFunction<typeof BreadCrumbs>
   mockBreadCrumbs.mockImplementation(() => <></>)
-  let RemixStub = createTestingStub(() => <App title="Test App" />)
+  const RemixStub = createTestingStub(() => <App title="Test App" />)
   // Execute test.
   render(<RemixStub />)
   // Assert result.
@@ -79,7 +79,7 @@ test('ErrorBoundary gets rendered without errors.', () => {
   mockContent.mockImplementation(() => <></>)
   const mockBreadCrumbs = BreadCrumbs as jest.MockedFunction<typeof BreadCrumbs>
   mockBreadCrumbs.mockImplementation(() => <></>)
-  let RemixStub = createTestingStub(() => <ErrorBoundary title="Test App" />)
+  const RemixStub = createTestingStub(() => <ErrorBoundary title="Test App" />)
   // Execute test.
   render(<RemixStub />)
   // Assert result.

diff --git a/frontend/khaleesi_frontend_tests/tests/testHome/testError.tsx b/frontend/khaleesi_frontend_tests/tests/testHome/testError.tsx
@@ -27,7 +27,7 @@ test('ErrorPage renders route errors.', (): void => {
   // Prepare data.
   jest.spyOn(hooks, 'isRouteErrorResponse').mockReturnValue(true)
   jest.spyOn(hooks, 'useRouteError').mockReturnValue({ status: 1337, data: { message: 'FooBar' } })
-  let RemixStub = createTestingStub(ErrorPage)
+  const RemixStub = createTestingStub(ErrorPage)
   // Execute test.
   render(<RemixStub />)
   // Assert result.
@@ -41,7 +41,7 @@ test('ErrorPage renders unknown errors.', (): void => {
   // Prepare data.
   jest.spyOn(hooks, 'isRouteErrorResponse').mockReturnValue(false)
   jest.spyOn(hooks, 'useRouteError').mockReturnValue(Error('message'))
-  let RemixStub = createTestingStub(ErrorPage)
+  const RemixStub = createTestingStub(ErrorPage)
   // Execute test.
   render(<RemixStub />)
   // Assert result.
@@ -54,7 +54,7 @@ test('ErrorPage renders unknown non-errors.', (): void => {
   // Prepare data.
   jest.spyOn(hooks, 'isRouteErrorResponse').mockReturnValue(false)
   jest.spyOn(hooks, 'useRouteError').mockReturnValue({ message: 'message' })
-  let RemixStub = createTestingStub(ErrorPage)
+  const RemixStub = createTestingStub(ErrorPage)
   // Execute test.
   render(<RemixStub />)
   // Assert result.

diff --git a/frontend/khaleesi_frontend_tests/tests/testNavigation/testNavigation.tsx b/frontend/khaleesi_frontend_tests/tests/testNavigation/testNavigation.tsx
@@ -58,15 +58,15 @@ test('Navigation menu renders without errors.', () => {
     params  : {},
     data    : null,
     handle  : {
-      breadcrumb: (element: NavigationElementProperties): JSX.Element => <div>TEST</div>
+      breadcrumb: (element: NavigationElementProperties): JSX.Element => <div>TEST</div>  // eslint-disable-line @typescript-eslint/no-unused-vars, max-len
     }
   }
   jest.spyOn(router, 'useMatches').mockReturnValue([ match ])
   const mockMenuIcon = MenuIcon as jest.MockedFunction<typeof MenuIcon>
   mockMenuIcon.mockImplementation(() => <></>)
   const mockElement = NavigationMenuElement as jest.MockedFunction<typeof NavigationMenuElement>
   mockElement.mockImplementation(() => <></>)
-  let RemixStub = createTestingStub(
+  const RemixStub = createTestingStub(
     () => <Navigation
       top={navigationData('top')}
       middle={navigationData('middle')}
@@ -91,8 +91,8 @@ test('NavigationMenu closes when link is clicked.', () => {
   const mockMenuIcon = MenuIcon as jest.MockedFunction<typeof MenuIcon>
   mockMenuIcon.mockImplementation(() => <></>)
   const mockElement = NavigationMenuElement as jest.MockedFunction<typeof NavigationMenuElement>
-  mockElement.mockImplementation(({ onClick }) => <div onClick={onClick}>TEST</div>)
-  let RemixStub = createTestingStub(
+  mockElement.mockImplementation(({ onClick }) => <div onClick={onClick}>TEST</div>)  // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, max-len
+  const RemixStub = createTestingStub(
     () => <Navigation
       top={navigationData('top')}
       middle={navigationData('middle')}
@@ -113,8 +113,8 @@ test('NavigationMenu closes when clicking outside the menu.', () => {
   const mockMenuIcon = MenuIcon as jest.MockedFunction<typeof MenuIcon>
   mockMenuIcon.mockImplementation(() => <></>)
   const mockElement = NavigationMenuElement as jest.MockedFunction<typeof NavigationMenuElement>
-  mockElement.mockImplementation(({ onClick }) => <div onClick={onClick}>TEST</div>)
-  let RemixStub = createTestingStub(
+  mockElement.mockImplementation(({ onClick }) => <div onClick={onClick}>TEST</div>)  // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, max-len
+  const RemixStub = createTestingStub(
     () => <Navigation
       top={navigationData('top')}
       middle={navigationData('middle')}

diff --git a/frontend/khaleesi_frontend_tests/tests/testNavigation/testNavigationElement.tsx b/frontend/khaleesi_frontend_tests/tests/testNavigation/testNavigationElement.tsx
@@ -25,7 +25,7 @@ test('NavigationElement renders without error.', () => {
     label: 'TEST',
     icon: <div>Icon</div>,
   }
-  let RemixStub = createTestingStub(
+  const RemixStub = createTestingStub(
     () => <NavigationElement element={navigationElementProperties} />,
   )
   // Execute test.
@@ -42,7 +42,7 @@ test('NavigationMenuElement renders without error for common icon.', () => {
     label: 'Home',
     icon: <div>Icon</div>,
   }
-  let RemixStub = createTestingStub(
+  const RemixStub = createTestingStub(
     () => <NavigationMenuElement element={navigationElementProperties} onClick={(): void => {}} />,
   )
   // Execute test.
@@ -59,7 +59,7 @@ test('NavigationMenuElement renders without error for app specific icon.', () =>
     label: 'Test',
     icon: <div>Icon</div>,
   }
-  let RemixStub = createTestingStub(
+  const RemixStub = createTestingStub(
     () => <NavigationMenuElement element={navigationElementProperties} onClick={(): void => {}} />,
   )
   // Execute test.
@@ -76,7 +76,7 @@ test('NavigationMenuElement renders without error for missing icon.', () => {
     label: 'Missing Label',
     icon: <div>Icon</div>,
   }
-  let RemixStub = createTestingStub(
+  const RemixStub = createTestingStub(
     () => <NavigationMenuElement element={navigationElementProperties} onClick={(): void => {}} />,
   )
   // Execute test.