poc: Workspace support

forge.config.ts

@@ -10,7 +10,7 @@ import type { ForgeConfig, ForgeMakeResult } from '@electron-forge/shared-types'
 import path from 'path'
 
 import { CUSTOM_APP_PROTOCOL } from './src/main/deepLinks.constants'
-import { getPlatform, getArch } from './src/utils/electron'
+import { getPlatform, getArch } from './src/utils/platform'
 import { windowsSign } from './windowsSign'
 import { spawnSignFile } from './windowsSignHook'
 

package.json

@@ -43,9 +43,11 @@
     "@types/diff": "^7.0.2",
     "@types/electron-squirrel-startup": "^1.0.2",
     "@types/express": "^5.0.3",
+    "@types/graceful-fs": "^4.1.9",
     "@types/har-format": "^1.2.16",
     "@types/k6": "^1.3.1",
     "@types/lodash-es": "^4.17.12",
+    "@types/micromatch": "^4.0.10",
     "@types/node-forge": "^1.3.11",
     "@types/papaparse": "^5.3.15",
     "@types/react": "^19.2.10",
@@ -92,6 +94,7 @@
     "@emotion/styled": "^11.13.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.9.0",
+    "@iarna/toml": "^2.2.5",
     "@medv/finder": "^4.0.2",
     "@microlink/react-json-view": "^1.27.0",
     "@monaco-editor/react": "^4.7.0",
@@ -133,17 +136,20 @@
     "express": "^5.2.1",
     "find-process": "^1.4.7",
     "fuse.js": "^7.0.0",
+    "graceful-fs": "^4.2.11",
     "https-proxy-agent": "^7.0.6",
     "immer": "^10.1.1",
     "jsonrepair": "^3.8.0",
     "keyboardjs": "^2.7.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.562.0",
+    "micromatch": "^4.0.8",
     "monaco-editor": "^0.55.1",
     "nanoid": "^5.1.6",
     "node-forge": "^1.3.2",
     "openid-client": "^6.1.7",
     "papaparse": "^5.5.1",
+    "pathe": "^2.0.3",
     "plist": "^3.1.0",
     "prettier": "^3.3.2",
     "react": "^19.2.4",
@@ -153,6 +159,7 @@
     "react-router-dom": "^6.30.3",
     "react-select": "^5.10.2",
     "react-use": "^17.5.1",
+    "readdirp": "^4.0.1",
     "rrweb": "^2.0.0-alpha.18",
     "tiny-invariant": "^1.3.3",
     "tree-kill": "^1.2.2",

src/App.tsx

@@ -7,7 +7,7 @@ import { DevToolsDialog } from '@/components/DevToolsDialog'
 import { SettingsDialog } from '@/components/Settings/SettingsDialog'
 import { Toasts } from '@/components/Toast/Toasts'
 import { Theme as StudioTheme } from '@/components/primitives/Theme'
-import { useCloseSplashScreen } from '@/hooks/useCloseSplashScreen'
+import { WorkspaceProvider, useWorkspace } from '@/contexts/WorkspaceContext'
 import { useTheme } from '@/hooks/useTheme'
 import { queryClient } from '@/utils/query'
 
@@ -16,20 +16,28 @@ import { globalStyles } from './globalStyles'
 
 enableMapSet()
 
