feat: Recording selector draft

src/components/Layout/PageHeading.tsx

@@ -1,5 +1,5 @@
 import { HomeIcon } from '@radix-ui/react-icons'
-import { Flex, Heading, IconButton, Separator } from '@radix-ui/themes'
+import { Flex, Heading, IconButton } from '@radix-ui/themes'
 import { useNavigate } from 'react-router-dom'
 import { ThemeSwitcher } from '../ThemeSwitcher'
 
@@ -14,7 +14,15 @@ export function PageHeading({
 
   return (
     <>
-      <Flex gap="2" align="center" p="2">
+      <Flex
+        gap="2"
+        align="center"
+        p="2"
+        style={{
+          borderBottom: '1px solid var(--gray-4)',
+          backgroundColor: 'var(--gray-2)',
+        }}
+      >
         <IconButton
           onClick={() => {
             navigate('/')
@@ -24,15 +32,13 @@ export function PageHeading({
           <HomeIcon width="18" height="18" />
         </IconButton>
         <Flex maxWidth="50%" flexGrow="1">
-          <Heading>{text}</Heading>
+          <Heading size="3">{text}</Heading>
         </Flex>
-        <Flex maxWidth="50%" flexGrow="1" justify="end" align="center" gap="2">
+        <Flex flexGrow="1" justify="end" align="center" gap="2">
           <ThemeSwitcher />
           {children}
         </Flex>
       </Flex>
-
-      <Separator size="4" style={{ backgroundColor: 'var(--gray-4)' }} />
     </>
   )
 }

src/hooks/useGeneratorStore/selectors.ts

@@ -16,3 +16,7 @@ export function useSelectedRule() {
     return rule
   })
 }
+
+export function useHasRecording() {
+  return useGeneratorStore((state) => state.requests.length > 0)
+}

src/hooks/useGeneratorStore/useGeneratorStore.ts

@@ -14,7 +14,7 @@ export const useGeneratorStore = create<GeneratorState>()(
     ...createRulesSlice(set, get, store),
     ...createVariablesSlice(set, get, store),
     ...createThinkTimeSlice(set, get, store),
-    name: `generator_${Date()}`,
+    name: generateNewName(),
     setName: (name: string) =>
       set((state) => {
         state.name = name
@@ -30,6 +30,7 @@ export const useGeneratorStore = create<GeneratorState>()(
     resetRecording: () =>
       set((state) => {
         state.requests = []
+        state.recordingPath = ''
         state.filteredRequests = []
         state.allowList = []
       }),
@@ -58,3 +59,12 @@ export const useGeneratorStore = create<GeneratorState>()(
       }),
   }))
 )
+
+function generateNewName() {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  })
+  const formattedDate = formatter.format(new Date())
+  return `Generator ${formattedDate}`
+}

src/hooks/useWindowTitle.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+
+const defaultTitle = 'k6 studio'
+
+export function useWindowTitle(title: string) {
+  useEffect(() => {
+    document.title = `${defaultTitle} - ${title}`
+
+    return () => {
+      document.title = defaultTitle
+    }
+  }, [title])
+}

src/views/Generator/AllowList/AllowList.tsx

