fix: align channel data structure with backend API specification (#1543)

VikaCep · web-flow · commit 55a6d4856036 · 2026-01-22T10:45:01.000-03:00
* fix: align channel data structure with backend API specification

* fix: lint

* fix: improve typing on channels prop
diff --git a/src/components/CheckEditor/CheckProbes/ProbesList.tsx b/src/components/CheckEditor/CheckProbes/ProbesList.tsx
@@ -27,16 +27,9 @@ export const ProbesList = ({
   const { isEnabled: isVersionManagementEnabled } = useFeatureFlag(FeatureName.VersionManagement);
   const { getValues } = useFormContext<CheckFormValues>();
 
-  const checkType = getValues('checkType');
   const selectedChannel = useMemo(() => {
-    if (checkType === 'scripted') {
-      return getValues('settings.scripted.channel');
-    }
-    if (checkType === 'browser') {
-      return getValues('settings.browser.channel');
-    }
-    return undefined;
-  }, [checkType, getValues]);
+    return getValues('channels.k6.id');
+  }, [getValues]);
 
   const isProbeCompatible = (probe: ProbeWithMetadata): boolean => {
     if (!isVersionManagementEnabled || !selectedChannel || !probe.k6Versions) {
diff --git a/src/components/CheckEditor/FormComponents/K6ChannelSelect.test.tsx b/src/components/CheckEditor/FormComponents/K6ChannelSelect.test.tsx
@@ -196,9 +196,17 @@ describe('K6ChannelSelect', () => {
       settings: { 
         browser: { 
           script: 'test script',
-          channel: 'deprecated' 
         } 
-      } 
+      },
+      channels: {
+        k6: {
+          id: 'deprecated',
+          name: 'deprecated.x',
+          default: false,
+          deprecatedAfter: '2020-01-01T00:00:00Z',
+          manifest: 'k6>=0.5,k6<1',
+        }
+      }
     };
 
     server.use(
diff --git a/src/components/CheckEditor/FormComponents/K6ChannelSelect.tsx b/src/components/CheckEditor/FormComponents/K6ChannelSelect.tsx
@@ -42,7 +42,7 @@ function K6ChannelSelectContent({ disabled }: K6ChannelSelectProps) {
 
   const { field, fieldState } = useController({
     control,
-    name: `settings.${checkType === 'scripted' ? 'scripted' : 'browser'}.channel`,
+    name: 'channels.k6',
   });
 
   const {
@@ -56,9 +56,12 @@ function K6ChannelSelectContent({ disabled }: K6ChannelSelectProps) {
   // Initialize with default channel when no channel is set (new checks or existing checks without channel)
   useEffect(() => {
     if (!field.value && defaultChannelId && !isLoadingChannels) {
-      field.onChange(defaultChannelId);
+      const defaultChannel = channels.find((channel) => channel.id === defaultChannelId);
+      if (defaultChannel) {
+        field.onChange(defaultChannel);
+      }
     }
-  }, [field, defaultChannelId, isLoadingChannels]);
+  }, [field, defaultChannelId, isLoadingChannels, channels]);
 
   // Throw error to be caught by QueryErrorBoundary if there's an error
   if (hasChannelError && channelError) {
@@ -90,17 +93,17 @@ function K6ChannelSelectContent({ disabled }: K6ChannelSelectProps) {
         <Stack direction="column" gap={2}>
           <Combobox
             {...field}
-            value={field.value || defaultChannelId}
+            value={field.value?.id || defaultChannelId}
             disabled={disabled || isLoadingChannels}
             options={channelOptions}
             id={id}
             createCustomValue={false}
             onChange={(value) => {
-              const channelValue = typeof value === 'string' ? value : value?.value || '';
-              field.onChange(channelValue);
-
-              const selectedChannel = channels.find((channel) => channel.id === channelValue);
+              const channelId = typeof value === 'string' ? value : value?.value || '';
+              const selectedChannel = channels.find((channel) => channel.id === channelId);
+              
               if (selectedChannel) {
+                field.onChange(selectedChannel);
                 trackK6ChannelSelected({
                   checkType,
                   channelName: selectedChannel.name,
@@ -112,7 +115,7 @@ function K6ChannelSelectContent({ disabled }: K6ChannelSelectProps) {
           />
         </Stack>
       </Field>
-      <ChannelDetails channelId={field.value || defaultChannelId || null} channels={channels} />
+      <ChannelDetails channelId={field.value?.id || defaultChannelId || null} channels={channels} />
     </div>
   );
 }
diff --git a/src/components/Checkster/components/form/generic/GenericScriptField.tsx b/src/components/Checkster/components/form/generic/GenericScriptField.tsx
@@ -4,19 +4,18 @@ import { FieldValidationMessage, useTheme2 } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 
 import { CheckFormFieldPath } from '../../../types';
-import { CheckFormValues } from 'types';
+import { CheckFormValues, K6Channel } from 'types';
 import { CodeEditor } from 'components/CodeEditor';
 
 import { getFieldErrorProps } from '../../../utils/form';
 import { Column } from '../../ui/Column';
 
 interface GenericScriptFieldProps {
   field: CheckFormFieldPath;
-  channelField?: CheckFormFieldPath;
 }
 
 // FIXME: Not actually a Field (no label, no description), but it has errors!
-export function GenericScriptField({ field, channelField }: GenericScriptFieldProps) {
+export function GenericScriptField({ field }: GenericScriptFieldProps) {
   const {
     control,
     getValues,
@@ -27,7 +26,7 @@ export function GenericScriptField({ field, channelField }: GenericScriptFieldPr
   
   const theme = useTheme2();
 
-  const selectedChannel = channelField ? getValues(channelField) : undefined;
+  const k6ChannelId = (getValues('channels.k6') as K6Channel | undefined)?.id;
   return (
     <Column
       grow
@@ -53,7 +52,7 @@ export function GenericScriptField({ field, channelField }: GenericScriptFieldPr
               readOnly={disabled}
               data-form-name={field}
               data-form-element-selector="textarea"
-              k6Channel={selectedChannel}
+              k6Channel={k6ChannelId}
             />
           );
         }}
diff --git a/src/components/Checkster/components/form/layouts/BrowserCheckContent.tsx b/src/components/Checkster/components/form/layouts/BrowserCheckContent.tsx
@@ -4,13 +4,12 @@ import { BROWSER_EXAMPLES } from 'components/WelcomeTabs/constants';
 
 import { ScriptedCheckContent } from './ScriptedCheckContent';
 
-export const BROWSER_CHECK_FIELDS = ['job', 'instance', 'settings.browser.channel', 'settings.browser.script'];
+export const BROWSER_CHECK_FIELDS = ['job', 'instance', 'channels.k6', 'settings.browser.script'];
 
 export function BrowserCheckContent() {
   return (
     <ScriptedCheckContent
       scriptField="settings.browser.script"
-      channelField="settings.browser.channel"
       examples={BROWSER_EXAMPLES}
     />
   );
diff --git a/src/components/Checkster/components/form/layouts/ScriptedCheckContent.tsx b/src/components/Checkster/components/form/layouts/ScriptedCheckContent.tsx
@@ -22,17 +22,15 @@ import { GenericScriptField } from '../generic/GenericScriptField';
 
 interface ScriptedCheckSectionProps {
   scriptField?: `settings.${CheckType.Scripted | CheckType.Browser}.script`;
-  channelField?: `settings.${CheckType.Scripted | CheckType.Browser}.channel`;
   examples?: ExampleScript[];
 }
 
-export const SCRIPTED_CHECK_FIELDS = ['job', 'target', 'settings.scripted.channel', 'settings.scripted.script'];
+export const SCRIPTED_CHECK_FIELDS = ['job', 'target', 'channels.k6', 'settings.scripted.script'];
 
 // Don't set label here, set it explicitly, where the component is used (for readability)
 export function ScriptedCheckContent({
   examples = SCRIPT_EXAMPLES,
   scriptField = 'settings.scripted.script',
-  channelField = 'settings.scripted.channel',
 }: ScriptedCheckSectionProps) {
   const theme = useTheme2();
   const hasExamples = examples && examples?.length > 0;
@@ -48,7 +46,7 @@ export function ScriptedCheckContent({
       <Column fill>
         <FormTabs actions={<HelpButton />}>
           <FormTabContent label="Script" fillVertical vanilla>
-            <GenericScriptField field={scriptField} channelField={channelField} />
+            <GenericScriptField field={scriptField} />
           </FormTabContent>
           {hasExamples && (
             <FormTabContent label="Examples" fillVertical vanilla className={styles.codeSnippetWrapper}>
diff --git a/src/components/Checkster/transformations/toFormValues.browser.ts b/src/components/Checkster/transformations/toFormValues.browser.ts
@@ -13,7 +13,6 @@ export function getBrowserCheckFormValues(check: BrowserCheck): CheckFormValuesB
     settings: {
       browser: {
         script: decode(check.settings?.browser?.script),
-        channel: check.settings?.browser?.channel || null,
       },
     },
   };
diff --git a/src/components/Checkster/transformations/toFormValues.scripted.ts b/src/components/Checkster/transformations/toFormValues.scripted.ts
@@ -13,7 +13,6 @@ export function getScriptedCheckFormValues(check: ScriptedCheck): CheckFormValue
     settings: {
       scripted: {
         script: decode(check.settings?.scripted?.script),
-        channel: check.settings?.scripted?.channel || null,
       },
     },
   };
diff --git a/src/components/Checkster/transformations/toFormValues.utils.ts b/src/components/Checkster/transformations/toFormValues.utils.ts
@@ -46,6 +46,9 @@ export function getBaseFormValuesFromCheck(check: Check): Omit<CheckFormValues,
     target: check.target,
     timeout: check.timeout,
     alerts: predefinedAlertsToFormValues(GLOBAL_PREDEFINED_ALERTS, check.alerts || []),
+    channels: {
+      k6: check.channels?.k6,
+    },
   };
 }
 
diff --git a/src/components/Checkster/transformations/toPayload.browser.ts b/src/components/Checkster/transformations/toPayload.browser.ts
@@ -7,19 +7,12 @@ import { getBasePayloadValuesFromForm } from './toPayload.utils';
 export function getBrowserPayload(formValues: CheckFormValuesBrowser): BrowserCheck {
   const base = getBasePayloadValuesFromForm(formValues);
 
-  const browserSettings: { script: string; channel?: string } = {
-    script: encode(formValues.settings.browser.script),
-  };
-
-  // Only include channel if it has a value
-  if (formValues.settings.browser.channel) {
-    browserSettings.channel = formValues.settings.browser.channel;
-  }
-
   return {
     ...base,
     settings: {
-      browser: browserSettings,
+      browser: {
+        script: encode(formValues.settings.browser.script),
+      },
     },
   };
 }
diff --git a/src/components/Checkster/transformations/toPayload.scripted.ts b/src/components/Checkster/transformations/toPayload.scripted.ts
@@ -7,19 +7,12 @@ import { getBasePayloadValuesFromForm } from './toPayload.utils';
 export function getScriptedPayload(formValues: CheckFormValuesScripted): ScriptedCheck {
   const base = getBasePayloadValuesFromForm(formValues);
 
-  const scriptedSettings: { script: string; channel?: string } = {
-    script: encode(formValues.settings.scripted.script),
-  };
-
-  // Only include channel if it has a value
-  if (formValues.settings.scripted.channel) {
-    scriptedSettings.channel = formValues.settings.scripted.channel;
-  }
-
   return {
     ...base,
     settings: {
-      scripted: scriptedSettings,
+      scripted: {
+        script: encode(formValues.settings.scripted.script),
+      },
     },
   };
 }
diff --git a/src/components/Checkster/transformations/toPayload.utils.ts b/src/components/Checkster/transformations/toPayload.utils.ts
@@ -15,6 +15,13 @@ export function getBasePayloadValuesFromForm(formValues: CheckFormValues): Check
     probes: formValues.probes,
     target: formValues.target,
     timeout: formValues.timeout,
+    channels: formValues.channels?.k6
+      ? {
+          k6: {
+            id: formValues.channels.k6.id,
+          },
+        }
+      : undefined,
   };
 }
 
diff --git a/src/data/useK6Channels.ts b/src/data/useK6Channels.ts
@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { type QueryKey, useQuery } from '@tanstack/react-query';
 
 import { Check, FeatureName, K6Channel } from 'types';
-import { isBrowserCheck, isScriptedCheck } from 'utils.types';
 import { SMDataSource } from 'datasource/DataSource';
 import { useFeatureFlag } from 'hooks/useFeatureFlag';
 import { useSMDS } from 'hooks/useSMDS';
@@ -67,17 +66,8 @@ export function useFilteredK6Channels(isScriptedOrBrowser: boolean, check?: Chec
     const originalChannels = channelsResponse?.channels || [];
     const isExistingCheck = !!check;
     
-    // Get the previous channel ID for existing checks
-    const previousChannelId = isExistingCheck && check
-      ? (() => {
-          if (isScriptedCheck(check) && check.settings && 'scripted' in check.settings) {
-            return check.settings.scripted.channel || null;
-          }
-          if (isBrowserCheck(check) && check.settings && 'browser' in check.settings) {
-            return check.settings.browser.channel || null;
-          }
-          return null;
-        })()
+    const previousChannelId = isExistingCheck && check?.channels?.k6?.id
+      ? check.channels.k6.id
       : null;
     
     const filteredChannels = getFilteredChannels(originalChannels, isExistingCheck, previousChannelId);
diff --git a/src/page/NewCheck/__tests__/v2/browserChecks/browser/1-browser.payload.test.tsx b/src/page/NewCheck/__tests__/v2/browserChecks/browser/1-browser.payload.test.tsx
@@ -65,7 +65,7 @@ describe(`BrowserCheck - 1 (Script) payload`, () => {
     const { read, user } = await setupFormWithChannelSelector(checkType);
     await submitForm(user);
     const { body } = await read();
-    expect(body.settings.browser.channel).toBe('v1');
+    expect(body.channels?.k6?.id).toBe('v1');
   });
 
   it(`can select and submit a non-default channel`, async () => {
@@ -75,7 +75,7 @@ describe(`BrowserCheck - 1 (Script) payload`, () => {
 
     await submitForm(user);
     const { body } = await read();
-    expect(body.settings.browser.channel).toBe('v2');
+    expect(body.channels?.k6?.id).toBe('v2');
   });
 
   it(`omits channel from payload when feature is disabled`, async () => {
diff --git a/src/page/NewCheck/__tests__/v2/scriptedChecks/scripted/1-script.payload.test.tsx b/src/page/NewCheck/__tests__/v2/scriptedChecks/scripted/1-script.payload.test.tsx
@@ -64,7 +64,7 @@ describe(`ScriptedCheck - 1 (Script) payload`, () => {
     const { read, user } = await setupFormWithChannelSelector(checkType);
     await submitForm(user);
     const { body } = await read();
-    expect(body.settings.scripted.channel).toBe('v1');
+    expect(body.channels?.k6?.id).toBe('v1');
   });
 
   it(`can select and submit a non-default channel`, async () => {
@@ -74,7 +74,7 @@ describe(`ScriptedCheck - 1 (Script) payload`, () => {
 
     await submitForm(user);
     const { body } = await read();
-    expect(body.settings.scripted.channel).toBe('v2');
+    expect(body.channels?.k6?.id).toBe('v2');
   });
 
   it(`omits channel from payload when feature is disabled`, async () => {
diff --git a/src/schemas/forms/BaseCheckSchema.ts b/src/schemas/forms/BaseCheckSchema.ts
@@ -6,7 +6,7 @@ import { labelsSchema } from 'schemas/general/Label';
 import { createTimeoutSchema } from 'schemas/general/Timeout';
 import { z, ZodType } from 'zod';
 
-import { AlertSensitivity, CheckFormValuesBase } from 'types';
+import { AlertSensitivity, CheckFormValuesBase, K6Channel } from 'types';
 import { formatDuration } from 'utils';
 
 export const baseCheckSchema = z.object({
@@ -21,6 +21,9 @@ export const baseCheckSchema = z.object({
   labels: labelsSchema,
   publishAdvancedMetrics: z.boolean(),
   alerts: checkAlertsSchema.optional(),
+  channels: z.object({
+    k6: z.custom<K6Channel>().optional(),
+  }).optional(),
 });
 
 export function addRefinements<T extends CheckFormValuesBase>(schema: ZodType<T, any, any>) {
diff --git a/src/schemas/forms/BrowserCheckSchema.ts b/src/schemas/forms/BrowserCheckSchema.ts
@@ -16,7 +16,6 @@ export const MAX_TIMEOUT_BROWSER = ONE_MINUTE_IN_MS * 3;
 function createBrowserSettingsSchema(): ZodType<BrowserSettings> {
   return z.object({
     script: z.string().min(1, `Script is required.`).superRefine(maxSizeValidation).superRefine(validateBrowserScript),
-    channel: z.string().nullable().optional(),
   });
 }
 
@@ -42,8 +41,7 @@ export function createBrowserCheckSchema(availableProbes?: ProbeWithMetadata[]):
 
   // Add probe compatibility refinement if probes are provided
   if (availableProbes && availableProbes.length > 0) {
-    const getChannel = (data: CheckFormValuesBrowser) => data.settings.browser?.channel;
-    return schema.superRefine(createProbeCompatibilityRefinement<CheckFormValuesBrowser>(availableProbes, getChannel));
+    return schema.superRefine(createProbeCompatibilityRefinement<CheckFormValuesBrowser>(availableProbes));
   }
 
   return schema;
diff --git a/src/schemas/forms/K6ChannelValidation.test.ts b/src/schemas/forms/K6ChannelValidation.test.ts
diff --git a/src/schemas/forms/ScriptedCheckSchema.ts b/src/schemas/forms/ScriptedCheckSchema.ts
diff --git a/src/schemas/forms/utils/probeCompatibilityRefinement.ts b/src/schemas/forms/utils/probeCompatibilityRefinement.ts
diff --git a/src/types.ts b/src/types.ts

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,9 @@ export function getBaseFormValuesFromCheck(check: Check): Omit<CheckFormValues,`
`46`	`46`	`target: check.target,`
`47`	`47`	`timeout: check.timeout,`
`48`	`48`	`alerts: predefinedAlertsToFormValues(GLOBAL_PREDEFINED_ALERTS, check.alerts \|\| []),`
	`49`	`+ channels: {`
	`50`	`+ k6: check.channels?.k6,`
	`51`	`+ },`
`49`	`52`	`};`
`50`	`53`	`}`
`51`	`54`