@openshift-assisted/ui-lib 2.41.2 → 2.42.1

package/lib/ocm/components/clusterConfiguration/CpuArchitectureDropdown.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
-import { FormGroup, Split, SplitItem, Tooltip } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import {
+  FormGroup,
+  Split,
+  SplitItem,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import {
   architectureData,
@@ -119,7 +126,7 @@ const CpuArchitectureDropdown = ({
   ]);
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>): void => {
       const selectedCpuArch = event?.currentTarget.id as SupportedCpuArchitecture;
       setValue(selectedCpuArch);
       setOpen(false);
@@ -146,31 +153,30 @@ const CpuArchitectureDropdown = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cpuArchitectures, openshiftVersion, selectedCpuArchitecture]);
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val: boolean) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {currentCpuArch}
-      </DropdownToggle>
-    ),
-    [setOpen, currentCpuArch],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      className="pf-v5-u-w-100"
+    >
+      {currentCpuArch}
+    </MenuToggle>
   );
 
   return (
     <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId} label={'CPU architecture'}>
       <Dropdown
         {...field}
-        id={fieldId}
-        dropdownItems={enabledItems}
+        id={`${fieldId}-dropdown`}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
         onSelect={onSelect}
-      />
+        onOpenChange={() => setOpen(!isOpen)}
+      >
+        {enabledItems}
+      </Dropdown>
     </FormGroup>
   );
 };

package/lib/ocm/components/clusterConfiguration/DiscoveryImageTypeDropdown.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { FormGroup } from '@patternfly/react-core';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
 import {
   DropdownItem,
-  DropdownToggle,
+  Divider,
   Dropdown,
-  DropdownSeparator,
-} from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import {
   CpuArchitecture,
@@ -47,74 +48,74 @@ export const DiscoveryImageTypeDropdown = ({
       key="full-iso"
       id="full-iso"
       description={'Use when configuring custom networking for easier debugging'}
+      value={discoveryImageTypes['full-iso']}
     >
       {discoveryImageTypes['full-iso']}
     </DropdownItem>,
-    <DropdownSeparator key="separator1" />,
-    <DropdownItem
-      key="minimal-iso"
-      id="minimal-iso"
-      description={'Use when provisioning with default networking options'}
-      tooltip={
+    <Divider component="li" key="separator1" />,
+    <Tooltip
+      key="minimal-iso-tooltip"
+      content={
         isMinimalISODisabled ? (
           <p>{'This provisioning type is not supported when using s390x architecture'}</p>
         ) : undefined
       }
-      isAriaDisabled={!!isMinimalISODisabled}
     >
-      {discoveryImageTypes['minimal-iso']}
-    </DropdownItem>,
-    <DropdownSeparator key="separator2" />,
+      <DropdownItem
+        key="minimal-iso"
+        id="minimal-iso"
+        description={'Use when provisioning with default networking options'}
+        isAriaDisabled={!!isMinimalISODisabled}
+        value={discoveryImageTypes['minimal-iso']}
+      >
+        {discoveryImageTypes['minimal-iso']}
+      </DropdownItem>
+    </Tooltip>,
+    <Divider component="li" key="separator2" />,
     <DropdownItem
       key="discovery-image-ipxe"
       id="discovery-image-ipxe"
       description={'Use when your platform does not support booting from ISO'}
+      value={discoveryImageTypes['discovery-image-ipxe']}
     >
       {discoveryImageTypes['discovery-image-ipxe']}
     </DropdownItem>,
   ];
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const imageTypeSelection = event?.currentTarget.id as DiscoveryImageType;
-      const currentValue = imageTypeSelection
-        ? discoveryImageTypes[imageTypeSelection]
-        : defaultValue;
-      setCurrent(currentValue ? currentValue : '');
-      setValue(imageTypeSelection);
-      setOpen(false);
-      onChange(imageTypeSelection === 'discovery-image-ipxe');
-    },
-    [setCurrent, setOpen, defaultValue, setValue, onChange],
-  );
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => {
+    const imageTypeSelection = value as string;
+    setCurrent(imageTypeSelection ? imageTypeSelection : '');
+    setValue(event?.currentTarget.id as DiscoveryImageType);
+    setOpen(false);
+    onChange(imageTypeSelection === 'discovery-image-ipxe');
+  };
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-        isDisabled={isDisabled}
-      >
-        {current || value}
-      </DropdownToggle>
-    ),
-    [setOpen, current, value, isDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v5-u-w-100"
+      ref={toggleRef}
+      isFullWidth
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+    >
+      {current || value}
+    </MenuToggle>
   );
 
   return (
     <FormGroup fieldId={fieldId} label={'Provisioning type'}>
       <Dropdown
         {...field}
-        name={name}
-        id={fieldId}
-        dropdownItems={dropdownItems}
+        id={`${fieldId}-dropdown`}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
         onSelect={onSelect}
-      />
+        onOpenChange={() => setOpen(!isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     </FormGroup>
   );
 };

package/lib/ocm/components/clusterConfiguration/OcmBaseDomainField.tsx

@@ -5,11 +5,13 @@ import {
   HelperText,
   HelperTextItem,
   Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
 } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
 import { useField, useFormikContext } from 'formik';
 import { ClusterDetailsValues, getFieldId } from '../../../common';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { OcmCheckboxField, OcmInputField } from '../ui/OcmFormFields';
 import { ManagedDomain } from '@openshift-assisted/types/assisted-installer-service';
 import { clusterExistsReason } from '../featureSupportLevels/featureStateUtils';
@@ -62,25 +64,25 @@ export const OcmBaseDomainField = ({
     ));
   }, [managedDomains]);
 
