@openshift-assisted/ui-lib 2.13.0-cim → 2.14.1-cim

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

@@ -1,21 +1,19 @@
 import React from 'react';
 import { useField } from 'formik';
 import Fuse from 'fuse.js';
+import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 import {
-  FormGroup,
   Select,
   SelectOption,
   SelectOptionObject,
   SelectOptionProps,
   SelectProps,
   SelectVariant,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { MultiSelectFieldProps, MultiSelectOption } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 // Field value is a string[]
 const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
@@ -92,57 +90,50 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
     keys: ['displayName'],
   });
   const { t } = useTranslation();
-  const fieldHelperText = <HelperText fieldId={fieldId}>{hText}</HelperText>;
 
   return (
-    <Stack>
-      <StackItem>
-        <FormGroup
-          fieldId={fieldId}
-          label={label}
-          helperText={fieldHelperText}
-          helperTextInvalid={fieldHelperText}
-          validated={isValid ? 'default' : 'error'}
-          isRequired={isRequired}
-          labelIcon={labelIcon}
-        >
-          <Select
-            {...field}
-            {...props}
-            id={fieldId}
-            variant={SelectVariant.typeaheadMulti}
-            typeAheadAriaLabel={t('ai:Select a state')}
-            validated={isValid ? 'default' : 'error'}
-            aria-describedby={`${fieldId}-helper`}
-            isCreatable={false}
-            placeholderText={placeholderText}
-            isOpen={isOpen}
-            onToggle={onToggle}
-            onSelect={onSelect}
-            onClear={onClearSelection}
-            selections={selections}
-            onFilter={(e, val) => {
-              if (!val || val === '') {
-                return children;
-              }
-              const results = fuse.search<MultiSelectOption>(val).map((result) => result.item.id);
-              return (
-                React.Children.toArray(children) as React.ReactElement<SelectOptionProps>[]
-              ).filter(({ props }) => results.includes(props.id as string));
-            }}
-          >
-            {children}
-          </Select>
-        </FormGroup>
-      </StackItem>
-      <StackItem>
-        {errorMessage && (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
+      <Select
+        {...field}
+        {...props}
+        id={fieldId}
+        variant={SelectVariant.typeaheadMulti}
+        typeAheadAriaLabel={t('ai:Select a state')}
+        validated={isValid ? 'default' : 'error'}
+        aria-describedby={`${fieldId}-helper`}
+        isCreatable={false}
+        placeholderText={placeholderText}
+        isOpen={isOpen}
+        onToggle={(_event, isOpen: boolean) => onToggle(isOpen)}
+        onSelect={onSelect}
+        onClear={onClearSelection}
+        selections={selections}
+        onFilter={(e, val) => {
+          if (!val || val === '') {
+            return children;
+          }
+          const results = fuse.search<MultiSelectOption>(val).map((result) => result.item.id);
+          return (
+            React.Children.toArray(children) as React.ReactElement<SelectOptionProps>[]
+          ).filter(({ props }) => results.includes(props.id as string));
+        }}
+      >
+        {children}
+      </Select>
+      {(errorMessage || hText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : hText}
+            </HelperTextItem>
           </HelperText>
-        )}
-      </StackItem>
-    </Stack>
+        </FormHelperText>
+      )}
+    </FormGroup>
   );
 };
 

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

@@ -2,16 +2,17 @@ import * as React from 'react';
 import { useField } from 'formik';
 import {
   FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
   NumberInput,
   NumberInputProps,
   Split,
   SplitItem,
-  Stack,
-  StackItem,
 } from '@patternfly/react-core';
 import { NumberInputFieldProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 // eslint-disable-next-line react/display-name
 const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
@@ -63,47 +64,39 @@ const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
       doChange(isNaN(targetValue) ? 0 : Number(targetValue));
     };
 
