@openshift-assisted/ui-lib 2.16.5-cim → 2.17.0-cim

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

@@ -1,5 +1,5 @@
 .label-field__value {
-  margin: 0 var(--pf-v5-global--spacer--sm) 0 0;
+  margin: 0 var(--pf-v6-global--spacer--sm) 0 0;
 }
 
 .label-field__input {
@@ -10,13 +10,13 @@
 }
 
 .label-field__input::placeholder {
-  color: var(--pf-v5-c-form-control--m-placeholder--Color);
+  color: var(--pf-v6-c-form-control--m-placeholder--Color);
 }
 
 .label-field .react-autosuggest__suggestions-list {
-  margin-left: var(--pf-v5-global--spacer-xs);
-  margin-right: var(--pf-v5-global--spacer-xs);
-  box-shadow: var(--pf-v5-global--BoxShadow--lg);
+  margin-left: var(--pf-v6-global--spacer-xs);
+  margin-right: var(--pf-v6-global--spacer-xs);
+  box-shadow: var(--pf-v6-global--BoxShadow--lg);
 
   max-height: 10rem;
   overflow: auto;
@@ -29,13 +29,13 @@
 
 .label-field .react-autosuggest__suggestion--highlighted {
   /* TODO(mlibra): maybe a lighter color would be better */
-  background-color: var(--pf-v5-global--primary-color--light-100);
+  background-color: var(--pf-v6-global--primary-color--light-100);
 }
 
 .label-field .react-autosuggest__section-title {
   padding: 10px 0 0 10px;
-  font-size: var(--pf-v5-global--FontSize--sm);
-  color: var(--pf-v5-global--Color--200);
+  font-size: var(--pf-v6-global--FontSize--sm);
+  color: var(--pf-v6-global--Color--200);
 }
 
 .label-field .react-tagsinput {

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

@@ -52,9 +52,9 @@ export const LabelField: React.FC<LabelFieldProps> = ({
   const errorMessage = !isValid ? error : '';
 
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {t("ai:Enter key=value and then press 'enter' or 'space' or use a ',' to input the label.")}
-      <div className="co-search-input pf-v5-c-form-control">
+      <div className="co-search-input pf-v6-c-form-control">
         <TagsInput
           {...field}
           onChange={(tags) => {
@@ -89,6 +89,7 @@ export const LabelField: React.FC<LabelFieldProps> = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-label-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

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

@@ -76,8 +76,8 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
     onChange && onChange(newValue);
   };
 
-  const deleteChip = (chip: string) => {
-    const newValue = field.value.filter((val) => val !== chip);
+  const deleteLabel = (label: string) => {
+    const newValue = field.value.filter((val) => val !== label);
     setValue(newValue);
     setTextValue('');
     onChange && onChange(newValue);
@@ -101,7 +101,7 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
   });
 
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       <Dropdown
         id={fieldId}
         isOpen={isOpen}
@@ -114,16 +114,17 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
             onClick={() => onToggle(!isOpen)}
             isExpanded={isOpen}
             variant="typeahead"
+            data-testid="multi-select-field-toggle"
           >
             <TextInputGroup>
               <LabelGroup>
-                {field.value.map((currentChip) => (
+                {field.value.map((currentLabel) => (
                   <Label
-                    key={currentChip}
+                    key={currentLabel}
                     variant="outline"
-                    onClose={() => deleteChip(currentChip)}
+                    onClose={() => deleteLabel(currentLabel)}
                   >
-                    {currentChip}
+                    {currentLabel}
                   </Label>
                 ))}
               </LabelGroup>
@@ -167,6 +168,7 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              data-testid={`input-multiselectfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

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} labelIcon={labelIcon}>
+      <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
         <Split>
           <SplitItem isFilled>
             <NumberInput
@@ -90,6 +90,7 @@ 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-v5-global--spacer--sm);
+  padding-right: var(--pf-v6-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-v5-c-form__helper-text pf-m-error">{errrMsg}</div>
+      <div className="pf-v6-c-form__helper-text pf-m-error">{errrMsg}</div>
     </>
   );
 };

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

@@ -67,6 +67,7 @@ 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-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;
+  --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;
 }
 
 .ai-remove-button__tooltip--padding-none {
-  --pf-v5-c-tooltip__content--PaddingTop: 0 !important;
+  --pf-v6-c-tooltip__content--PaddingTop: 0 !important;
 }

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

@@ -30,12 +30,11 @@ 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,16 +1,9 @@
 .rich-input__rules {
-  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;
+  padding-top: var(--pf-v6-c-helper-text--Gap);
 }
 
 .rich-input__group--invalid {
-  border-bottom-color: var(--pf-v5-global--danger-color--100);
+  border-bottom-color: var(--pf-v6-global--danger-color--100);
 }
 
 .rich-input__text {

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

@@ -14,15 +14,16 @@ 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 { 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 { 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 { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -50,19 +51,26 @@ 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} isDynamic component="li" {...variant}>
+          <HelperTextItem
+            key={key}
+            component="li"
+            {...variant}
+            data-testid={`input-richinputvalidation-${fieldId}-helper-text`}
+          >
             {richValidationMessages[key]}
           </HelperTextItem>
         );
@@ -108,7 +116,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
         fieldId={fieldId}
         label={label}
         isRequired={isRequired}
-        labelIcon={labelIcon}
+        labelHelp={labelIcon}
       >
         <InputGroup
           className={classNames('rich-input__group', { 'rich_input__group--invalid': !isValid })}
@@ -148,19 +156,24 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                   value={value}
                   error={error}
                   richValidationMessages={richValidationMessages as Record<string, string>}
+                  fieldId={fieldId}
                 />
               }
               withFocusTrap={false}
             >
-              <Button variant="plain" aria-label="Validation">
-                {!isValid ? (
-                  <ExclamationCircleIcon color={dangerColor.value} />
-                ) : value ? (
-                  <CheckCircleIcon color={okColor.value} />
-                ) : (
-                  <InfoCircleIcon color={blueInfoColor.value} />
-                )}
-              </Button>
+              <Button
+                icon={
+                  !isValid ? (
+                    <ExclamationCircleIcon color={dangerColor.value} />
+                  ) : value ? (
+                    <CheckCircleIcon color={okColor.value} />
+                  ) : (
+                    <InfoCircleIcon color={blueInfoColor.value} />
+                  )
+                }
+                variant={ButtonVariant.control}
+                aria-label="Validation"
+              />
             </Popover>
           </InputGroupItem>
         </InputGroup>
@@ -171,6 +184,7 @@ 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}
-      labelIcon={labelIcon}
+      labelHelp={labelIcon}
       id={`form-control__${fieldId}`}
     >
       <FormSelect
@@ -65,6 +65,7 @@ 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/SwitchField.tsx

@@ -50,7 +50,7 @@ const SwitchField: React.FC<SwitchFieldProps> = ({
   };
 
   return (
-    <FormGroup fieldId={fieldId} isRequired={isRequired} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} isRequired={isRequired} labelHelp={labelIcon}>
       {tooltipProps ? (
         <Tooltip {...tooltipProps}>
           <Switch {...switchFields} />
@@ -65,6 +65,7 @@ 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}
-      labelIcon={labelIcon}
+      labelHelp={labelIcon}
       className={groupClassName}
       id={`form-control__${fieldId}`}
     >
@@ -60,20 +60,23 @@ 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,7 +41,10 @@ const TextAreaSecretField: React.FC<TextAreaSecretProps> = ({
       {helperTextHidden && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem>{helperTextHidden}</HelperTextItem>
+            <HelperTextItem data-testid={`input-textareasecret-${fieldId}-helper-text`}>
+              {' '}
+              {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} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -58,6 +58,7 @@ 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);
@@ -110,6 +111,7 @@ 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,6 +2,7 @@ import { test, describe, expect } from 'vitest';
 import {
   baseDomainValidationSchema,
   dnsNameValidationSchema,
+  dualStackValidationSchema,
   hostPrefixValidationSchema,
   ipBlockValidationSchema,
   ipValidationSchema,
@@ -347,4 +348,85 @@ 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',
+        );
+      });
+    });
+  });
 });

package/lib/common/components/ui/formik/types.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
-  TextInputTypes,
   FormSelectOptionProps,
   TooltipProps,
   RadioProps,
   FormSelectProps,
   DropEvent,
+  TextInputProps,
 } from '@patternfly/react-core';
 import { DropdownItemProps } from '@patternfly/react-core';
 import { FieldValidator, FieldHelperProps } from 'formik';
@@ -64,7 +64,7 @@ export interface SwitchFieldProps extends FieldProps {
 }
 
 export interface InputFieldProps extends FieldProps {
-  type?: TextInputTypes;
+  type?: TextInputProps['type'];
   placeholder?: string;
   noDefaultOnChange?: boolean;
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void;