From 276d4f939aaf4e8d15a0c564ab090f108c5ff404 Mon Sep 17 00:00:00 2001
From: Montse Ortega <mortegag@redhat.com>
Date: Thu, 6 Nov 2025 14:58:30 +0100
Subject: [PATCH 1/2] Add info about apiVIPs and ingressVIPs for dual-stack in
 Review and Create page

---
 .../components/clusterConfiguration/utils.ts  |  4 +-
 .../networkConfigurationValidation.ts         |  2 +-
 .../review/ReviewNetworkingTable.tsx          | 53 ++++++++++++++-----
 .../clusterDetail/ClusterProperties.tsx       |  4 +-
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/utils.ts b/libs/ui-lib/lib/common/components/clusterConfiguration/utils.ts
index 6cb5759bdd..0ce86a2e3a 100644
--- a/libs/ui-lib/lib/common/components/clusterConfiguration/utils.ts
+++ b/libs/ui-lib/lib/common/components/clusterConfiguration/utils.ts
@@ -206,9 +206,7 @@ export const isDualStack = ({
   clusterNetworks,
   serviceNetworks,
   openshiftVersion,
-}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks'> & {
-  openshiftVersion?: string;
-}) =>
+}: Pick<Cluster, 'machineNetworks' | 'clusterNetworks' | 'serviceNetworks' | 'openshiftVersion'>) =>
   areNetworksDualStack(machineNetworks, openshiftVersion) &&
   areNetworksDualStack(clusterNetworks, openshiftVersion) &&
   areNetworksDualStack(serviceNetworks, openshiftVersion);
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts b/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts
index bd261659c2..24ff583771 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts
@@ -34,7 +34,7 @@ export const getNetworkInitialValues = (
   isClusterManagedNetworkingUnsupported: boolean,
 ): NetworkConfigurationValues => {
   const isSNOCluster = isSNO(cluster);
-  const isDualStackType = isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion });
+  const isDualStackType = isDualStack({ ...cluster });
 
   return {
     apiVips: cluster.apiVips,
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx
index 562e25b024..b38263a2da 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx
@@ -1,12 +1,7 @@
 import { Title } from '@patternfly/react-core';
 import { Table, TableVariant, Tbody, Td, Tr } from '@patternfly/react-table';
 import React from 'react';
-import {
-  genericTableRowKey,
-  isDualStack,
-  selectApiVip,
-  selectIngressVip,
-} from '../../../../common';
+import { genericTableRowKey, isDualStack } from '../../../../common';
 import {
   getManagementType,
   getStackTypeLabel,
@@ -58,7 +53,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'machine-networks' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion })
+          isDualStack({ ...cluster })
             ? {
                 title: cluster.machineNetworks?.map((network, index) => (
                   <span key={network.cidr}>
@@ -78,9 +73,24 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'API IP' },
           {
-            title: selectApiVip(cluster),
-            props: { 'data-testid': 'api-vip', colSpan: 2 },
+            title: cluster.apiVips?.map((apiVip) => (
+              <span key={apiVip.ip}>
+                {apiVip.ip}
+                <br />
+              </span>
+            )),
+            props: { 'data-testid': 'api-vip' },
           },
+          isDualStack({ ...cluster })
+            ? {
+                title: cluster.apiVips?.map((apiVip, index) => (
+                  <span key={apiVip.ip}>
+                    {index === 0 ? 'Primary' : 'Secondary'}
+                    <br />
+                  </span>
+                )),
+              }
+            : { title: '' },
         ],
       });
 
@@ -91,9 +101,24 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
         cells: [
           { title: 'Ingress IP' },
           {
-            title: selectIngressVip(cluster),
-            props: { 'data-testid': 'ingress-vip', colSpan: 2 },
+            title: cluster.ingressVips?.map((ingressVip) => (
+              <span key={ingressVip.ip}>
+                {ingressVip.ip}
+                <br />
+              </span>
+            )),
+            props: { 'data-testid': 'api-vip' },
           },
+          isDualStack({ ...cluster })
+            ? {
+                title: cluster.ingressVips?.map((ingressVip, index) => (
+                  <span key={ingressVip.ip}>
+                    {index === 0 ? 'Primary' : 'Secondary'}
+                    <br />
+                  </span>
+                )),
+              }
+            : { title: '' },
         ],
       });
 
