fix: failed to establish a connection with the upstream server

src/components/Form/FileUploadInput.tsx

@@ -0,0 +1,56 @@
+import { Flex, TextField, Button } from '@radix-ui/themes'
+import { FieldGroup } from './FieldGroup'
+import { Controller, FieldErrors } from 'react-hook-form'
+
+type FileUploadInputProps = {
+  name: string
+  label: string
+  buttonText: string
+  hint?: string
+  errors?: FieldErrors
+  onSelectFile: () => void
+}
+
+export const FileUploadInput = ({
+  onSelectFile,
+  name,
+  hint,
+  label,
+  errors,
+  buttonText,
+}: FileUploadInputProps) => {
+  return (
+    <Flex>
+      <Controller
+        name={name}
+        render={({ field }) => (
+          <FieldGroup
+            flexGrow="1"
+            name={name}
+            label={label}
+            errors={errors ?? {}}
+            hint={hint}
+            hintType="text"
+          >
+            <TextField.Root
+              type="text"
+              onChange={field.onChange}
+              name={field.name}
+              value={field.value}
+            />
+          </FieldGroup>
+        )}
+      />
+
+      <Button
+        ml="2"
+        onClick={onSelectFile}
+        style={{
+          marginTop: 48,
+        }}
+      >
+        {buttonText}
+      </Button>
+    </Flex>
+  )
+}

src/components/Form/index.ts

@@ -1,3 +1,4 @@
 export * from './FieldError'
 export * from './FieldGroup'
 export * from './ControlledSelect'
+export * from './FileUploadInput'

src/components/Settings/RecorderSettings.tsx

@@ -1,8 +1,8 @@
-import { FieldGroup } from '@/components/Form'
 import { AppSettings } from '@/types/settings'
-import { Flex, Text, TextField, Checkbox, Button } from '@radix-ui/themes'
+import { Flex, Text, Checkbox } from '@radix-ui/themes'
 import { Controller, useFormContext } from 'react-hook-form'
 import { SettingsSection } from './SettingsSection'
+import { FileUploadInput } from '../Form'
 
 export const RecorderSettings = () => {
   const {
@@ -44,30 +44,14 @@ export const RecorderSettings = () => {
       </Flex>
 
       {recorder && !recorder.detectBrowserPath && (
-        <Flex>
-          <FieldGroup
-            flexGrow="1"
-            name="recorder.browserPath"
-            label="Browser Path"
-            errors={errors}
-            hint="The location of the browser executable (k6 Studio currently supports Chrome)"
-            hintType="text"
-          >
-            <TextField.Root type="text" {...register('recorder.browserPath')} />
-          </FieldGroup>
-
-          <Button
-            ml="2"
-            onClick={handleSelectFile}
-            style={{
-              display: 'flex',
-              alignSelf: 'center',
-              marginTop: errors.recorder ? 12 : 36,
-            }}
-          >
-            Select executable
-          </Button>
-        </Flex>
+        <FileUploadInput
+          label="Browser Path"
+          errors={errors}
+          name="recorder.browserPath"
+          onSelectFile={handleSelectFile}
+          buttonText="Select executable"
+          hint="The location of the browser executable (k6 Studio currently supports Chrome)"
+        />
       )}
     </SettingsSection>
   )

src/components/Settings/SettingsDialog.tsx

@@ -50,10 +50,6 @@ export const SettingsDialog = ({ open, onOpenChange }: SettingsDialogProps) => {
     }
   }
 
-  const handleCancelClick = () => {
-    reset(settings)
-  }
-
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Content
@@ -72,9 +68,7 @@ export const SettingsDialog = ({ open, onOpenChange }: SettingsDialogProps) => {
 
           <Flex gap="3" justify="end">
             <Dialog.Close>
-              <Button variant="outline" onClick={handleCancelClick}>
-                Cancel
-              </Button>
+              <Button variant="outline">Cancel</Button>
             </Dialog.Close>
             <Dialog.Close>
               <ButtonWithTooltip

src/components/Settings/UpstreamProxySettings.tsx

@@ -1,4 +1,4 @@
-import { FieldGroup } from '@/components/Form'
+import { FieldGroup, FileUploadInput } from '@/components/Form'
 import { AppSettings } from '@/types/settings'
 import { TextField, Flex, Checkbox, Text } from '@radix-ui/themes'
 import { Controller, useFormContext } from 'react-hook-form'
@@ -9,10 +9,20 @@ export function UpstreamProxySettings() {
     control,
     register,
     formState: { errors },
+    setValue,
+    clearErrors,
   } = useFormContext<AppSettings>()
 
   const { proxy } = watch()
 
+  const handleSelectFile = async () => {
+    const result = await window.studio.settings.selectUpstreamCertificate()
+    const { canceled, filePaths } = result
+    if (canceled || !filePaths.length) return
+    setValue('proxy.certificatePath', filePaths[0], { shouldDirty: true })
+    clearErrors('proxy.certificatePath')
+  }
+
   return (
     <>
       <FieldGroup
@@ -76,6 +86,14 @@ export function UpstreamProxySettings() {
           </FieldGroup>
         </>
       )}
+
+      <FileUploadInput
+        name="proxy.certificatePath"
+        label="Certificate path (optional)"
+        onSelectFile={handleSelectFile}
+        buttonText="Select file"
+        hint="The location of the certificate file used to establish a trusted connection with the upstream server"
+      />
     </>
   )
 }