-    const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
-
     return (
-      <Stack>
-        <StackItem>
-          <FormGroup
-            fieldId={fieldId}
-            label={label}
-            helperText={fieldHelperText}
-            helperTextInvalid={fieldHelperText}
-            validated={isValid ? 'default' : 'error'}
-            isRequired={isRequired}
-            labelIcon={labelIcon}
-          >
-            <Split>
-              <SplitItem isFilled>
-                <NumberInput
-                  {...props}
-                  value={field.value}
-                  onMinus={onMinus}
-                  onChange={handleChange}
-                  onPlus={onPlus}
-                  min={minValue}
-                  max={maxValue}
-                  ref={ref}
-                  id={fieldId}
-                  aria-describedby={`${fieldId}-helper`}
-                />
-              </SplitItem>
-              <SplitItem>{children}</SplitItem>
-            </Split>
-          </FormGroup>
-        </StackItem>
-        <StackItem>
-          {errorMessage && (
-            <HelperText fieldId={fieldId} isError>
-              {errorMessage}
+      <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
+        <Split>
+          <SplitItem isFilled>
+            <NumberInput
+              {...props}
+              value={field.value}
+              onMinus={onMinus}
+              onChange={handleChange}
+              onPlus={onPlus}
+              min={minValue}
+              max={maxValue}
+              ref={ref}
+              id={fieldId}
+              aria-describedby={`${fieldId}-helper`}
+            />
+          </SplitItem>
+          <SplitItem>{children}</SplitItem>
+        </Split>
+        {(errorMessage || helperText) && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem
+                icon={errorMessage && <ExclamationCircleIcon />}
+                variant={errorMessage ? 'error' : 'default'}
+                id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+              >
+                {errorMessage ? errorMessage : helperText}
+              </HelperTextItem>
             </HelperText>
-          )}
-        </StackItem>
-      </Stack>
+          </FormHelperText>
+        )}
+      </FormGroup>
     );
   },
 );

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

