Merge branch 'main' into feat/configurable-verification-rule

Author: e-fisher

forge.config.ts

@@ -25,7 +25,6 @@ function getPlatformSpecificResources() {
 
 const config: ForgeConfig = {
   packagerConfig: {
-    name: 'Grafana k6 Studio',
     executableName: 'k6-studio',
     icon: './resources/icons/logo',
     asar: true,

src/codegen/codegen.test.ts

@@ -277,6 +277,7 @@ describe('Code generation', () => {
               from: 'body',
               path: 'user_id',
             },
+            extractionMode: 'single',
           },
         },
         {
@@ -290,6 +291,7 @@ describe('Code generation', () => {
               from: 'headers',
               regex: 'project_id=(.*)$',
             },
+            extractionMode: 'single',
           },
         },
       ]

src/components/Form/ControllerRadioGroup.tsx

@@ -1,4 +1,4 @@
-import { RadioGroup } from '@radix-ui/themes'
+import { Flex, RadioGroup } from '@radix-ui/themes'
 import { Control, Controller, FieldValues, Path } from 'react-hook-form'
 
 type Option = { label: string; value: string }
@@ -7,6 +7,7 @@ interface ControlledRadioGroupProps<T extends FieldValues, O extends Option> {
   name: Path<T>
   control: Control<T>
   options: O[]
+  direction?: 'column' | 'row'
   radioGroupProps?: RadioGroup.RootProps
   onChange?: (value: O['value']) => void
 }
@@ -15,6 +16,7 @@ export function ControlledRadioGroup<T extends FieldValues, O extends Option>({
   name,
   control,
   options,
+  direction = 'column',
   radioGroupProps,
   onChange,
 }: ControlledRadioGroupProps<T, O>) {
@@ -27,12 +29,18 @@ export function ControlledRadioGroup<T extends FieldValues, O extends Option>({
           {...radioGroupProps}
           value={field.value}
           onValueChange={onChange ?? field.onChange}
+          asChild
         >
-          {options.map((option) => (
-            <RadioGroup.Item key={option.value} value={option.value}>
-              {option.label}
-            </RadioGroup.Item>
-          ))}
+          <Flex
+            direction={direction}
+            gap={direction === 'column' ? undefined : '2'}
+          >
+            {options.map((option) => (
+              <RadioGroup.Item key={option.value} value={option.value}>
+                {option.label}
+              </RadioGroup.Item>
+            ))}
+          </Flex>
         </RadioGroup.Root>
       )}
     />

src/components/Layout/ActivityBar/SettingsButton.tsx

@@ -3,15 +3,17 @@ import { GearIcon } from '@radix-ui/react-icons'
 import { Tooltip, IconButton } from '@radix-ui/themes'
 
 export function SettingsButton() {
-  const setIsOpen = useStudioUIStore((state) => state.setIsSettingsDialogOpen)
+  const openSettingsDialog = useStudioUIStore(
+    (state) => state.openSettingsDialog
+  )
 
   return (
     <Tooltip content="Settings" side="right">
       <IconButton
         area-label="Settings"
         color="gray"
         variant="ghost"
-        onClick={() => setIsOpen(true)}
+        onClick={() => openSettingsDialog()}
       >
         <GearIcon />
       </IconButton>

src/components/Settings/SettingsDialog.tsx

@@ -3,7 +3,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Box, Button, Dialog, Flex, ScrollArea, Tabs } from '@radix-ui/themes'
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 import { findIndex, sortBy } from 'lodash-es'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 
 import { ProxySettings } from './ProxySettings'
@@ -16,8 +16,13 @@ import { AppearanceSettings } from './AppearanceSettings'
 import { LogsSettings } from './LogsSettings'
 import { useStudioUIStore } from '@/store/ui'
 import { useSaveSettings, useSettings } from '@/hooks/useSettings'
+import { SettingsTabValue } from './types'
 
-const tabs = [
+const tabs: Array<{
+  label: string
+  value: SettingsTabValue
+  component: () => React.ReactNode
+}> = [
   { label: 'Proxy', value: 'proxy', component: ProxySettings },
   { label: 'Recorder', value: 'recorder', component: RecorderSettings },
   {
@@ -39,12 +44,19 @@ const tabs = [
 
 export const SettingsDialog = () => {
   const { data: settings } = useSettings()
-  const isOpen = useStudioUIStore((state) => state.isSettingsDialogOpen)
-  const setIsOpen = useStudioUIStore((state) => state.setIsSettingsDialogOpen)
+  const {
+    isSettingsDialogOpen: isOpen,
+    closeSettingsDialog,
+    selectedSettingsTab,
+  } = useStudioUIStore((state) => state)
   const { mutateAsync: saveSettings, isPending } = useSaveSettings(() => {
-    setIsOpen(false)
+    closeSettingsDialog()
   })
-  const [selectedTab, setSelectedTab] = useState('proxy')
+  const [selectedTab, setSelectedTab] = useState(selectedSettingsTab)
+
+  useEffect(() => {
+    setSelectedTab(selectedSettingsTab)
+  }, [isOpen, selectedSettingsTab])
 
   const formMethods = useForm<AppSettings>({
     resolver: zodResolver(AppSettingsSchema),
@@ -61,15 +73,16 @@ export const SettingsDialog = () => {
   const onInvalid = (errors: Record<string, unknown>) => {
     // Sort tabs by the order they appear in the UI
     const tabsWithError = sortBy(Object.keys(errors), (key) =>
-      findIndex(tabs, { value: key })
+      findIndex(tabs, { value: key as SettingsTabValue })
     )
-    setSelectedTab(tabsWithError[0] || 'proxy')
+    setSelectedTab((tabsWithError[0] as SettingsTabValue) || 'proxy')
   }
 
   const handleOpenChange = () => {
     reset(settings)
-    setSelectedTab('proxy')
-    setIsOpen(!isOpen)
+    if (isOpen) {
+      closeSettingsDialog()
+    }
   }
 
   return (
@@ -89,7 +102,7 @@ export const SettingsDialog = () => {
         <FormProvider {...formMethods}>
           <Tabs.Root
             value={selectedTab}
-            onValueChange={(value) => setSelectedTab(value)}
+            onValueChange={(value) => setSelectedTab(value as SettingsTabValue)}
             css={css`
               height: 100%;
               display: flex;

src/components/Settings/types.ts

@@ -0,0 +1,6 @@
+export type SettingsTabValue =
+  | 'proxy'
+  | 'recorder'
+  | 'usageReport'
+  | 'appearance'
+  | 'logs'

src/handlers/auth/states.ts

@@ -7,7 +7,7 @@ import {
   SignInResult,
   Stack,
 } from '@/types/auth'
-import { safeStorage, shell } from 'electron'
+import { shell } from 'electron'
 import { waitFor } from '../utils'
 import { fetchPersonalToken } from '@/services/k6'
 import { getProfileData, saveProfileData } from './fs'
@@ -243,10 +243,6 @@ export class SignInStateMachine extends EventEmitter<StateEventMap> {
       }
     }
 
-    const encryptedToken = safeStorage
-      .encryptString(apiTokenResponse.token)
-      .toString('base64')
-
     const profileData = await getProfileData()
 
     const stackInfo: StackInfo = {
@@ -263,7 +259,7 @@ export class SignInStateMachine extends EventEmitter<StateEventMap> {
       version: '1.0',
       tokens: {
         ...profileData.tokens,
-        [stack.id]: encryptedToken,
+        [stack.id]: apiTokenResponse.token,
       },
       profiles: {
         ...profileData.profiles,

src/rules/correlation.ts

@@ -124,8 +124,8 @@ function applyRule({
     )
 
   if (extractedValue && correlationExtractionSnippet) {
-    // Skip extraction and bump count if value is already extracted
-    if (state.extractedValue) {
+    // Skip extraction and bump count if value is already extracted and we are in single extraction mode
+    if (state.extractedValue && rule.extractor.extractionMode === 'single') {
       setState({
         count: state.count + 1,
       })
@@ -858,7 +858,7 @@ correlation_vars['correlation_1'] = resp.json().user_id`
     ).toStrictEqual(expectedResult)
   })
 
-  it('extracts only first correlation match', () => {
+  it('extracts only first correlation match in single mode', () => {
     const recording = [
       createProxyData({
         response: createResponse({
@@ -887,6 +887,7 @@ correlation_vars['correlation_1'] = resp.json().user_id`
           from: 'body',
           path: 'user_id',
         },
+        extractionMode: 'single',
       },
     }
 
@@ -902,10 +903,61 @@ correlation_vars['correlation_1'] = resp.json().user_id`
     expect(requestSnippets[0]?.after[0]?.replace(/\s/g, '')).toBe(
       `correlation_vars['correlation_0']=resp.json().user_id`
     )
-
+    expect(ruleInstance.state.extractedValue).toBe('444')
     expect(requestSnippets[1]?.after).toEqual([])
   })
 
+  it('extracts multiple correlation match in multiple mode', () => {
+    const recording = [
+      createProxyData({
+        response: createResponse({
+          content: JSON.stringify({ user_id: '444' }),
+        }),
+      }),
+      createProxyData({
+        request: createRequest({
+          url: 'http://test.k6.io/api/v1/login?user_id=444',
+        }),
+        response: createResponse({
+          content: JSON.stringify({ user_id: '777' }),
+        }),
+      }),
+    ]
+    const sequentialIdGenerator = generateSequentialInt()
+
+    const rule: CorrelationRule = {
+      type: 'correlation',
+      id: '1',
+      enabled: true,
+      extractor: {
+        filter: { path: '' },
+        selector: {
+          type: 'json',
+          from: 'body',
+          path: 'user_id',
+        },
+        extractionMode: 'multiple',
+      },
+    }
+
+    const ruleInstance = createCorrelationRuleInstance(
+      rule,
+      sequentialIdGenerator
+    )
+
+    const requestSnippets = recording.map((data) =>
+      ruleInstance.apply({ data, before: [], after: [] })
+    )
+
+    expect(requestSnippets[0]?.after[0]?.replace(/\s/g, '')).toBe(
+      `correlation_vars['correlation_0']=resp.json().user_id`
+    )
+    expect(requestSnippets[1]?.after[0]?.replace(/\s/g, '')).toBe(
+      `correlation_vars['correlation_0']=resp.json().user_id`
+    )
+    expect(ruleInstance.state.extractedValue).toBe('777')
+  })
+
   it('does not apply replacer if filter does not match', () => {
     const recording = [
       createProxyData({
@@ -935,6 +987,7 @@ correlation_vars['correlation_1'] = resp.json().user_id`
           from: 'body',
           path: 'user_id',
         },
+        extractionMode: 'single',
       },
 
       replacer: {
@@ -990,6 +1043,7 @@ correlation_vars['correlation_1'] = resp.json().user_id`
           from: 'body',
           path: 'user_id',
         },
+        extractionMode: 'single',
       },
 
       replacer: {

src/schemas/generator/v0/index.ts

@@ -31,6 +31,13 @@ export function migrate(generator: GeneratorSchema): v1.GeneratorSchema {
     },
     testData: { ...generator.testData, files: [] },
     rules: generator.rules.map((rule): v1.GeneratorSchema['rules'][number] => {
+      if (rule.type === 'correlation') {
+        return {
+          ...rule,
+          extractor: { ...rule.extractor, extractionMode: 'single' },
+        }
+      }
+
       if (rule.type === 'verification') {
         return {
           ...rule,
@@ -39,6 +46,7 @@ export function migrate(generator: GeneratorSchema): v1.GeneratorSchema {
           value: { type: 'recordedValue' },
         }
       }
+
       return rule
     }),
 

src/schemas/generator/v1/loadZone.ts

@@ -48,7 +48,7 @@ export const LoadZoneSchema = z.object({
     (data) => {
       const totalPercentage = currentLoadZonePercentage(data)
       return {
-        message: `Total percentage must be 100, currently ${totalPercentage}`,
+        message: `Total percentage must be 100 (currently ${totalPercentage})`,
         path: ['root'],
       }
     }