feat: Create Generator from Recorder

package.json

@@ -61,6 +61,7 @@
     "@radix-ui/themes": "^3.0.5",
     "allotment": "^1.20.2",
     "electron-squirrel-startup": "^1.0.1",
+    "immer": "^10.1.1",
     "lodash-es": "^4.17.21",
     "node-forge": "^1.3.1",
     "prettier": "^3.3.2",

src/hooks/useGeneratorStore.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+
+import { GroupedProxyData } from '@/types'
+import { TestRule } from '@/types/rules'
+
+interface GeneratorState {
+  recording: GroupedProxyData
+  rules: TestRule[]
+  requestFilters: string[]
+  setRecording: (recording: GroupedProxyData) => void
+  addRequestFilter: (filter: string) => void
+}
+
+export const useGeneratorStore = create<GeneratorState>()(
+  immer((set) => ({
+    recording: {},
+    rules: [
+      {
+        type: 'customCode',
+        filter: { path: '' },
+        snippet: 'console.log("Hello, world!")',
+        placement: 'before',
+      },
+    ],
+    requestFilters: [],
+
+    addRequestFilter: (filter: string) =>
+      set((state) => {
+        state.requestFilters.push(filter)
+      }),
+    setRecording: (recording: GroupedProxyData) =>
+      set((state) => {
+        state.recording = recording
+      }),
+  }))
+)

src/hooks/useListenProxyData.ts

