@openshift-assisted/ui-lib 2.17.4-cim → 2.18.1-cim

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

@@ -4,81 +4,75 @@ import {
   FormGroup,
   FormHelperText,
   HelperTextItem,
-  Button,
   DropdownItem,
   MenuToggle,
   MenuToggleElement,
   Dropdown,
   DropdownGroup,
   Divider,
+  DropdownProps,
 } from '@patternfly/react-core';
 
 import { OpenshiftVersionOptionType } from '../../types';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
-import { useField, useFormikContext } from 'formik';
+import { useField } from 'formik';
 import { getFieldId } from './formik';
 import ExternalLink from './ExternalLink';
 import { OCP_RELEASES_PAGE } from '../../config';
-import { ClusterDetailsValues, ItemDropdown } from '../clusterWizard';
+import { getVersionLabel } from './utils';
 
 export type HelperTextType = (value: string | null, inModal?: boolean) => JSX.Element | null;
 
 type OpenShiftVersionDropdownProps = {
   name: string;
-  items: ItemDropdown;
   versions: OpenshiftVersionOptionType[];
   getHelperText?: HelperTextType;
   showReleasesLink: boolean;
   showOpenshiftVersionModal: () => void;
-  customItem?: OpenshiftVersionOptionType;
+  customVersion?: OpenshiftVersionOptionType;
 };
 