@@ -29,12 +29,11 @@ export function AllowList() {
 
   return (
     <>
-      <Button
-        onClick={() => setShowAllowListDialog(true)}
-        disabled={requests.length === 0}
-      >
-        Allowed hosts [{allowList.length}/{hosts.length}]
-      </Button>
+      {requests.length > 0 && (
+        <Button onClick={() => setShowAllowListDialog(true)}>
+          Allowed hosts [{allowList.length}/{hosts.length}]
+        </Button>
+      )}
       {/* Radix does not unmount dialog on close, this is need to clear local state */}
       {showAllowListDialog && (
         <AllowListDialog

src/views/Generator/Generator.tsx

@@ -4,39 +4,28 @@ import { useEffect } from 'react'
 
 import { exportScript, saveScript, saveGenerator } from './Generator.utils'
 import { PageHeading } from '@/components/Layout/PageHeading'
-import { harToProxyData } from '@/utils/harToProxyData'
 import { GeneratorDrawer } from './GeneratorDrawer'
 import { GeneratorSidebar } from './GeneratorSidebar'
-import { useGeneratorStore } from '@/hooks/useGeneratorStore'
+import { useGeneratorStore, useHasRecording } from '@/hooks/useGeneratorStore'
 import { TestRuleContainer } from './TestRuleContainer'
 import { AllowList } from './AllowList/AllowList'
+import { RecordingSelector } from './RecordingSelector'
+import { useWindowTitle } from '@/hooks/useWindowTitle'
 
 export function Generator() {
-  const {
-    rules,
-    setRecording,
-    resetRecording,
-    filteredRequests,
-    setRecordingPath,
-  } = useGeneratorStore()
-
-  const hasRecording = filteredRequests.length > 0
+  const rules = useGeneratorStore((store) => store.rules)
+  const name = useGeneratorStore((store) => store.name)
+  const resetRecording = useGeneratorStore((store) => store.resetRecording)
+  const filteredRequests = useGeneratorStore((store) => store.filteredRequests)
+  const hasRecording = useHasRecording()
+  useWindowTitle(name)
 
   useEffect(() => {
     return () => {
       resetRecording()
     }
   }, [resetRecording])
 
-  const handleImport = async () => {
-    const harFile = await window.studio.har.openFile()
-    if (!harFile) return
-
-    const proxyData = harToProxyData(harFile.content)
-    setRecording(proxyData)
-    setRecordingPath(harFile.path)
-  }
-
   const handleExport = async () => {
     const script = await exportScript(filteredRequests, rules)
 
@@ -46,12 +35,10 @@ export function Generator() {
   return (
     <>
       <PageHeading text="Generator">
-        <Button onClick={saveGenerator}>Save</Button>
-        <Button onClick={handleImport}>Import HAR</Button>
+        <RecordingSelector />
         <AllowList />
-        <Button onClick={handleExport} disabled={!hasRecording}>
-          Export script
-        </Button>
+        {hasRecording && <Button onClick={saveGenerator}>Save</Button>}
+        {hasRecording && <Button onClick={handleExport}>Export script</Button>}
       </PageHeading>
       <Allotment defaultSizes={[3, 1]}>
         <Allotment.Pane minSize={400}>
@@ -64,7 +51,7 @@ export function Generator() {
             </Allotment.Pane>
           </Allotment>
         </Allotment.Pane>
-        <Allotment.Pane minSize={300}>
+        <Allotment.Pane minSize={300} visible={hasRecording}>
           <GeneratorSidebar requests={filteredRequests} />
         </Allotment.Pane>
       </Allotment>

src/views/Generator/GeneratorSidebar/GeneratorSidebar.tsx

@@ -3,13 +3,14 @@ import { ProxyData } from '@/types'
 import { Box, Flex, ScrollArea, Tabs } from '@radix-ui/themes'
 import { ScriptPreview } from './ScriptPreview'
 import { groupProxyData } from '@/utils/groups'
+import { useHasRecording } from '@/hooks/useGeneratorStore'
 
 interface GeneratorSidebarProps {
   requests: ProxyData[]
 }
 
 export function GeneratorSidebar({ requests }: GeneratorSidebarProps) {
-  const hasRecording = requests.length > 0
+  const hasRecording = useHasRecording()
   const groupedProxyData = groupProxyData(requests)
 
   return (
@@ -21,9 +22,11 @@ export function GeneratorSidebar({ requests }: GeneratorSidebarProps) {
         }}
       >
         <Tabs.List>
-          <Tabs.Trigger value="requests">Requests</Tabs.Trigger>
+          <Tabs.Trigger value="requests">
+            Requests ({requests.length})
+          </Tabs.Trigger>
           <Tabs.Trigger value="script" disabled={!hasRecording}>
-            Script
+            Script preview
           </Tabs.Trigger>
         </Tabs.List>
         <Tabs.Content

src/views/Generator/RecordingSelector.tsx

@@ -0,0 +1,53 @@
+import { useGeneratorStore, useHasRecording } from '@/hooks/useGeneratorStore'
+import { harToProxyData } from '@/utils/harToProxyData'
+import { css } from '@emotion/react'
+import { ArrowDownIcon, CaretDownIcon } from '@radix-ui/react-icons'
+import { Button, Flex, IconButton, Popover, Text } from '@radix-ui/themes'
+import { startRecording } from '../Recorder/Recorder.utils'
+import { Link } from 'react-router-dom'
+
+export function RecordingSelector() {
+  const recordingPath = useGeneratorStore((store) => store.recordingPath)
+  const setRecording = useGeneratorStore((store) => store.setRecording)
+  const setRecordingPath = useGeneratorStore((store) => store.setRecordingPath)
+  const hasRecording = useHasRecording()
+
+  const fileName = recordingPath?.split('/').pop()
+
+  const handleImport = async () => {
+    const harFile = await window.studio.har.openFile()
+    if (!harFile) return
+
+    const proxyData = harToProxyData(harFile.content)
+    setRecording(proxyData)
+    setRecordingPath(harFile.path)
+  }
+
+  return (
+    <Flex align="center" gap="2">
+      <Text>{fileName || 'Select recording'}</Text>
+      <Popover.Root>
+        <Popover.Trigger>
+          <IconButton variant="outline">
+            <CaretDownIcon />
+          </IconButton>
+        </Popover.Trigger>
+        <Popover.Content size="1" align="end">
+          <Flex direction="column" gap="2">
+            <Text>You don{"'"}t have saved recordings</Text>
+            <Flex gap="2">
+              <Popover.Close>
+                <Button variant="outline" asChild>
+                  <Link to="/recorder">Start recording</Link>
+                </Button>
+              </Popover.Close>
+              <Popover.Close>
+                <Button onClick={handleImport}>Import HAR</Button>
+              </Popover.Close>
+            </Flex>
+          </Flex>
+        </Popover.Content>
+      </Popover.Root>
+    </Flex>
+  )
+}

src/views/Generator/TestRuleContainer/TestRule/TestRuleActions.tsx

@@ -45,7 +45,7 @@ export function TestRuleActions({ ruleId }: TestRuleActionsProps) {
           </IconButton>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content>
-          <DropdownMenu.Item onClick={handleCopy}>Clone</DropdownMenu.Item>
+          <DropdownMenu.Item onClick={handleCopy}>Duplicate</DropdownMenu.Item>
           <DropdownMenu.Item color="red" onClick={handleDelete}>
             Delete
           </DropdownMenu.Item>

src/views/Recorder/Recorder.tsx

@@ -9,12 +9,14 @@ import { useListenProxyData } from '@/hooks/useListenProxyData'
 import { PageHeading } from '@/components/Layout/PageHeading'
 import { useRecorderStore } from '@/hooks/useRecorderStore'
 import { groupProxyData } from '@/utils/groups'
+import { useWindowTitle } from '@/hooks/useWindowTitle'
 
 export function Recorder() {
   const { proxyData } = useRecorderStore()
   const [group, setGroup] = useState<string>('Default')
   useListenProxyData(group)
   const groupedProxyData = groupProxyData(proxyData)
+  useWindowTitle('Recorder')
 
   return (
     <>

src/views/Validator/Validator.tsx

@@ -3,6 +3,7 @@ import { LogView } from '@/components/LogView'
 import { WebLogView } from '@/components/WebLogView'
 import { useListenProxyData } from '@/hooks/useListenProxyData'
 import { useRecorderStore } from '@/hooks/useRecorderStore'
+import { useWindowTitle } from '@/hooks/useWindowTitle'
 import { K6Log } from '@/types'
 import { groupProxyData } from '@/utils/groups'
 import { Button, Flex, Heading, ScrollArea, Spinner } from '@radix-ui/themes'
@@ -13,7 +14,9 @@ export function Validator() {
   const [isRunning, setIsRunning] = useState(false)
   const [logs, setLogs] = useState<K6Log[]>([])
   useListenProxyData()
-  const { proxyData, resetProxyData } = useRecorderStore()
+  const proxyData = useRecorderStore((store) => store.proxyData)
+  const resetProxyData = useRecorderStore((store) => store.resetProxyData)
+  useWindowTitle('Validator')
 
   const groupedProxyData = groupProxyData(proxyData)