@@ -115,7 +140,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-cidr' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack({ ...cluster }) && {
             title: cluster.clusterNetworks?.map((network, index) => (
               <span key={network.cidr}>
                 {index === 0 ? 'Primary' : 'Secondary'}
@@ -138,7 +163,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-prefix' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack({ ...cluster }) && {
             title: cluster.clusterNetworks?.map((network, index) => (
               <span key={network.hostPrefix}>
                 {index === 0 ? 'Primary' : 'Secondary'}
@@ -161,7 +186,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'service-network-cidr' },
           },
-          isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) && {
+          isDualStack({ ...cluster }) && {
             title: cluster.serviceNetworks?.map((network, index) => (
               <span key={network.cidr}>
                 {index === 0 ? 'Primary' : 'Secondary'}
diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx
index 324039fc13..6c66c28a94 100644
--- a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx
@@ -41,7 +41,7 @@ export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
 };
 
 export const getStackTypeLabel = (cluster: Cluster): string =>
-  isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion }) ? 'Dual-stack' : 'IPv4';
+  isDualStack({ ...cluster }) ? 'Dual-stack' : 'IPv4';
 
 export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
   let diskEncryptionType = null;
@@ -67,7 +67,7 @@ export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption[
 
 const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesProps) => {
   const { t } = useTranslation();
-  const isDualStackType = isDualStack({ ...cluster, openshiftVersion: cluster.openshiftVersion });
+  const isDualStackType = isDualStack({ ...cluster });
   const featureSupportLevelContext = useNewFeatureSupportLevel();
 
   const activeFeatureConfiguration = featureSupportLevelContext.activeFeatureConfiguration;

From 36b858b9d55afc268047e9c4e66ba15c334bfdbc Mon Sep 17 00:00:00 2001
From: Montse Ortega <mortegag@redhat.com>
Date: Fri, 7 Nov 2025 11:20:01 +0100
Subject: [PATCH 2/2] Fixing review comments

---
 .../networkConfigurationValidation.ts              |  2 +-
 .../review/ReviewNetworkingTable.tsx               | 14 +++++++-------
 .../components/clusterDetail/ClusterProperties.tsx |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts b/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts
index 24ff583771..2d7f6b0e91 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts
@@ -34,7 +34,7 @@ export const getNetworkInitialValues = (
   isClusterManagedNetworkingUnsupported: boolean,
 ): NetworkConfigurationValues => {
   const isSNOCluster = isSNO(cluster);
-  const isDualStackType = isDualStack({ ...cluster });
+  const isDualStackType = isDualStack(cluster);
 
   return {
     apiVips: cluster.apiVips,
diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx
index b38263a2da..bdc7d1619c 100644
--- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/review/ReviewNetworkingTable.tsx
@@ -53,7 +53,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'machine-networks' },
           },
-          isDualStack({ ...cluster })
+          isDualStack(cluster)
             ? {
                 title: cluster.machineNetworks?.map((network, index) => (
                   <span key={network.cidr}>
@@ -81,7 +81,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'api-vip' },
           },
-          isDualStack({ ...cluster })
+          isDualStack(cluster)
             ? {
                 title: cluster.apiVips?.map((apiVip, index) => (
                   <span key={apiVip.ip}>
@@ -107,9 +107,9 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
                 <br />
               </span>
             )),
-            props: { 'data-testid': 'api-vip' },
+            props: { 'data-testid': 'ingress-vip' },
           },
-          isDualStack({ ...cluster })
+          isDualStack(cluster)
             ? {
                 title: cluster.ingressVips?.map((ingressVip, index) => (
                   <span key={ingressVip.ip}>
@@ -140,7 +140,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-cidr' },
           },
-          isDualStack({ ...cluster }) && {
+          isDualStack(cluster) && {
             title: cluster.clusterNetworks?.map((network, index) => (
               <span key={network.cidr}>
                 {index === 0 ? 'Primary' : 'Secondary'}
@@ -163,7 +163,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'cluster-network-prefix' },
           },
-          isDualStack({ ...cluster }) && {
+          isDualStack(cluster) && {
             title: cluster.clusterNetworks?.map((network, index) => (
               <span key={network.hostPrefix}>
                 {index === 0 ? 'Primary' : 'Secondary'}
@@ -186,7 +186,7 @@ export const ReviewNetworkingTable = ({ cluster }: { cluster: Cluster }) => {
             )),
             props: { 'data-testid': 'service-network-cidr' },
           },
-          isDualStack({ ...cluster }) && {
+          isDualStack(cluster) && {
             title: cluster.serviceNetworks?.map((network, index) => (
               <span key={network.cidr}>
                 {index === 0 ? 'Primary' : 'Secondary'}
diff --git a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx
index 6c66c28a94..dbc41d740f 100644
--- a/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx
+++ b/libs/ui-lib/lib/ocm/components/clusterDetail/ClusterProperties.tsx
@@ -41,7 +41,7 @@ export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
 };
 
 export const getStackTypeLabel = (cluster: Cluster): string =>
-  isDualStack({ ...cluster }) ? 'Dual-stack' : 'IPv4';
+  isDualStack(cluster) ? 'Dual-stack' : 'IPv4';
 
 export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
   let diskEncryptionType = null;
@@ -67,7 +67,7 @@ export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption[
 
 const ClusterProperties = ({ cluster, externalMode = false }: ClusterPropertiesProps) => {
   const { t } = useTranslation();
-  const isDualStackType = isDualStack({ ...cluster });
+  const isDualStackType = isDualStack(cluster);
   const featureSupportLevelContext = useNewFeatureSupportLevel();
 
   const activeFeatureConfiguration = featureSupportLevelContext.activeFeatureConfiguration;