internal(Thresholds): Validate and save to Generator file (#446)

src/schemas/generator/v1/thresholds.ts

@@ -44,7 +44,9 @@ export const ThresholdSchema = z.object({
   url: z.string().optional(),
   statistic: ThresholdStatisticSchema,
   condition: ThresholdConditionSchema,
-  value: z.number({ message: 'Invalid value' }),
+  value: z
+    .number({ message: 'Invalid value' })
+    .min(0, { message: 'Invalid value' }),
   stopTest: z.boolean().default(false),
 })
 

src/store/generator/selectors.ts

@@ -49,6 +49,7 @@ export function selectGeneratorData(state: GeneratorStore): GeneratorFileData {
     allowlist,
     includeStaticAssets,
     scriptName,
+    thresholds,
   } = state
 
   return {
@@ -66,7 +67,7 @@ export function selectGeneratorData(state: GeneratorStore): GeneratorFileData {
     allowlist,
     includeStaticAssets,
     scriptName,
-    thresholds: [],
+    thresholds,
   }
 }
 

src/store/generator/slices/thresholds.ts

@@ -6,9 +6,7 @@ interface State {
 }
 
 interface Actions {
-  addThreshold: (threshold: Threshold) => void
-  updateThreshold: (threshold: Threshold) => void
-  deleteThreshold: (id: string) => void
+  setThresholds: (thresholds: Threshold[]) => void
 }
 
 export type ThresholdSliceStore = State & Actions
@@ -17,20 +15,8 @@ export const createThresholdSlice: ImmerStateCreator<ThresholdSliceStore> = (
   set
 ) => ({
   thresholds: [],
-  addThreshold: (threshold) =>
+  setThresholds: (thresholds: Threshold[]) =>
     set((state) => {
-      state.thresholds.push(threshold)
-    }),
-  updateThreshold(threshold) {
-    set((state) => {
-      const index = state.thresholds.findIndex((t) => t.id === threshold.id)
-      if (index !== -1) {
-        state.thresholds[index] = threshold
-      }
-    })
-  },
-  deleteThreshold: (id) =>
-    set((state) => {
-      state.thresholds = state.thresholds.filter((t) => t.id !== id)
+      state.thresholds = thresholds
     }),
 })

src/test/factories/generator.ts

@@ -94,9 +94,7 @@ export function createGeneratorState(
     setVus: vi.fn(),
 
     thresholds: [],
-    addThreshold: vi.fn(),
-    updateThreshold: vi.fn(),
-    deleteThreshold: vi.fn(),
+    setThresholds: vi.fn(),
 
     ...state,
   }

src/types/thresholds.ts

@@ -3,8 +3,10 @@ import {
   ThresholdDataSchema,
   ThresholdMetricSchema,
   ThresholdSchema,
+  ThresholdStatisticSchema,
 } from '@/schemas/generator'
 
 export type Threshold = z.infer<typeof ThresholdSchema>
 export type ThresholdData = z.infer<typeof ThresholdDataSchema>
 export type ThresholdMetric = z.infer<typeof ThresholdMetricSchema>
+export type ThresholdStatstic = z.infer<typeof ThresholdStatisticSchema>

src/views/Generator/TestOptions/Thresholds/ThresholdRow.tsx

@@ -1,5 +1,5 @@
 import { FieldGroup, ControlledSelect } from '@/components/Form'
-import { ThresholdData } from '@/types/thresholds'
+import { Threshold, ThresholdData } from '@/types/thresholds'
 import { TrashIcon } from '@radix-ui/react-icons'
 import { Table, TextField, Checkbox, IconButton, Flex } from '@radix-ui/themes'
 import {
@@ -17,6 +17,7 @@ import {
 import { useThresholdURLOptions } from './Thresholds.hooks'
 import { css } from '@emotion/react'
 import { useTheme } from '@/hooks/useTheme'
+import { useEffect } from 'react'
 
 type ThresholdRowProps = {
   index: number
@@ -30,12 +31,26 @@ export function ThresholdRow({ field, index, remove }: ThresholdRowProps) {
     formState: { errors },
     control,
     watch,
+    setValue,
   } = useFormContext<ThresholdData>()
 
   const urlOptions = useThresholdURLOptions()
-  const threshold = watch('thresholds')[index]
+  const threshold = watch('thresholds')[index] as Threshold
   const theme = useTheme()
 
+  // Handle selected statistic when the metric field changes
+  useEffect(() => {
+    const availableStatistics = getStatisticOptions(threshold.metric).map(
+      (option) => option.value
+    )
+    if (!availableStatistics.includes(threshold.statistic)) {
+      const newStatistic = availableStatistics[0]
+      if (newStatistic) {
+        setValue(`thresholds.${index}.statistic`, newStatistic)
+      }
+    }
+  }, [threshold.metric, threshold.statistic, index, setValue])
+
   return (
     <Table.Row key={field.id}>
       <Table.Cell>
@@ -115,6 +130,7 @@ export function ThresholdRow({ field, index, remove }: ThresholdRowProps) {
             name={`thresholds.${index}.stopTest`}
             render={({ field }) => (
               <Checkbox
+                checked={field.value}
                 onCheckedChange={field.onChange}
                 {...register(`thresholds.${index}.stopTest`)}
               />

src/views/Generator/TestOptions/Thresholds/Thresholds.tsx

@@ -11,6 +11,7 @@ import { Table } from '@/components/Table'
 
 export function Thresholds() {
   const thresholds = useGeneratorStore((store) => store.thresholds)
+  const setThresholds = useGeneratorStore((store) => store.setThresholds)
 
   const formMethods = useForm<{ thresholds: Threshold[] }>({
     resolver: zodResolver(ThresholdDataSchema),
@@ -41,9 +42,12 @@ export function Thresholds() {
     })
   }
 
-  const onSubmit = useCallback((data: ThresholdData) => {
-    console.log('onSubmit', data)
-  }, [])
+  const onSubmit = useCallback(
+    (data: ThresholdData) => {
+      setThresholds(data.thresholds)
+    },
+    [setThresholds]
+  )
 
   // Submit onChange
   useEffect(() => {

src/views/Generator/TestOptions/Thresholds/Thresholds.utils.ts

@@ -1,5 +1,5 @@
 import { ThresholdMetricSchema } from '@/schemas/generator'
-import { ThresholdMetric } from '@/types/thresholds'
+import { ThresholdMetric, ThresholdStatstic } from '@/types/thresholds'
 import { exhaustive } from '@/utils/typescript'
 
 type ThresholdMetricMap = {
@@ -92,7 +92,10 @@ export const THRESHOLD_CONDITIONS_OPTIONS = [
   { label: '!==', value: '!==' },
 ]
 
-export const getStatisticOptions = (metricName: ThresholdMetric) => {
+type StatisticOption = { label: string; value: ThresholdStatstic }
+export const getStatisticOptions = (
+  metricName: ThresholdMetric
+): Array<StatisticOption> => {
   const { type } = metricsMap[metricName]
 
   switch (type) {