@openshift-assisted/ui-lib 2.17.3-cim → 2.18.0-cim

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

@@ -115,10 +115,12 @@ class CustomToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFil
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {labelGroupContentRef &&
-            labelGroupContentRef.current !== null &&
-            labelGroupContentRef.current.firstElementChild !== null &&
-            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
+          {labelGroupContentRef?.current?.firstElementChild
+            ? (ReactDOM.createPortal(
+                labelGroup,
+                labelGroupContentRef.current.firstElementChild,
+              ) as React.ReactElement)
+            : null}
         </React.Fragment>
       );
     }

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

@@ -4,6 +4,8 @@ import React from 'react';
  * This component allows to maintain grid gap behaviour of PF Form by wrapping
  * FormGroup components which are inside of Grid
  */
-const GridGap: React.FC = (props) => <div {...props} className="pf-v6-c-form" />;
+const GridGap: React.FC<React.PropsWithChildren> = (props) => (
+  <div {...props} className="pf-v6-c-form" />
+);
 
 export default GridGap;

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { SelectOptionProps } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { OpenshiftVersionOptionType } from '../../types';
 import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useTranslation } from '../../hooks';
 import { SelectFieldWithSearch } from './formik';
 import { ClusterDetailsValues } from '../clusterWizard';
+import { getVersionLabel } from './utils';
 
 type OpenshiftSelectWithSearchProps = {
   versions: OpenshiftVersionOptionType[];
@@ -19,62 +19,41 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
   const { t } = useTranslation();
   const [{ value }] =
     useField<ClusterDetailsValues['customOpenshiftSelect']>('customOpenshiftSelect');
-  const initialSelectOptions = React.useMemo(
-    () =>
-      versions.map((version) => ({
-        children:
-          version.supportLevel === 'beta'
-            ? version.label + ' - ' + 'Developer preview release'
-            : version.label,
-        value: version.value,
-      })),
-    [versions],
-  );
 
   const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] =
-    React.useState<SelectOptionProps[]>(initialSelectOptions);
-
-  const helperText = getHelperText && getHelperText(value, true);
-
-  React.useEffect(() => {
-    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
-    // Filter menu items based on the text input value when one exists
-    if (filterValue) {
-      newSelectOptions = initialSelectOptions.filter((menuItem) =>
-        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase()),
+  const selectOptions = React.useMemo(() => {
+    const options = versions
+      .map((version) => ({
+        children: getVersionLabel(version, t),
+        value: version.value,
+      }))
+      .filter((v) =>
+        filterValue ? String(v.children).toLowerCase().includes(filterValue.toLowerCase()) : true,
       );
 
-      // When no options are found after filtering, display 'No results found'
-      if (!newSelectOptions.length) {
-        newSelectOptions = [
-          {
-            isDisabled: true,
-            children: t('ai:No results found for {{filter}}', { filter: filterValue }),
-            value: 'no_results',
-          },
-        ];
-      }
+    if (!options.length) {
+      return [
+        {
+          isDisabled: true,
+          children: t('ai:No results found for {{filter}}', { filter: filterValue }),
+          value: 'no_results',
+        },
+      ];
     }
-
-    const selectOptionsWithDividers = newSelectOptions.map((option, index) => {
-      const match = (option.value as string).match(/\d+\.(\d+)\.\d+/);
+    return options.map((option, index) => {
+      const match = option.value.match(/\d+\.(\d+)\.\d+/);
       const y = match ? match[1] : null;
 
       const previousY =
-        index > 0
-          ? ((newSelectOptions[index - 1].value as string).match(/\d+\.(\d+)\.\d+/) || [])[1]
-          : null;
+        index > 0 ? (options[index - 1].value.match(/\d+\.(\d+)\.\d+/) || [])[1] : null;
 
       return {
         ...option,
         showDivider: previousY !== null && y !== previousY,
       };
     });
-
-    setSelectOptions(selectOptionsWithDividers);
-  }, [filterValue, initialSelectOptions, t]);
+  }, [filterValue, versions, t]);
 
   return (
     <SelectFieldWithSearch
@@ -83,7 +62,7 @@ export const OpenShiftSelectWithSearch: React.FunctionComponent<OpenshiftSelectW
       setFilterValue={setFilterValue}
       name={'customOpenshiftSelect'}
       helperText={
-        helperText ??
+        getHelperText?.(value, true) ??
         t(
           'ai:Select an OpenShift version from the list or use the type ahead to narrow down the list.',
         )

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/WizardNavItem.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
+import { Icon, WizardNavItem, WizardNavItemProps } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import UiIcon from './UiIcon';
 
 const getNavItemContent = (
   content: ReactNode,
@@ -13,11 +12,9 @@ const getNavItemContent = (
     return (
       <>
         {content}
-        <UiIcon
-          status="danger"
-          className="wizard-nav-item-warning-icon"
-          icon={<ExclamationCircleIcon />}
-        />
+        <Icon status="danger" className="wizard-nav-item-warning-icon">
+          <ExclamationCircleIcon />
+        </Icon>
       </>
     );
   }

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(
   (