@openshift-assisted/ui-lib 2.48.6 → 2.50.0

package/lib/common/components/ui/StaticTextField.tsx

@@ -19,7 +19,7 @@ export interface StaticFieldProps {
   isValid?: boolean;
 }
 
-export const StaticField: React.FC<StaticFieldProps> = ({
+export const StaticField: React.FC<React.PropsWithChildren<StaticFieldProps>> = ({
   label,
   name,
   children,
@@ -63,7 +63,10 @@ type FormikStaticFieldProps = {
   value: string;
 } & StaticFieldProps;
 
-export const FormikStaticField: React.FC<FormikStaticFieldProps> = ({ value, ...props }) => {
+export const FormikStaticField: React.FC<React.PropsWithChildren<FormikStaticFieldProps>> = ({
+  value,
+  ...props
+}) => {
   const [, , helpers] = useField({ name: props.name });
 
   React.useEffect(() => {
@@ -77,7 +80,10 @@ export const FormikStaticField: React.FC<FormikStaticFieldProps> = ({ value, ...
  * Simplified form component for rendering static text.
  * Does not reflect field value from formik.
  */
-export const StaticTextField: React.FC<StaticFieldProps> = ({ children, ...props }) => {
+export const StaticTextField: React.FC<React.PropsWithChildren<StaticFieldProps>> = ({
+  children,
+  ...props
+}) => {
   const fieldId = getFieldId(props.name, 'static');
 
   return (

package/lib/common/components/ui/Toolbar/ToolbarSecondaryGroup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ToolbarGroup } from '@patternfly/react-core';
 
-const ToolbarSecondaryGroup: React.FC = ({ children }) => (
+const ToolbarSecondaryGroup: React.FC<React.PropsWithChildren> = ({ children }) => (
   <ToolbarGroup align={{ md: 'alignEnd' }}>{children}</ToolbarGroup>
 );
 

package/lib/common/components/ui/WizardFooter.tsx

@@ -69,7 +69,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
                 variant={ButtonVariant.primary}
                 name="next"
                 onClick={onNext}
-                isDisabled={isNextDisabled}
+                isDisabled={isNextDisabled || isSubmitting}
                 isLoading={isNextButtonLoading}
               >
                 {nextButtonText || t('ai:Next')}

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

@@ -14,7 +14,7 @@ import { useField } from 'formik';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { FileRejection } from 'react-dropzone';
 
-const CertificatesUploadField: React.FC<UploadFieldProps> = ({
+const CertificatesUploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
   label,
   labelIcon,
   helperText,

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

@@ -15,7 +15,9 @@ import useFieldErrorMsg from '../../../hooks/useFieldErrorMsg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 const InputField: React.FC<
-  InputFieldProps & { inputError?: string; description?: React.ReactNode; labelInfo?: string }
+  React.PropsWithChildren<
+    InputFieldProps & { inputError?: string; description?: React.ReactNode; labelInfo?: string }
+  >
   // eslint-disable-next-line react/display-name
 > = React.forwardRef(
   (
@@ -32,6 +34,7 @@ const InputField: React.FC<
       description,
       labelInfo,
       showErrorMessage = true,
+      type = 'text',
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
@@ -80,6 +83,7 @@ const InputField: React.FC<
                   onChange && onChange(event);
                 }
               }}
+              type={type}
             />
           </SplitItem>
           <SplitItem>{children}</SplitItem>
@@ -87,18 +91,20 @@ const InputField: React.FC<
         {((showErrorMessage && !isValid) || helperText) && (
           <FormHelperText>
             <HelperText>
-              <HelperTextItem
-                icon={errorMessage && errorMessage.trim() !== '' ? <ExclamationCircleIcon /> : null}
-                variant={errorMessage && errorMessage.trim() !== '' ? 'error' : 'default'}
-                id={
-                  errorMessage && errorMessage.trim() !== ''
-                    ? `${fieldId}-helper-error`
-                    : `${fieldId}-helper`
-                }
-                data-testid={`input-field-${fieldId}-helper-text`}
-              >
-                {showErrorMessage ? errorMessage : helperText}
-              </HelperTextItem>
+              {showErrorMessage && !isValid && (
+                <HelperTextItem
+                  icon={<ExclamationCircleIcon />}
+                  variant={'error'}
+                  id={`${fieldId}-helper-error`}
+                >
+                  {errorMessage}
+                </HelperTextItem>
+              )}
+              {helperText && (
+                <HelperTextItem variant={'default'} id={`${fieldId}-helper`}>
+                  {helperText}
+                </HelperTextItem>
+              )}
             </HelperText>
           </FormHelperText>
         )}

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

@@ -1,101 +1,158 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import {
+  Button,
   FormGroup,
   FormHelperText,
   HelperText,
   HelperTextItem,
   Label,
+  LabelGroup,
+  TextInput,
 } from '@patternfly/react-core';
-import TagsInput from 'react-tagsinput';
-import { InputFieldProps } from './types';
-import { getFieldId } from './utils';
-
-import './LabelField.css';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-
-type LabelValueProps = {
-  value: React.ReactText;
-  onClose?: () => void;
-};
 
-export const LabelValue: React.FC<LabelValueProps> = ({ value, onClose }) => (
-  <Label className="label-field__value" variant="outline" onClose={onClose}>
-    {value}
-  </Label>
-);
+import { useTranslation } from '../../../hooks';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { getFieldId } from './utils';
 
-type LabelFieldProps = InputFieldProps & {
-  // eslint-disable-next-line
-  onChange?: (tags: any[]) => void;
+type LabelsFieldProps = {
+  name: string;
+  label: string;
+  idPostfix?: string;
 };
 
-export const LabelField: React.FC<LabelFieldProps> = ({
-  label,
-  labelIcon,
-  helperText,
-  isRequired,
-  onChange,
-  validate,
-  idPostfix,
-  ...props
-}) => {
+export const LabelField = ({ name, label, idPostfix }: LabelsFieldProps) => {
   const { t } = useTranslation();
-  const [input, setInput] = React.useState('');
-  const [field, { touched, error }, { setValue, setTouched }] = useField({
-    name: props.name,
-    validate,
-  });
-  const fieldId = getFieldId(props.name, 'input', idPostfix);
+  const [{ value: labels }, { touched, error }, { setValue: setLabels, setTouched }] =
+    useField<string[]>(name);
+  const fieldId = getFieldId(name, 'input', idPostfix);
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
 
+  const onDelete = (_ev: React.MouseEvent<Element, MouseEvent>, index: number) => {
+    const newLabels = [...labels];
+    newLabels.splice(index, 1);
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
+  const onAdd = (text: string) => {
+    if (!text) {
+      return;
+    }
+    const newLabels = [...labels, text];
+
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
+  const onEdit = (index: number, nextText: string) => {
+    const newLabels = [...labels];
+    newLabels.splice(index, 1, nextText);
+
+    setTouched(true);
+    setLabels(newLabels, true);
+  };
+
   return (
-    <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-v6-c-form-control">
-        <TagsInput
-          {...field}
-          onChange={(tags) => {
-            setValue(tags);
-            setInput('');
-            onChange && onChange(tags);
-            !touched && setTouched(true);
-          }}
-          addKeys={[13, 32, 188]}
-          renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
-            <LabelValue key={key} onClose={() => onRemove(key)} value={getTagDisplayValue(tag)} />
-          )}
-          addOnBlur
-          inputProps={{
-            autoFocus: false,
-            className: 'label-field__input',
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            placeholder: field.value?.length ? '' : 'app=frontend',
-            spellCheck: 'false',
-            id: 'tags-input',
-            value: input,
-            // eslint-disable-next-line
-            onChange: (e: any) => setInput(e.target.value),
-            ['data-test']: 'tags-input',
-          }}
-        />
-      </div>
-      {(errorMessage || helperText) && (
-        <FormHelperText>
-          <HelperText>
+    <FormGroup label={label}>
+      <LabelGroup
+        numLabels={5}
+        addLabelControl={<EditableLabelControl defaultLabel="key=value" onAddLabel={onAdd} />}
+      >
+        {labels.map((label, index) => {
+          return (
+            <Label
+              key={index}
+              textMaxWidth="16ch"
+              onClose={(e) => onDelete(e, index)}
+              onEditCancel={(_, prevText) => onEdit(index, prevText)}
+              onEditComplete={(_, newText) => onEdit(index, newText)}
+              /* Add a basic tooltip as the PF tooltip doesn't work for editable labels */
+              title={label}
+              isEditable
+            >
+              {label}
+            </Label>
+          );
+        })}
+      </LabelGroup>
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem
+            id={`${fieldId}-helper-text`}
+            data-testid={`input-label-${fieldId}-helper-text`}
+          >
+            {t("ai:Enter a key=value and then press 'enter' to input the label.")}
+          </HelperTextItem>
+          {errorMessage && (
             <HelperTextItem
-              icon={errorMessage && <ExclamationCircleIcon />}
-              variant={errorMessage ? 'error' : 'default'}
-              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid={`input-label-${fieldId}-helper-text`}
+              icon={<ExclamationCircleIcon />}
+              variant={'error'}
+              id={`${fieldId}-helper-error`}
+              data-testid={`input-label-${fieldId}-helper-error`}
             >
-              {errorMessage ? errorMessage : helperText}
+              {errorMessage}
             </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      )}
+          )}
+        </HelperText>
+      </FormHelperText>
     </FormGroup>
   );
 };
+
+type EditableLabelControlProps = {
+  defaultLabel: string;
+  onAddLabel: (text: string) => void;
+};
+
+const EditableLabelControl = ({ defaultLabel, onAddLabel }: EditableLabelControlProps) => {
+  const [isEditing, setIsEditing] = React.useState<boolean>(false);
+  const [label, setLabel] = React.useState<string>('');
+  const { t } = useTranslation();
+
+  const onConfirmAdd = () => {
+    onAddLabel(label);
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  const onDiscardAdd = () => {
+    setIsEditing(false);
+    setLabel('');
+  };
+
+  return isEditing ? (
+    <TextInput
+      aria-label={t('ai:New label')}
+      autoFocus
+      value={label}
+      onChange={(_, value) => {
+        setLabel(value);
+      }}
+      onBlur={onConfirmAdd}
+      onKeyDown={(e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onConfirmAdd();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          onDiscardAdd();
+        }
+      }}
+    />
+  ) : (
+    <Button
+      aria-label={t('ai:Add label')}
+      variant="link"
+      className="pf-v6-u-ml-xs"
+      isInline
+      onClick={() => {
+        setIsEditing(true);
+        setLabel(defaultLabel);
+      }}
+    >
+      {t('ai:Add label')}
+    </Button>
+  );
+};

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

@@ -15,7 +15,7 @@ import { getFieldId } from './utils';
 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(
+const NumberInputField: React.FC<React.PropsWithChildren<NumberInputFieldProps>> = React.forwardRef(
   (
     {
       label,

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/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: unknown) => {
+      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/TextAreaField.tsx

@@ -11,7 +11,7 @@ import { TextAreaFieldProps } from './types';
 import { getFieldId } from './utils';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
-const TextAreaField: React.FC<TextAreaFieldProps> = ({
+const TextAreaField: React.FC<React.PropsWithChildren<TextAreaFieldProps>> = ({
   label,
   helperText,
   getErrorText,