@openshift-assisted/ui-lib 2.9.14-cim → 2.10.0-cim

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

@@ -6,7 +6,7 @@ import {
   FormGroup,
   DropdownSeparator,
 } from '@patternfly/react-core';
-import { CaretDownIcon } from '@patternfly/react-icons';
+import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import {
   CpuArchitecture,

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

@@ -13,7 +13,6 @@ import { useFormikContext } from 'formik';
 import {
   HostDiscoveryValues,
   PopoverIcon,
-  useFeature,
   ClusterWizardStepHeader,
   selectMastersMustRunWorkloads,
   selectSchedulableMasters,
@@ -24,6 +23,7 @@ import InformationAndAlerts from './InformationAndAlerts';
 import { OcmSwitchField } from '../ui/OcmFormFields';
 import { selectCurrentClusterPermissionsState } from '../../store/slices/current-cluster/selectors';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { useFeature } from '../../hooks/use-feature';
 
 const schedulableMastersTooltip =
   'Workloads must be run on control plane nodes when less than 5 hosts are discovered';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Dropdown, DropdownItem, DropdownToggle, FormGroup, Tooltip } from '@patternfly/react-core';
 import { useField, useFormikContext } from 'formik';
 import { ClusterDetailsValues, HelperText, getFieldId } from '../../../common';
-import { CaretDownIcon } from '@patternfly/react-icons';
+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';
@@ -22,11 +22,11 @@ export const BaseDnsHelperText = ({
   baseDnsDomain?: string;
 }) => (
   <HelperText fieldId={fieldId}>
-    Enter the name of your local host [localhost] or [localhost.com]. This cannot be changed after
-    creation. All DNS records must include the cluster name and be subdomains of the base you enter.
-    The full cluster address will be: <br />
+    Enter the name of your domain [domainname] or [domainname.com]. This cannot be changed after
+    cluster installed. All DNS records must include the cluster name and be subdomains of the base
+    you enter. The full cluster address will be: <br />
     <strong>
-      {name || '[Cluster Name]'}.{baseDnsDomain || '[localhost.com]'}
+      {name || '[Cluster Name]'}.{baseDnsDomain || '[domainname.com]'}
     </strong>
   </HelperText>
 );

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

@@ -12,7 +12,6 @@ import {
   uniqueOcmClusterNameValidationMessages,
   CLUSTER_NAME_MAX_LENGTH,
   StaticTextField,
-  useFeature,
   getSupportedCpuArchitectures,
   SupportedCpuArchitecture,
 } from '../../../common';
@@ -36,6 +35,7 @@ import { useNewFeatureSupportLevel } from '../../../common/components/newFeature
 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';
 
 export type OcmClusterDetailsFormFieldsProps = {
   forceOpenshiftVersion?: string;
@@ -92,7 +92,7 @@ export const OcmClusterDetailsFormFields = ({
 
   const handleExternalPartnerIntegrationsChange = React.useCallback(
     (selectedPlatform: PlatformType) => {
-      const isOracleSelected = selectedPlatform === 'oci';
+      const isOracleSelected = selectedPlatform === 'external';
       if (isOracleSelected) {
         setFieldValue('addCustomManifest', isOracleSelected, false);
         clusterWizardContext.setCustomManifestsStep(isOracleSelected);
@@ -178,14 +178,14 @@ export const OcmClusterDetailsFormFields = ({
         />
       )}
 
-      <CustomManifestCheckbox clusterId={clusterId || ''} isDisabled={platform === 'oci'} />
+      <CustomManifestCheckbox clusterId={clusterId || ''} isDisabled={platform === 'external'} />
 
       {
         // Reason: In the single-cluster flow, the Host discovery phase is replaced by a single one-fits-all ISO download
         !isSingleClusterFeatureEnabled && (
           <HostsNetworkConfigurationControlGroup
             clusterExists={clusterExists}
-            isDisabled={platform === 'oci'}
+            isDisabled={platform === 'external'}
           />
         )
       }

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

@@ -158,7 +158,7 @@ export const OcmDiscoveryImageConfigForm = ({
                     />
                     <UploadSSH
                       labelText={t(
-                        'ai:Provide SSH keys separated by newlines to be able to connect to the hosts for debugging purposes during the discovery process',
+                        'ai:Provide an SSH key to be able to connect to the hosts for debugging purposes during the discovery process',
                       )}
                     />
                     <ProxyFields />

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

@@ -1,18 +1,14 @@
 import React from 'react';
-import {
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  ExternalLinkAltIcon,
-} from '@patternfly/react-icons';
-import {
-  global_warning_color_100 as warningColor,
-  global_danger_color_100 as dangerColor,
-} from '@patternfly/react-tokens';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import { TFunction } from 'i18next';
 import { OpenShiftVersionDropdown } from '../../../common/components/ui/OpenShiftVersionDropdown';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { OPENSHIFT_LIFE_CYCLE_DATES_LINK, OpenshiftVersionOptionType } from '../../../common';
-import { isInOcm } from '../../api';
+import { isInOcm } from '../../../common/api';
 
 const OpenShiftLifeCycleDatesLink = () => {
   const { t } = useTranslation();

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

@@ -1,15 +1,11 @@
 import React from 'react';
 import { Button, ButtonVariant, List, ListItem, Popover } from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  InProgressIcon,
-  PendingIcon,
-} from '@patternfly/react-icons';
-import {
-  global_danger_color_100 as dangerColor,
-  global_success_color_100 as okColor,
-} from '@patternfly/react-tokens';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 

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

@@ -1,5 +1,5 @@
 import { Flex, FlexItem, Label, StackItem } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { useField } from 'formik';
 import React from 'react';
 import { CustomManifestValues } from '../data/dataTypes';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid, Flex, FlexItem, ExpandableSectionToggle, Button } from '@patternfly/react-core';
-import { MinusCircleIcon } from '@patternfly/react-icons';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
 import { getFormikArrayItemFieldName } from '../../../../../common';
 import { getManifestName } from './utils';
 import CollapsedManifest from './CollapsedManifest';

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Button, ButtonVariant, Divider, Flex, FlexItem } from '@patternfly/react-core';
-import { PlusCircleIcon } from '@patternfly/react-icons';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
 import { FieldArrayRenderProps, useField } from 'formik';
 import cloneDeep from 'lodash-es/cloneDeep.js';
 import { LoadingState, useAlerts } from '../../../../../common';
 import ConfirmationModal from '../../../../../common/components/ui/ConfirmationModal';
 import { ClustersAPI } from '../../../../services/apis';
-import { getApiErrorMessage, handleApiError } from '../../../../api';
+import { getApiErrorMessage, handleApiError } from '../../../../../common/api';
 import { CustomManifest } from './CustomManifest';
 import { getEmptyManifest, getManifestName } from './utils';
 import { CustomManifestValues } from '../data/dataTypes';

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

@@ -6,7 +6,7 @@ import {
   HelperText,
   FormGroup,
 } from '@patternfly/react-core';
-import { CaretDownIcon } from '@patternfly/react-icons';
+import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import { getFieldId } from '../../../../../common/components/ui/formik';
 import { PopoverIcon } from '../../../../../common';
@@ -16,7 +16,12 @@ const FolderLabel = () => {
     <>
       Folder{' '}
       <PopoverIcon
-        bodyContent={<>To overwrite a manifest, select the folder the existing manifest is in.</>}
+        bodyContent={
+          <>
+            To overwrite an existing manifest, save the new manifest in the same folder with the
+            same name.
+          </>
+        }
       />
     </>
   );

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

@@ -37,6 +37,7 @@ import {
   PlatformType,
 } from '@openshift-assisted/types/assisted-installer-service';
 import useSupportLevelsAPI from '../../../hooks/useSupportLevelsAPI';
+import { isOciPlatformType } from '../../utils';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
   hostSubnets: HostSubnets;
@@ -227,14 +228,18 @@ const NetworkConfiguration = ({
     () =>
       getManagedNetworkingState(
         isDualStack,
-        cluster.platform?.type === 'oci',
+        isOciPlatformType(cluster),
         featureSupportLevelContext,
         cluster.platform?.type,
         featureSupportLevelData,
       ),
-    [isDualStack, cluster.platform?.type, featureSupportLevelContext, featureSupportLevelData],
+    [isDualStack, cluster, featureSupportLevelContext, featureSupportLevelData],
   );
 
+  const isSDNSupported = React.useMemo(() => {
+    return featureSupportLevelContext.isFeatureSupported('SDN_NETWORK_TYPE');
+  }, [featureSupportLevelContext]);
+
   return (
     <Grid hasGutter>
       <ManagedNetworkingControlGroup
@@ -257,7 +262,9 @@ const NetworkConfiguration = ({
           hostSubnets={hostSubnets}
         />
       )}
-      <NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
+      {isSDNSupported && (
+        <NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
+      )}
 
       {!(isUserManagedNetworking && !isSNOCluster) && (
         <AvailableSubnetsControl

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

@@ -14,8 +14,6 @@ import {
   LoadingState,
   NetworkConfigurationValues,
   SecurityFields,
-  selectApiVip,
-  selectIngressVip,
   useAlerts,
   useFormikAutoSave,
 } from '../../../../common';
@@ -38,7 +36,7 @@ import {
   setServerUpdateError,
   updateClusterBase,
 } from '../../../store/slices/current-cluster/slice';
-import { isUnknownServerError, getApiErrorMessage, handleApiError } from '../../../api';
+import { isUnknownServerError, getApiErrorMessage, handleApiError } from '../../../../common/api';
 import { usePullSecret } from '../../../hooks';
 import {
   Cluster,
@@ -201,9 +199,7 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
 
       const params: V2ClusterUpdateParams = {
         apiVips: values.apiVips,
-        apiVip: selectApiVip(values),
         ingressVips: values.ingressVips,
-        ingressVip: selectIngressVip(values),
         sshPublicKey: values.sshPublicKey,
         vipDhcpAllocation: values.vipDhcpAllocation,
         networkType: values.networkType,
@@ -215,9 +211,7 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
 
       if (params.userManagedNetworking) {
         params.apiVips = [];
-        params.apiVip = '';
         params.ingressVips = [];
-        params.ingressVip = '';
         if (isMultiNodeCluster) {
           delete params.machineNetworks;
         }
@@ -225,9 +219,7 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
         // cluster-managed can't be chosen in SNO, so this must be a multi-node cluster
         if (values.vipDhcpAllocation) {
           delete params.apiVips;
-          delete params.apiVip;
           delete params.ingressVips;
-          delete params.ingressVip;
         } else if (values.stackType === IPV4_STACK) {
           // The API will rebuild the default machineNetwork
           params.machineNetworks = [];

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

@@ -74,7 +74,7 @@ const NetworkConfigurationTableBase = ({
       hostnameColumn(t, onEditHost, undefined, canEditHostname),
       roleColumn(t, canEditRole, onEditRole, selectSchedulableMasters(cluster)),
       networkingStatusColumn(onEditHost),
-      activeNICColumn(cluster),
+      activeNICColumn(cluster, t),
       ipv4Column(cluster),
       ipv6Column(cluster),
       macAddressColumn(cluster),

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DropdownItem, DropdownToggle, Dropdown } from '@patternfly/react-core';
-import { CaretDownIcon } from '@patternfly/react-icons';
+import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
 

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FormGroup, Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { useFormikContext } from 'formik';
 import {
   ClusterOperatorProps,

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

@@ -16,7 +16,10 @@ import {
 import LvmHostRequirements from './LvmHostRequirements';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { getLvmIncompatibleWithCnvReason } from '../../featureSupportLevels/featureStateUtils';
+import {
+  getLvmIncompatibleWithCnvReason,
+  getLvmsIncompatibleWithOdfReason,
+} from '../../featureSupportLevels/featureStateUtils';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
@@ -79,6 +82,9 @@ const LvmCheckbox = ({ clusterId }: ClusterOperatorProps) => {
     let reason = featureSupportLevel.getFeatureDisabledReason('LVM');
     if (!reason) {
       reason = getLvmIncompatibleWithCnvReason(values, operatorInfo.lvmSupport);
+      if (!reason) {
+        reason = getLvmsIncompatibleWithOdfReason(values);
+      }
     }
     setDisabledReason(reason);
   }, [values, featureSupportLevel, operatorInfo.lvmSupport]);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { getFieldId, PopoverIcon, MCE_LINK } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';

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

@@ -1,9 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FormGroup, Tooltip } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { getFieldId, PopoverIcon, ODF_REQUIREMENTS_LINK, ODF_LINK } from '../../../../common';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import {
+  getFieldId,
+  PopoverIcon,
+  ODF_REQUIREMENTS_LINK,
+  ODF_LINK,
+  OperatorsValues,
+} from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+import { useFormikContext } from 'formik';
+import { getOdfIncompatibleWithLvmsReason } from '../../featureSupportLevels/featureStateUtils';
 
 const ODF_FIELD_NAME = 'useOpenShiftDataFoundation';
 
@@ -37,8 +45,18 @@ const OdfHelperText = () => {
 
 const OdfCheckbox = () => {
   const featureSupportLevelContext = useNewFeatureSupportLevel();
+  const { values } = useFormikContext<OperatorsValues>();
   const fieldId = getFieldId(ODF_FIELD_NAME, 'input');
-  const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('ODF');
+  const [disabledReason, setDisabledReason] = useState<string | undefined>();
+
+  React.useEffect(() => {
+    let disabledReason = featureSupportLevelContext.getFeatureDisabledReason('ODF');
+    if (!disabledReason) {
+      disabledReason = getOdfIncompatibleWithLvmsReason(values);
+    }
+    setDisabledReason(disabledReason);
+  }, [values, featureSupportLevelContext]);
+
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField

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

@@ -10,23 +10,23 @@ import {
   SplitItem,
   Tooltip,
 } from '@patternfly/react-core';
-import { CaretDownIcon } from '@patternfly/react-icons';
+import { CaretDownIcon } from '@patternfly/react-icons/dist/js/icons/caret-down-icon';
 import { useField } from 'formik';
 import {
   CpuArchitecture,
-  DeveloperPreview,
   FeatureId,
   SupportedCpuArchitecture,
   getFieldId,
 } from '../../../../common';
 import { ExternalPlaformIds, ExternalPlatformLabels, ExternalPlatformLinks } from './constants';
-import { PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import { PlatformType, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 import {
   NewFeatureSupportLevelData,
   NewFeatureSupportLevelMap,
   useNewFeatureSupportLevel,
 } from '../../../../common/components/newFeatureSupportLevels';
 import { architectureData } from '../CpuArchitectureDropdown';
+import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 
 const INPUT_NAME = 'platform';
 const fieldId = getFieldId(INPUT_NAME, 'input');
@@ -43,6 +43,7 @@ export type ExternalPlatformInfo = {
   label: string;
   href?: string;
   disabledReason?: string;
+  supportLevel?: SupportLevel;
 };
 
 const getDisabledReasonForExternalPlatform = (
@@ -52,19 +53,19 @@ const getDisabledReasonForExternalPlatform = (
   featureSupportLevelData?: NewFeatureSupportLevelMap | null,
   cpuArchitecture?: SupportedCpuArchitecture,
 ): string | undefined => {
-  if (!isSNO) {
+  if (isSNO && (platform === 'nutanix' || platform === 'vsphere')) {
+    return `${ExternalPlatformLabels[platform]} integration is not supported for Single-Node OpenShift.`;
+  } else if (
+    isSNO &&
+    (cpuArchitecture === CpuArchitecture.ppc64le || cpuArchitecture === CpuArchitecture.s390x)
+  ) {
+    return `Plaform integration is not supported for Single-Node OpenShift with the selected CPU architecture.`;
+  } else {
     return newFeatureSupportLevelContext.getFeatureDisabledReason(
       ExternalPlaformIds[platform] as FeatureId,
       featureSupportLevelData ?? undefined,
       cpuArchitecture,
     );
-  } else if (platform === 'nutanix' || platform === 'vsphere') {
-    return `${ExternalPlatformLabels[platform]} integration is not supported for Single-Node OpenShift.`;
-  } else if (
-    cpuArchitecture === CpuArchitecture.ppc64le ||
-    cpuArchitecture === CpuArchitecture.s390x
-  ) {
-    return `Plaform integration is not supported for Single-Node OpenShift with the selected CPU architecture.`;
   }
 };
 
@@ -75,7 +76,7 @@ const getExternalPlatformTypes = (
   featureSupportLevelData?: NewFeatureSupportLevelMap | null,
   cpuArchitecture?: SupportedCpuArchitecture,
 ): Partial<{ [key in PlatformType]: ExternalPlatformInfo }> => {
-  const platforms = ['none', 'nutanix', showOciOption && 'oci', 'vsphere'] as PlatformType[];
+  const platforms = ['none', 'nutanix', showOciOption && 'external', 'vsphere'] as PlatformType[];
 
   return platforms.filter(Boolean).reduce(
     (a, platform) => ({
@@ -90,6 +91,10 @@ const getExternalPlatformTypes = (
           featureSupportLevelData ?? undefined,
           cpuArchitecture,
         ),
+        supportLevel: newFeatureSupportLevelContext.getFeatureSupportLevel(
+          ExternalPlaformIds[platform] as FeatureId,
+          featureSupportLevelData ?? undefined,
+        ),
       },
     }),
     {},
@@ -104,6 +109,14 @@ export const areAllExternalPlatformIntegrationDisabled = (
     .every((info) => info.disabledReason !== undefined);
 };
 
+const getReasonForDropdownDisabled = (isSNO: boolean, labelCpuArch: string): string => {
+  if (!isSNO) {
+    return `Platform integration is not supported when ${labelCpuArch} is selected`;
+  } else {
+    return `Platform integration is not supported for SNO clusters`;
+  }
+};
+
 export const ExternalPlatformDropdown = ({
   showOciOption,
   onChange,
@@ -117,9 +130,10 @@ export const ExternalPlatformDropdown = ({
     Partial<{ [key in PlatformType]: ExternalPlatformInfo }>
   >({});
 
-  const tooltipDropdownDisabled = `Platform integration is not supported when ${
-    cpuArchitecture ? architectureData[cpuArchitecture].label : ''
-  } is selected`;
+  const tooltipDropdownDisabled = getReasonForDropdownDisabled(
+    isSNO,
+    cpuArchitecture ? architectureData[cpuArchitecture].label : '',
+  );
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>, href: string) => {
     event.stopPropagation(); // Stop event propagation here
@@ -161,9 +175,10 @@ export const ExternalPlatformDropdown = ({
   }, [dropdownIsDisabled, externalPlatformTypes]);
 
   const enabledItems = Object.keys(externalPlatformTypes).map((platform) => {
-    const { label, href, disabledReason } = externalPlatformTypes[
+    const { label, href, disabledReason, supportLevel } = externalPlatformTypes[
       platform as PlatformType
     ] as ExternalPlatformInfo;
+
     return (
       <DropdownItem key={platform} id={platform} isAriaDisabled={disabledReason !== undefined}>
         <Split>
@@ -171,7 +186,12 @@ export const ExternalPlatformDropdown = ({
             <Tooltip hidden={!disabledReason} content={disabledReason} position="top">
               <div>
                 {label}
-                {platform === 'oci' && <DeveloperPreview testId={'oci-support-level`'} />}
+                <span onClick={(event) => event.stopPropagation()}>
+                  <NewFeatureSupportLevelBadge
+                    featureId={ExternalPlaformIds[platform as PlatformType] as FeatureId}
+                    supportLevel={supportLevel}
+                  />
+                </span>
               </div>
             </Tooltip>
           </SplitItem>
@@ -208,7 +228,7 @@ export const ExternalPlatformDropdown = ({
   const toggle = React.useMemo(
     () => (
       <DropdownToggle
-        onToggle={(val) => setOpen(val)}
+        onToggle={(val: boolean) => setOpen(val)}
         toggleIndicator={CaretDownIcon}
         isText
         className="pf-u-w-100"

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons';
-import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { SupportedPlatformType } from '../../../../common';
 import { ExternalPlatformLinks } from './constants';
 

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

@@ -5,7 +5,7 @@ export const ExternalPlatformLabels: { [key in PlatformType]: string } = {
   baremetal: 'No platform integration',
   none: 'No platform integration',
   nutanix: 'Nutanix',
-  oci: 'Oracle Cloud Infrastructure (Requires a custom manifest)',
+  external: 'Oracle Cloud Infrastructure (Requires a custom manifest)',
   vsphere: 'vSphere',
 };
 
@@ -18,6 +18,6 @@ export const ExternalPlaformIds: { [key in PlatformType]: string } = {
   baremetal: '',
   none: '',
   nutanix: 'NUTANIX_INTEGRATION',
-  oci: 'EXTERNAL_PLATFORM_OCI',
+  external: 'EXTERNAL_PLATFORM_OCI',
   vsphere: 'VSPHERE_INTEGRATION',
 };

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

@@ -59,7 +59,8 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         ],
       });
 
-    cluster.apiVip &&
+    cluster.apiVips &&
+      cluster.apiVips.length > 0 &&
       networkRows.push({
         rowId: 'api-ip',
         cells: [
@@ -71,7 +72,8 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         ],
       });
 
-    cluster.ingressVip &&
+    cluster.ingressVips &&
+      cluster.ingressVips.length &&
       networkRows.push({
         rowId: 'ingress-ip',
         cells: [

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

@@ -8,18 +8,14 @@ import {
   Split,
   SplitItem,
 } from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  InfoCircleIcon,
-} from '@patternfly/react-icons';
-import {
-  global_success_color_100 as okColor,
-  global_info_color_100 as infoColor,
-  global_danger_color_100 as dangerColor,
-  global_warning_color_100 as warningColor,
-} from '@patternfly/react-tokens';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { global_success_color_100 as okColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import { global_info_color_100 as infoColor } from '@patternfly/react-tokens/dist/js/global_info_color_100';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
 import { ClusterValidations, DetailItem, DetailList, HostsValidations } from '../../../../common';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';

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

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { ActionListItem, Button, ButtonVariant, Grid, GridItem } from '@patternfly/react-core';
 import { ClusterWizardStepHeader, useAlerts, ClusterWizardStep } from '../../../../common';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
-import { getApiErrorMessage, handleApiError } from '../../../api';
+import { getApiErrorMessage, handleApiError } from '../../../../common/api';
 import { updateCluster } from '../../../store/slices/current-cluster/slice';
 import ClusterWizardFooter from '../../clusterWizard/ClusterWizardFooter';
 import ClusterWizardNavigation from '../../clusterWizard/ClusterWizardNavigation';

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

@@ -7,7 +7,7 @@ import {
   TextVariants,
   Text,
 } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import React from 'react';
 
 export type HostSummaryProps = {