@openshift-assisted/ui-lib 2.47.0 → 2.47.2

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

@@ -68,11 +68,12 @@ export const StackTypeControlGroup = ({
   const setSingleStack = React.useCallback(() => {
     setFieldValue('stackType', IPV4_STACK);
 
+    // Determine whether the first machine network is IPv4
+    const firstNetwork = values.machineNetworks?.[0];
+    const isFirstIPv4 = Boolean(firstNetwork?.cidr && Address4.isValid(firstNetwork.cidr));
+
     if (values.machineNetworks && values.machineNetworks?.length >= 2) {
       // For single-stack IPv4, prefer IPv4 machine network
-      const firstNetwork = values.machineNetworks[0];
-      const isFirstIPv4 = firstNetwork?.cidr && Address4.isValid(firstNetwork.cidr);
-
       if (isFirstIPv4) {
         // Keep the first network if it's IPv4
         setFieldValue('machineNetworks', [firstNetwork]);
@@ -123,6 +124,24 @@ export const StackTypeControlGroup = ({
       setFieldValue('serviceNetworks', [ipv4Service]);
     }
 
+    // Keep only IPv4 VIPs when switching to single-stack (unless DHCP allocation is used)
+    if (!values.vipDhcpAllocation) {
+      const pruneVips = (
+        vips?: { ip?: string; clusterId?: Cluster['id'] }[],
+      ): { ip: string; clusterId: Cluster['id'] }[] => {
+        if (!vips || vips.length === 0) return [];
+        // Choose which index to keep based on whether the first network is IPv4
+        const keepIndex = isFirstIPv4 ? 0 : 1;
+        const chosen = vips[keepIndex];
+        return chosen && chosen.ip
+          ? [{ ip: chosen.ip, clusterId: chosen.clusterId || clusterId }]
+          : [];
+      };
+
+      setFieldValue('apiVips', pruneVips(values.apiVips));
+      setFieldValue('ingressVips', pruneVips(values.ingressVips));
+    }
+
     void validateForm();
   }, [
     setFieldValue,
@@ -133,6 +152,9 @@ export const StackTypeControlGroup = ({
     values.clusterNetworks,
     values.machineNetworks,
     values.serviceNetworks,
+    values.apiVips,
+    values.ingressVips,
+    values.vipDhcpAllocation,
   ]);
 
   const setDualStack = () => {

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

@@ -6,9 +6,16 @@ import {
   MenuToggle,
   MenuToggleElement,
   MenuToggleProps,
+  Divider,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
-import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
+import {
+  getFieldId,
+  HostSubnet,
+  NO_SUBNET_SET,
+  TechnologyPreview,
+  PreviewBadgePosition,
+} from '../../../../common';
 import { Address4, Address6 } from 'ip-address';
 
 type SubnetsDropdownProps = {
@@ -62,7 +69,8 @@ export const SubnetsDropdown = ({
     const ipv4Subnets = machineSubnets.filter((subnet) => Address4.isValid(subnet.subnet));
     const ipv6Subnets = machineSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
 
-    let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
+    let currentDisplayValue =
+      itemsSubnets.length > 1 ? itemsSubnets[1].label : itemsSubnets[0].label; // The placeholder is the fallback in some cases
     if (field.value) {
       const subnetItem = itemsSubnets.find((item) => item.value === field.value);
       if (subnetItem) {
@@ -100,7 +108,7 @@ export const SubnetsDropdown = ({
           {label}
         </DropdownItem>
       ));
-
+      ipv4Items.push(<Divider key="ipv4-divider" />);
       const ipv6Items = toFormSelectOptions(ipv6Subnets).map(({ value, label, isDisabled }) => (
         <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
           {label}
@@ -119,7 +127,7 @@ export const SubnetsDropdown = ({
         <DropdownGroup label="IPv4" key="ipv4-group">
           {ipv4Items}
         </DropdownGroup>,
-        <DropdownGroup label="IPv6" key="ipv6-group">
+        <DropdownGroup label="IPv6 (Technology Preview)" key="ipv6-group">
           {ipv6Items}
         </DropdownGroup>,
       ];
@@ -138,6 +146,9 @@ export const SubnetsDropdown = ({
     setOpen(false);
   };
 
+  const currentItem = itemsSubnets.find((i) => i.label === currentDisplayValue);
+  const showBadge = Boolean(currentItem && Address6.isValid(currentItem.value));
+
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
@@ -150,6 +161,11 @@ export const SubnetsDropdown = ({
       {...props}
     >
       {currentDisplayValue}
+      {showBadge && (
+        <span onClick={(e) => e.stopPropagation()}>
+          <TechnologyPreview position={PreviewBadgePosition.inlineRight} />
+        </span>
+      )}
     </MenuToggle>
   );
 

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

@@ -14,6 +14,7 @@ import {
   NetworkConfigurationValues,
   FormikStaticField,
   NETWORK_TYPE_SDN,
+  DUAL_STACK,
   selectMachineNetworkCIDR,
   getVipValidationsById,
   PopoverIcon,
@@ -24,7 +25,12 @@ import { selectCurrentClusterPermissionsState } from '../../../store/slices/curr
 import { OcmCheckboxField, OcmInputField } from '../../ui/OcmFormFields';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
-import { Cluster, Ip, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  ApiVip,
+  Cluster,
+  Ip,
+  SupportLevel,
+} from '@openshift-assisted/types/assisted-installer-service';
 
 interface VipStaticValueProps {
   id?: string;
@@ -96,6 +102,7 @@ export const VirtualIPControlGroup = ({
   );
 
   const enableAllocation = values.networkType === NETWORK_TYPE_SDN;
+  const isDualStack = values.stackType === DUAL_STACK;
 
   React.useEffect(() => {
     if (!isViewerMode && !enableAllocation) {
@@ -112,8 +119,20 @@ export const VirtualIPControlGroup = ({
     [cluster.apiVips, cluster.ingressVips, setFieldValue],
   );
 
-  const setVipValue = (field: string, e: React.ChangeEvent<HTMLInputElement>) => {
-    setFieldValue(field, [{ ip: e.target.value, clusterId: cluster.id }], true);
+  const setVipValueAtIndex = (
+    field: 'apiVips' | 'ingressVips',
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const fieldArray: ApiVip[] =
+      field === 'apiVips' ? values.apiVips || [] : values.ingressVips || [];
+    const next: ApiVip[] = Array.isArray(fieldArray) ? [...fieldArray] : [];
+    // Ensure array has the desired length
+    while (next.length <= index) {
+      next.push({ ip: '', clusterId: cluster.id });
+    }
+    next[index] = { ip: e.target.value, clusterId: cluster.id };
+    setFieldValue(field, next, true);
   };
 
   return (
@@ -194,11 +213,30 @@ export const VirtualIPControlGroup = ({
                     name="apiVips.0.ip"
                     helperText={ipHelperText}
                     isRequired
+                    labelInfo={isDualStack ? 'Primary' : undefined}
                     onChange={(e) =>
-                      setVipValue('apiVips', e as React.ChangeEvent<HTMLInputElement>)
+                      setVipValueAtIndex('apiVips', 0, e as React.ChangeEvent<HTMLInputElement>)
                     }
                   />
                 </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <OcmInputField
+                      label={
+                        <>
+                          <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                        </>
+                      }
+                      name="apiVips.1.ip"
+                      helperText={ipHelperText}
+                      isRequired
+                      labelInfo={'Secondary'}
+                      onChange={(e) =>
+                        setVipValueAtIndex('apiVips', 1, e as React.ChangeEvent<HTMLInputElement>)
+                      }
+                    />
+                  </StackItem>
+                )}
                 <StackItem>
                   <OcmInputField
                     name="ingressVips.0.ip"
@@ -209,11 +247,34 @@ export const VirtualIPControlGroup = ({
                     }
                     helperText={ipHelperText}
                     isRequired
+                    labelInfo={isDualStack ? 'Primary' : undefined}
                     onChange={(e) =>
-                      setVipValue('ingressVips', e as React.ChangeEvent<HTMLInputElement>)
+                      setVipValueAtIndex('ingressVips', 0, e as React.ChangeEvent<HTMLInputElement>)
                     }
                   />
                 </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <OcmInputField
+                      name="ingressVips.1.ip"
+                      label={
+                        <>
+                          <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                        </>
+                      }
+                      helperText={ipHelperText}
+                      isRequired
+                      labelInfo={'Secondary'}
+                      onChange={(e) =>
+                        setVipValueAtIndex(
+                          'ingressVips',
+                          1,
+                          e as React.ChangeEvent<HTMLInputElement>,
+                        )
+                      }
+                    />
+                  </StackItem>
+                )}
               </Stack>
             )}
           </FieldArray>

package/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,

package/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': 'ingress-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'}

package/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;

package/lib/ocm/components/clusterWizard/OperatorsBundle.tsx

@@ -106,7 +106,9 @@ const BundleCard = ({
   const disabledReason = hasUnsupportedOperators
     ? 'Some operators in this bundle are not supported with the current configuration.'
     : isSNO && bundleSpec?.noSNO
-    ? 'This bundle is not available when deploying a Single Node OpenShift.'
+    ? bundle.id === 'openshift-ai'
+      ? 'This bundle is not available when deploying a Single Node OpenShift, but you can use the standalone operator instead.'
+      : 'This bundle is not available when deploying a Single Node OpenShift.'
     : incompatibleBundle
     ? `Bundle cannot be installed together with ${
         bundles.find(({ id }) => id === incompatibleBundle)?.title || incompatibleBundle

package/lib/ocm/components/clusters/AssistedInstallerHeader.tsx

@@ -24,7 +24,7 @@ export const AssistedInstallerHeader = () => {
         </SplitItem>
         {isInOcm && (
           <SplitItem>
-            <Content component="a" data-testid="whats-new-link">
+            <Content component="a" data-testid="whats-new-link" hidden={true}>
               What's new in Assisted Installer?
             </Content>
           </SplitItem>

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -294,9 +294,7 @@ const getOpenShiftAIDisabledReason = (
   if (isArm) {
     return `${operatorTitle} is not available when ARM CPU architecture is selected.`;
   }
-  if (isSNO(cluster)) {
-    return `${operatorTitle} is not available when deploying a Single Node OpenShift.`;
-  }
+
   if (!isSupported) {
     return `The installer cannot currently enable ${operatorTitle} with the selected OpenShift version, but it can be enabled later through the OpenShift Console once the installation is complete.`;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.47.0",
-    "@openshift-assisted/types": "2.47.0",
+    "@openshift-assisted/locales": "2.47.2",
+    "@openshift-assisted/types": "2.47.2",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "6.2.3",
     "@patternfly/react-code-editor": "6.2.2",
@@ -140,5 +140,5 @@
       ]
     }
   },
-  "version": "2.47.0"
+  "version": "2.47.2"
 }