@openshift-assisted/ui-lib 2.16.2-cim → 2.16.4-cim

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

@@ -4,8 +4,8 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 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 { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
 import { pluralize } from 'humanize-plus';
 import { TFunction } from 'i18next';
 

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

@@ -22,7 +22,7 @@ const OpenShiftLifeCycleDatesLink = () => {
 
 export const getOpenshiftVersionHelperText = (
   versions: OpenshiftVersionOptionType[],
-  selectedVersionValue: string | null,
+  selectedVersionValue: string | undefined,
   t: TFunction,
   isModal?: boolean,
 ) => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TextContent, TextVariants, Alert, Grid } from '@patternfly/react-core';
+import { Content, ContentVariants, Alert, Grid } from '@patternfly/react-core';
 
 import { CustomManifests } from './components/CustomManifests';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
@@ -13,13 +13,13 @@ export const CustomManifestsPage = ({
   onFormStateChange(formState: CustomManifestFormState): void;
 }) => (
   <Grid hasGutter>
-    <TextContent>
-      <Text component={TextVariants.h2}>Custom manifests</Text>
-      <Text component={TextVariants.small}>
+    <Content>
+      <Content component={ContentVariants.h2}>Custom manifests</Content>
+      <Content component={ContentVariants.small}>
         Upload additional manifests that will be applied at the install time for advanced
         configuration of the cluster.
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
     <Alert
       isInline
       variant="warning"

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

@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Modal, Button, ModalVariant } from '@patternfly/react-core';
+import {
+  Button,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 
 const DeleteCustomManifestModal = ({
   isOpen,
@@ -10,28 +18,27 @@ const DeleteCustomManifestModal = ({
   onClose: () => void;
   onDelete: () => void;
 }) => (
-  <Modal
-    title={'Remove custom manifests'}
-    isOpen={isOpen}
-    onClose={onClose}
-    variant={ModalVariant.small}
-    actions={[
+  <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.small}>
+    <ModalHeader title={'Remove custom manifests'} />
+    <ModalBody>
+      <Content>
+        All the data entered for custom manifests will be lost and there will not be any custom
+        manifests included in the installation.
+      </Content>
+    </ModalBody>
+    <ModalFooter>
       <Button
         data-testid="delete-manifest-submit"
         key="confirm"
         variant="danger"
         onClick={onDelete}
       >
-        {'Remove'}{' '}
-      </Button>,
+        Remove
+      </Button>
       <Button key="cancel" variant="link" onClick={onClose}>
         Cancel
-      </Button>,
-    ]}
-  >
-    {
-      'All the data entered for custom manifests will be lost and there will not be any custom manifests included in the installation.'
-    }
+      </Button>
+    </ModalFooter>
   </Modal>
 );
 

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

@@ -26,13 +26,12 @@ export const RemoveItemButton = ({
   dataTestId: string;
 }) => (
   <Button
+    icon={<MinusCircleIcon onClick={onRemove} />}
     data-testid={dataTestId}
     aria-label="remove manifest"
     style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
     variant="plain"
-  >
-    <MinusCircleIcon onClick={onRemove} />
-  </Button>
+  />
 );
 
 export const CustomManifest = ({

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Language } from '@patternfly/react-code-editor';
-import { ExpandableSection, Grid, GridItem, TextInput } from '@patternfly/react-core';
+import { ExpandableSection, Grid, GridItem } from '@patternfly/react-core';
 import { useField } from 'formik';
 import { OcmInputField, OcmCodeField } from '../../../ui/OcmFormFields';
 import { CustomManifestValues } from '../data/dataTypes';
@@ -30,12 +30,6 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
     >
       <Grid hasGutter span={12}>
         <GridItem span={6}>
-          <TextInput
-            hidden={true}
-            name={`${fieldName}.fakeId`}
-            data-testid={`fakeId-${manifestIdx}`}
-            id={`fakeId-${manifestIdx}`}
-          />
           <FolderDropdown name={`${fieldName}.folder`} data-testid={`folder-${manifestIdx}`} />
         </GridItem>
         <GridItem span={6}>

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

@@ -55,8 +55,9 @@ export const FolderDropdown = ({ name }: FolderDropdownProps) => {
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
       id={fieldId}
+      data-testid="folder-dropdown-toggle"
     >
       {value || 'manifests'}
     </MenuToggle>

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

@@ -3,10 +3,9 @@ import {
   Alert,
   AlertVariant,
   FormGroup,
-  StackItem,
+  GridItem,
   TextInputTypes,
   Grid,
-  Stack,
 } from '@patternfly/react-core';
 import { FieldArray, useFormikContext } from 'formik';
 import {
@@ -17,10 +16,6 @@ import {
 } from '../../../../common';
 import { OcmInputField } from '../../ui/OcmFormFields';
 
-const getNetworkLabelSuffix = (index: number, isDualStack: boolean) => {
-  return isDualStack ? ` (${index === 0 ? 'IPv4' : 'IPv6'})` : '';
-};
-
 const IPv4PrefixPopoverText =
   'For example, if Cluster Network Host Prefix is set to 23, then each node is assigned a /23 subnet out of the given cidr (clusterNetworkCIDR), which allows for 510 (2^(32 - 23) - 2) pod IPs addresses.';
 
@@ -62,20 +57,19 @@ const AdvancedNetworkFields = () => {
   );
 
   return (
-    <Grid hasGutter className="pf-v5-u-ml-lg">
+    <Grid className="pf-v6-u-ml-lg">
       <FieldArray name="clusterNetworks">
         {() => (
           <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.clusterNetworks?.map((_, index) => {
-              const networkSuffix = getNetworkLabelSuffix(index, isDualStack);
               return (
-                <Stack key={index}>
-                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
+                <Grid key={index} className="pf-v6-u-pb-md">
+                  <GridItem className={'network-field-group'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.cidr`}
                       label={
                         <>
-                          <span>{`Cluster network CIDR${networkSuffix} `}</span>
+                          <span>Cluster network CIDR </span>
                           <PopoverIcon
                             bodyContent={'IP address blocks from which Pod IPs are allocated.'}
                           />
@@ -83,15 +77,15 @@ const AdvancedNetworkFields = () => {
                       }
                       helperText={clusterCidrHelperText}
                       isRequired
-                      labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
+                      labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
                     />
-                  </StackItem>
-                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
+                  </GridItem>
+                  <GridItem className={'network-field-group'}>
                     <OcmInputField
                       name={`clusterNetworks.${index}.hostPrefix`}
                       label={
                         <>
-                          <span>Cluster network host prefix{networkSuffix} </span>
+                          <span>Cluster network host prefix </span>
                           <PopoverIcon
                             bodyContent={clusterNetworkHostPrefixPopoverText(index)}
                             minWidth="30rem"
@@ -108,8 +102,8 @@ const AdvancedNetworkFields = () => {
                       helperText={ClusterPrefixHelperText}
                       isRequired
                     />
-                  </StackItem>
-                </Stack>
+                  </GridItem>
+                </Grid>
               );
             })}
           </FormGroup>
@@ -124,14 +118,12 @@ const AdvancedNetworkFields = () => {
         {() => (
           <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
             {values.serviceNetworks?.map((_, index) => (
-              <StackItem key={index} className={'network-field-group pf-v5-u-pb-md'}>
+              <GridItem key={index} className={'network-field-group'}>
                 <OcmInputField
                   name={`serviceNetworks.${index}.cidr`}
                   label={
                     <>
-                      <span>
-                        {`Service network CIDR${getNetworkLabelSuffix(index, isDualStack)} `}
-                      </span>
+                      <span>Service network CIDR </span>
                       <PopoverIcon
                         bodyContent={'The IP address pool used for service IP addresses.'}
                       />
@@ -139,9 +131,9 @@ const AdvancedNetworkFields = () => {
                   }
                   helperText={serviceCidrHelperText}
                   isRequired
-                  labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
+                  labelInfo={isDualStack ? (index === 0 ? 'Primary' : 'Secondary') : ''}
                 />
-              </StackItem>
+              </GridItem>
             ))}
           </FormGroup>
         )}

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

@@ -9,9 +9,11 @@ import {
   NetworkConfigurationValues,
   DUAL_STACK,
   NO_SUBNET_SET,
+  isMajorMinorVersionEqualOrGreater,
 } from '../../../../common';
 import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { SubnetsDropdown } from './SubnetsDropdown';
+import { reorderNetworksForPrimary } from './reorderNetworks';
 import { Cluster, MachineNetwork } from '@openshift-assisted/types/assisted-installer-service';
 
 const subnetSort = (subA: HostSubnet, subB: HostSubnet) =>
@@ -25,7 +27,7 @@ const useAutoSelectSingleAvailableSubnet = (
 ) => {
   useEffect(() => {
     if (autoSelectNetwork) {
-      setFieldValue('machineNetworks', [{ cidr, clusterId }], true);
+      setFieldValue('machineNetworks', [{ cidr, clusterId }], false);
     }
   }, [autoSelectNetwork, cidr, clusterId, setFieldValue]);
 };
@@ -35,6 +37,7 @@ export interface AvailableSubnetsControlProps {
   hostSubnets: HostSubnet[];
   isRequired: boolean;
   isDisabled: boolean;
+  openshiftVersion?: string;
 }
 
 export const AvailableSubnetsControl = ({
@@ -42,11 +45,16 @@ export const AvailableSubnetsControl = ({
   hostSubnets,
   isRequired = false,
   isDisabled,
+  openshiftVersion,
 }: AvailableSubnetsControlProps) => {
   const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
   const isDualStack = values.stackType === DUAL_STACK;
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
 
+  // Check if OCP version supports IPv6 as primary network
+  const supportsIPv6Primary =
+    openshiftVersion && isMajorMinorVersionEqualOrGreater(openshiftVersion, '4.12');
+
   const IPv4Subnets = hostSubnets
     .filter((subnet) => Address4.isValid(subnet.subnet))
     .sort(subnetSort);
@@ -54,51 +62,147 @@ export const AvailableSubnetsControl = ({
     .filter((subnet) => Address6.isValid(subnet.subnet))
     .sort(subnetSort);
 
+  // For OCP >= 4.12, both networks can use either IPv4 or IPv6
+  const allSubnets = supportsIPv6Primary
+    ? [...IPv4Subnets, ...IPv6Subnets].sort(subnetSort)
+    : IPv4Subnets;
+
+  // For auto-selection, always use IPv4 subnets for single-stack
   const cidr = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
   const hasEmptySelection = (values.machineNetworks ?? []).length === 0;
   const autoSelectNetwork = !isViewerMode && hasEmptySelection;
   useAutoSelectSingleAvailableSubnet(autoSelectNetwork, setFieldValue, cidr, clusterId);
 
+  // Ensure primary and secondary machine networks are not duplicated.
+  // If the user switches primary to the same CIDR as secondary, adjust secondary to the opposite family or clear it.
+  React.useEffect(() => {
+    if (!isDualStack) {
+      return;
+    }
+    if (!values.machineNetworks || values.machineNetworks.length < 2) {
+      return;
+    }
+    const first = values.machineNetworks?.[0]?.cidr || '';
+    const second = values.machineNetworks?.[1]?.cidr || '';
+    if (!first || !second) {
+      return;
+    }
+    if (first === second) {
+      if (Address6.isValid(first)) {
+        const nextIPv4 = IPv4Subnets[0]?.subnet || NO_SUBNET_SET;
+        const replacement = nextIPv4 !== first ? nextIPv4 : NO_SUBNET_SET;
+        if (replacement !== second) {
+          setFieldValue('machineNetworks.1.cidr', replacement, false);
+        }
+      } else if (Address4.isValid(first)) {
+        const nextIPv6 = IPv6Subnets[0]?.subnet || NO_SUBNET_SET;
+        const replacement = nextIPv6 !== first ? nextIPv6 : NO_SUBNET_SET;
+        if (replacement !== second) {
+          setFieldValue('machineNetworks.1.cidr', replacement, false);
+        }
+      } else {
+        if (second !== NO_SUBNET_SET) {
+          setFieldValue('machineNetworks.1.cidr', NO_SUBNET_SET, false);
+        }
+      }
+    }
+  }, [isDualStack, values.machineNetworks, IPv4Subnets, IPv6Subnets, setFieldValue]);
+
   return (
-    <FormGroup
-      label="Machine network"
-      labelInfo={isDualStack && 'Primary'}
-      fieldId="machine-networks"
-      isRequired={isRequired}
-    >
-      <FieldArray name="machineNetworks">
-        {() => (
-          <Stack>
-            {isDualStack ? (
-              values.machineNetworks?.map((_machineNetwork, index) => {
-                const machineSubnets = index === 1 ? IPv6Subnets : IPv4Subnets;
-
-                return (
-                  <StackItem key={index}>
-                    <SubnetsDropdown
-                      name={`machineNetworks.${index}.cidr`}
-                      machineSubnets={machineSubnets}
-                      isDisabled={isDisabled}
-                    />
-                  </StackItem>
-                );
-              })
-            ) : (
-              <StackItem>
+    <>
+      <FormGroup
+        label="Machine network"
+        labelInfo={isDualStack && 'Primary'}
+        fieldId="machine-networks"
+        isRequired={isRequired}
+      >
+        <FieldArray name="machineNetworks">
+          {() => (
+            <Stack>
+              {isDualStack ? (
+                values.machineNetworks?.map((machineNetwork, index) => {
+                  if (index > 0) return null;
+
+                  const machineSubnets = supportsIPv6Primary ? allSubnets : IPv4Subnets;
+
+                  return (
+                    <StackItem key={index}>
+                      <SubnetsDropdown
+                        name={`machineNetworks.${index}.cidr`}
+                        machineSubnets={machineSubnets}
+                        isDisabled={isDisabled}
+                        onAfterSelect={(newSelection) =>
+                          reorderNetworksForPrimary(newSelection, values, setFieldValue)
+                        }
+                        data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
+                      />
+                    </StackItem>
+                  );
+                })
+              ) : (
+                <StackItem>
+                  <SubnetsDropdown
+                    name={`machineNetworks.0.cidr`}
+                    machineSubnets={IPv4Subnets}
+                    isDisabled={isDisabled}
+                    onAfterSelect={(newSelection) =>
+                      reorderNetworksForPrimary(newSelection, values, setFieldValue)
+                    }
+                    data-testid={'subnets-dropdown-toggle-primary'}
+                  />
+                </StackItem>
+              )}
+            </Stack>
+          )}
+        </FieldArray>
+
+        {typeof errors.machineNetworks === 'string' && (
+          <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
+        )}
+      </FormGroup>
+
+      {isDualStack && values.machineNetworks && values.machineNetworks.length > 1 && (
+        <FormGroup
+          label="Machine network"
+          labelInfo="Secondary"
+          fieldId="machine-networks-secondary"
+          isRequired={isRequired}
+        >
+          <FieldArray name="machineNetworks">
+            {() => {
+              const index = 1;
+              let machineSubnets;
+
+              if (supportsIPv6Primary) {
+                // For OCP >= 4.12, smart filtering based on the other network's selection
+                const firstNetworkCidr = values.machineNetworks?.[0]?.cidr;
+                if (firstNetworkCidr && Address6.isValid(firstNetworkCidr)) {
+                  // If first is IPv6, second should be IPv4
+                  machineSubnets = IPv4Subnets;
+                } else if (firstNetworkCidr && Address4.isValid(firstNetworkCidr)) {
+                  // If first is IPv4, second should be IPv6
+                  machineSubnets = IPv6Subnets;
+                } else {
+                  // If first is not selected yet, show all subnets
+                  machineSubnets = allSubnets;
+                }
+              } else {
+                // For older versions, second network is IPv6
+                machineSubnets = IPv6Subnets;
+              }
+
+              return (
                 <SubnetsDropdown
-                  name={`machineNetworks.0.cidr`}
-                  machineSubnets={IPv4Subnets}
+                  name={`machineNetworks.${index}.cidr`}
+                  machineSubnets={machineSubnets}
                   isDisabled={isDisabled}
+                  data-testid={`subnets-dropdown-toggle-${index ? 'ipv6' : 'ipv4'}`}
                 />
-              </StackItem>
-            )}
-          </Stack>
-        )}
-      </FieldArray>
-
-      {typeof errors.machineNetworks === 'string' && (
-        <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
+              );
+            }}
+          </FieldArray>
+        </FormGroup>
       )}
-    </FormGroup>
+    </>
   );
 };

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

@@ -224,10 +224,10 @@ const NetworkConfiguration = ({
   );
 
   React.useEffect(() => {
-    if (!isViewerMode && isDualStack && !isUserManagedNetworking) {
+    if (!isViewerMode && isDualStack) {
       toggleAdvConfiguration(true);
     }
-  }, [isDualStack, isUserManagedNetworking, isViewerMode, toggleAdvConfiguration]);
+  }, [isDualStack, isViewerMode, toggleAdvConfiguration]);
 
   const managedNetworkingState = React.useMemo(
     () =>
@@ -292,6 +292,7 @@ const NetworkConfiguration = ({
               hostSubnets.length === 0 ||
               false
             }
+            openshiftVersion={cluster.openshiftVersion}
           />
         </StackItem>
       )}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
-import { Form, Grid, GridItem, Text, TextContent } from '@patternfly/react-core';
+import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
 import {
   ClusterWizardStep,
   ClusterWizardStepHeader,
@@ -92,7 +92,7 @@ const NetworkConfigurationForm: React.FC<{
           JSON.stringify(
             JSON.stringify({
               featureSet: 'CustomNoUpgrade',
-              featureGates: ['NoRegistryClusterOperations=true'],
+              featureGates: ['NoRegistryClusterInstall=true'],
             }),
           ),
         );
@@ -153,9 +153,7 @@ const NetworkConfigurationForm: React.FC<{
             </Grid>
           </GridItem>
           <GridItem>
-            <TextContent>
-              <Text component="h2">Host inventory</Text>
-            </TextContent>
+            <Content component="h2">Host inventory</Content>
             <NetworkConfigurationTable cluster={cluster} />
           </GridItem>
         </Grid>
@@ -202,8 +200,9 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
   );
 
   const memoizedValidationSchema = React.useMemo(
-    () => getNetworkConfigurationValidationSchema(initialValues, hostSubnets),
-    [hostSubnets, initialValues],
+    () =>
+      getNetworkConfigurationValidationSchema(initialValues, hostSubnets, cluster.openshiftVersion),
+    [hostSubnets, initialValues, cluster.openshiftVersion],
   );
 
   React.useEffect(() => {