-  const dropdownToggle = React.useMemo(() => {
+  const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => {
     const selectedDomain = managedDomains.find((d) => d.domain === value);
     return (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
+      <MenuToggle
+        ref={toggleRef}
+        onClick={() => setOpen(!isOpen)}
+        isExpanded={isOpen}
         className="pf-v5-u-w-100"
       >
         {selectedDomain ? getManagedDomainLabel(selectedDomain) : 'Base domain'}
-      </DropdownToggle>
+      </MenuToggle>
     );
-  }, [managedDomains, value]);
+  };
 
   const toggleRedHatDnsService = (checked: boolean) =>
     setValue((checked && managedDomains.map((d) => d.domain)[0]) || '');
 
   const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
+    (event?: React.MouseEvent<Element, MouseEvent>): void => {
       const selectedDomain = event?.currentTarget.id || '';
       setValue(selectedDomain);
       setOpen(false);
@@ -111,11 +113,12 @@ export const OcmBaseDomainField = ({
         {useRedHatDnsService ? (
           <Dropdown
             toggle={dropdownToggle}
-            dropdownItems={dropdownItems}
             isOpen={isOpen}
             onSelect={onSelect}
-            className="pf-v5-u-w-100"
-          />
+            onOpenChange={() => setOpen(!isOpen)}
+          >
+            {dropdownItems}
+          </Dropdown>
         ) : (
           <OcmInputField
             name={INPUT_NAME}

package/lib/ocm/components/clusterConfiguration/OcmClusterDetailsFormFields.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import * as React from 'react';
 import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
@@ -32,7 +33,11 @@ import { ExternalPlatformLabels } from './platformIntegration/constants';
 import { ManagedDomain, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
 import { useClusterWizardContext } from '../clusterWizard/ClusterWizardContext';
 import { useFeature } from '../../hooks/use-feature';
-import ControlPlaneNodesDropdown, { ControlPlaneNodesLabel } from './ControlPlaneNodesDropdown';
+import ControlPlaneNodesDropdown, {
+  ControlPlaneNodesLabel,
+  DEFAULT_VALUE_CPN,
+  isCPNDropdownItemEnabled,
+} from './ControlPlaneNodesDropdown';
 
 export type OcmClusterDetailsFormFieldsProps = {
   forceOpenshiftVersion?: string;
@@ -115,6 +120,33 @@ export const OcmClusterDetailsFormFields = ({
     );
   }, [setFieldValue, featureSupportLevelContext, featureSupportLevelData]);
 
+  React.useEffect(() => {
+    const currentCount = values.controlPlaneCount;
+    const isNonStandardControlPlaneEnabled = featureSupportLevelContext.isFeatureSupported(
+      'NON_STANDARD_HA_CONTROL_PLANE',
+      featureSupportLevelData ?? undefined,
+    );
+    const isTnaEnabled = featureSupportLevelContext.isFeatureSupported(
+      'TNA',
+      featureSupportLevelData ?? undefined,
+    );
+
+    const isItemEnabled = isCPNDropdownItemEnabled(
+      currentCount,
+      isNonStandardControlPlaneEnabled,
+      isTnaEnabled,
+    );
+
+    if (!isItemEnabled) {
+      setFieldValue('controlPlaneCount', DEFAULT_VALUE_CPN, false);
+    }
+  }, [
+    values.openshiftVersion,
+    featureSupportLevelData,
+    featureSupportLevelContext,
+    values.controlPlaneCount,
+    setFieldValue,
+  ]);
   return (
     <Form id="wizard-cluster-details__form">
       <OcmRichInputField

package/lib/ocm/components/clusterConfiguration/OcmOperatorProgressItem.tsx

@@ -80,7 +80,7 @@ type OperatorsPopoverProps = OperatorListProps & {
 
 const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
   const { t } = useTranslation();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   return (
     <Popover

package/lib/ocm/components/clusterConfiguration/OcmTNADisclaimer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Alert, AlertVariant, List, ListItem } from '@patternfly/react-core';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
+const OcmTNADisclaimer = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Alert
+      variant={AlertVariant.info}
+      title={t('ai:Requirements for Two Node control plane OpenShift')}
+      isInline
+    >
+      <List>
+        <ListItem>
+          {t('ai:Two nodes control plane OpenShift must include an additional arbiter node.')}
+        </ListItem>
+      </List>
+    </Alert>
+  );
+};
+
+export default OcmTNADisclaimer;

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/FolderDropdown.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import { HelperText, FormGroup } from '@patternfly/react-core';
-import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import {
+  HelperText,
+  FormGroup,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId } from '../../../../../common/components/ui/formik';
 import { PopoverIcon } from '../../../../../common';
@@ -40,40 +45,35 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
   const [isOpen, setOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      setValue(event?.currentTarget.id as string);
-      setOpen(false);
-    },
-    [setOpen, setValue],
-  );
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
+    setValue(event?.currentTarget.id as string);
+    setOpen(false);
+  };
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {value || 'manifests'}
-      </DropdownToggle>
-    ),
-    [setOpen, value],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      className="pf-v5-u-w-100"
+      id={fieldId}
+    >
+      {value || 'manifests'}
+    </MenuToggle>
   );
 
   return (
     <FormGroup fieldId={fieldId} label={<FolderLabel />} isRequired>
       <Dropdown
         {...field}
-        name={name}
         id={fieldId}
+        onOpenChange={() => setOpen(!isOpen)}
         onSelect={onSelect}
-        dropdownItems={dropdownItems}
         toggle={toggle}
         isOpen={isOpen}
-        className="pf-v5-u-w-100"
-      />
+      >
+        {dropdownItems}
+      </Dropdown>
       <HelperText style={{ display: 'inherit' }}>
         {'Manifests can be placed in "manifests" or "openshift" directories.'}
       </HelperText>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
+import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
 
@@ -64,46 +63,43 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
   }, []);
 
   const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
-    <DropdownItem key={value} id={value} isDisabled={isDisabled}>
+    <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
       {label}
     </DropdownItem>
   ));
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const currentValue = event?.currentTarget.innerText ?? currentDisplayValue;
-      setCurrentDisplayValue(currentValue);
-      setValue(event?.currentTarget.id);
-      setOpen(false);
-    },
-    [currentDisplayValue, setValue],
-  );
+  const onSelect = (
+    event?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ): void => {
+    setCurrentDisplayValue(value as string);
+    setValue(event?.currentTarget.id);
+    setOpen(false);
+  };
 
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(!isDisabled && val)}
-        toggleIndicator={CaretDownIcon}
-        isDisabled={isDisabled}
-        isText
-        className="pf-v5-u-w-100"
-      >
-        {currentDisplayValue}
-      </DropdownToggle>
-    ),
-    [setOpen, currentDisplayValue, isDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      className="pf-v5-u-w-100"
+      id={fieldId}
+    >
+      {currentDisplayValue}
+    </MenuToggle>
   );
 
   return (
     <Dropdown
       {...field}
-      name={name}
-      id={fieldId}
+      id={`${fieldId}-dropdown`}
+      onOpenChange={() => setOpen(!isOpen)}
       onSelect={onSelect}
-      dropdownItems={dropdownItems}
       toggle={toggle}
       isOpen={isOpen}
-      className="pf-v5-u-w-100"
-    />
+    >
+      {dropdownItems}
+    </Dropdown>
   );
 };