-export function App() {
+function AppContent() {
   const theme = useTheme()
-  useCloseSplashScreen()
+  const workspace = useWorkspace()
 
   return (
     <QueryClientProvider client={queryClient}>
       <StudioTheme />
       <RadixTheme accentColor="orange" appearance={theme}>
         <Global styles={globalStyles} />
         <Toasts />
-        <AppRoutes />
+        <AppRoutes key={workspace?.path} />
         <DevToolsDialog />
         <SettingsDialog />
       </RadixTheme>
     </QueryClientProvider>
   )
 }
+
+export function App() {
+  return (
+    <WorkspaceProvider>
+      <AppContent />
+    </WorkspaceProvider>
+  )
+}

src/AppRoutes.tsx

@@ -9,16 +9,14 @@ import {
 } from 'react-router-dom'
 
 import { Layout } from '@/components/Layout/Layout'
-import { BrowserTestEditor } from '@/views/BrowserTestEditor'
+import { EditorView } from '@/views/EditorView'
 import { Home } from '@/views/Home'
 import { Recorder } from '@/views/Recorder'
-import { RecordingPreviewer } from '@/views/RecordingPreviewer'
-import { Validator } from '@/views/Validator'
 
 import { ErrorElement } from './ErrorElement'
 import { routeMap } from './routeMap'
-import { DataFile } from './views/DataFile'
-import { Generator } from './views/Generator'
+import { NewBrowserTestView } from './views/BrowserTestEditor/NewBrowserTestView'
+import { NewGeneratorView } from './views/Generator/NewGeneratorView'
 
 const router = createHashRouter(
   createRoutesFromChildren(
@@ -29,17 +27,9 @@ const router = createHashRouter(
     >
       <Route index element={<Home />} />
       <Route path={routeMap.recorder} element={<Recorder />} />
-      <Route
-        path={routeMap.recordingPreviewer}
-        element={<RecordingPreviewer />}
-      />
-      <Route path={routeMap.generator} element={<Generator />} />
-      <Route
-        path={routeMap.browserTestEditor}
-        element={<BrowserTestEditor />}
-      />
-      <Route path={routeMap.validator} element={<Validator />} />
-      <Route path={routeMap.dataFilePreviewer} element={<DataFile />} />
+      <Route path={routeMap.editorView} element={<EditorView />} />
+      <Route path={routeMap.newGenerator} element={<NewGeneratorView />} />
+      <Route path={routeMap.newBrowserTest} element={<NewBrowserTestView />} />
       <Route path="*" element={<NoRouteFound />} />
     </Route>
   )

src/codegen/codegen.test.ts

@@ -77,9 +77,10 @@ describe('Code generation', () => {
 
       expect(
         generateScript({
+          scriptPath: '/root/script.js',
           recording: [],
           generator: {
-            version: '2.0',
+            version: '3.0',
             recordingPath: 'test',
             options: {
               loadProfile: {
@@ -118,7 +119,7 @@ describe('Code generation', () => {
 
   describe('generateImports', () => {
     const generator: GeneratorFileData = {
-      version: '2.0',
+      version: '3.0',
       recordingPath: 'test',
       options: {
         loadProfile: {
@@ -162,7 +163,7 @@ describe('Code generation', () => {
     })
 
     it('should generate imports with data files', async () => {
-      const files = [{ name: 'users.csv' }, { name: 'products.json' }]
+      const files = [{ path: 'users.csv' }, { path: 'products.json' }]
       const expectedResult = await prettify(`
         import { group, sleep, check } from 'k6'
         import http from 'k6/http'
@@ -221,7 +222,10 @@ describe('Code generation', () => {
 
   describe('generateDataFileDeclarations', () => {
     it('should generate file declarations', async () => {
-      const files = [{ name: 'users.csv' }, { name: 'products.json' }]
+      const files = [
+        { path: '/Root/Data/users.csv' },
+        { path: '/Root/Data/products.json' },
+      ]
 
       const expectedResult = await prettify(`
         const FILES = {
@@ -233,9 +237,11 @@ describe('Code generation', () => {
           }),
         };`)
 
-      expect(await prettify(generateDataFileDeclarations(files))).toBe(
-        expectedResult
-      )
+      expect(
+        await prettify(
+          generateDataFileDeclarations(files, '/Root/Scripts/script.js')
+        )
+      ).toBe(expectedResult)
     })
   })
 

src/codegen/codegen.ts

@@ -1,3 +1,5 @@
+import * as pathe from 'pathe'
+
 import { K6_EXPORTS, REQUIRED_IMPORTS } from '@/constants/imports'
 import { getCustomCodeSnippet } from '@/rules/parameterization'
 import { applyRules } from '@/rules/rules'
@@ -8,6 +10,7 @@ import { DataFile, Variable } from '@/types/testData'
 import { ThinkTime } from '@/types/testOptions'
 import { getFileNameWithoutExtension } from '@/utils/file'
 import { safeBtoa } from '@/utils/format'
+import { makeRelativePath } from '@/utils/fs/path'
 import { groupProxyData } from '@/utils/groups'
 import { getContentTypeWithCharsetHeader } from '@/utils/headers'
 import { exhaustive } from '@/utils/typescript'
@@ -22,11 +25,13 @@ import { generateImportStatement } from './imports'
 import { generateOptions } from './options'
 
 interface GenerateScriptParams {
+  scriptPath: string
   recording: ProxyData[]
   generator: GeneratorFileData
 }
 
 export function generateScript({
+  scriptPath,
   recording,
   generator,
 }: GenerateScriptParams): string {
@@ -42,7 +47,7 @@ export function generateScript({
     export const options = ${generateOptions(generator.options)}
 
     ${generateVariableDeclarations(generator.testData.variables)}
-    ${generateDataFileDeclarations(generator.testData.files)}
+    ${generateDataFileDeclarations(generator.testData.files, scriptPath)}
     ${generateGetUniqueItemFunction(generator.testData.files)}
 
     export default function() {
@@ -59,11 +64,11 @@ export function generateImports(
   generator: GeneratorFileData,
   options: GenerateImportsOptions = {}
 ): string {
-  const hasCSVDataFiles = generator.testData.files.some(({ name }) =>
-    name.toLowerCase().endsWith('csv')
+  const hasCSVDataFiles = generator.testData.files.some((file: DataFile) =>
+    pathe.basename(file.path).toLowerCase().endsWith('csv')
   )
-  const hasJSONDataFiles = generator.testData.files.some(({ name }) =>
-    name.toLowerCase().endsWith('json')
+  const hasJSONDataFiles = generator.testData.files.some((file: DataFile) =>
+    pathe.basename(file.path).toLowerCase().endsWith('json')
   )
   const imports = [
     ...REQUIRED_IMPORTS,
@@ -93,24 +98,33 @@ export function generateVariableDeclarations(variables: Variable[]): string {
   return `const VARS = {\n${variableKeyValuePairs}\n};`
 }
 
-export function generateDataFileDeclarations(files: DataFile[]): string {
+export function generateDataFileDeclarations(
+  files: DataFile[],
+  scriptPath: string | undefined
+): string {
   if (files.length === 0) {
     return ''
   }
 
   const fileKeyValuePairs = files
-    .map(({ name }) => {
+    .map((file: DataFile) => {
+      const name = pathe.basename(file.path)
       const displayName = getFileNameWithoutExtension(name)
       const isCSV = name.toLowerCase().endsWith('csv')
 
+      // If the script path is not provided, just assume that the script is in the same
+      // directory as the data file.
+      const scriptDir = pathe.dirname(scriptPath ?? file.path)
+      const relativePath = makeRelativePath(scriptDir, file.path)
+
       if (isCSV) {
         return `
-        "${displayName}": await csv.parse(await fs.open('../Data/${name}'), { asObjects: true })`
+        "${displayName}": await csv.parse(await fs.open('${relativePath}'), { asObjects: true })`
       }
 
       return `
         "${displayName}": new SharedArray("${displayName}", () => {
-          const data = JSON.parse(open('../Data/${name}'));
+          const data = JSON.parse(open('${relativePath}'));
           return Array.isArray(data) ? data : [data];
         })`
     })