feat: persist proxy preferences

src/AppRoutes.tsx

@@ -13,11 +13,13 @@ import { RecordingPreviewer } from '@/views/RecordingPreviewer'
 import { Generator } from '@/views/Generator/Generator'
 import { Validator } from '@/views/Validator'
 import { routeMap } from './routeMap'
+import { Settings } from './views/Settings/Settings'
 
 const router = createHashRouter(
   createRoutesFromChildren(
     <Route path={routeMap.home} element={<Layout />}>
       <Route index element={<Home />} />
+      <Route path={routeMap.settings} element={<Settings />} />
       <Route path={routeMap.recorder} element={<Recorder />} />
       <Route
         path={routeMap.recordingPreviewer}

src/browser.ts

@@ -9,17 +9,27 @@ import { getCertificateSPKI } from './proxy'
 import { mkdtemp } from 'fs/promises'
 import path from 'path'
 import os from 'os'
-import { proxyPort } from './main'
+import { appSettings } from './main'
 
 const createUserDataDir = async () => {
   return mkdtemp(path.join(os.tmpdir(), 'k6-studio-'))
 }
 
+function getBrowserPath() {
+  const { recorder } = appSettings
+
+  if (recorder.detectBrowserPath) {
+    return computeSystemExecutablePath({
+      browser: Browser.CHROME,
+      channel: ChromeReleaseChannel.STABLE,
+    })
+  }
+
+  return recorder.browserPath as string
+}
+
 export const launchBrowser = async (browserWindow: BrowserWindow) => {
-  const path = computeSystemExecutablePath({
-    browser: Browser.CHROME,
-    channel: ChromeReleaseChannel.STABLE,
-  })
+  const path = getBrowserPath()
   console.info(`browser path: ${path}`)
 
   const userDataDir = await createUserDataDir()
@@ -54,7 +64,7 @@ export const launchBrowser = async (browserWindow: BrowserWindow) => {
       '--disable-background-networking',
       '--disable-component-update',
       '--disable-search-engine-choice-screen',
-      `--proxy-server=http://localhost:${proxyPort}`,
+      `--proxy-server=http://localhost:${appSettings.proxy.port}`,
       `--ignore-certificate-errors-spki-list=${certificateSPKI}`,
       disableChromeOptimizations,
     ],

src/components/Layout/ActivityBar/ActivityBar.tsx

@@ -8,6 +8,7 @@ import { VersionLabel } from './VersionLabel'
 import { HomeIcon } from '@/components/icons'
 import { NavIconButton } from './NavIconButton'
 import { ApplicationLogButton } from './ApplicationLogButton'
+import { SettingsButton } from './SettingsButton'
 
 export function ActivityBar() {
   return (
@@ -41,6 +42,7 @@ export function ActivityBar() {
 
         <Flex direction="column" align="center" gap="3" mt="auto">
           <ThemeSwitcher />
+          <SettingsButton />
           <ApplicationLogButton />
           <VersionLabel />
         </Flex>

src/components/Layout/ActivityBar/SettingsButton.tsx

@@ -0,0 +1,21 @@
+import { getRoutePath } from '@/routeMap'
+import { GearIcon } from '@radix-ui/react-icons'
+import { Tooltip, IconButton } from '@radix-ui/themes'
+import { useNavigate } from 'react-router-dom'
+
+export function SettingsButton() {
+  const navigate = useNavigate()
+
+  return (
+    <Tooltip content="Settings" side="right">
+      <IconButton
+        are-label="Settings"
+        color="gray"
+        variant="ghost"
+        onClick={() => navigate(getRoutePath('settings'))}
+      >
+        <GearIcon />
+      </IconButton>
+    </Tooltip>
+  )
+}

src/main.ts

@@ -45,6 +45,9 @@ import kill from 'tree-kill'
 import find from 'find-process'
 import { initializeLogger, openLogFolder } from './logger'
 import log from 'electron-log/main'
+import { AppSettings } from './schemas/appSettings'
+import { getSettings, saveSettings } from './settings'
+import { ProxyStatus } from './types'
 
 // handle auto updates
 if (process.env.NODE_ENV !== 'development') {
@@ -56,8 +59,8 @@ const proxyEmitter = new eventEmitter()
 // Used mainly to avoid starting a new proxy when closing the active one on shutdown
 let appShuttingDown: boolean = false
 let currentProxyProcess: ProxyProcess | null
-let proxyReady = false
-export let proxyPort = 6000
+let proxyStatus: ProxyStatus = 'offline'
+export let appSettings: AppSettings
 
 let currentBrowserProcess: Process | null
 let currentk6Process: K6Process | null
@@ -152,11 +155,19 @@ const createWindow = async () => {
   }
 
   mainWindow.once('ready-to-show', () => configureWatcher(mainWindow))
+  proxyEmitter.on('status:change', (statusName: ProxyStatus) => {
+    proxyStatus = statusName
+    mainWindow.webContents.send('proxy:status:change', statusName)
+  })
+  mainWindow.on('closed', () =>
+    proxyEmitter.removeAllListeners('status:change')
+  )
 
   return mainWindow
 }
 
 app.whenReady().then(async () => {
+  appSettings = await getSettings()
   await createSplashWindow()
   await setupProjectStructure()
   await createWindow()
@@ -188,11 +199,11 @@ app.on('before-quit', async () => {
 })
 
 // Proxy
-ipcMain.handle('proxy:start', async (event, port?: number) => {
+ipcMain.handle('proxy:start', async (event) => {
   console.info('proxy:start event received')
 
   const browserWindow = browserWindowFromEvent(event)
-  currentProxyProcess = await launchProxyAndAttachEmitter(browserWindow, port)
+  currentProxyProcess = await launchProxyAndAttachEmitter(browserWindow)
 })
 
 ipcMain.on('proxy:stop', async () => {
@@ -201,7 +212,7 @@ ipcMain.on('proxy:stop', async () => {
 })
 
 const waitForProxy = async (): Promise<void> => {
-  if (proxyReady) {
+  if (proxyStatus === 'online') {
     return Promise.resolve()
   }
 
@@ -292,7 +303,7 @@ ipcMain.handle(
     currentk6Process = await runScript(
       browserWindow,
       resolvedScriptPath,
-      proxyPort
+      appSettings.proxy.port
     )
   }
 )
@@ -506,6 +517,54 @@ ipcMain.handle('app:open-log', () => {
   openLogFolder()
 })
 
+ipcMain.handle('settings:get', async () => {
+  console.info('settings:get event received')
+  return await getSettings()
+})
+
+ipcMain.handle('settings:save', async (event, data: AppSettings) => {
+  console.info('settings:save event received')
+
+  const browserWindow = browserWindowFromEvent(event)
+  try {
+    const diff = await saveSettings(data)
+    applySettings(diff, browserWindow)
+
+    sendToast(browserWindow.webContents, {
+      title: 'Settings saved successfully',
+      status: 'success',
+    })
+    return true
+  } catch (error) {
+    log.error(error)
+    sendToast(browserWindow.webContents, {
+      title: 'Failed to save settings',
+      status: 'error',
+    })
+    return false
+  }
+})
+
+ipcMain.handle('proxy:status:get', async () => {
+  console.info('proxy:status:get event received')
+  return proxyStatus
+})
+
+async function applySettings(
+  diff: Partial<AppSettings>,
+  browserWindow: BrowserWindow
+) {
+  if (diff.proxy) {
+    stopProxyProcess()
+    appSettings.proxy = diff.proxy
+    proxyEmitter.emit('status:change', 'restarting')
+    currentProxyProcess = await launchProxyAndAttachEmitter(browserWindow)
+  }
+  if (diff.recorder) {
+    appSettings.recorder = diff.recorder
+  }
+}
+
 const browserWindowFromEvent = (
   event: Electron.IpcMainEvent | Electron.IpcMainInvokeEvent
 ) => {
@@ -518,29 +577,25 @@ const browserWindowFromEvent = (
   return browserWindow
 }
 
-const launchProxyAndAttachEmitter = async (
-  browserWindow: BrowserWindow,
-  port: number = proxyPort
-) => {
-  // confirm that the port is still open and if not get the next open one
-  const availableOpenport = await findOpenPort(port)
-  console.log(`proxy open port found: ${availableOpenport}`)
+const launchProxyAndAttachEmitter = async (browserWindow: BrowserWindow) => {
+  const { port, findPort } = appSettings.proxy
 
-  if (availableOpenport !== proxyPort) {
-    proxyPort = availableOpenport
-  }
+  const proxyPort = findPort ? await findOpenPort(port) : port
+  appSettings.proxy.port = proxyPort
+
+  console.log(`launching proxy ${JSON.stringify(appSettings.proxy)}`)
 
-  return launchProxy(browserWindow, proxyPort, {
+  return launchProxy(browserWindow, appSettings.proxy, {
     onReady: () => {
-      proxyReady = true
+      proxyEmitter.emit('status:change', 'online')
       proxyEmitter.emit('ready')
     },
     onFailure: async () => {
-      if (appShuttingDown) {
-        // we don't have to restart the proxy if the app is shutting down
+      if (appShuttingDown || proxyStatus === 'restarting') {
+        // don't restart the proxy if the app is shutting down or if it's already restarting
         return
       }
-      proxyReady = false
+      proxyEmitter.emit('status:change', 'restarting')
       currentProxyProcess = await launchProxyAndAttachEmitter(browserWindow)
 
       sendToast(browserWindow.webContents, {
@@ -593,7 +648,6 @@ const stopProxyProcess = () => {
     // NOTE: this might not kill the second spawned process on windows
     currentProxyProcess.kill()
     currentProxyProcess = null
-    proxyReady = false
   }
 }
 

src/preload.ts

@@ -1,8 +1,9 @@
 import { ipcRenderer, contextBridge, IpcRendererEvent } from 'electron'
-import { ProxyData, K6Log, FolderContent, K6Check } from './types'
+import { ProxyData, K6Log, FolderContent, K6Check, ProxyStatus } from './types'
 import { HarFile } from './types/har'
 import { GeneratorFile } from './types/generator'
 import { AddToastPayload } from './types/toast'
+import { AppSettings } from './schemas/appSettings'
 
 // Create listener and return clean up function to be used in useEffect
 function createListener<T>(channel: string, callback: (data: T) => void) {
@@ -27,6 +28,12 @@ const proxy = {
   onProxyData: (callback: (data: ProxyData) => void) => {
     return createListener('proxy:data', callback)
   },
+  getProxyStatus: () => {
+    return ipcRenderer.invoke('proxy:status:get')
+  },
+  onProxyStatusChange: (callback: (status: ProxyStatus) => void) => {
+    return createListener('proxy:status:change', callback)
+  },
 } as const
 
 const browser = {
@@ -147,6 +154,15 @@ const app = {
   },
 } as const
 
+const settings = {
+  getSettings: () => {
+    return ipcRenderer.invoke('settings:get')
+  },
+  saveSettings: (settings: AppSettings): Promise<AppSettings> => {
+    return ipcRenderer.invoke('settings:save', settings)
+  },
+}
+
 const studio = {
   proxy,
   browser,
@@ -155,6 +171,7 @@ const studio = {
   ui,
   generator,
   app,
+  settings,
 } as const
 
 contextBridge.exposeInMainWorld('studio', studio)

src/proxy.ts

@@ -8,6 +8,7 @@ import { ProxyData } from './types'
 import readline from 'readline/promises'
 import { safeJsonParse } from './utils/json'
 import log from 'electron-log/main'
+import { ProxySettings } from './schemas/appSettings'
 
 export type ProxyProcess = ChildProcessWithoutNullStreams
 
@@ -18,7 +19,7 @@ interface options {
 
 export const launchProxy = (
   browserWindow: BrowserWindow,
-  port?: number,
+  proxySettings: ProxySettings,
   { onReady, onFailure }: options = {}
 ): ProxyProcess => {
   let proxyScript: string
@@ -50,10 +51,17 @@ export const launchProxy = (
     proxyScript,
     '--set',
     `confdir=${certificatesPath}`,
+    '--listen-port',
+    `${proxySettings.port}`,
     '--mode',
-    `regular@${port}`,
+    getProxyMode(proxySettings),
   ]
 
+  if (proxyRequiresAuth(proxySettings)) {
+    const { username, password } = proxySettings.upstream
+    proxyArgs.push('--upstream-auth', `${username}:${password}`)
+  }
+
   const proxy = spawn(proxyPath, proxyArgs)
 
   // we use a reader to read entire lines from stdout instead of buffered data
@@ -94,6 +102,20 @@ export const launchProxy = (
   return proxy
 }
 
+const getProxyMode = (proxySettings: ProxySettings) => {
+  const { mode, upstream } = proxySettings
+
+  if (mode === 'upstream') {
+    return `upstream:${upstream.url}`
+  }
+
+  return 'regular'
+}
+
+const proxyRequiresAuth = (proxySettings: ProxySettings) => {
+  return proxySettings.mode === 'upstream' && proxySettings.upstream.requireAuth
+}
+
 export const getCertificatesPath = () => {
   if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
     return path.join(app.getAppPath(), 'resources', 'certificates')

src/routeMap.ts

@@ -3,6 +3,7 @@ import { generatePath } from 'react-router-dom'
 const routes = {
   home: '/',
   recorder: '/recorder',
+  settings: '/settings',
   recordingPreviewer: '/recording-previewer/:fileName',
   validator: '/validator/:fileName?',
   generator: '/generator/:fileName',
@@ -27,4 +28,5 @@ export const routeMap = {
   recordingPreviewer: getRoutePath('recordingPreviewer'),
   generator: getRoutePath('generator'),
   validator: getRoutePath('validator'),
+  settings: getRoutePath('settings'),
 }