feat: Add ability to target headers by name

package.json

@@ -97,6 +97,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-router-dom": "^6.24.0",
+    "react-select": "^5.8.3",
     "react-use": "^17.5.1",
     "tiny-invariant": "^1.3.3",
     "tree-kill": "^1.2.2",

src/codegen/codegen.ts

@@ -9,7 +9,7 @@ import { generateOptions } from './options'
 import { getContentTypeWithCharsetHeader } from '@/utils/headers'
 import { REQUIRED_IMPORTS } from '@/constants/imports'
 import { generateImportStatement } from './imports'
-import { cleanupRecording } from './codegen.utils'
+import { cleanupRecording, shouldIncludeHeaderInScript } from './codegen.utils'
 import { groupProxyData } from '@/utils/groups'
 
 interface GenerateScriptParams {
@@ -186,9 +186,8 @@ function generateSleep(timing: ThinkTime['timing']): string {
 }
 
 export function generateRequestParams(request: ProxyData['request']): string {
-  const headersToExclude = ['Cookie', 'User-Agent', 'Host', 'Content-Length']
   const headers = request.headers
-    .filter(([name]) => !headersToExclude.includes(name))
+    .filter(([name]) => shouldIncludeHeaderInScript(name))
     .map(([name, value]) => `'${name}': \`${value}\``)
     .join(',')
 

src/codegen/codegen.utils.ts

@@ -1,6 +1,9 @@
 import { flow } from 'lodash-es'
 import { ProxyData } from '@/types'
 import { getLocationHeader, getUpgradeHeader } from '@/utils/headers'
+import { canonicalHeaderKey } from '@/rules/utils'
+
+const HEADERS_TO_EXCLUDE = ['Cookie', 'User-Agent', 'Host', 'Content-Length']
 
 // TODO: find a well-maintained library for this
 export function stringify(value: unknown): string {
@@ -120,3 +123,7 @@ export const removeWebsocketRequests = (recording: ProxyData[]) => {
 export function cleanupRecording(recording: ProxyData[]) {
   return flow(removeWebsocketRequests, mergeRedirects)(recording)
 }
+
+export function shouldIncludeHeaderInScript(key: string) {
+  return !HEADERS_TO_EXCLUDE.includes(canonicalHeaderKey(key))
+}

src/components/Form/ControlledReactSelect.tsx

@@ -0,0 +1,40 @@
+import { Control, Controller, FieldValues, Path } from 'react-hook-form'
+import { StyledReactSelect } from '../StyledReactSelect'
+import { ComponentProps, ReactNode } from 'react'
+
+type Option = { label: ReactNode; value: string; disabled?: boolean }
+
+interface ControlledSelectProps<T extends FieldValues, O extends Option> {
+  name: Path<T>
+  control: Control<T>
+  options: O[]
+  selectProps?: ComponentProps<typeof StyledReactSelect<O>>
+  onChange?: (value?: O['value']) => void
+}
+
+export function ControlledReactSelect<T extends FieldValues, O extends Option>({
+  name,
+  control,
+  options,
+  onChange,
+  selectProps = {},
+}: ControlledSelectProps<T, O>) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <StyledReactSelect
+          onChange={(option) =>
+            onChange ? onChange(option?.value) : field.onChange(option?.value)
+          }
+          onBlur={field.onBlur}
+          value={options.find((option) => option.value === field.value)}
+          isDisabled={field.disabled}
+          options={options}
+          {...selectProps}
+        />
+      )}
+    />
+  )
+}

src/components/Layout/Layout.tsx

@@ -5,11 +5,15 @@ import { Outlet, useLocation } from 'react-router-dom'
 
 import { Sidebar } from './Sidebar'
 import { ActivityBar } from './ActivityBar'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { PinRightIcon } from '@radix-ui/react-icons'
