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

package/lib/common/components/hosts/VMRebootConfigurationInfo.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
-import { Button, ButtonVariant, Popover, Content, ContentVariants } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Popover,
+  Content,
+  ContentVariants,
+  Icon,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { Trans } from 'react-i18next';
-import { PrismCode, UiIcon } from '../../../common/components/ui';
+import { PrismCode } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 export const VMRebootConfigurationContent = () => {
@@ -43,7 +50,9 @@ const VMRebootConfigurationInfo = () => {
       <Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
         <Button variant={ButtonVariant.link} isInline>
           <>
-            <UiIcon size="sm" icon={<InfoCircleIcon />} />
+            <Icon size="sm">
+              <InfoCircleIcon />
+            </Icon>
             &nbsp;
           </>
           {t('ai:Check your VM reboot configuration')}

package/lib/common/components/hosts/status.tsx

@@ -8,13 +8,10 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/e
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import { LinkIcon } from '@patternfly/react-icons/dist/js/icons/link-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
-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_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/chart_color_blue_300';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from './types';
 import { TFunction } from 'i18next';
+import { Icon } from '@patternfly/react-core';
 
 export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizing'> =>
   Object.freeze({
@@ -85,7 +82,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'insufficient-unbound',
       title: t('ai:Insufficient'),
       category: 'Discovery related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host does not meet the minimum hardware or networking requirements and can not be included in the cluster.',
       ),
@@ -94,7 +95,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'known-unbound',
       title: t('ai:Available'),
       category: 'Discovery related',
-      icon: <ConnectedIcon color={blueColor.value} />,
+      icon: (
+        <Icon status="info">
+          <ConnectedIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host meets the minimum hardware and networking requirements and can be included in the cluster.',
       ),
@@ -125,7 +130,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'known',
       title: t('ai:Ready'),
       category: 'Discovery related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host meets the minimum hardware and networking requirements and will be included in the cluster.',
       ),
@@ -143,7 +152,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'insufficient',
       title: t('ai:Insufficient'),
       category: 'Discovery related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:This host does not meet the minimum hardware or networking requirements and will not be included in the cluster.',
       ),
@@ -186,14 +199,22 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'installing-pending-user-action',
       title: t('ai:Pending user action'),
       category: 'Installation related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t('ai:This host is pending user action'),
     },
     installed: {
       key: 'installed',
       title: t('ai:Installed'),
       category: 'Installation related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host completed its installation successfully.'),
     },
     cancelled: {
@@ -208,7 +229,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'error',
       title: t('ai:Error'),
       category: 'Installation related',
-      icon: <ExclamationCircleIcon color={dangerColor.value} />,
+      icon: (
+        <Icon status="danger">
+          <ExclamationCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host failed its installation.'),
       withProgress: true,
     },
@@ -223,7 +248,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'resetting-pending-user-action',
       title: t('ai:Reboot required'),
       category: 'Installation related',
-      icon: <ExclamationTriangleIcon color={warningColor.value} />,
+      icon: (
+        <Icon status="warning">
+          <ExclamationTriangleIcon />
+        </Icon>
+      ),
       details: t(
         'ai:Host has already been booted from disk during the previous installation. To finish resetting the installation, boot the host into the discovery image',
       ),
@@ -238,7 +267,11 @@ export const hostStatus = (t: TFunction): HostStatus<Host['status'] | 'finalizin
       key: 'added-to-existing-cluster',
       title: t('ai:Installed'),
       category: 'Installation related',
-      icon: <CheckCircleIcon color={okColor.value} />,
+      icon: (
+        <Icon status="success">
+          <CheckCircleIcon />
+        </Icon>
+      ),
       details: t('ai:This host completed its installation successfully.'),
     },
   });

package/lib/common/components/storage/DisksTable.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Content, ContentVariants, Popover, Alert, AlertVariant } from '@patternfly/react-core';
+import {
+  Content,
+  ContentVariants,
+  Popover,
+  Alert,
+  AlertVariant,
+  Icon,
+} from '@patternfly/react-core';
 import { TableVariant, Thead, Tbody, Table, Th, Tr, Td } from '@patternfly/react-table';
 import type { Disk, Host } from '@openshift-assisted/types/assisted-installer-service';
 import type { WithTestID } from '../../types/index';
@@ -12,7 +19,7 @@ import FormatDiskCheckbox, {
   isInDiskSkipFormattingList,
 } from '../hosts/FormatDiskCheckbox';
 import { fileSize } from '../../utils';
-import { PopoverIcon, UiIcon } from '../ui';
+import { PopoverIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 
@@ -39,7 +46,9 @@ const diskColumns = (t: TFunction, showFormat: boolean) =>
       title: (
         <>
           WWN{' '}
-          <PopoverIcon bodyContent={t('ai:World Wide Name (WWN) is a unique disk identifier.')} />
+          <PopoverIcon
+            bodyContent={t<string>('ai:World Wide Name (WWN) is a unique disk identifier.')}
+          />
         </>
       ),
     },
@@ -100,7 +109,9 @@ const DiskName = ({
       {isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
       {isInDiskSkipFormattingList(host, disk.id) && (
         <Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
-          <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+          <Icon size="sm" status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>
         </Popover>
       )}
       {'   '}
@@ -115,7 +126,9 @@ const DiskName = ({
             maxWidth="30rem"
             data-testid="disk-limitations-popover"
           >
-            <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+            <Icon size="sm" status="warning">
+              <ExclamationTriangleIcon />
+            </Icon>
           </Popover>
         </>
       )}

package/lib/common/components/storage/StorageUtils.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { TFunction } from 'i18next';
-import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
-import { TableRow } from '../hosts/AITable';
-import { Popover, Content, ContentVariants } from '@patternfly/react-core';
+import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { getHostRole, getInventory, RoleCell } from '../../index';
+import { TableRow } from '../hosts/AITable';
 
 const SkipFormattingDisks = () => (
   <Content component={ContentVariants.p}>Some bootable disks will skip formatting</Content>
@@ -49,7 +49,9 @@ export const numberOfDisksColumn: TableRow<Host> = {
           {'   '}
           {host.skipFormattingDisks && (
             <Popover bodyContent={<SkipFormattingDisks />} minWidth="20rem" maxWidth="30rem">
-              <UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
+              <Icon size="sm" status="warning">
+                <ExclamationTriangleIcon />
+              </Icon>
             </Popover>
           )}
         </>

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')}