-const getParsedVersions = (items: ItemDropdown) => {
+const getParsedVersions = (items: OpenshiftVersionOptionType[]) => {
   const versionsY = Array.from(new Set(items.map((val) => val.value.match(/^\d+\.(\d+)/)?.[1])));
 
   const parsedVersions = versionsY.map((y) => ({
     y: y,
     versions: items.filter((val) => val.value.match(/^\d+\.(\d+)/)?.[1] === y),
   }));
-  return { parsedVersions: parsedVersions.reverse() };
+  return parsedVersions.reverse();
 };
 export const OpenShiftVersionDropdown = ({
   name,
-  items,
   versions,
   getHelperText,
   showReleasesLink,
   showOpenshiftVersionModal,
-  customItem,
+  customVersion,
 }: OpenShiftVersionDropdownProps) => {
   const [field, , { setValue }] = useField<string>(name);
   const [isOpen, setOpen] = React.useState(false);
   const { t } = useTranslation();
   const fieldId = getFieldId(name, 'input');
-  const {
-    values: { customOpenshiftSelect },
-  } = useFormikContext<ClusterDetailsValues>();
-  const [current, setCurrent] = React.useState<string>();
+
+  const current = (customVersion ? [...versions, customVersion] : versions).find(
+    (item) => item.value === field.value,
+  );
 
   React.useEffect(() => {
-    let defaultVersion = versions.find((item) => item.default);
-    if (customOpenshiftSelect && customItem) {
-      defaultVersion = customItem;
-    } else if (customOpenshiftSelect) {
-      defaultVersion = versions.find((item) => item.value === customOpenshiftSelect);
+    if (!field.value) {
+      const defaultVersion = versions.find((item) => item.default) || versions[0];
+      if (defaultVersion) {
+        setValue(defaultVersion.value);
+      }
     }
+  }, [field.value, versions, setValue]);
 
-    setCurrent(defaultVersion?.label || '');
-    setValue(defaultVersion?.value || '');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customOpenshiftSelect]);
-
-  const parsedVersionsForItems = getParsedVersions(items);
+  const parsedVersions = getParsedVersions(versions);
   let lastY: string | undefined = '';
-  const dropdownItems = parsedVersionsForItems.parsedVersions.map(({ y, versions }) => {
-    const items = versions.map(({ value, label }) => (
-      <DropdownItem key={value} id={value} value={value}>
-        {label}
+  const dropdownItems = parsedVersions.map(({ y, versions }) => {
+    const items = versions.map((version) => (
+      <DropdownItem key={version.value} id={version.value} value={version.value}>
+        {getVersionLabel(version, t)}
       </DropdownItem>
     ));
 
@@ -95,43 +89,24 @@ export const OpenShiftVersionDropdown = ({
         {dropdownItems}
       </DropdownGroup>
     ),
-    customItem && (
+    customVersion && (
       <DropdownGroup label="Custom releases" key="custom-releases">
-        <DropdownItem key={customItem.value} id={customItem.value} value={customItem.value}>
-          {customItem.label}
+        <DropdownItem
+          key={customVersion.value}
+          id={customVersion.value}
+          value={customVersion.value}
+        >
+          {getVersionLabel(customVersion, t)}
         </DropdownItem>
       </DropdownGroup>
     ),
     <DropdownGroup key="all-available-versions">
-      <DropdownItem key="all-versions" id="all-versions" onSelect={(e) => e.preventDefault()}>
-        <Button
-          variant="link"
-          isInline
-          onClick={() => {
-            setOpen(false);
-            showOpenshiftVersionModal();
-          }}
-          id="show-all-versions"
-        >
-          {t('ai:Show all available versions')}
-        </Button>
+      <DropdownItem key="all-versions" id="all-versions" value="all-versions">
+        <div className="pf-v6-u-text-color-link">{t('ai:Show all available versions')}</div>
       </DropdownItem>
     </DropdownGroup>,
   ].filter(Boolean);
 
-  const onSelect = React.useCallback(
-    (event?: React.MouseEvent<Element, MouseEvent>, val?: string | number) => {
-      const newLabel = event?.currentTarget.textContent;
-      const newValue = (val as string) || '';
-      if (newLabel && event.currentTarget.id !== 'all-versions') {
-        setCurrent(newLabel);
-        setValue(newValue);
-        setOpen(false);
-      }
-    },
-    [setValue],
-  );
-
   const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
@@ -143,12 +118,21 @@ export const OpenShiftVersionDropdown = ({
       isExpanded={isOpen}
       data-testid="openshift-version-dropdown-toggle"
     >
-      {current || t('ai:OpenShift version')}
+      {current ? getVersionLabel(current, t) : t('ai:OpenShift version')}
     </MenuToggle>
   );
 
   const helperText = getHelperText && getHelperText(field.value);
 
+  const onSelect: DropdownProps['onSelect'] = (_, val) => {
+    if (val === 'all-versions') {
+      showOpenshiftVersionModal();
+    } else if (val) {
+      setValue(val as string);
+    }
+    setOpen(false);
+  };
+
   return (
     <FormGroup
       id={`form-control__${fieldId}`}

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

@@ -17,27 +17,22 @@ import './OpenShiftVersionModal.css';
 
 type OpenShiftVersionModalProps = {
   allVersions: OpenshiftVersionOptionType[];
-  setOpenshiftVersionModalOpen: (isOpen: boolean) => void;
+  onClose: VoidFunction;
   getHelperText?: HelperTextType;
 };
 
 export const OpenShiftVersionModal = ({
   allVersions,
-  setOpenshiftVersionModalOpen,
+  onClose,
   getHelperText,
 }: OpenShiftVersionModalProps) => {
-  const { setFieldValue } = useFormikContext<ClusterDetailsValues>();
-
-  const onCancel = () => {
-    setFieldValue('customOpenshiftSelect', null);
-    setOpenshiftVersionModalOpen(false);
-  };
+  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
 
   return (
     <Modal
       id="available-openshift-versions-modal"
       isOpen
-      onClose={() => setOpenshiftVersionModalOpen(false)}
+      onClose={onClose}
       variant={ModalVariant.small}
     >
       <ModalHeader title="Available OpenShift Versions" />
@@ -55,11 +50,14 @@ export const OpenShiftVersionModal = ({
         <Button
           key="select-custom-ocp"
           variant={ButtonVariant.primary}
-          onClick={() => setOpenshiftVersionModalOpen(false)}
+          onClick={() => {
+            setFieldValue('openshiftVersion', values.customOpenshiftSelect);
+            onClose();
+          }}
         >
           Select
         </Button>
-        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onCancel}>
+        <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onClose}>
           Cancel
         </Button>
       </ModalFooter>

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 || isSubmitting}
+                isDisabled={isNextDisabled}
                 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(
   (

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

@@ -1,105 +1,89 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import {
+  Button,
   FormGroup,
   FormHelperText,
   HelperText,
   HelperTextItem,
   Label,
+  LabelGroup,
   TextInput,
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import TagsInput from 'react-tagsinput';
-import { InputFieldProps } from './types';
+
+import { useTranslation } from '../../../hooks';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { getFieldId } from './utils';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
-export const LabelField = ({
-  label,
-  labelIcon,
-  helperText,
-  isRequired,
-  onChange,
-  validate,
-  idPostfix,
-  ...props
-}: InputFieldProps & {
-  // eslint-disable-next-line
-  onChange?: (tags: any[]) => void;
-}) => {
+type LabelsFieldProps = {
+  name: string;
+  label: string;
+  idPostfix?: string;
+};
+
+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 : '';
 
-  return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
-      <TagsInput
-        {...field}
-        onChange={(tags) => {
-          setValue(tags);
-          setInput('');
-          onChange && onChange(tags);
-          !touched && setTouched(true);
-        }}
-        addKeys={[13, 32, 188]}
-        renderTag={({ tag, key, onRemove, getTagDisplayValue }) => (
-          <Label key={key} style={{ margin: 2 }} onClose={() => onRemove(key)}>
-            {getTagDisplayValue(tag)}
-          </Label>
-        )}
-        renderInput={({ value, onChange, ...rest }) => (
-          <TextInput
-            onChange={onChange as (e: unknown) => void}
-            value={value as string}
-            {...rest}
-          />
-        )}
-        renderLayout={(tagElements, inputElement) => (
-          <div
-            className="pf-v6-c-form-control"
-            style={{
-              padding: 0,
-              paddingTop: '1px',
-              display: 'flex',
-              alignItems: 'start',
-              flexWrap: 'wrap',
-              height: 'unset',
-              minHeight: '36px',
-            }}
-          >
-            <div>{tagElements}</div>
-            {inputElement}
-          </div>
-        )}
-        addOnBlur
-        inputProps={{
-          autoFocus: false,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          placeholder: field.value?.length ? '' : 'app=frontend',
-          spellCheck: 'false',
-          value: input,
-          // eslint-disable-next-line
-          onChange: (e: any) => setInput(e.target.value),
-          ['data-test']: fieldId,
-        }}
-      />
+  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 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`}
           >
-            {helperText ||
-              t(
-                "ai:Enter a key=value and then press 'enter' or 'space' or use a ',' to input the label.",
-              )}
+            {t("ai:Enter a key=value and then press 'enter' to input the label.")}
           </HelperTextItem>
           {errorMessage && (
             <HelperTextItem
@@ -116,3 +100,59 @@ export const LabelField = ({
     </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,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/SelectFieldWithSearch.tsx

@@ -164,7 +164,7 @@ const SelectFieldWithSearch = ({
   };
 
   const onSelect = React.useCallback(
-    (val) => {
+    (val: unknown) => {
       if (val && val !== NO_RESULTS) {
         if (isMultiSelect && Array.isArray(value)) {
           setValue(

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,
@@ -54,7 +54,10 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
         validated={isValid ? 'default' : 'error'}
         isRequired={isRequired}
         aria-describedby={`${fieldId}-helper`}
-        onChange={(event) => field.onChange(event)}
+        onChange={(event) => {
+          field.onChange(event);
+          restProps.onChange?.(event);
+        }}
         disabled={isDisabled}
       />
       {(errorMessage || helperText) && (
@@ -72,7 +75,7 @@ const TextAreaField: React.FC<TextAreaFieldProps> = ({
                 icon={<ExclamationCircleIcon />}
                 variant={'error'}
                 id={`${fieldId}-helper-error`}
-                data-testid={`input-textarea-${fieldId}-helper-text`}
+                data-testid={`input-textarea-${fieldId}-helper-text-error`}
               >
                 {errorMessage}
               </HelperTextItem>

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

@@ -12,7 +12,10 @@ import { getFieldId } from './utils';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
-const UploadField: React.FC<UploadFieldProps> = ({
+const MAX_FILE_SIZE = 2048;
+const ACCEPTED_FILES = { 'application/x-ssh-key': ['.pub'] };
+
+const UploadField: React.FC<React.PropsWithChildren<UploadFieldProps>> = ({
   label,
   labelIcon,
   helperText,
@@ -41,8 +44,7 @@ const UploadField: React.FC<UploadFieldProps> = ({
     return '';
   };
   const errorMessage = getErrorMessage();
-  const acceptedFiles = { 'application/x-ssh-key': ['.pub'] };
-  const maxFileSize = 2048;
+
   return (
     <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
@@ -70,7 +72,6 @@ const UploadField: React.FC<UploadFieldProps> = ({
         onFileInputChange={(_event, file) => {
           setFilename(file.name);
           setTouched(true);
-          setValue(file);
         }}
         onBlur={(e) => {
           const file: File | string = field.value;
@@ -96,8 +97,8 @@ const UploadField: React.FC<UploadFieldProps> = ({
         disabled={isDisabled}
         allowEditingUploadedText={allowEdittingUploadedText}
         dropzoneProps={{
-          accept: acceptedFiles,
-          maxSize: maxFileSize,
+          accept: ACCEPTED_FILES,
+          maxSize: MAX_FILE_SIZE,
         }}
         onClearClick={() => {
           setFilename('');

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

@@ -126,6 +126,12 @@ export const allSubnetsIPv4 = (
   return !!networks?.every((network) => network.cidr && Address4.isValid(network.cidr));
 };
 
+export const allSubnetsIPv6 = (
+  networks: (MachineNetwork | ClusterNetwork | ServiceNetwork)[] | undefined,
+) => {
+  return !!networks?.every((network) => network.cidr && Address6.isValid(network.cidr));
+};
+
 export const labelsToArray = (labels: { [key in string]: string } = {}): string[] => {
   const result: string[] = [];
   for (const key in labels) {

package/lib/common/components/ui/utils.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { DASH } from '../constants';
+import { OpenshiftVersionOptionType } from '../../types';
+import { TFunction } from 'i18next';
 
 export const getHumanizedDateTime = (dateTime?: string) => {
   if (!dateTime) return DASH;
@@ -20,3 +22,8 @@ export const isSelectEventChecked = (
   const target = event?.target as { checked?: boolean };
   return !!target?.checked;
 };
+
+export const getVersionLabel = (version: OpenshiftVersionOptionType, t: TFunction) =>
+  version.supportLevel === 'beta'
+    ? version.label + ' - ' + t('ai:Developer preview release')
+    : version.label;