@openshift-assisted/ui-lib 2.53.0 → 2.54.0

package/lib/common/selectors/clusterSelectors.ts

@@ -39,7 +39,8 @@ export const selectMonitoredOperators = (monitoredOperators: Cluster['monitoredO
 
 export const selectOlmOperators = (cluster?: Pick<Cluster, 'monitoredOperators'>) => {
   return selectMonitoredOperators(cluster?.monitoredOperators).filter(
-    (operator) => operator.operatorType === 'olm',
+    (operator) =>
+      operator.operatorType === 'olm' && !!operator.name && operator.dependencyOnly !== true,
   );
 };
 
@@ -120,11 +121,3 @@ export const isClusterPlatformTypeVM = ({ platform }: Pick<Cluster, 'platform'>)
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   SupportedPlatformIntegrations.includes(platform?.type ?? 'none');
-
-export const numberOfEnabledOperators = (monitoredOperators: Cluster['monitoredOperators']) => {
-  return monitoredOperators
-    ? selectMonitoredOperators(
-        monitoredOperators.filter((operator) => operator.operatorType === 'olm'),
-      ).length
-    : 0;
-};

package/lib/common/types/clusters.ts

@@ -1,5 +1,6 @@
 import { IRow } from '@patternfly/react-table';
 import {
+  BundleCreateParams,
   Cluster,
   V2ClusterUpdateParams,
   ClusterValidationId,
@@ -57,8 +58,9 @@ export type HostDiscoveryValues = V2ClusterUpdateParams & {
 export type StorageValues = V2ClusterUpdateParams & {
   nodeLabeling: string;
 };
+
 export type OperatorsValues = {
-  selectedBundles: string[];
+  selectedBundles: BundleCreateParams[];
   selectedOperators: string[];
 };
 

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

@@ -19,6 +19,7 @@ import { mapClusterCpuArchToInfraEnvCpuArch } from '../../services/CpuArchitectu
 import { usePullSecret } from '../../hooks';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { isOciPlatformType } from '../utils';
+import { ModalBody } from '@patternfly/react-core';
 
 type DiscoveryImageFormProps = {
   cluster: Cluster;
@@ -93,10 +94,18 @@ const DiscoveryImageForm = ({
   };
 
   if (infraEnvError) {
-    return <ErrorState />;
+    return (
+      <ModalBody style={{ height: '696px' }}>
+        <ErrorState />
+      </ModalBody>
+    );
   }
   if (!infraEnv) {
-    return <LoadingState />;
+    return (
+      <ModalBody style={{ height: '696px' }}>
+        <LoadingState />
+      </ModalBody>
+    );
   }
   return (
     <OcmDiscoveryImageConfigForm

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

@@ -1,5 +1,12 @@
 import React from 'react';
-import { Button, ButtonVariant, Modal, ModalHeader, ModalVariant } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { pluralize } from 'humanize-plus';
 import {
   AI_CISCO_INTERSIGHT_TAG,
@@ -14,7 +21,6 @@ import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
 import useInfraEnvImageUrl from '../../hooks/useInfraEnvImageUrl';
 import useInfraEnvIpxeImageUrl from '../../hooks/useInfraEnvIpxeImageUrl';
 import DownloadIpxeScript from '../../../common/components/clusterConfiguration/DownloadIpxeScript';
-import './DiscoveryImageModal.css';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { ClustersService } from '../../services';
 import { useDispatch } from 'react-redux';
@@ -115,7 +121,11 @@ export const DiscoveryImageModal = () => {
         data-testid="discovery-modal-title"
         title={`Add ${pluralize(+isSNOCluster, 'host')}`}
       />
-      {(isoDownloadError || ipxeDownloadError) && <ErrorState />}
+      {(isoDownloadError || ipxeDownloadError) && (
+        <ModalBody>
+          <ErrorState />
+        </ModalBody>
+      )}
       {isoDownloadUrl ? (
         <DownloadIso
           fileName={`discovery_image_${cluster.name || ''}.iso`}

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

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 import { Form } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
@@ -40,6 +39,7 @@ import ControlPlaneNodesDropdown, {
   DEFAULT_VALUE_CPN,
   isCPNDropdownItemEnabled,
 } from './ControlPlaneNodesDropdown';
+import { isFeatureSupportedAndAvailable } from '../featureSupportLevels/featureStateUtils';
 
 export type OcmClusterDetailsFormFieldsProps = {
   cluster?: Cluster;
@@ -79,6 +79,13 @@ export const OcmClusterDetailsFormFields = ({
     architectureData[values.cpuArchitecture as SupportedCpuArchitecture].label;
 
   const featureSupportLevelContext = useNewFeatureSupportLevel();
+  const tnaSupport = featureSupportLevelContext.getFeatureSupportLevel(
+    'TNA',
+    featureSupportLevelData ?? undefined,
+  );
+  const isArbiterEncryptionAvailable = isSingleClusterFeatureEnabled
+    ? false
+    : isFeatureSupportedAndAvailable(tnaSupport);
 
   React.useEffect(() => {
     nameInputRef.current?.focus();
@@ -223,6 +230,7 @@ export const OcmClusterDetailsFormFields = ({
         values={values}
         isDisabled={cluster?.pullSecretSet}
         isSNO={values.controlPlaneCount === 1}
+        isArbiterEncryptionAvailable={isArbiterEncryptionAvailable}
         docVersion={openshiftVersion}
       />
     </Form>

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

@@ -145,7 +145,7 @@ export const OcmDiscoveryImageConfigForm = ({
       {({ submitForm, isSubmitting, status, setStatus }) => {
         return (
           <>
-            <ModalBody>
+            <ModalBody style={{ maxHeight: '611px' }}>
               <Stack hasGutter>
                 <StackItem>
                   <Alert variant={AlertVariant.info} isInline title={alertDiscoveryText} />

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

@@ -22,6 +22,7 @@ import { getFieldId } from '../../../../common/components/ui/formik';
 import { isOciPlatformType } from '../../utils';
 import DeleteCustomManifestModal from './DeleteCustomManifestModal';
 import { ClustersService } from '../../../services';
+import { userProvidedManifests } from './components/utils';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
 
 export const CustomManifestsPage = ({
@@ -77,7 +78,13 @@ export const CustomManifestsPage = ({
   const cleanCustomManifests = React.useCallback(async () => {
     if (!clusterWizardContext.uiSettings?.customManifestsAdded || !cluster.id) return;
     const { data: manifests } = await ClustersAPI.getManifests(cluster.id);
-    await ClustersService.removeClusterManifests(manifests, cluster.id);
+    const manifestsToRemove = userProvidedManifests(manifests).map((manifest) => ({
+      ...manifest,
+      folder: manifest.folder || 'manifests',
+      fileName: manifest.fileName || '',
+      yamlContent: '',
+    }));
+    await ClustersService.removeClusterManifests(manifestsToRemove, cluster.id);
     setUseCustomManifests(false);
     setDeleteModalOpen(false);
     await clusterWizardContext.updateUISettings({

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

@@ -23,6 +23,7 @@ import { CustomManifestValues, ManifestFormData } from '../data/dataTypes';
 import useClusterCustomManifests from '../../../../hooks/useClusterCustomManifests';
 import { ClustersService } from '../../../../services';
 import { CustomManifestsArray } from './CustomManifestsArray';
+import { userProvidedManifests } from './utils';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
 import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardContext';
 import { ClustersAPI } from '../../../../services/apis';
@@ -70,7 +71,8 @@ export const CustomManifestsForm = ({
     if (customManifests && !customManifestsLocalRef.current.length) {
       const initValues = getInitialValues(customManifests);
       setInitialValues(initValues);
-      customManifestsLocalRef.current = !!customManifests.length ? initValues.manifests : [];
+      customManifestsLocalRef.current =
+        userProvidedManifests(customManifests).length > 0 ? initValues.manifests : [];
     }
   }, [customManifests, getInitialValues]);
 

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

@@ -1,5 +1,10 @@
 import { CustomManifestValues, ListManifestsExtended, ManifestFormData } from '../data/dataTypes';
 
+/** Manifests created by the installer (e.g. OVE defaults); not editable in the wizard. */
+export const userProvidedManifests = <T extends { manifestSource?: string }>(
+  manifests: T[] | undefined,
+): T[] => (manifests ?? []).filter((m) => m.manifestSource !== 'system');
+
 export const getManifestName = (manifestIdx: number) => `Custom manifest ${manifestIdx + 1}`;
 
 export const getFormData = (manifests: ListManifestsExtended): ManifestFormData => {
@@ -18,11 +23,11 @@ export const getEmptyManifest = (): CustomManifestValues => {
 };
 
 export const getManifestValues = (manifests: ListManifestsExtended): ManifestFormData => {
-  if (!!manifests.length) {
-    return getFormData(manifests);
-  } else {
-    return getEmptyManifestsValues();
+  const userManifests = userProvidedManifests(manifests);
+  if (userManifests.length > 0) {
+    return getFormData(userManifests);
   }
+  return getEmptyManifestsValues();
 };
 
 export const getEmptyManifestsValues = (): ManifestFormData => {
@@ -32,8 +37,9 @@ export const getEmptyManifestsValues = (): ManifestFormData => {
 export const getClusterCustomManifests = (
   customManifests: ListManifestsExtended,
 ): CustomManifestValues[] => {
-  if (customManifests && customManifests.length > 0) {
-    return customManifests.map((manifest) => ({
+  const userManifests = userProvidedManifests(customManifests);
+  if (userManifests.length > 0) {
+    return userManifests.map((manifest) => ({
       folder: manifest.folder || 'manifests',
       filename: manifest.fileName || '',
       manifestYaml: manifest.yamlContent || '',

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

@@ -113,20 +113,18 @@ const NetworkConfigurationForm: React.FC<{
     clusterWizardContext.moveNext();
   }, [addAlert, cluster.id, clusterWizardContext, dispatch, isSingleClusterFeatureEnabled]);
 
-  const isNextDisabled =
-    isSubmitting ||
-    isAutoSaveRunning ||
-    !!alerts.length ||
-    !isValid ||
-    !canNextNetwork({ cluster });
-
   const footer = (
     <ClusterWizardFooter
       cluster={cluster}
       errorFields={errorFields}
       isSubmitting={isSubmitting}
-      isNextDisabled={isNextDisabled}
-      isWaitingForHosts={!canNextNetwork({ cluster })}
+      isNextDisabled={
+        isSubmitting ||
+        isAutoSaveRunning ||
+        !!alerts.length ||
+        !isValid ||
+        !canNextNetwork({ cluster })
+      }
       onNext={() => void onNext()}
       onBack={() => clusterWizardContext.moveBack()}
       isBackDisabled={isSubmitting || isAutoSaveRunning}

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

@@ -136,31 +136,51 @@ const OperatorCheckbox = ({
   const fieldId = getFieldId(operatorId, 'input');
   const supportLevel = getFeatureSupportLevel(featureId);
 
-  const isInBundle = values.selectedBundles.some(
-    (sb) => !!bundles.find((b) => b.id === sb)?.operators?.includes(operatorId),
+  const isRequiredByBundle = values.selectedBundles.some(
+    (selectedBundle) =>
+      !!bundles.find((bundle) => bundle.id === selectedBundle.id)?.operators?.includes(operatorId),
   );
+  const isSelectedForBundle = values.selectedBundles.some((selectedBundle) =>
+    selectedBundle.optionalOperators?.includes(operatorId),
+  );
+  const isInBundle = isRequiredByBundle || isSelectedForBundle;
+
+  const isOperatorActive = (opName: string) =>
+    values.selectedOperators.includes(opName) ||
+    values.selectedBundles.some((selectedBundle) => {
+      const bundle = bundles.find(({ id }) => id === selectedBundle.id);
+      return (
+        bundle?.operators?.includes(opName) || selectedBundle.optionalOperators?.includes(opName)
+      );
+    });
 
   const isChecked = values.selectedOperators.includes(operatorId) || isInBundle;
 
-  const parentOperator = preflightRequirements?.operators?.find((op) =>
-    op.dependencies?.includes(operatorId),
+  const parentOperator = preflightRequirements?.operators?.find(
+    (op) =>
+      !!op.operatorName &&
+      op.dependencies?.includes(operatorId) &&
+      isOperatorActive(op.operatorName),
   );
 
-  let parentOperatorName = '';
-  if (
-    parentOperator?.operatorName &&
-    values.selectedOperators.includes(parentOperator.operatorName)
-  ) {
-    parentOperatorName = opSpecs[parentOperator.operatorName]?.title || parentOperator.operatorName;
+  let requiredByOperatorName = '';
+  if (parentOperator?.operatorName) {
+    requiredByOperatorName =
+      opSpecs[parentOperator.operatorName]?.title || parentOperator.operatorName;
   }
 
-  const disabledReason = isInBundle
-    ? 'This operator is part of a bundle and cannot be deselected.'
-    : notStandalone
-    ? 'This operator cannot be installed as a standalone'
-    : parentOperatorName
-    ? `This operator is a dependency of ${parentOperatorName}`
-    : getFeatureDisabledReason(featureId);
+  let disabledReason = getFeatureDisabledReason(featureId);
+
+  if (isRequiredByBundle) {
+    disabledReason = 'This operator is part of a selected bundle and cannot be deselected.';
+  } else if (isSelectedForBundle) {
+    disabledReason =
+      'This optional operator is selected through a bundle. Use the bundle card to change it.';
+  } else if (requiredByOperatorName) {
+    disabledReason = `This operator is required by ${requiredByOperatorName}`;
+  } else if (notStandalone && !values.selectedOperators.includes(operatorId)) {
+    disabledReason = 'This operator cannot be installed as a standalone';
+  }
 
   return (
     <FormGroup fieldId={fieldId} id={`form-control__${fieldId}`}>

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

@@ -31,10 +31,9 @@ export const bundleSpecs: { [key: string]: BundleSpec } = {
     incompatibleBundles: [],
     Description: () => (
       <List>
-        <ListItem>GPUs are recommended for optimal AI/ML workload performance.</ListItem>
         <ListItem>
-          NVIDIA GPU, AMD GPU and Kernel Module Management may or may not be installed based on the
-          GPU discovered on your hosts.
+          GPUs are recommended for optimal AI/ML workload performance. Please select the GPU
+          operators you want to install.
         </ListItem>
       </List>
     ),

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

@@ -1,4 +1,5 @@
 import {
+  BundleCreateParams,
   Bundle,
   PreflightHardwareRequirements,
 } from '@openshift-assisted/types/assisted-installer-service';
@@ -68,7 +69,7 @@ const getBundleOperators = (
 
 export const getNewBundleOperators = (
   currentOperators: string[],
-  currentBundles: string[],
+  currentBundles: BundleCreateParams[],
   allBundles: Bundle[],
   newBundle: Bundle,
   preflightRequirements: PreflightHardwareRequirements | undefined,
@@ -81,10 +82,10 @@ export const getNewBundleOperators = (
     return Array.from(new Set(combined));
   }
 
-  const newBundles = currentBundles.filter((b) => b !== newBundle.id);
+  const newBundles = currentBundles.filter((bundle) => bundle.id !== newBundle.id);
   const operatorsToKeep = [
-    ...newBundles.reduce((acc, bundleId) => {
-      const bundle = allBundles.find(({ id }) => id === bundleId);
+    ...newBundles.reduce((acc, selectedBundle) => {
+      const bundle = allBundles.find(({ id }) => id === selectedBundle.id);
       if (bundle) {
         const bundleOperators = getBundleOperators(bundle, preflightRequirements);
         bundleOperators.forEach((op) => {

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

@@ -1,17 +1,75 @@
 import React from 'react';
+import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
-import { genericTableRowKey } from '../../../../common';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { genericTableRowKey, selectOlmOperators } from '../../../../common';
+import { useStateSafely } from '../../../../common/hooks';
+import { Bundle, Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { TableSummaryExpandable } from './TableSummaryExpandable';
 import { useOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
+import BundleService from '../../../services/BundleService';
+
+const fetchBundles = async (
+  openshiftVersion: string,
+  cpuArchitecture: string,
+  platformType: string,
+): Promise<Bundle[]> => {
+  try {
+    return await BundleService.listBundles(
+      openshiftVersion,
+      cpuArchitecture,
+      platformType,
+      undefined,
+    );
+  } catch (_e) {
+    return [] as Bundle[];
+  }
+};
 
 export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
   const { byKey: opSpecs } = useOperatorSpecs();
+  const selectedBundles = cluster.operatorBundles || [];
+  const [bundleTitlesById, setBundleTitlesById] = useStateSafely<Record<string, string>>({});
+  const hasFetchedBundles = React.useRef(false);
+  const hasSelectedBundles = selectedBundles.length > 0;
+  React.useEffect(() => {
+    if (!hasFetchedBundles.current && hasSelectedBundles) {
+      hasFetchedBundles.current = true;
+      void (async () => {
+        const bundles = await fetchBundles(
+          cluster.openshiftVersion || '',
+          cluster.cpuArchitecture || '',
+          cluster.platform?.type || '',
+        );
+        const titlesById = Object.fromEntries(
+          bundles
+            .filter((bundle) => !!bundle.id && !!bundle.title)
+            .map((bundle) => [bundle.id, bundle.title]),
+        ) as Record<string, string>;
+        setBundleTitlesById(titlesById);
+      })();
+    }
+  }, [
+    cluster.cpuArchitecture,
+    cluster.openshiftVersion,
+    cluster.platform?.type,
+    hasSelectedBundles,
+    setBundleTitlesById,
+  ]);
+
+  const bundleRows = selectedBundles.map((bundle) => ({
+    rowId: `bundle-${bundle.id}`,
+    cells: [
+      {
+        title: bundleTitlesById[bundle.id] || bundle.id,
+        props: { 'data-testid': `bundle-${bundle.id}` },
+      },
+    ],
+  }));
 
   const rows = React.useMemo(
     () =>
-      cluster.monitoredOperators
-        ?.filter(({ name }) => !!name && !!opSpecs[name])
+      selectOlmOperators(cluster)
+        .filter(({ name }) => !!name && !!opSpecs[name])
         .map((op) => {
           const opId = op.name as string;
           return {
@@ -25,33 +83,65 @@ export const ReviewOperatorsTable = ({ cluster }: { cluster: Cluster }) => {
             ],
           };
         }),
-    [cluster.monitoredOperators, opSpecs],
+    [cluster, opSpecs],
   );
 
-  if (!rows?.length) {
+  if (!rows?.length && selectedBundles.length === 0) {
     return null;
   }
 
   return (
-    <TableSummaryExpandable title={'Operators'} id={'operators-expandable'}>
-      <Table
-        variant={TableVariant.compact}
-        borders={false}
-        aria-label={'Operators review table'}
-        className="review-table"
-      >
-        <Tbody>
-          {rows.map((row, i) => (
-            <Tr key={genericTableRowKey(row.rowId)}>
-              {row.cells.map((cell, j) => (
-                <Td key={`cell-${i}-${j}`} {...cell.props}>
-                  {cell.title}
-                </Td>
+    <TableSummaryExpandable title={'Bundles and operators'} id={'operators-expandable'}>
+      {bundleRows.length > 0 && (
+        <>
+          <Title headingLevel="h4" size="md" className="pf-v6-u-mb-sm">
+            Bundles ({bundleRows.length})
+          </Title>
+          <Table
+            variant={TableVariant.compact}
+            borders={false}
+            aria-label={'Bundles review table'}
+            className="review-table pf-v6-u-mb-md"
+          >
+            <Tbody>
+              {bundleRows.map((row, i) => (
+                <Tr key={genericTableRowKey(row.rowId)}>
+                  {row.cells.map((cell, j) => (
+                    <Td key={`bundle-cell-${i}-${j}`} {...cell.props}>
+                      {cell.title}
+                    </Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </>
+      )}
+      {rows.length > 0 && (
+        <>
+          <Title headingLevel="h4" size="md" className="pf-v6-u-mb-sm">
+            Operators ({rows.length})
+          </Title>
+          <Table
+            variant={TableVariant.compact}
+            borders={false}
+            aria-label={'Operators review table'}
+            className="review-table"
+          >
+            <Tbody>
+              {rows.map((row, i) => (
+                <Tr key={genericTableRowKey(row.rowId)}>
+                  {row.cells.map((cell, j) => (
+                    <Td key={`cell-${i}-${j}`} {...cell.props}>
+                      {cell.title}
+                    </Td>
+                  ))}
+                </Tr>
               ))}
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
+            </Tbody>
+          </Table>
+        </>
+      )}
     </TableSummaryExpandable>
   );
 };

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

@@ -19,10 +19,7 @@ import { ReviewCustomManifestsTable } from './ReviewCustomManifestsTable';
 import PlatformIntegrationNote from '../platformIntegration/PlatformIntegrationNote';
 import useClusterCustomManifests from '../../../hooks/useClusterCustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { ListManifestsExtended } from '../manifestsConfiguration/data/dataTypes';
-
-const userProvidedManifests = (manifests: ListManifestsExtended | undefined) =>
-  (manifests ?? []).filter((m) => m.manifestSource !== 'system');
+import { userProvidedManifests } from '../manifestsConfiguration/components/utils';
 
 export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
   const { customManifests } = useClusterCustomManifests(cluster.id, false);

package/lib/ocm/components/clusterConfiguration/review/TableSummaryExpandable.css

@@ -0,0 +1,3 @@
+.pf-v6-c-expandable-section:not(.pf-m-expanded) {
+  --pf-v6-c-expandable-section__content--MaxHeight: 0;
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ExpandableSection, Content } from '@patternfly/react-core';
+import './TableSummaryExpandable.css';
 
 export const TableSummaryExpandable = ({
   title,
@@ -20,7 +21,6 @@ export const TableSummaryExpandable = ({
       id={id ? id : title}
     >
       {children}
-      <br />
     </ExpandableSection>
   );
 };

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

@@ -3,7 +3,7 @@ import { isDualStack } from '../../../../common';
 import { Cluster, DiskEncryption } from '@openshift-assisted/types/assisted-installer-service';
 
 export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
-  userManagedNetworking ? 'User-Managed networking' : 'Cluster-managed networking';
+  userManagedNetworking ? 'User-managed networking' : 'Cluster-managed networking';
 
 export const getStackTypeLabel = (cluster: Cluster): string =>
   isDualStack(cluster) ? 'Dual-stack' : 'IPv4';

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

@@ -8,6 +8,8 @@ import { useErrorMonitor } from '../../../../../common/components/ErrorHandling/
 import { getApiErrorMessage } from '../../../../../common/api';
 import { StaticIpFormProps } from './propTypes';
 import { selectCurrentClusterPermissionsState } from '../../../../store/slices/current-cluster/selectors';
+import { useFeature } from '../../../../hooks/use-feature';
+import { getStaticNetworkConfig } from '../data/fromInfraEnv';
 
 /** Reports form state and triggers save on every value change (useFormikAutoSave) */
 const AutosaveWithParentUpdate = <StaticIpFormValues extends object>({
@@ -69,7 +71,14 @@ export const StaticIpForm = <StaticIpFormValues extends object>({
   const { clearAlerts, addAlert } = useAlerts();
   const { captureException } = useErrorMonitor();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const initialValues = showEmptyValues ? getEmptyValues() : getInitialValues(infraEnv);
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const prefillFromInfraEnv = isSingleClusterFeatureEnabled && !!getStaticNetworkConfig(infraEnv);
+  const initialValues = React.useMemo(() => {
+    if (showEmptyValues && !prefillFromInfraEnv) {
+      return getEmptyValues();
+    }
+    return getInitialValues(infraEnv);
+  }, [showEmptyValues, prefillFromInfraEnv, infraEnv, getInitialValues, getEmptyValues]);
 
   const handleSubmit = async (values: StaticIpFormValues) => {
     clearAlerts();

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

@@ -9,7 +9,8 @@ import {
 } from '@patternfly/react-core';
 import { StaticIpInfo, StaticIpView } from '../data/dataTypes';
 import StaticIpViewRadioGroup from './StaticIpViewRadioGroup';
-import { getStaticIpInfo } from '../data/fromInfraEnv';
+import { getStaticIpInfo, getStaticNetworkConfig } from '../data/fromInfraEnv';
+import { useFeature } from '../../../../hooks/use-feature';
 import { StaticIpFormState, StaticIpPageProps, StaticIpViewProps } from './propTypes';
 import { YamlView } from './YamlView/YamlView';
 import { useClusterWizardContext } from '../../../clusterWizard/ClusterWizardContext';
@@ -34,6 +35,8 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
   onFormStateChange: onFormStateChangeParent,
 }) => {
   const clusterWizardContext = useClusterWizardContext();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const prefillFromInfraEnv = isSingleClusterFeatureEnabled && !!getStaticNetworkConfig(infraEnv);
   const [confirmOnChangeView, setConfirmOnChangeView] = React.useState<boolean>(false);
   const [viewChanged, setViewChanged] = React.useState<boolean>(false);
 
@@ -45,10 +48,10 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     [clusterWizardContext],
   );
 
-  const initialStaticIpInfo = React.useMemo<StaticIpInfo | undefined>(() => {
-    return getStaticIpInfo(infraEnv);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const initialStaticIpInfo = React.useMemo<StaticIpInfo | undefined>(
+    () => getStaticIpInfo(infraEnv),
+    [infraEnv],
+  );
 
   const onFormStateChange = React.useCallback(
     (formState: StaticIpFormState) => {
@@ -65,7 +68,7 @@ export const StaticIpPage: React.FC<StaticIpPageProps> = ({
     onFormStateChange,
     infraEnv,
     updateInfraEnv,
-    showEmptyValues: viewChanged,
+    showEmptyValues: viewChanged && !prefillFromInfraEnv,
   };
 
   const content = (() => {