@@ -1,3 +1,3 @@
 .ai-pencil-field__text {
-  padding-right: var(--pf-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-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/RadioField.tsx

@@ -24,8 +24,8 @@ const RadioField = ({
       {...rest}
       id={fieldId}
       isChecked={!!field.checked}
-      onChange={(checked, e) => {
-        onChange?.(checked, e);
+      onChange={(e, checked) => {
+        onChange?.(e, checked);
         callFormikOnChange && field.onChange(e);
       }}
     />

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

@@ -1,9 +1,11 @@
 .ai-remove-button__tooltip {
-  --pf-c-tooltip__content--BackgroundColor: rgba(0, 0, 0, 0);
-  --pf-c-tooltip--BoxShadow: rgba(0, 0, 0, 0);
-  --pf-c-tooltip__content--PaddingTop: 2.25em;
+  --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-c-tooltip__content--PaddingTop: 0;
+  --pf-v5-c-tooltip__content--PaddingTop: 0 !important;
 }

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

@@ -3,6 +3,7 @@ import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
 import './RemovableField.css';
 import classnames from 'classnames';
+import UiIcon from '../UiIcon';
 
 interface RemovableFieldProps {
   onRemove: VoidFunction;
@@ -33,7 +34,7 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
           onClick={onRemove}
           data-testid={removeButtonDataTestId}
         >
-          <MinusCircleIcon size="sm" />
+          <UiIcon size="sm" icon={<MinusCircleIcon />} />
         </Button>
       }
       className={classnames('ai-remove-button__tooltip ', className)}

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

@@ -1,16 +1,16 @@
 .rich-input__rules {
-  padding-top: var(--pf-c-helper-text--Gap);
+  padding-top: var(--pf-v5-c-helper-text--Gap);
 }
 
 .rich-input__group {
-  border-color: var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--300)
-    var(--pf-global--BorderColor--200) var(--pf-global--BorderColor--300);
+  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-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

@@ -11,6 +11,9 @@ import {
   PopoverPosition,
   InputGroup,
   Button,
+  InputGroupItem,
+  FormHelperText,
+  HelperText,
 } 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';
@@ -23,7 +26,6 @@ import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-toke
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
 
 import './RichInputField.css';
 
@@ -82,11 +84,11 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
       labelIcon,
       helperText,
       isRequired,
-      onChange,
       validate,
       idPostfix,
-      noDefaultOnChange,
       richValidationMessages,
+      noDefaultOnChange,
+      onChange,
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
@@ -104,64 +106,75 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
         id={`form-control__${fieldId}`}
         fieldId={fieldId}
         label={label}
-        helperText={
-          typeof helperText === 'string' ? (
-            helperText
-          ) : (
-            <HelperText fieldId={fieldId}>{helperText}</HelperText>
-          )
-        }
-        validated={isValid ? 'default' : 'error'}
         isRequired={isRequired}
         labelIcon={labelIcon}
       >
         <InputGroup
           className={classNames('rich-input__group', { 'rich_input__group--invalid': !isValid })}
         >
-          <TextInput
-            {...field}
-            {...props}
-            ref={ref}
-            id={fieldId}
-            isRequired={isRequired}
-            aria-describedby={`${fieldId}-helper`}
-            onChange={(value, event) => {
-              !popoverOpen && setPopoverOpen(true);
-              !noDefaultOnChange && field.onChange(event);
-              setTouched(true, false);
-              onChange && onChange(event);
-            }}
-            className="rich-input__text"
-            onBlur={() => {
-              setTouched(true, false);
-              setPopoverOpen(false);
-            }}
-          />
-          <Popover
-            isVisible={popoverOpen}
-            shouldClose={() => setPopoverOpen(false)}
-            shouldOpen={() => setPopoverOpen(true)}
-            aria-label="validation popover"
-            position={PopoverPosition.top}
-            bodyContent={
-              <RichValidation
-                value={value}
-                error={error}
-                richValidationMessages={richValidationMessages as Record<string, string>}
-              />
-            }
-          >
-            <Button variant="plain" aria-label="Validation">
-              {!isValid ? (
-                <ExclamationCircleIcon color={dangerColor.value} />
-              ) : value ? (
-                <CheckCircleIcon color={okColor.value} />
-              ) : (
-                <InfoCircleIcon color={blueInfoColor.value} />
-              )}
-            </Button>
-          </Popover>
+          <InputGroupItem isFill>
+            <TextInput
+              {...field}
+              {...props}
+              ref={ref}
+              id={fieldId}
+              isRequired={isRequired}
+              aria-describedby={`${fieldId}-helper`}
+              onChange={(event, val) => {
+                !popoverOpen && setPopoverOpen(true);
+                !noDefaultOnChange && field.onChange(event);
+                onChange && onChange(event);
+                if (!touched && val?.length) {
+                  setTouched(true);
+                }
+              }}
+              className="rich-input__text"
+              onBlur={() => {
+                setPopoverOpen(false);
+                setTouched(true);
+              }}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Popover
+              isVisible={popoverOpen}
+              shouldClose={() => setPopoverOpen(false)}
+              shouldOpen={() => setPopoverOpen(true)}
+              aria-label="validation popover"
+              position={PopoverPosition.top}
+              bodyContent={
+                <RichValidation
+                  value={value}
+                  error={error}
+                  richValidationMessages={richValidationMessages as Record<string, string>}
+                />
+              }
+              withFocusTrap={false}
+            >
+              <Button variant="plain" aria-label="Validation">
+                {!isValid ? (
+                  <ExclamationCircleIcon color={dangerColor.value} />
+                ) : value ? (
+                  <CheckCircleIcon color={okColor.value} />
+                ) : (
+                  <InfoCircleIcon color={blueInfoColor.value} />
+                )}
+              </Button>
+            </Popover>
+          </InputGroupItem>
         </InputGroup>
+        {helperText && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem
+                variant={isValid ? 'default' : 'error'}
+                id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
+              >
+                {helperText}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
     );
   },

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

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, FormSelect, FormSelectOption, Stack, StackItem } from '@patternfly/react-core';
+import {
+  FormGroup,
+  FormHelperText,
+  FormSelect,
+  FormSelectOption,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
 import { getFieldId } from './utils';
 import { SelectFieldProps } from './types';
-import HelperText from './HelperText';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 // Reimplement this component to use custom Select in case of using it along the MultiSelectField component due to visual differences.
 // Idea: use Formik's field.multiple to switch among single and multi-selection.
@@ -25,47 +32,46 @@ const SelectField: React.FC<SelectFieldProps> = ({
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
   const hText = getHelperText ? getHelperText(field.value) : helperText;
-  const fieldHelperText = <HelperText fieldId={fieldId}>{hText}</HelperText>;
 
   return (
-    <Stack id={`form-control__${fieldId}`}>
-      <StackItem>
-        <FormGroup
-          fieldId={fieldId}
-          label={label}
-          helperText={fieldHelperText}
-          helperTextInvalid={fieldHelperText}
-          validated={isValid ? 'default' : 'error'}
-          isRequired={isRequired}
-          labelIcon={labelIcon}
-        >
-          <FormSelect
-            {...field}
-            {...props}
-            id={fieldId}
-            validated={isValid ? 'default' : 'error'}
-            isRequired={isRequired}
-            aria-describedby={`${fieldId}-helper`}
-            onChange={(value, event) => {
-              //customHandleChange enables calling formik change handler explicitly, useful for example to have the previous value
-              callFormikOnChange && field.onChange(event);
-              onChange && onChange(value, event);
-            }}
-          >
-            {options.map((option, index) => (
-              <FormSelectOption key={option.id || index} {...option} />
-            ))}
-          </FormSelect>
-        </FormGroup>
-      </StackItem>
-      <StackItem>
-        {errorMessage && (
-          <HelperText fieldId={fieldId} isError>
-            {errorMessage}
+    <FormGroup
+      fieldId={fieldId}
+      label={label}
+      isRequired={isRequired}
+      labelIcon={labelIcon}
+      id={`form-control__${fieldId}`}
+    >
+      <FormSelect
+        {...field}
+        {...props}
+        id={fieldId}
+        validated={isValid ? 'default' : 'error'}
+        isRequired={isRequired}
+        aria-describedby={`${fieldId}-helper`}
+        onChange={(event, value) => {
+          //customHandleChange enables calling formik change handler explicitly, useful for example to have the previous value
+          callFormikOnChange && field.onChange(event);
+          onChange && onChange(event, value);
+        }}
+      >
+        {options.map((option, index) => (
+          <FormSelectOption key={option.id || index} {...option} />
+        ))}
+      </FormSelect>
+      {(errorMessage || hText) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={<ExclamationCircleIcon />}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : hText}
+            </HelperTextItem>
           </HelperText>
-        )}
-      </StackItem>
-    </Stack>
+        </FormHelperText>
+      )}
+    </FormGroup>
   );
 };
 

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

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { useField, useFormikContext } from 'formik';
-import { Checkbox, FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  Checkbox,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Tooltip,
+} from '@patternfly/react-core';
 import { OpenshiftVersionOptionType } from '../../../types';
 import { getFieldId } from './utils';
-import HelperText from './HelperText';
 import { CheckboxFieldProps } from './types';
 import { FeatureSupportLevelBadge, useFeatureSupportLevel } from '../../featureSupportLevels';
 import { ClusterCreateParams } from '@openshift-assisted/types/assisted-installer-service';
@@ -68,12 +74,18 @@ const SingleNodeCheckbox: React.FC<SingleNodeCheckboxProps> = ({
             }
             aria-describedby={`${fieldId}-helper`}
             description={
-              <HelperText fieldId={fieldId}>
-                {t('ai:SNO enables you to install OpenShift using only one host.')}
-              </HelperText>
+              <FormGroup>
+                <FormHelperText>
+                  <HelperText id={fieldId}>
+                    <HelperTextItem>
+                      {t('ai:SNO enables you to install OpenShift using only one host.')}
+                    </HelperTextItem>
+                  </HelperText>
+                </FormHelperText>
+              </FormGroup>
             }
             isChecked={value === 'None'}
-            onChange={onChanged}
+            onChange={(_event, value) => onChanged(value)}
             className="with-tooltip"
           />
         </Tooltip>