fix: It's possible to start a recording with no supported browser installed (#523)

Author: going-confetti

src/App.tsx

@@ -3,13 +3,14 @@ import { Global } from '@emotion/react'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { enableMapSet } from 'immer'
 
-import { useTheme } from './hooks/useTheme'
+import { DevToolsDialog } from '@/components/DevToolsDialog'
+import { SettingsDialog } from '@/components/Settings/SettingsDialog'
+import { Toasts } from '@/components/Toast/Toasts'
+import { useCloseSplashScreen } from '@/hooks/useCloseSplashScreen'
+import { useTheme } from '@/hooks/useTheme'
+import { queryClient } from '@/utils/query'
 import { globalStyles } from './globalStyles'
 import { AppRoutes } from './AppRoutes'
-import { Toasts } from './components/Toast/Toasts'
-import { queryClient } from './utils/query'
-import { useCloseSplashScreen } from './hooks/useCloseSplashScreen'
-import { DevToolsDialog } from './components/DevToolsDialog'
 
 enableMapSet()
 
@@ -24,6 +25,7 @@ export function App() {
         <Toasts />
         <AppRoutes />
         <DevToolsDialog />
+        <SettingsDialog />
       </Theme>
     </QueryClientProvider>
   )

src/browser.ts

@@ -15,7 +15,7 @@ const createUserDataDir = async () => {
   return mkdtemp(path.join(os.tmpdir(), 'k6-studio-'))
 }
 
-function getBrowserPath() {
+export function getBrowserPath() {
   const { recorder } = appSettings
 
   if (recorder.detectBrowserPath) {

src/components/Form/FileUploadInput.tsx

@@ -1,6 +1,7 @@
 import { Flex, TextField, Button } from '@radix-ui/themes'
 import { FieldGroup } from './FieldGroup'
 import { Controller, FieldErrors } from 'react-hook-form'
+import { css } from '@emotion/react'
 
 type FileUploadInputProps = {
   name: string
@@ -34,29 +35,26 @@ export const FileUploadInput = ({
             hint={hint}
             hintType="text"
           >
-            <TextField.Root
-              type="text"
-              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}
-            />
+            <Flex gap="2" width="100%">
+              <TextField.Root
+                css={css`
+                  flex: 1;
+                `}
+                type="text"
+                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}
+              />
+              <Button disabled={disabled} onClick={onSelectFile} type="button">
+                {buttonText}
+              </Button>
+            </Flex>
           </FieldGroup>
         )}
       />
-
-      <Button
-        ml="2"
-        disabled={disabled}
-        onClick={onSelectFile}
-        style={{
-          marginTop: 48,
-        }}
-      >
-        {buttonText}
-      </Button>
     </Flex>
   )
 }

src/components/Layout/ActivityBar/ProxyStatusIndicator.tsx

@@ -1,11 +1,10 @@
 import { css } from '@emotion/react'
 import { Link1Icon, LinkBreak1Icon, LinkNone1Icon } from '@radix-ui/react-icons'
 import { Box, Flex, Tooltip } from '@radix-ui/themes'
-import { useEffect } from 'react'
 
-import { useStudioUIStore } from '@/store/ui'
 import type { ProxyStatus } from '@/types'
 import { exhaustive } from '@/utils/typescript'