package/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx

@@ -126,7 +126,7 @@ const OperatorCheckbox = ({
   preflightRequirements: PreflightHardwareRequirements | undefined;
 } & OperatorSpec) => {
   const { getFeatureSupportLevel, getFeatureDisabledReason } = useNewFeatureSupportLevel();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { values, setFieldValue } = useFormikContext<OperatorsValues>();

package/lib/ocm/components/clusterConfiguration/operators/utils.tsx

@@ -35,7 +35,8 @@ export const getNewOperators = (
   const dependencies = getOperatorDependencies(operatorId, preflightRequirements);
 
   if (add) {
-    return [...new Set([...currentOperators, ...dependencies, operatorId])];
+    const uniqueOps = new Set([...currentOperators, ...dependencies, operatorId]);
+    return Array.from(uniqueOps);
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -6,9 +6,12 @@ import {
   Split,
   SplitItem,
   Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
 } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import {
   CpuArchitecture,
@@ -199,7 +202,12 @@ export const ExternalPlatformDropdown = ({
     ] as ExternalPlatformInfo;
 
     return (
-      <DropdownItem key={platform} id={platform} isAriaDisabled={disabledReason !== undefined}>
+      <DropdownItem
+        value={platform}
+        key={platform}
+        id={platform}
+        isAriaDisabled={disabledReason !== undefined}
+      >
         <Split>
           <SplitItem>
             <Tooltip hidden={!disabledReason} content={disabledReason} position="top">
@@ -234,29 +242,17 @@ export const ExternalPlatformDropdown = ({
     );
   });
 
-  const onSelect = React.useCallback(
-    (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const selectedPlatform = event?.currentTarget.id as PlatformType;
-      setValue(selectedPlatform);
-      setOpen(false);
-      onChange(selectedPlatform);
-    },
-    [setOpen, setValue, onChange],
-  );
-
-  const toggle = React.useMemo(
-    () => (
-      <DropdownToggle
-        onToggle={(_event, val) => setOpen(val)}
-        toggleIndicator={CaretDownIcon}
-        isText
-        className="pf-v5-u-w-100"
-        isDisabled={dropdownIsDisabled}
-      >
-        {externalPlatformTypes[field.value as PlatformType]?.label}
-      </DropdownToggle>
-    ),
-    [externalPlatformTypes, field, dropdownIsDisabled],
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      id={fieldId}
+      className="pf-v5-u-w-100"
+      ref={toggleRef}
+      onClick={() => setOpen(!isOpen)}
+      isDisabled={dropdownIsDisabled}
+      isExpanded={isOpen}
+    >
+      {externalPlatformTypes[field.value as PlatformType]?.label}
+    </MenuToggle>
   );
 
   return (
@@ -272,15 +268,20 @@ export const ExternalPlatformDropdown = ({
         distance={7}
       >
         <Dropdown
-          {...field}
-          id={fieldId}
-          dropdownItems={enabledItems}
+          id={`${fieldId}-dropdown`}
           toggle={toggle}
           isOpen={isOpen}
-          className="pf-v5-u-w-100"
-          onSelect={onSelect}
-          disabled={dropdownIsDisabled}
-        />
+          onOpenChange={() => setOpen(!isOpen)}
+          onSelect={(event) => {
+            const selectedPlatform = event?.currentTarget.id as PlatformType;
+            setValue(selectedPlatform);
+            setOpen(false);
+            onChange(selectedPlatform);
+          }}
+          shouldFocusToggleOnSelect
+        >
+          <DropdownList>{enabledItems}</DropdownList>
+        </Dropdown>
       </Tooltip>
     </FormGroup>
   );

package/lib/ocm/components/clusterConfiguration/review/ReviewOperatorsTable.tsx

@@ -6,7 +6,8 @@ import { TableSummaryExpandable } from './TableSummaryExpandable';
 import { useOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
 
 export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
+
   const rows = React.useMemo(
     () =>
       cluster.monitoredOperators

package/lib/ocm/components/clusterConfiguration/staticIp/commonValidationSchemas.tsx

@@ -232,6 +232,10 @@ export const getIpIsNotNetworkOrBroadcastAddressSchema = (
     'is-not-network-or-broadcast',
     `The IP address must not match the network or broadcast address`,
     (value) => {
+      // Allow both addresses for IPv4 /31 subnets (RFC 3021)
+      if (protocolVersion === ProtocolVersion.ipv4 && subnet.endsWith('/31')) {
+        return true;
+      }
       const subnetAddr = getAddressObject(subnet, protocolVersion);
       if (!subnetAddr) {
         return true;

package/lib/ocm/components/clusterDetail/ProgressBarAlerts.tsx

@@ -66,7 +66,7 @@ export const HostInstallationWarning = ({
   message,
 }: InstallationProgressWarningProps) => {
   const { addAlert, clearAlerts } = useAlerts();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   return (
     <>