chore: Stricter ESLint config (#383)

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-type-checked',
     'plugin:import/recommended',
     'plugin:import/electron',
     'plugin:import/typescript',
@@ -18,7 +18,11 @@ module.exports = {
     'prettier',
   ],
   parser: '@typescript-eslint/parser',
-  ignorePatterns: ['resources/group_snippet.js', 'install-k6.js'],
+  ignorePatterns: [
+    'resources/group_snippet.js',
+    'install-k6.js',
+    '.eslintrc.cjs',
+  ],
   plugins: [
     'import',
     'unused-imports',
@@ -43,11 +47,16 @@ module.exports = {
         argsIgnorePattern: '^_',
       },
     ],
-    // TODO: remove warnings when plugin:@typescript-eslint/recommended-type-checked is enabled
-    '@typescript-eslint/no-unsafe-assignment': 'warn',
-    '@typescript-eslint/no-unsafe-return': 'warn',
-    '@typescript-eslint/no-unsafe-argument': 'warn',
-    '@typescript-eslint/no-unsafe-member-access': 'warn',
+    '@typescript-eslint/no-floating-promises': [
+      'error',
+      {
+        ignoreIIFE: true,
+      },
+    ],
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      { checksVoidReturn: false },
+    ],
   },
 
   parserOptions: {

src/ErrorElement.tsx

@@ -10,11 +10,10 @@ import { css } from '@emotion/react'
 import GrotCrashed from '@/assets/grot-crashed.svg'
 import { ArrowLeftIcon } from '@radix-ui/react-icons'
 
-const handleCreateIssue = () => {
+const handleCreateIssue = () =>
   window.studio.browser.openExternalLink(
     'https://github.com/grafana/k6-studio/issues'
   )
-}
 
 const handleOpenLogs = () => {
   window.studio.log.openLogFolder()

src/codegen/codegen.utils.ts

@@ -24,6 +24,8 @@ export function stringify(value: unknown): string {
     return `{${properties}}`
   }
 
+  // TODO: https://github.com/grafana/k6-studio/issues/277
+  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
   return `${value}`
 }
 

src/components/ExperimentalBanner.tsx

@@ -1,11 +1,10 @@
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 import { Flex, Text, Link } from '@radix-ui/themes'
 
-const handleLinkClick = () => {
+const handleLinkClick = () =>
   window.studio.browser.openExternalLink(
     'https://github.com/grafana/k6-studio/issues'
   )
-}
 
 export function ExperimentalBanner() {
   return (

src/components/Form/FileUploadInput.tsx

@@ -39,6 +39,8 @@ export const FileUploadInput = ({
               disabled={disabled}
               onChange={field.onChange}
               name={field.name}
+              // TODO: https://github.com/grafana/k6-studio/issues/277
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               value={field.value}
             />
           </FieldGroup>

src/components/Layout/ActivityBar/HelpButton.tsx

@@ -2,17 +2,15 @@ import { QuestionMarkCircledIcon } from '@radix-ui/react-icons'
 import { DropdownMenu, IconButton, Tooltip } from '@radix-ui/themes'
 
 export function HelpButton() {
-  const handleOpenDocs = () => {
+  const handleOpenDocs = () =>
     window.studio.browser.openExternalLink(
       'https://grafana.com/docs/k6-studio/'
     )
-  }
 
-  const handleReportIssue = () => {
+  const handleReportIssue = () =>
     window.studio.browser.openExternalLink(
       'https://github.com/grafana/k6-studio/issues'
     )
-  }
 
   const handleOpenApplicationLogs = () => {
     window.studio.log.openLogFolder()

src/components/Layout/ActivityBar/ProxyStatusIndicator.tsx

@@ -18,11 +18,10 @@ export function ProxyStatusIndicator() {
   const setProxyStatus = useStudioUIStore((state) => state.setProxyStatus)
 
   useEffect(() => {
-    async function fetchProxyStatus() {
+    ;(async function fetchProxyStatus() {
       const status = await window.studio.proxy.getProxyStatus()
       setProxyStatus(status)
-    }
-    fetchProxyStatus()
+    })()
 
     return window.studio.proxy.onProxyStatusChange((status) =>
       setProxyStatus(status)

src/components/Layout/Sidebar/Sidebar.hooks.ts

@@ -26,13 +26,14 @@ function useFolderContent() {
   const setFolderContent = useStudioUIStore((s) => s.setFolderContent)
 
   useEffect(() => {
-    window.studio.ui.getFiles().then((files) => {
+    ;(async () => {
+      const files = await window.studio.ui.getFiles()
       setFolderContent({
         recordings: toFileMap(files.recordings),
         generators: toFileMap(files.generators),
         scripts: toFileMap(files.scripts),
       })
-    })
+    })()
   }, [setFolderContent])
 
   useEffect(

src/components/Settings/LogsSettings.tsx

@@ -17,13 +17,11 @@ export function LogsSettings() {
 
   // retrieve the current content of the log file
   useEffect(() => {
-    async function fetchLogContent() {
+    ;(async function fetchLogContent() {
       const content = await window.studio.log.getLogContent()
       setLogContent(content)
       scrollToLastLine()
-    }
-
-    fetchLogContent()
+    })()
   }, [scrollToLastLine])
 
   // subscribe to log changes

src/components/Settings/SettingsDialog.tsx

@@ -46,11 +46,10 @@ export const SettingsDialog = ({ open, onOpenChange }: SettingsDialogProps) => {
   const [selectedTab, setSelectedTab] = useState('proxy')
 
   useEffect(() => {
-    async function fetchSettings() {
+    ;(async function fetchSettings() {
       const data = await window.studio.settings.getSettings()
       setSettings(data)
-    }
-    fetchSettings()
+    })()
   }, [])
 
   const formMethods = useForm<AppSettings>({

src/components/Settings/UsageReportSettings.tsx

@@ -6,11 +6,10 @@ import { AppSettings } from '@/types/settings'
 export const UsageReportSettings = () => {
   const { control, register } = useFormContext<AppSettings>()
 
-  const handleLinkClick = () => {
+  const handleLinkClick = () =>
     window.studio.browser.openExternalLink(
       'https://grafana.com/docs/k6-studio/set-up/usage-collection/'
     )
-  }
 
   return (
     <SettingsSection>

src/components/WebLogView/Group.tsx

@@ -95,7 +95,7 @@ export function Group({
   useClickAway(headerRef, () => {
     if (!group.isEditing) return
 
-    handleSubmit(submit)()
+    return handleSubmit(submit)()
   })
 
   const isValidName = (value: string) => {

src/components/WebLogView/RequestDetails/utils.ts

@@ -28,6 +28,8 @@ export function parseParams(data: ProxyData) {
     }
 
     return stringify(
+      // TODO: https://github.com/grafana/k6-studio/issues/277
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       JSON.parse(jsonrepair(parsePythonByteString(contentDecoded)))
     )
   } catch (e) {

src/components/WebLogView/ResponseDetails/Font.tsx

@@ -6,19 +6,17 @@ export function Font({ url }: { url: string }) {
   const [isReady, setIsReady] = useState(false)
   const [name, setName] = useState('')
 
-  async function addFontFace(url: string) {
-    const name = uniqueId('font-')
-    const font = new FontFace(name, `url(${url})`)
-
-    await font.load()
-    document.fonts.add(font)
-    setIsReady(true)
-    setName(name)
-  }
-
   useEffect(() => {
-    setIsReady(false)
-    addFontFace(url)
+    ;(async function addFontFace(url: string) {
+      setIsReady(false)
+      const name = uniqueId('font-')
+      const font = new FontFace(name, `url(${url})`)
+
+      await font.load()
+      document.fonts.add(font)
+      setIsReady(true)
+      setName(name)
+    })(url)
   }, [url])
 
   if (!isReady) {

src/components/WebLogView/ResponseDetails/Preview.tsx

@@ -53,6 +53,8 @@ export function Preview({ content, contentType, format }: PreviewProps) {
     return (
       <ReactJson
         shouldCollapse={(field) => field.name !== 'root'}
+        // TODO: https://github.com/grafana/k6-studio/issues/277
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         src={JSON.parse(content)}
         theme={theme === 'dark' ? 'monokai' : 'rjv-default'}
         style={theme === 'dark' ? reactJsonDarkStyles : reactJsonLightStyles}

src/components/WebLogView/ResponseDetails/ResponseDetails.utils.ts

@@ -49,8 +49,12 @@ export function parseContent(format: string | undefined, data: ProxyData) {
   try {
     switch (format) {
       case 'json':
+        // TODO: https://github.com/grafana/k6-studio/issues/277
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         return stringify(JSON.parse(safeAtob(content)))
       case 'json-raw':
+        // TODO: https://github.com/grafana/k6-studio/issues/277
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         return stringify(JSON.parse(safeAtob(content)), 0)
       case 'css':
       case 'html':

src/hooks/useRunChecks.test.ts

@@ -41,7 +41,7 @@ describe('useRunChecks', () => {
       createK6Check({ id: '1', name: 'Check 1' }),
       createK6Check({ id: '2', name: 'Check 2' }),
     ]
-    onScriptCheck.mockImplementation((callback) => {
+    onScriptCheck.mockImplementation((callback: (data: K6Check[]) => void) => {
       callback(mockChecks)
       return () => {}
     })

src/hooks/useRunLogs.test.ts

@@ -3,6 +3,7 @@ import { useRunLogs } from './useRunLogs'
 import { renderHook } from '@testing-library/react'
 import { act } from 'react'
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { K6Log } from '@/types'
 
 const onScriptLog = vi.fn()
 
@@ -37,7 +38,7 @@ describe('useRunLogs', () => {
 
   it('should update logs when onScriptLog is called', () => {
     const mockLog = createK6Log()
-    onScriptLog.mockImplementation((callback) => {
+    onScriptLog.mockImplementation((callback: (log: K6Log) => void) => {
       callback(mockLog)
       return () => {}
     })

src/hooks/useScriptPreview.test.ts

@@ -16,7 +16,7 @@ import {
 } from '@/test/factories/generator'
 
 vi.mock('lodash-es', () => ({
-  debounce: vi.fn((fn) => fn),
+  debounce: vi.fn((fn: () => void) => fn),
 }))
 vi.mock('@/store/generator', () => ({
   useGeneratorStore: {

src/hooks/useScriptPreview.ts

@@ -30,6 +30,8 @@ export function useScriptPreview() {
     }, 100)
 
     // Initial preview generation
+    // TODO: https://github.com/grafana/k6-studio/issues/277
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     updatePreview(useGeneratorStore.getState())
 
     const unsubscribe = useGeneratorStore.subscribe((state) =>