@openshift-assisted/ui-lib 2.16.4-cim → 2.16.6-cim

package/lib/common/components/ui/formik/NumberInputField.tsx

@@ -65,7 +65,7 @@ const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
     };
 
     return (
-      <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
+      <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
         <Split>
           <SplitItem isFilled>
             <NumberInput
@@ -90,7 +90,6 @@ const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
                 icon={errorMessage && <ExclamationCircleIcon />}
                 variant={errorMessage ? 'error' : 'default'}
                 id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-                data-testid={`input-numberinput-${fieldId}-helper-text`}
               >
                 {errorMessage ? errorMessage : helperText}
               </HelperTextItem>

package/lib/common/components/ui/formik/PencilEditField.css

@@ -1,3 +1,3 @@
 .ai-pencil-field__text {
-  padding-right: var(--pf-v6-global--spacer--sm);
+  padding-right: var(--pf-v5-global--spacer--sm);
 }

package/lib/common/components/ui/formik/PencilEditField.tsx

@@ -57,7 +57,7 @@ const PencilEditField = ({ name, isRequired, showErrorMessage }: PencilEditField
           </Split>
         </>
       )}
-      <div className="pf-v6-c-form__helper-text pf-m-error">{errrMsg}</div>
+      <div className="pf-v5-c-form__helper-text pf-m-error">{errrMsg}</div>
     </>
   );
 };

package/lib/common/components/ui/formik/PullSecretField.tsx

@@ -67,7 +67,6 @@ const GetPullSecretHelperText: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
 
 const PullSecretField: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
   const { t } = useTranslation();