+import { useProxyStatus } from '@/hooks/useProxyStatus'
 
 const COLOR_MAP: Record<ProxyStatus, string> = {
   ['online']: 'var(--green-9)',
@@ -14,19 +13,7 @@ const COLOR_MAP: Record<ProxyStatus, string> = {
 }
 
 export function ProxyStatusIndicator() {
-  const status = useStudioUIStore((state) => state.proxyStatus)
-  const setProxyStatus = useStudioUIStore((state) => state.setProxyStatus)
-
-  useEffect(() => {
-    ;(async function fetchProxyStatus() {
-      const status = await window.studio.proxy.getProxyStatus()
-      setProxyStatus(status)
-    })()
-
-    return window.studio.proxy.onProxyStatusChange((status) =>
-      setProxyStatus(status)
-    )
-  }, [setProxyStatus])
+  const status = useProxyStatus()
 
   return (
     <Tooltip content={`Proxy status: ${status}`} side="right">

src/components/Layout/ActivityBar/SettingsButton.tsx

@@ -1,25 +1,20 @@
-import { SettingsDialog } from '@/components/Settings/SettingsDialog'
+import { useStudioUIStore } from '@/store/ui'
 import { GearIcon } from '@radix-ui/react-icons'
 import { Tooltip, IconButton } from '@radix-ui/themes'
-import { useState } from 'react'
 
 export function SettingsButton() {
-  const [open, setOpen] = useState(false)
+  const setIsOpen = useStudioUIStore((state) => state.setIsSettingsDialogOpen)
 
   return (
-    <>
-      <Tooltip content="Settings" side="right">
-        <IconButton
-          area-label="Settings"
-          color="gray"
-          variant="ghost"
-          onClick={() => setOpen(true)}
-        >
-          <GearIcon />
-        </IconButton>
-      </Tooltip>
-
-      <SettingsDialog open={open} onOpenChange={setOpen} />
-    </>
+    <Tooltip content="Settings" side="right">
+      <IconButton
+        area-label="Settings"
+        color="gray"
+        variant="ghost"
+        onClick={() => setIsOpen(true)}
+      >
+        <GearIcon />
+      </IconButton>
+    </Tooltip>
   )
 }

src/components/Settings/RecorderSettings.tsx

@@ -57,7 +57,7 @@ export const RecorderSettings = () => {
         name="recorder.browserPath"
         onSelectFile={handleSelectFile}
         buttonText="Select executable"
-        hint="The location of the browser executable (Grafana k6 Studio currently supports Chrome)"
+        hint="Google Chrome needs to be installed on your machine for the recording functionality to work"
         disabled={recorder.detectBrowserPath}
       />
     </SettingsSection>

src/components/Settings/SettingsDialog.tsx

@@ -14,12 +14,8 @@ import { TelemetrySettings } from './TelemetrySettings'
 import { ButtonWithTooltip } from '../ButtonWithTooltip'
 import { AppearanceSettings } from './AppearanceSettings'
 import { LogsSettings } from './LogsSettings'
-import { useSaveSettings, useSettings } from './Settings.hooks'
-
-type SettingsDialogProps = {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
+import { useStudioUIStore } from '@/store/ui'
+import { useSaveSettings, useSettings } from '@/hooks/useSettings'
 
 const tabs = [
   { label: 'Proxy', value: 'proxy', component: ProxySettings },
@@ -41,10 +37,12 @@ const tabs = [
   },
 ]
 
-export const SettingsDialog = ({ open, onOpenChange }: SettingsDialogProps) => {
+export const SettingsDialog = () => {
   const { data: settings } = useSettings()
+  const isOpen = useStudioUIStore((state) => state.isSettingsDialogOpen)
+  const setIsOpen = useStudioUIStore((state) => state.setIsSettingsDialogOpen)
   const { mutateAsync: saveSettings, isPending } = useSaveSettings(() => {
-    onOpenChange(false)
+    setIsOpen(false)
   })
   const [selectedTab, setSelectedTab] = useState('proxy')
 
@@ -71,11 +69,11 @@ export const SettingsDialog = ({ open, onOpenChange }: SettingsDialogProps) => {
   const handleOpenChange = () => {
     reset(settings)
     setSelectedTab('proxy')
-    onOpenChange(!open)
+    setIsOpen(!isOpen)
   }
 
   return (
-    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
+    <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>
       <Dialog.Content
         maxWidth="800px"
         maxHeight="640px"

src/components/TextButton.tsx

@@ -8,6 +8,7 @@ export function TextButton({
 }) {
   return (
     <button
+      type="button"
       onClick={onClick}
       data-accent-color=""
       className="rt-Text rt-reset rt-Link rt-underline-auto"

src/hooks/useProxyStatus.ts

@@ -0,0 +1,20 @@
+import { useStudioUIStore } from '@/store/ui'
+import { useEffect } from 'react'
+
+export function useProxyStatus() {
+  const status = useStudioUIStore((state) => state.proxyStatus)
+  const setProxyStatus = useStudioUIStore((state) => state.setProxyStatus)
+
+  useEffect(() => {
+    ;(async function fetchProxyStatus() {
+      const status = await window.studio.proxy.getProxyStatus()
+      setProxyStatus(status)
+    })()
+
+    return window.studio.proxy.onProxyStatusChange((status) =>
+      setProxyStatus(status)
+    )
+  }, [setProxyStatus])
+
+  return status
+}

src/components/Settings/Settings.hooks.ts src/hooks/useSettings.tssrc/components/Settings/Settings.hooks.ts renamed to src/hooks/useSettings.ts

@@ -24,3 +24,10 @@ export function useSaveSettings(onSuccess?: () => void) {
     },
   })
 }
+
+export function useBrowserCheck() {
+  return useQuery({
+    queryKey: ['settings', 'browserCheck'],
+    queryFn: window.studio.ui.detectBrowser,
+  })
+}