Merge branch 'main' of github.com:grafana/k6-studio into feat/generat…

…or-schema-migration
grafana · Dec 27, 2024 · 5a29894 · 5a29894
2 parents 3871084 + 7e6fd8a
commit 5a29894
Show file tree

Hide file tree

Showing 48 changed files with 285 additions and 190 deletions.
diff --git a/.eslintrc.cjs b/.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: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ErrorElement.tsx b/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()

diff --git a/src/browser.ts b/src/browser.ts
@@ -70,7 +70,7 @@ export const launchBrowser = async (
       `--proxy-server=http://localhost:${appSettings.proxy.port}`,
       `--ignore-certificate-errors-spki-list=${certificateSPKI}`,
       disableChromeOptimizations,
-      url ?? '',
+      url?.trim() || 'about:blank',
     ],
     onExit: sendBrowserClosedEvent,
   })

diff --git a/src/codegen/codegen.utils.ts b/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}`
 }
 

diff --git a/src/components/ExperimentalBanner.tsx b/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 (

diff --git a/src/components/Form/FileUploadInput.tsx b/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>

diff --git a/src/components/Layout/ActivityBar/HelpButton.tsx b/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()

diff --git a/src/components/Layout/ActivityBar/ProxyStatusIndicator.tsx b/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)

diff --git a/src/components/Layout/Sidebar/Sidebar.hooks.ts b/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(

diff --git a/src/components/Layout/Sidebar/Sidebar.tsx b/src/components/Layout/Sidebar/Sidebar.tsx
@@ -28,78 +28,81 @@ export function Sidebar({ isExpanded, onCollapseSidebar }: SidebarProps) {
       maxWidth="100%"
       overflow="hidden"
       position="relative"
+      asChild
     >
-      <Flex align="center" m="2" gap="2">
-        <SearchField
-          css={css`
-            flex: 1 1 0;
-          `}
-          filter={searchTerm}
-          placeholder="Find files..."
-          size="1"
-          onChange={setSearchTerm}
-        />
-
-        {isExpanded && (
-          <IconButton
+      <Flex direction="column">
+        <Flex align="center" m="2" gap="2">
+          <SearchField
+            css={css`
+              flex: 1 1 0;
+            `}
+            filter={searchTerm}
+            placeholder="Find files..."
             size="1"
-            variant="ghost"
-            color="gray"
-            onClick={onCollapseSidebar}
-          >
-            <PinLeftIcon />
-          </IconButton>
-        )}
-      </Flex>
-      <ScrollArea scrollbars="vertical">
-        <Flex direction="column" gap="2">
-          <FileTree
-            label="Recordings"
-            files={recordings}
-            noFilesMessage="No recordings found"
-            actions={
-              <>
-                <Tooltip content="New recording" side="right">
+            onChange={setSearchTerm}
+          />
+
+          {isExpanded && (
+            <IconButton
+              size="1"
+              variant="ghost"
+              color="gray"
+              onClick={onCollapseSidebar}
+            >
+              <PinLeftIcon />
+            </IconButton>
+          )}
+        </Flex>
+        <ScrollArea scrollbars="vertical">
+          <Flex direction="column" gap="2" pb="2">
+            <FileTree
+              label="Recordings"
+              files={recordings}
+              noFilesMessage="No recordings found"
+              actions={
+                <>
+                  <Tooltip content="New recording" side="right">
+                    <IconButton
+                      asChild
+                      aria-label="New recording"
+                      variant="ghost"
+                      size="1"
+                    >
+                      <Link to={getRoutePath('recorder')}>
+                        <PlusIcon />
+                      </Link>
+                    </IconButton>
+                  </Tooltip>
+                </>
+              }
+            />
+            <FileTree
+              label="Test generators"
+              files={generators}
+              noFilesMessage="No generators found"
+              actions={
+                <Tooltip content="New generator" side="right">
                   <IconButton
                     asChild
-                    aria-label="New recording"
+                    aria-label="New generator"
                     variant="ghost"
                     size="1"
+                    onClick={createNewGenerator}
+                    css={{ cursor: 'pointer' }}
                   >
-                    <Link to={getRoutePath('recorder')}>
-                      <PlusIcon />
-                    </Link>
+                    <PlusIcon />
                   </IconButton>
                 </Tooltip>
-              </>
-            }
-          />
-          <FileTree
-            label="Test generators"
-            files={generators}
-            noFilesMessage="No generators found"
-            actions={
-              <Tooltip content="New generator" side="right">
-                <IconButton
-                  asChild
-                  aria-label="New generator"
-                  variant="ghost"
-                  size="1"
-                  onClick={createNewGenerator}
-                  css={{ cursor: 'pointer' }}
-                >
-                  <PlusIcon />
-                </IconButton>
-              </Tooltip>
-            }
-          />
-          <FileTree
-            label="Scripts"
-            files={scripts}
-            noFilesMessage="No scripts found"
-          />
-        </Flex>
-      </ScrollArea>
+              }
+            />
+            <FileTree
+              label="Scripts"
+              files={scripts}
+              noFilesMessage="No scripts found"
+            />
+          </Flex>
+        </ScrollArea>
+      </Flex>
     </Box>
   )
 }
diff --git a/src/components/Settings/LogsSettings.tsx b/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
@@ -45,14 +43,14 @@ export function LogsSettings() {
   return (
     <SettingsSection>
       <Flex mb="4" justify="between" align="center">
-        <Flex>
+        <Flex align="center">
           <Spinner mr="2" />
-          <Text size="2">
-            k6 Studio logs in this screen are updated in real-time.
+          <Text size="2" color="gray">
+            Application logs are updated in real-time.
           </Text>
         </Flex>
         <Button onClick={handleOpenLogClick} variant="outline">
-          Open log location
+          Open logs folder
         </Button>
       </Flex>
 

diff --git a/src/components/Settings/Settings.hooks.ts b/src/components/Settings/Settings.hooks.ts
@@ -0,0 +1,26 @@
+import { queryClient } from '@/utils/query'
+import { useMutation, useQuery } from '@tanstack/react-query'
+
+export function useSettings() {
+  return useQuery({
+    queryKey: ['settings'],
+    queryFn: window.studio.settings.getSettings,
+  })
+}
+
+export function useSaveSettings(onSuccess?: () => void) {
+  return useMutation({
+    mutationFn: window.studio.settings.saveSettings,
+    onSuccess: async (isSuccessful) => {
+      if (!isSuccessful) {
+        return
+      }
+
+      await queryClient.invalidateQueries({ queryKey: ['settings'] })
+      onSuccess?.()
+    },
+    onError: (error) => {
+      console.error('Error saving settings', error)
+    },
+  })
+}