@@ -1,9 +1,9 @@
-import { ProxyData } from '@/types'
-import { mergeRequestsById } from '@/views/Recorder/Recorder.utils'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
+
+import { useRecorderStore } from './useRecorderStore'
 
 export function useListenProxyData(group?: string) {
-  const [proxyData, setProxyData] = useState<ProxyData[]>([])
+  const { addRequest } = useRecorderStore()
   const groupRef = useRef(group)
 
   useEffect(() => {
@@ -14,14 +14,7 @@ export function useListenProxyData(group?: string) {
 
   useEffect(() => {
     return window.studio.proxy.onProxyData((data) => {
-      setProxyData((prev) => {
-        return mergeRequestsById(prev, { ...data, group: groupRef.current })
-      })
+      addRequest(data, groupRef.current ?? 'default')
     })
-  }, [])
-
-  return {
-    proxyData,
-    resetProxyData: () => setProxyData([]),
-  }
+  }, [addRequest])
 }

src/hooks/useRecorderStore.ts

@@ -0,0 +1,41 @@
+import { create } from 'zustand'
+import { immer } from 'zustand/middleware/immer'
+
+import { ProxyData } from '@/types'
+import { mergeRequestsById } from '@/views/Recorder/Recorder.utils'
+
+interface RecorderState {
+  isRecording: boolean
+  proxyData: ProxyData[]
+  addRequest: (request: ProxyData, currentGroup: string) => void
+  setIsRecording: (isRecording: boolean) => void
+  setProxyData: (proxyData: ProxyData[]) => void
+  resetProxyData: () => void
+}
+
+export const useRecorderStore = create<RecorderState>()(
+  immer((set) => ({
+    isRecording: false,
+    proxyData: [],
+
+    addRequest: (request: ProxyData, currentGroup: string) =>
+      set((state) => {
+        state.proxyData = mergeRequestsById(state.proxyData, {
+          ...request,
+          group: currentGroup,
+        })
+      }),
+    setIsRecording: (isRecording: boolean) =>
+      set((state) => {
+        state.isRecording = isRecording
+      }),
+    setProxyData: (proxyData: ProxyData[]) =>
+      set((state) => {
+        state.proxyData = proxyData
+      }),
+    resetProxyData: () =>
+      set((state) => {
+        state.proxyData = []
+      }),
+  }))
+)

src/views/Generator/Generator.tsx

@@ -1,40 +1,27 @@
-import { useState } from 'react'
+import { Allotment } from 'allotment'
 import { Box, Button } from '@radix-ui/themes'
 
-import { GroupedProxyData } from '@/types'
 import { exportScript, saveScript } from './Generator.utils'
 import { PageHeading } from '@/components/Layout/PageHeading'
 import { harToGroupedProxyData } from '@/utils/harToProxyData'
 import { GeneratorDrawer } from './GeneratorDrawer'
-import { Allotment } from 'allotment'
 import { GeneratorSidebar } from './GeneratorSidebar'
+import { useGeneratorStore } from '@/hooks/useGeneratorStore'
 
 export function Generator() {
-  const [requests, setRequests] = useState<GroupedProxyData>({})
-  const [filter, setFilter] = useState('')
-  const hasRecording = Object.entries(requests).length > 0
+  const { recording, requestFilters, rules, setRecording } = useGeneratorStore()
+  const hasRecording = Object.entries(recording).length > 0
 
   const handleImport = async () => {
     const har = await window.studio.har.openFile()
     if (!har) return
 
     const groupedProxyData = harToGroupedProxyData(har)
-    setRequests(groupedProxyData)
+    setRecording(groupedProxyData)
   }
 
   const handleExport = async () => {
-    const script = await exportScript(
-      requests,
-      [
-        {
-          type: 'customCode',
-          filter: { path: '' },
-          snippet: 'console.log("Hello, world!")',
-          placement: 'before',
-        },
-      ],
-      [filter]
-    )
+    const script = await exportScript(recording, rules, requestFilters)
 
     saveScript(script)
   }
@@ -50,16 +37,16 @@ export function Generator() {
       <Allotment defaultSizes={[3, 1]}>
         <Allotment.Pane minSize={400}>
           <Allotment vertical defaultSizes={[2, 1]}>
-            <Allotment.Pane>
+            <Allotment.Pane minSize={300}>
               <Box height="100%">Rules:</Box>
             </Allotment.Pane>
-            <Allotment.Pane>
-              <GeneratorDrawer filter={filter} onFilterChange={setFilter} />
+            <Allotment.Pane minSize={200}>
+              <GeneratorDrawer />
             </Allotment.Pane>
           </Allotment>
         </Allotment.Pane>
         <Allotment.Pane minSize={300}>
-          <GeneratorSidebar requests={requests} />
+          <GeneratorSidebar requests={recording} />
         </Allotment.Pane>
       </Allotment>
     </>

src/views/Generator/GeneratorDrawer.tsx → src/views/Generator/GeneratorDrawer/GeneratorDrawer.tsx

@@ -1,15 +1,7 @@
-import * as Label from '@radix-ui/react-label'
-import { Box, Flex, Tabs, TextField } from '@radix-ui/themes'
+import { Box, Tabs } from '@radix-ui/themes'
+import { RequestFilters } from './RequestFilters'
 
-interface GeneratorDrawerProps {
-  filter: string
-  onFilterChange: (filters: string) => void
-}
-
-export function GeneratorDrawer({
-  filter,
-  onFilterChange,
-}: GeneratorDrawerProps) {
+export function GeneratorDrawer() {
   return (
     <Box height="100%">
       <Tabs.Root defaultValue="requestFilters">
@@ -27,18 +19,7 @@ export function GeneratorDrawer({
         <Tabs.Content value="thinkTime">Think time content</Tabs.Content>
         <Tabs.Content value="testData">Test data content</Tabs.Content>
         <Tabs.Content value="requestFilters">
-          <Flex gap="2" p="2" align="center" width="100%">
-            <Label.Root htmlFor="requestFilterInput">
-              Allow requests containing
-            </Label.Root>
-            <TextField.Root
-              style={{ flex: 1 }}
-              id="requestFilterInput"
-              value={filter}
-              onChange={(e) => onFilterChange(e.target.value)}
-              placeholder="Type part of the request URL to filter requests"
-            />
-          </Flex>
+          <RequestFilters />
         </Tabs.Content>
       </Tabs.Root>
     </Box>

src/views/Generator/GeneratorDrawer/RequestFilters.tsx

@@ -0,0 +1,39 @@
+import * as Label from '@radix-ui/react-label'
+import { Box, Button, Flex, TextField } from '@radix-ui/themes'
+import { useState } from 'react'
+
+import { useGeneratorStore } from '@/hooks/useGeneratorStore'
+
+export function RequestFilters() {
+  const [newFilter, setNewFilter] = useState('')
+  const { requestFilters, addRequestFilter } = useGeneratorStore()
+
+  return (
+    <Box p="2">
+      <Flex gap="2" p="2" align="center" width="100%">
+        <Label.Root htmlFor="requestFilterInput">
+          Allow requests containing
+        </Label.Root>
+        <TextField.Root
+          style={{ flex: 1 }}
+          id="requestFilterInput"
+          value={newFilter}
+          onChange={(e) => setNewFilter(e.target.value)}
+          placeholder="Type part of the request URL to filter requests"
+        />
+        <Button
+          onClick={() => {
+            addRequestFilter(newFilter)
+          }}
+        >
+          Add
+        </Button>
+      </Flex>
+      <ul>
+        {requestFilters.map((filter) => (
+          <li key={filter}>{filter}</li>
+        ))}
+      </ul>
+    </Box>
+  )
+}

src/views/Generator/GeneratorDrawer/index.ts

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

src/views/Recorder/Recorder.tsx

@@ -1,33 +1,25 @@
 import { useState } from 'react'
 import { Flex, Heading, ScrollArea } from '@radix-ui/themes'
+import { groupBy } from 'lodash-es'
+
 import { WebLogView } from '@/components/WebLogView'
 import { GroupForm } from './GroupForm'
-import { proxyDataToHar } from '@/utils/proxyDataToHar'
 import { DebugControls } from './DebugControls'
-import { RecordingButton } from './RecordingButton'
-import { SaveHarDialog } from './SaveHarDialog'
+import { RecordingControls } from './RecordingButton'
 import { useListenProxyData } from '@/hooks/useListenProxyData'
 import { PageHeading } from '@/components/Layout/PageHeading'
-import { groupBy } from 'lodash-es'
+import { useRecorderStore } from '@/hooks/useRecorderStore'
 
 export function Recorder() {
+  const { proxyData } = useRecorderStore()
   const [group, setGroup] = useState<string>('Default')
-  const [showHarSaveDialog, setShowHarSaveDialog] = useState(false)
-  const { proxyData, resetProxyData } = useListenProxyData(group)
+  useListenProxyData(group)
   const groupedProxyData = groupBy(proxyData, 'group')
 
-  function saveHarToFile() {
-    const har = proxyDataToHar(groupedProxyData)
-    window.studio.har.saveFile(JSON.stringify(har, null, 4))
-  }
-
   return (
     <>
       <PageHeading text="Recorder">
-        <RecordingButton
-          onStop={() => setShowHarSaveDialog(true)}
-          onStart={resetProxyData}
-        />
+        <RecordingControls requests={groupedProxyData} />
       </PageHeading>
       <Flex justify="between" wrap="wrap" gap="2">
         <GroupForm onChange={setGroup} value={group} />
@@ -40,11 +32,6 @@ export function Recorder() {
       <ScrollArea scrollbars="vertical">
         <WebLogView requests={groupedProxyData} />
       </ScrollArea>
-      <SaveHarDialog
-        onConfirm={saveHarToFile}
-        open={showHarSaveDialog}
-        onOpenChange={setShowHarSaveDialog}
-      />
     </>
   )
 }