+import { useLocalStorage } from 'react-use'
 
 export function Layout() {
-  const [isSidebarExpanded, setIsSidebarExpanded] = useState(true)
+  const [isSidebarExpanded, setIsSidebarExpanded] = useLocalStorage(
+    'isSidebarExpanded',
+    true
+  )
   const location = useLocation()
 
   const handleVisibleChange = (index: number, visible: boolean) => {

src/components/Layout/Sidebar/Sidebar.tsx

@@ -11,7 +11,7 @@ import { SearchField } from '@/components/SearchField'
 import { useState } from 'react'
 
 interface SidebarProps {
-  isExpanded: boolean
+  isExpanded?: boolean
   onCollapseSidebar: () => void
 }
 

src/components/StyledReactSelect/StyledReactSelect.styles.ts

@@ -0,0 +1,74 @@
+import { StylesConfig, Theme } from 'react-select'
+
+export function getThemeConfig(theme: Theme) {
+  return {
+    ...theme,
+    spacing: {
+      ...theme.spacing,
+      baseUnit: 2,
+      menuGutter: 2,
+    },
+
+    colors: {
+      ...theme.colors,
+      primary: 'var(--focus-8)', // active border
+      primary50: 'var(--accent-9)', // focus item
+      primary25: 'var(--accent-9)', // item hover
+      neutral0: 'var(--color-surface)', // input background
+      neutral20: 'var(--gray-a7)', // border
+      neutral30: 'var(--gray-a8)', // border hover
+      neutral50: 'var(--gray-a10)', // placeholder
+      neutral60: 'var(--gray-12)', // caret
+      neutral80: 'var(--gray-12)', // input text
+    },
+  }
+}
+
+export function getStylesConfig<Option>(): StylesConfig<Option> {
+  return {
+    control: (provided, state) => ({
+      ...provided,
+      height: 'var(--space-6)',
+      minHeight: 'auto',
+      paddingLeft: 'var(--space-3)',
+      paddingRight: 'var(--space-3)',
+      boxShadow: state.menuIsOpen ? 'none' : provided.boxShadow,
+      borderColor: state.menuIsOpen ? 'var(--gray-a8)' : provided.borderColor,
+      '&:hover': {
+        borderColor: 'var(--gray-a8)',
+      },
+    }),
+    valueContainer: (provided) => ({
+      ...provided,
+      padding: 0,
+    }),
+    singleValue: (provided) => ({
+      ...provided,
+      margin: 0,
+    }),
+    menu: (provided) => ({
+      ...provided,
+      backgroundColor: 'var(--color-panel-solid)',
+    }),
+    menuPortal: (provided) => ({
+      ...provided,
+      zIndex: 40,
+    }),
+    menuList: (provided) => ({
+      ...provided,
+      padding: 'var(--space-2)',
+      paddingRight: 'var(--space-3)',
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      background: state.isFocused ? 'var(--accent-9)' : 'transparent',
+      color: state.isFocused ? 'var(--accent-contrast)' : undefined,
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative',
+      paddingLeft: 'var(--space-5)',
+      paddingRight: 'var(--space-6)',
+      borderRadius: 'var(--radius-2)',
+    }),
+  }
+}

src/components/StyledReactSelect/StyledReactSelect.tsx

@@ -0,0 +1,52 @@
+import { ComponentProps, useMemo } from 'react'
+import Select, { components, OptionProps } from 'react-select'
+import { ChevronDownIcon, ThickCheckIcon } from '@radix-ui/themes'
+import { getStylesConfig, getThemeConfig } from './StyledReactSelect.styles'
+
+export function StyledReactSelect<Option>(
+  props: ComponentProps<typeof Select<Option>>
+) {
+  const styles = useMemo(() => getStylesConfig<Option>(), [])
+
+  return (
+    <div css={{ fontSize: 'var(--font-size-2)' }}>
+      <Select
+        menuPlacement="auto"
+        menuPosition="fixed"
+        styles={styles}
+        components={{
+          IndicatorSeparator: null,
+          DropdownIndicator: DropdownIndicator,
+          Option: OptionComponent<Option>,
+        }}
+        theme={getThemeConfig}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function OptionComponent<Option>({ children, ...props }: OptionProps<Option>) {
+  return (
+    <components.Option {...props}>
+      <div
+        css={{
+          position: 'absolute',
+          left: 0,
+          width: 'var(--space-5)',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {props.isSelected && <ThickCheckIcon />}
+      </div>
+
+      {children}
+    </components.Option>
+  )
+}
+
+function DropdownIndicator() {
+  return <ChevronDownIcon className="rt-SelectIcon" />
+}

src/components/StyledReactSelect/index.ts

@@ -0,0 +1 @@
+export * from './StyledReactSelect'