-
   return (
     <TextAreaField
       name="pullSecret"

package/lib/common/components/ui/formik/RemovableField.css

@@ -1,11 +1,11 @@
 .ai-remove-button__tooltip {
-  --pf-v6-c-tooltip__content--BackgroundColor: rgba(0, 0, 0, 0) !important;
-  --pf-v6-c-tooltip__arrow--BackgroundColor: rgba(0, 0, 0, 0) !important;
-  --pf-v6-c-tooltip__arrow--BoxShadow: rgba(0, 0, 0, 0) !important;
-  --pf-v6-c-tooltip--BoxShadow: rgba(0, 0, 0, 0) !important;
-  --pf-v6-c-tooltip__content--PaddingTop: 2.25em !important;
+  --pf-v5-c-tooltip__content--BackgroundColor: rgba(0, 0, 0, 0) !important;
+  --pf-v5-c-tooltip__arrow--BackgroundColor: rgba(0, 0, 0, 0) !important;
+  --pf-v5-c-tooltip__arrow--BoxShadow: rgba(0, 0, 0, 0) !important;
+  --pf-v5-c-tooltip--BoxShadow: rgba(0, 0, 0, 0) !important;
+  --pf-v5-c-tooltip__content--PaddingTop: 2.25em !important;
 }
 
 .ai-remove-button__tooltip--padding-none {
-  --pf-v6-c-tooltip__content--PaddingTop: 0 !important;
+  --pf-v5-c-tooltip__content--PaddingTop: 0 !important;
 }

package/lib/common/components/ui/formik/RemovableField.tsx

@@ -30,11 +30,12 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
       distance={0}
       content={
         <Button
-          icon={<UiIcon size="sm" icon={<MinusCircleIcon />} />}
           variant={ButtonVariant.plain}
           onClick={onRemove}
           data-testid={removeButtonDataTestId}
-        />
+        >
+          <UiIcon size="sm" icon={<MinusCircleIcon />} />
+        </Button>
       }
       className={classnames('ai-remove-button__tooltip ', className)}
       {...props}

package/lib/common/components/ui/formik/RichInputField.css

@@ -1,9 +1,16 @@
 .rich-input__rules {
-  padding-top: var(--pf-v6-c-helper-text--Gap);
+  padding-top: var(--pf-v5-c-helper-text--Gap);
+}
+
+.rich-input__group {
+  border-color: var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--300)
+    var(--pf-v5-global--BorderColor--200) var(--pf-v5-global--BorderColor--300);
+  border-width: 1px;
+  border-style: solid;
 }
 
 .rich-input__group--invalid {
-  border-bottom-color: var(--pf-v6-global--danger-color--100);
+  border-bottom-color: var(--pf-v5-global--danger-color--100);
 }
 
 .rich-input__text {

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -14,16 +14,15 @@ import {
   InputGroupItem,
   FormHelperText,
   HelperText,
-  ButtonVariant,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -51,26 +50,19 @@ type RichValidationProps = {
   value: any;
   error: string | undefined;
   richValidationMessages: { [key: string]: string };
-  fieldId: string;
 };
 
 export const RichValidation: React.FC<RichValidationProps> = ({
   value,
   error,
   richValidationMessages,
-  fieldId,
 }) => {
   return (
     <PFHelperText component="ul" className="rich-input__rules">
       {Object.keys(richValidationMessages).map((key) => {
         const variant = getHelperTextVariant(richValidationMessages[key], value, error);
         return (
-          <HelperTextItem
-            key={key}
-            component="li"
-            {...variant}
-            data-testid={`input-richinputvalidation-${fieldId}-helper-text`}
-          >
+          <HelperTextItem key={key} isDynamic component="li" {...variant}>
             {richValidationMessages[key]}
           </HelperTextItem>
         );
@@ -116,7 +108,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
         fieldId={fieldId}
         label={label}
         isRequired={isRequired}
-        labelHelp={labelIcon}
+        labelIcon={labelIcon}
       >
         <InputGroup
           className={classNames('rich-input__group', { 'rich_input__group--invalid': !isValid })}
@@ -156,24 +148,19 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                   value={value}
                   error={error}
                   richValidationMessages={richValidationMessages as Record<string, string>}
-                  fieldId={fieldId}
                 />
               }
               withFocusTrap={false}
             >
-              <Button
-                icon={
-                  !isValid ? (
-                    <ExclamationCircleIcon color={dangerColor.value} />
-                  ) : value ? (
-                    <CheckCircleIcon color={okColor.value} />
-                  ) : (
-                    <InfoCircleIcon color={blueInfoColor.value} />
-                  )
-                }
-                variant={ButtonVariant.control}
-                aria-label="Validation"
-              />
+              <Button variant="plain" aria-label="Validation">
+                {!isValid ? (
+                  <ExclamationCircleIcon color={dangerColor.value} />
+                ) : value ? (
+                  <CheckCircleIcon color={okColor.value} />
+                ) : (
+                  <InfoCircleIcon color={blueInfoColor.value} />
+                )}
+              </Button>
             </Popover>
           </InputGroupItem>
         </InputGroup>
@@ -184,7 +171,6 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                 icon={errorMessage && <ExclamationCircleIcon />}
                 variant={isValid ? 'default' : 'error'}
                 id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
-                data-testid={`input-richinput-${fieldId}-helper-text`}
               >
                 {errorMessage ? errorMessage : helperText}
               </HelperTextItem>

package/lib/common/components/ui/formik/SelectField.tsx

@@ -38,7 +38,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelHelp={labelIcon}
+      labelIcon={labelIcon}
       id={`form-control__${fieldId}`}
     >
       <FormSelect
@@ -65,7 +65,6 @@ const SelectField: React.FC<SelectFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid={`input-selectfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

package/lib/common/components/ui/formik/SelectFieldWithSearch.tsx

@@ -0,0 +1,278 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  FormGroup,
+  Bullseye,
+  Spinner,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Divider,
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import { useField } from 'formik';
+import { isEqual } from 'lodash-es';
+import { FieldProps } from './types';
+
+const NO_RESULTS = 'no_results';
+
+const createItemId = (val: string) => `select-multi-typeahead-${val.replace(' ', '-')}`;
+
+const SelectFieldWithSearch = ({
+  name,
+  label,
+  isRequired,
+  selectOptions,
+  filterValue,
+  setFilterValue,
+  isMultiSelect = false,
+  isLoading = false,
+  placeholder,
+  helperText,
+}: {
+  selectOptions: (SelectOptionProps & { showDivider?: boolean })[];
+  filterValue: string;
+  setFilterValue: (value: string) => void;
+  isMultiSelect?: boolean;
+  isLoading?: boolean;
+  placeholder?: string;
+  helperText?: React.ReactNode;
+} & FieldProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [{ value }, , { setValue }] = useField<unknown | unknown[]>(name);
+
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value as string));
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!filterValue) {
+      closeMenu();
+    }
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus = 0;
+
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    if (selectOptions.every((option) => option.isDisabled)) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = selectOptions.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
+          indexToFocus = selectOptions.length - 1;
+        }
+      }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
+          indexToFocus = 0;
+        }
+      }
+    }
+
+    setActiveAndFocusedItem(indexToFocus);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
+
+    switch (event.key) {
+      case 'Enter':
+        if (
+          isOpen &&
+          focusedItem &&
+          focusedItem.value !== NO_RESULTS &&
+          !focusedItem.isAriaDisabled
+        ) {
+          onSelect(focusedItem.value as string);
+        }
+
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+    textInputRef?.current?.focus();
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setFilterValue(value);
+    resetActiveAndFocusedItem();
+  };
+
+  const onSelect = React.useCallback(
+    (val) => {
+      if (val && val !== NO_RESULTS) {
+        if (isMultiSelect && Array.isArray(value)) {
+          setValue(
+            value.some((v) => isEqual(v, val))
+              ? value.filter((v) => !isEqual(v, val))
+              : [...(value as unknown[]), val],
+          );
+        } else {
+          setValue(val);
+          setFilterValue(selectOptions.find((option) => option.value === val)?.children as string);
+        }
+      }
+
+      textInputRef.current?.focus();
+    },
+    [isMultiSelect, setValue, setFilterValue, selectOptions, value],
+  );
+
+  const onClearButtonClick = () => {
+    setFilterValue('');
+    resetActiveAndFocusedItem();
+    textInputRef?.current?.focus();
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      variant="typeahead"
+      aria-label="Multi typeahead checkbox menu toggle"
+      onClick={onToggleClick}
+      innerRef={toggleRef}
+      isExpanded={isOpen}
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          isExpanded={isOpen}
+          value={filterValue}
+          placeholder={placeholder}
+          onClick={onInputClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          innerRef={textInputRef}
+          autoComplete="off"
+          role="combobox"
+          id="typeahead-select-input"
+          aria-controls="typeahead-select-listbox"
+          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
+        />
+        <TextInputGroupUtilities {...(!filterValue ? { style: { display: 'none' } } : {})}>
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
+            <TimesIcon aria-hidden />
+          </Button>
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <FormGroup label={label} isRequired={isRequired}>
+      <Select
+        role="menu"
+        id="typeahead-select"
+        isOpen={isOpen}
+        selected={value}
+        onSelect={(_event, selection) => onSelect(selection as string)}
+        onOpenChange={(isOpen) => {
+          !isOpen && closeMenu();
+        }}
+        toggle={toggle}
+        isScrollable
+      >
+        <SelectList isAriaMultiselectable id="select-typeahead-listbox">
+          {isLoading ? (
+            <SelectOption key={'loader'}>
+              <Bullseye>
+                <Spinner size="lg" />
+              </Bullseye>
+            </SelectOption>
+          ) : (
+            selectOptions.map((option, index) => (
+              <>
+                {option.showDivider && <Divider component="li" key={`divider-${index}`} />}
+                <SelectOption
+                  hasCheckbox={isMultiSelect && !option.isAriaDisabled}
+                  isSelected={
+                    isMultiSelect && Array.isArray(value)
+                      ? value.some((v) => isEqual(v, option.value))
+                      : value === option.value
+                  }
+                  key={`option-${index}`}
+                  isFocused={focusedItemIndex === index}
+                  ref={null}
+                  {...option}
+                />
+              </>
+            ))
+          )}
+        </SelectList>
+      </Select>
+      {helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </FormGroup>
+  );
+};
+
+export default SelectFieldWithSearch;

package/lib/common/components/ui/formik/SwitchField.tsx

@@ -50,7 +50,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
   };
 
   return (
-    <FormGroup fieldId={fieldId} isRequired={isRequired} labelHelp={labelIcon}>
+    <FormGroup fieldId={fieldId} isRequired={isRequired} labelIcon={labelIcon}>
       {tooltipProps ? (
         <Tooltip {...tooltipProps}>
           <Switch {...switchFields} />
@@ -65,7 +65,6 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid={`input-switchfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

package/lib/common/components/ui/formik/TextAreaField.tsx

@@ -41,7 +41,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelHelp={labelIcon}
+      labelIcon={labelIcon}
       className={groupClassName}
       id={`form-control__${fieldId}`}
     >
@@ -60,23 +60,20 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
       {(errorMessage || helperText) && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem
-              variant={'default'}
-              id={`${fieldId}-helper`}
-              data-testid={`input-textarea-${fieldId}-helper-text`}
-            >
-              {helperText}
-            </HelperTextItem>
             {errorMessage && (
               <HelperTextItem
                 icon={<ExclamationCircleIcon />}
                 variant={'error'}
                 id={`${fieldId}-helper-error`}
-                data-testid={`input-textarea-${fieldId}-helper-text`}
               >
                 {errorMessage}
               </HelperTextItem>
             )}
+            {helperText && (
+              <HelperTextItem variant={'default'} id={`${fieldId}-helper`}>
+                {helperText}
+              </HelperTextItem>
+            )}
           </HelperText>
         </FormHelperText>
       )}

package/lib/common/components/ui/formik/TextAreaSecretField.tsx

@@ -41,10 +41,7 @@ const TextAreaSecretField: React.FC<TextAreaSecretProps> = ({
       {helperTextHidden && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem data-testid={`input-textareasecret-${fieldId}-helper-text`}>
-              {' '}
-              {helperTextHidden}
-            </HelperTextItem>
+            <HelperTextItem>{helperTextHidden}</HelperTextItem>
           </HelperText>
         </FormHelperText>
       )}

package/lib/common/components/ui/formik/UploadField.tsx

@@ -44,7 +44,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
   const acceptedFiles = { 'application/x-ssh-key': ['.pub'] };
   const maxFileSize = 2048;
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -58,7 +58,6 @@ const UploadField: React.FC<UploadFieldProps> = ({
         type="text"
         value={field.value as string}
         filename={filename}
-        data-testid={`upload-field-${fieldId}`}
         onDataChange={(_event, file: string) => {
           setValue(file);
           setTouched(true);
@@ -111,7 +110,6 @@ const UploadField: React.FC<UploadFieldProps> = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid={`input-uploadfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

package/lib/common/components/ui/formik/_validationSchemas.test.ts

@@ -2,7 +2,6 @@ import { test, describe, expect } from 'vitest';
 import {
   baseDomainValidationSchema,
   dnsNameValidationSchema,
-  dualStackValidationSchema,
   hostPrefixValidationSchema,
   ipBlockValidationSchema,
   ipValidationSchema,
@@ -348,85 +347,4 @@ describe('validationSchemas', () => {
 
     expect(counter).toBe(invalid.length);
   });
-
-  describe('dualStackValidationSchema', () => {
-    describe('OCP < 4.12 (legacy behavior)', () => {
-      const schema = dualStackValidationSchema('machine networks', '4.11');
-
-      test('validates IPv4 as primary and IPv6 as secondary', async () => {
-        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
-
-        for (const value of validValues) {
-          await expect(schema.validate(value)).resolves.toBe(value);
-        }
-      });
-
-      test('rejects IPv6 as primary for OCP < 4.12', async () => {
-        const invalidValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
-
-        for (const value of invalidValues) {
-          await expect(schema.validate(value)).rejects.toThrow(
-            'First network has to be IPv4 subnet',
-          );
-        }
-      });
-    });
-
-    describe('OCP >= 4.12 (new behavior)', () => {
-      const schema = dualStackValidationSchema('machine networks', '4.12');
-
-      test('validates IPv4 as primary and IPv6 as secondary', async () => {
-        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
-
-        for (const value of validValues) {
-          await expect(schema.validate(value)).resolves.toBe(value);
-        }
-      });
-
-      test('validates IPv6 as primary and IPv4 as secondary', async () => {
-        const validValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
-
-        for (const value of validValues) {
-          await expect(schema.validate(value)).resolves.toBe(value);
-        }
-      });
-    });
-
-    describe('no version specified (defaults to legacy behavior)', () => {
-      const schema = dualStackValidationSchema('machine networks');
-
-      test('validates IPv4 as primary and IPv6 as secondary', async () => {
-        const validValues = [[{ cidr: '192.168.1.0/24' }, { cidr: '2001:db8::/64' }]];
-
-        for (const value of validValues) {
-          await expect(schema.validate(value)).resolves.toBe(value);
-        }
-      });
-
-      test('rejects IPv6 as primary when no version specified', async () => {
-        const invalidValues = [[{ cidr: '2001:db8::/64' }, { cidr: '192.168.1.0/24' }]];
-
-        for (const value of invalidValues) {
-          await expect(schema.validate(value)).rejects.toThrow(
-            'First network has to be IPv4 subnet',
-          );
-        }
-      });
-    });
-
-    describe('edge cases', () => {
-      test('validates maximum 2 networks', async () => {
-        const schema = dualStackValidationSchema('machine networks', '4.12');
-        const invalidValue = [
-          { cidr: '192.168.1.0/24' },
-          { cidr: '2001:db8::/64' },
-          { cidr: '10.0.0.0/24' },
-        ];
-
-        await expect(schema.validate(invalidValue)).rejects.toThrow(
-          'Maximum number of machine networks subnets in dual stack is 2',
-        );
-      });
-    });
-  });
 });