Merge refs/remotes/origin/main

.eslintrc.cjs

@@ -18,7 +18,7 @@ module.exports = {
     'prettier',
   ],
   parser: '@typescript-eslint/parser',
-  ignorePatterns: ['resources/group_snippet.js'],
+  ignorePatterns: ['resources/group_snippet.js', 'install-k6.js'],
   plugins: [
     'import',
     'unused-imports',

.gitignore

@@ -94,7 +94,13 @@ out/
 # proxy certificates
 resources/certificates
 
+# k6 binary
+resources/mac/arm64/k6
+resources/mac/x86_64/k6
+resources/linux/x86_64/k6
+resources/win/x86_64/k6
+
 # editors
 .vscode
 .idea
-*.sublime-workspace
+*.sublime-workspace

install-k6.js

@@ -0,0 +1,75 @@
+const { execSync } = require('child_process')
+const { existsSync } = require('fs')
+
+const K6_VERSION = 'v0.55.0'
+const K6_PATH_MAC_AMD = `k6-${K6_VERSION}-macos-amd64`
+const K6_PATH_MAC_ARM = `k6-${K6_VERSION}-macos-arm64`
+const K6_PATH_WIN_AMD = `k6-${K6_VERSION}-windows-amd64`
+
+const getMacOSK6Binary = () => {
+  const command = `
+# download binaries
+curl -LO https://github.com/grafana/k6/releases/download/${K6_VERSION}/${K6_PATH_MAC_AMD}.zip
+curl -LO https://github.com/grafana/k6/releases/download/${K6_VERSION}/${K6_PATH_MAC_ARM}.zip
+
+# unzip & smoke test
+unzip ${K6_PATH_MAC_AMD}.zip
+unzip ${K6_PATH_MAC_ARM}.zip
+${K6_PATH_MAC_AMD}/k6 version
+${K6_PATH_MAC_ARM}/k6 version
+
+# move to resource folder
+mv ${K6_PATH_MAC_AMD}/k6 resources/mac/x86_64
+mv ${K6_PATH_MAC_ARM}/k6 resources/mac/arm64
+
+# cleanup
+rm ${K6_PATH_MAC_AMD}.zip
+rm ${K6_PATH_MAC_ARM}.zip
+rmdir ${K6_PATH_MAC_AMD}
+rmdir ${K6_PATH_MAC_ARM}
+`
+
+  execSync(command)
+}
+
+const getWindowsK6Binary = () => {
+  const command = `
+# download binaries
+Invoke-WebRequest -Uri "https://github.com/grafana/k6/releases/download/${K6_VERSION}/${K6_PATH_WIN_AMD}.zip" -OutFile "k6-windows-amd64.zip"
+
+# unzip & smoke test
+Expand-Archive -Path "k6-windows-amd64.zip" -DestinationPath "."
+${K6_PATH_WIN_AMD}\\k6.exe version
+
+# move to resource folder
+Move-Item -Path "${K6_PATH_WIN_AMD}\\k6.exe" -Destination resources\\win\\x86_64
+
+# clean up
+del k6-windows-amd64.zip
+Remove-Item -Path "${K6_PATH_WIN_AMD}" -Recurse
+`
+
+  execSync(command, { shell: 'powershell.exe' })
+}
+
+switch (process.platform) {
+  case 'darwin':
+    // we check only for one arch since we include both binaries
+    if (!existsSync('resources/mac/arm64/k6')) {
+      console.log('k6 binary not found')
+      console.log('downloading k6... this might take some time...')
+      getMacOSK6Binary()
+      console.log('k6 binary download completed')
+    }
+    break
+  case 'win32':
+    if (!existsSync('resources/win/x86_64/k6.exe')) {
+      console.log('k6 binary not found')
+      console.log('downloading k6... this might take some time...')
+      getWindowsK6Binary()
+      console.log('k6 binary download completed')
+    }
+    break
+  default:
+    console.log(`unsupported platform found: ${process.platform}`)
+}

package.json

@@ -1,11 +1,12 @@
 {
   "name": "k6-studio",
   "productName": "k6 Studio",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "k6 Studio",
   "repository": "github:grafana/k6-studio",
   "main": ".vite/build/main.js",
   "scripts": {
+    "preinstall": "node install-k6.js",
     "start": "electron-forge start",
     "package": "electron-forge package",
     "make": "electron-forge make",

src/components/Monaco/CodeEditor.tsx

@@ -32,6 +32,7 @@ export function CodeEditor({
 
   return (
     <ReactMonacoEditor
+      showToolbar
       defaultLanguage="javascript"
       options={{ readOnly }}
       defaultValue={value}

src/components/Monaco/EditorToolbar.tsx

@@ -0,0 +1,56 @@
+import { Flex, IconButton, Tooltip } from '@radix-ui/themes'
+import { useEffect } from 'react'
+import { k6StudioLightBackground } from './themes/k6StudioLight'
+import { useTheme } from '@/hooks/useTheme'
+import { useLocalStorage } from 'react-use'
+import { WordWrapIcon } from '../icons'
+
+export type ToolbarState = {
+  wordWrap: 'on' | 'off'
+}
+
+type EditorToolbarProps = {
+  getState: (values: ToolbarState) => void
+  actions: { wordWrap: boolean }
+}
+
+export const EditorToolbar = ({ getState, actions }: EditorToolbarProps) => {
+  const [state, setState] = useLocalStorage<ToolbarState>(
+    'editorToolbarState',
+    {
+      wordWrap: 'off',
+    }
+  )
+  const theme = useTheme()
+
+  useEffect(() => {
+    if (state) {
+      getState(state)
+    }
+  }, [state, getState])
+
+  return (
+    <Flex
+      p="2"
+      justify="end"
+      style={{
+        backgroundColor: theme === 'dark' ? '#1e1e1e' : k6StudioLightBackground,
+        borderBottom: `1px solid ${theme === 'dark' ? 'var(--gray-6)' : 'var(--gray-4)'}`,
+      }}
+    >
+      <Tooltip content="Word wrap">
+        <IconButton
+          size="1"
+          disabled={!actions.wordWrap}
+          onClick={() =>
+            setState({ wordWrap: state?.wordWrap === 'on' ? 'off' : 'on' })
+          }
+          variant={state?.wordWrap === 'on' ? 'solid' : 'surface'}
+          aria-label="Word wrap"
+        >
+          <WordWrapIcon width="14px" />
+        </IconButton>
+      </Tooltip>
+    </Flex>
+  )
+}

src/components/Monaco/ReactMonacoEditor.tsx

@@ -1,11 +1,13 @@
 import { useTheme } from '@/hooks/useTheme'
-import { Editor, EditorProps, loader } from '@monaco-editor/react'
+import { Editor, EditorProps, loader, Monaco } from '@monaco-editor/react'
 import * as monaco from 'monaco-editor'
+import { EditorToolbar, ToolbarState } from './EditorToolbar'
+import { useMemo, useState } from 'react'
+import { Flex } from '@radix-ui/themes'
 
 loader.config({ monaco })
 
 const defaultOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
-  wordWrap: 'off',
   tabSize: 2,
   codeLens: false,
   contextmenu: false,
@@ -24,14 +26,65 @@ const defaultOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
   },
 }
 
-export function ReactMonacoEditor(props: EditorProps) {
+interface ReactMonacoEditorProps extends EditorProps {
+  showToolbar?: boolean
+}
+
+export function ReactMonacoEditor({
+  showToolbar,
+  ...props
+}: ReactMonacoEditorProps) {
   const theme = useTheme()
+  const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>()
+  const [toolbarState, setToolbarState] = useState<ToolbarState>({
+    wordWrap: 'off',
+  })
+
+  // Monaco automatically applies word wrap if the content length of a line is >= 10000 characters
+  // In this case, we disable the word wrap button so Monaco's internal state is respected
+  const shouldEnableWordWrapButton = useMemo(() => {
+    const lineCount = editor?.getModel()?.getLineCount()
+    if (!lineCount) return false
+
+    for (let i = 1; i <= lineCount; i++) {
+      const lineContent = editor?.getModel()?.getLineContent(i)
+      if (lineContent && lineContent.length >= 10000) {
+        return false
+      }
+    }
+
+    return true
+  }, [editor])
+
+  const handleEditorMount = (
+    editor: monaco.editor.IStandaloneCodeEditor,
+    monaco: Monaco
+  ) => {
+    setEditor(editor)
+
+    if (props.onMount) {
+      props.onMount(editor, monaco)
+    }
+  }
 
   return (
-    <Editor
-      {...props}
-      options={{ ...defaultOptions, ...props.options }}
-      theme={theme === 'dark' ? 'vs-dark' : 'k6-studio-light'}
-    />
+    <Flex height="100%" width="100%" direction="column">
+      {showToolbar && (
+        <EditorToolbar
+          getState={(state) => setToolbarState(state)}
+          actions={{ wordWrap: shouldEnableWordWrapButton }}
+        />
+      )}
+      <Editor
+        {...props}
+        options={{
+          ...defaultOptions,
+          ...props.options,
+          wordWrap: toolbarState.wordWrap,
+        }}
+        onMount={handleEditorMount}
+        theme={theme === 'dark' ? 'vs-dark' : 'k6-studio-light'}
+      />
+    </Flex>
   )
 }

src/components/Monaco/ReadOnlyEditor.tsx

@@ -11,5 +11,7 @@ const options: editor.IStandaloneEditorConstructionOptions = {
 }
 
 export function ReadOnlyEditor(props: ComponentProps<typeof Editor>) {
-  return <ReactMonacoEditor height="100%" options={options} {...props} />
+  return (
+    <ReactMonacoEditor height="100%" options={options} {...props} showToolbar />
+  )
 }

src/components/StyledReactSelect/StyledReactSelect.tsx

@@ -7,7 +7,6 @@ export function StyledReactSelect<Option>(
   props: ComponentProps<typeof Select<Option>>
 ) {
   const styles = useMemo(() => getStylesConfig<Option>(), [])
-  console.log('props', props)
 
   return (
     <div css={{ fontSize: 'var(--font-size-2)' }}>

src/components/WebLogView/ResponseDetails/Content.tsx

@@ -6,7 +6,7 @@ import { getContentType } from '@/utils/headers'
 import { Preview } from './Preview'
 import { Raw } from './Raw'
 import { parseContent, toFormat } from './ResponseDetails.utils'
-import { OriginalContent } from './OriginalContent'
+import { ReadOnlyEditor } from '@/components/Monaco/ReadOnlyEditor'
 
 export function Content({ data }: { data: ProxyData }) {
   const [selectedTab, setSelectedTab] = useState('preview')
@@ -58,7 +58,9 @@ export function Content({ data }: { data: ProxyData }) {
           {selectedTab === 'raw' && (
             <Raw content={rawContent ?? ''} format={format} />
           )}
-          {selectedTab === 'content' && <OriginalContent {...contentProps} />}
+          {selectedTab === 'content' && (
+            <ReadOnlyEditor language={format} value={content} />
+          )}
         </Box>
       </ScrollArea>
     </Flex>

src/components/WebLogView/ResponseDetails/Raw.tsx

@@ -10,11 +10,7 @@ interface RawProps {
 export function Raw({ content, format }: RawProps) {
   return (
     <Text size="1" wrap="pretty" css={style}>
-      <ReadOnlyEditor
-        language={format}
-        value={content}
-        options={{ wordWrap: 'on' }}
-      />
+      <ReadOnlyEditor language={format} value={content} />
     </Text>
   )
 }

src/components/icons/WordWrapIcon.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, SVGAttributes } from 'react'
+
+export const WordWrapIcon = forwardRef<
+  SVGSVGElement,
+  SVGAttributes<SVGElement>
+>(function WordWrapIcon({ color = 'currentColor', ...props }, ref) {
+  return (
+    <svg
+      width="40"
+      height="29"
+      viewBox="0 0 40 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      ref={ref}
+    >
+      <path
+        d="M2.00024 4.00012H38.0002C38.5307 4.00012 39.0394 3.78941 39.4145 3.41434C39.7895 3.03926 40.0002 2.53056 40.0002 2.00012C40.0002 1.46969 39.7895 0.960982 39.4145 0.585909C39.0394 0.210836 38.5307 0.00012207 38.0002 0.00012207H2.00024C1.46981 0.00012207 0.961103 0.210836 0.58603 0.585909C0.210958 0.960982 0.000244141 1.46969 0.000244141 2.00012C0.000244141 2.53056 0.210958 3.03926 0.58603 3.41434C0.961103 3.78941 1.46981 4.00012 2.00024 4.00012ZM14.0002 20.0001H2.00024C1.46981 20.0001 0.961103 20.2108 0.58603 20.5859C0.210958 20.961 0.000244141 21.4697 0.000244141 22.0001C0.000244141 22.5306 0.210958 23.0393 0.58603 23.4143C0.961103 23.7894 1.46981 24.0001 2.00024 24.0001H14.0002C14.5307 24.0001 15.0394 23.7894 15.4145 23.4143C15.7895 23.0393 16.0002 22.5306 16.0002 22.0001C16.0002 21.4697 15.7895 20.961 15.4145 20.5859C15.0394 20.2108 14.5307 20.0001 14.0002 20.0001ZM33.0002 10.0001H2.00024C1.46981 10.0001 0.961103 10.2108 0.58603 10.5859C0.210958 10.961 0.000244141 11.4697 0.000244141 12.0001C0.000244141 12.5306 0.210958 13.0393 0.58603 13.4143C0.961103 13.7894 1.46981 14.0001 2.00024 14.0001H33.0002C33.7959 14.0001 34.559 14.3162 35.1216 14.8788C35.6842 15.4414 36.0002 16.2045 36.0002 17.0001C36.0002 17.7958 35.6842 18.5588 35.1216 19.1214C34.559 19.6841 33.7959 20.0001 33.0002 20.0001H26.8202L27.4202 19.4201C27.7969 19.0435 28.0084 18.5327 28.0084 18.0001C28.0084 17.4675 27.7969 16.9567 27.4202 16.5801C27.0436 16.2035 26.5328 15.9919 26.0002 15.9919C25.4676 15.9919 24.9569 16.2035 24.5802 16.5801L20.5802 20.5801C20.3982 20.7703 20.2554 20.9946 20.1602 21.2401C19.9602 21.727 19.9602 22.2732 20.1602 22.7601C20.2554 23.0056 20.3982 23.2299 20.5802 23.4201L24.5802 27.4201C24.7662 27.6076 24.9874 27.7564 25.2311 27.8579C25.4748 27.9594 25.7362 28.0117 26.0002 28.0117C26.2643 28.0117 26.5257 27.9594 26.7694 27.8579C27.0131 27.7564 27.2343 27.6076 27.4202 27.4201C27.6077 27.2342 27.7565 27.013 27.858 26.7693C27.9596 26.5256 28.0118 26.2641 28.0118 26.0001C28.0118 25.7361 27.9596 25.4747 27.858 25.231C27.7565 24.9873 27.6077 24.7661 27.4202 24.5801L26.8202 24.0001H33.0002C34.8568 24.0001 36.6372 23.2626 37.95 21.9499C39.2627 20.6371 40.0002 18.8566 40.0002 17.0001C40.0002 15.1436 39.2627 13.3631 37.95 12.0504C36.6372 10.7376 34.8568 10.0001 33.0002 10.0001Z"
+        fill={color}
+      />
+    </svg>
+  )
+})

src/components/icons/index.ts

@@ -2,3 +2,4 @@ export * from './GeneratorIcon'
 export * from './HomeIcon'
 export * from './RecorderIcon'
 export * from './ValidatorIcon'
+export * from './WordWrapIcon'

src/preload.ts

@@ -179,7 +179,7 @@ const log = {
 } as const
 
 const settings = {
-  getSettings: () => {
+  getSettings: (): Promise<AppSettings> => {
     return ipcRenderer.invoke('settings:get')
   },
   saveSettings: (settings: AppSettings): Promise<AppSettings> => {

src/rules/shared.ts

@@ -287,7 +287,6 @@ const replaceHeaderByName = (
   const headerExists = request.headers.find(
     ([key]) => canonicalHeaderKey(key) === canonicalHeaderKey(selector.name)
   )
-  console.log('headerExists', headerExists)
 
   if (!headerExists) {
     return