src/main.ts

@@ -46,7 +46,12 @@ import find from 'find-process'
 import { initializeLogger, openLogFolder } from './logger'
 import log from 'electron-log/main'
 import { AppSettings } from './types/settings'
-import { getSettings, saveSettings, selectBrowserExecutable } from './settings'
+import {
+  getSettings,
+  saveSettings,
+  selectBrowserExecutable,
+  selectUpstreamCertificate,
+} from './settings'
 import { ProxyStatus } from './types'
 
 // handle auto updates
@@ -549,6 +554,10 @@ ipcMain.handle('settings:select-browser-executable', async () => {
   return selectBrowserExecutable()
 })
 
+ipcMain.handle('settings:select-upstream-certificate', async () => {
+  return selectUpstreamCertificate()
+})
+
 ipcMain.handle('proxy:status:get', async () => {
   console.info('proxy:status:get event received')
   return proxyStatus

src/preload.ts

@@ -164,6 +164,9 @@ const settings = {
   selectBrowserExecutable: (): Promise<Electron.OpenDialogReturnValue> => {
     return ipcRenderer.invoke('settings:select-browser-executable')
   },
+  selectUpstreamCertificate: (): Promise<Electron.OpenDialogReturnValue> => {
+    return ipcRenderer.invoke('settings:select-upstream-certificate')
+  },
 }
 
 const studio = {

src/proxy.ts

@@ -62,6 +62,13 @@ export const launchProxy = (
     proxyArgs.push('--upstream-auth', `${username}:${password}`)
   }
 
+  if (proxySettings.mode === 'upstream' && proxySettings.certificatePath) {
+    proxyArgs.push(
+      '--set',
+      `ssl_verify_upstream_trusted_ca=${proxySettings.certificatePath}`
+    )
+  }
+
   const proxy = spawn(proxyPath, proxyArgs)
 
   // we use a reader to read entire lines from stdout instead of buffered data

src/schemas/appSettings.ts

@@ -16,6 +16,7 @@ export const UpstreamProxySettingsSchema = RegularProxySettingsSchema.extend({
   requiresAuth: z.boolean(),
   username: z.string().optional(),
   password: z.string().optional(),
+  certificatePath: z.string().optional(),
 })
 
 export const ProxySettingsSchema = z

src/settings.ts

@@ -91,3 +91,11 @@ export async function selectBrowserExecutable() {
     filters: [{ name: 'Executables', extensions }],
   })
 }
+
+export async function selectUpstreamCertificate() {
+  return dialog.showOpenDialog({
+    title: 'Select certificate',
+    properties: ['openFile'],
+    filters: [{ name: 'Proxy certificate', extensions: ['pem', 'cer', 'p12'] }],
+  })
+}