@openshift-assisted/ui-lib 2.16.5-cim → 2.17.0-cim

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

@@ -1,12 +1,28 @@
 import React from 'react';
-import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownGroup,
+  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 = {
   name: string;
   machineSubnets: HostSubnet[];
   isDisabled: boolean;
+  onAfterSelect?: (selectedValue: string) => void;
 };
 
 const toFormSelectOptions = (subnets: HostSubnet[]) => {
@@ -32,12 +48,18 @@ const noSubnetAvailableOption = {
   id: 'form-input-hostSubnet-field-option-no-subnet-available',
 };
 
-export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDropdownProps) => {
+export const SubnetsDropdown = ({
+  name,
+  machineSubnets,
+  isDisabled,
+  onAfterSelect,
+  ...props
+}: SubnetsDropdownProps & MenuToggleProps) => {
   const [field, , { setValue }] = useField(name);
   const [isOpen, setOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const { itemsSubnets, currentDisplayValue } = React.useMemo(() => {
+  const { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue } = React.useMemo(() => {
     const itemsSubnets =
       machineSubnets.length === 0
         ? [noSubnetAvailableOption]
@@ -45,7 +67,12 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
             toFormSelectOptions(machineSubnets),
           );
 
-    let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
+    // Separate IPv4 and IPv6 subnets
+    const ipv4Subnets = machineSubnets.filter((subnet) => Address4.isValid(subnet.subnet));
+    const ipv6Subnets = machineSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
+
+    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) {
@@ -56,30 +83,98 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
       currentDisplayValue = itemsSubnets[1].label;
     }
 
-    return { itemsSubnets, currentDisplayValue: currentDisplayValue };
+    return { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue: currentDisplayValue };
   }, [machineSubnets, field.value]);
 
-  const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
-    <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
-      {label}
-    </DropdownItem>
-  ));
+  const dropdownItems = React.useMemo(() => {
+    if (machineSubnets.length === 0) {
+      return [
+        <DropdownItem
+          key={noSubnetAvailableOption.value}
+          id={noSubnetAvailableOption.value}
+          isDisabled={noSubnetAvailableOption.isDisabled}
+          value={noSubnetAvailableOption.value}
+        >
+          {noSubnetAvailableOption.label}
+        </DropdownItem>,
+      ];
+    }
+
+    const hasIpv4 = ipv4Subnets.length > 0;
+    const hasIpv6 = ipv6Subnets.length > 0;
+
+    // If we have both IPv4 and IPv6, group them
+    if (hasIpv4 && hasIpv6) {
+      const ipv4Items = toFormSelectOptions(ipv4Subnets).map(({ value, label, isDisabled }) => (
+        <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+          {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}
+        </DropdownItem>
+      ));
+
+      return [
+        <DropdownItem
+          key={makeNoSubnetSelectedOption(machineSubnets.length).value}
+          id={makeNoSubnetSelectedOption(machineSubnets.length).value}
+          isDisabled={makeNoSubnetSelectedOption(machineSubnets.length).isDisabled}
+          value={makeNoSubnetSelectedOption(machineSubnets.length).value}
+        >
+          {makeNoSubnetSelectedOption(machineSubnets.length).label}
+        </DropdownItem>,
+        <DropdownGroup label="IPv4" key="ipv4-group">
+          {ipv4Items}
+        </DropdownGroup>,
+        <DropdownGroup label="IPv6 (Technology Preview)" key="ipv6-group">
+          {ipv6Items}
+        </DropdownGroup>,
+      ];
+    }
+
+    // If only one type, don't group
+    return itemsSubnets.map(({ value, label, isDisabled }) => (
+      <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
+        {label}
+      </DropdownItem>
+    ));
+  }, [machineSubnets, ipv4Subnets, ipv6Subnets, itemsSubnets]);
 
   const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
-    setValue(event?.currentTarget.id);
+    const nextValue = event?.currentTarget.id;
+    setValue(nextValue);
     setOpen(false);
+    if (onAfterSelect && nextValue) {
+      onAfterSelect(nextValue);
+    }
   };
 
+  const currentItem = itemsSubnets.find((i) => i.label === currentDisplayValue);
+  const isPrimaryMachineNetwork = name === 'machineNetworks.0.cidr';
+  const showBadge = Boolean(
+    isPrimaryMachineNetwork && currentItem && Address6.isValid(currentItem.value),
+  );
+
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
       isDisabled={isDisabled}
-      className="pf-v5-u-w-100"
       id={fieldId}
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '100%' }}
+      {...props}
     >
       {currentDisplayValue}
+      {showBadge && (
+        <span onClick={(e) => e.stopPropagation()}>
+          <TechnologyPreview position={PreviewBadgePosition.inlineRight} />
+        </span>
+      )}
     </MenuToggle>
   );
 
@@ -87,7 +182,7 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
     <Dropdown
       {...field}
       id={`${fieldId}-dropdown`}
-      onOpenChange={() => setOpen(!isOpen)}
+      onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
       onSelect={onSelect}
       toggle={toggle}
       isOpen={isOpen}

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

@@ -14,9 +14,9 @@ import {
   NetworkConfigurationValues,
   FormikStaticField,
   NETWORK_TYPE_SDN,
+  DUAL_STACK,
   selectMachineNetworkCIDR,
   getVipValidationsById,
-  DUAL_STACK,
   PopoverIcon,
   selectApiVip,
   selectIngressVip,
@@ -25,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;
@@ -61,7 +66,7 @@ const VipStaticValue = ({
   if (vipDhcpAllocation && machineNetworkCidr) {
     return (
       <>
-        <Spinner size="md" id={`${id}-allocating`} />
+        <Spinner size="md" id={`${id}-allocating`} data-testid={`vip-static-${id}-value-spinner`} />
         <i> This IP is being allocated by the DHCP server</i>
       </>
     );
@@ -97,6 +102,7 @@ export const VirtualIPControlGroup = ({
   );
 
   const enableAllocation = values.networkType === NETWORK_TYPE_SDN;
+  const isDualStack = values.stackType === DUAL_STACK;
 
   React.useEffect(() => {
     if (!isViewerMode && !enableAllocation) {
@@ -113,11 +119,22 @@ 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);
   };
 
-  const ipFieldsSuffix = values.stackType === DUAL_STACK ? ' (IPv4)' : '';
   return (
     <>
       {!isVipDhcpAllocationDisabled && (
@@ -145,7 +162,7 @@ export const VirtualIPControlGroup = ({
           <FormikStaticField
             label={
               <>
-                <span>API IP{ipFieldsSuffix}</span> <PopoverIcon bodyContent={ipPopoverContent} />
+                <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
               </>
             }
             name="apiVip"
@@ -164,8 +181,7 @@ export const VirtualIPControlGroup = ({
           <FormikStaticField
             label={
               <>
-                <span>Ingress IP{ipFieldsSuffix}</span>{' '}
-                <PopoverIcon bodyContent={ipPopoverContent} />
+                <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
               </>
             }
             name="ingressVip"
@@ -191,34 +207,72 @@ export const VirtualIPControlGroup = ({
                   <OcmInputField
                     label={
                       <>
-                        <span>API IP{ipFieldsSuffix}</span>{' '}
-                        <PopoverIcon bodyContent={ipPopoverContent} />
+                        <span>API IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
                       </>
                     }
                     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}
+                      labelInfo={'Secondary'}
+                      onChange={(e) =>
+                        setVipValueAtIndex('apiVips', 1, e as React.ChangeEvent<HTMLInputElement>)
+                      }
+                    />
+                  </StackItem>
+                )}
                 <StackItem>
                   <OcmInputField
                     name="ingressVips.0.ip"
                     label={
                       <>
-                        <span>Ingress IP{ipFieldsSuffix}</span>{' '}
-                        <PopoverIcon bodyContent={ipPopoverContent} />
+                        <span>Ingress IP</span> <PopoverIcon bodyContent={ipPopoverContent} />
                       </>
                     }
                     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}
+                      labelInfo={'Secondary'}
+                      onChange={(e) =>
+                        setVipValueAtIndex(
+                          'ingressVips',
+                          1,
+                          e as React.ChangeEvent<HTMLInputElement>,
+                        )
+                      }
+                    />
+                  </StackItem>
+                )}
               </Stack>
             )}
           </FieldArray>

package/lib/ocm/components/clusterConfiguration/networkConfiguration/networkConfigurationValidation.ts

@@ -9,7 +9,7 @@ import {
   NetworkConfigurationValues,
   serviceNetworkValidationSchema,
   IPv4ValidationSchema,
-  sshPublicKeyListValidationSchema,
+  sshPublicKeyValidationSchema,
   IPV4_STACK,
   DUAL_STACK,
   vipArrayValidationSchema,
@@ -54,18 +54,25 @@ export const getNetworkInitialValues = (
       cluster.clusterNetworks ||
       (isDualStackType
         ? defaultNetworkValues.clusterNetworksDualstack
-        : defaultNetworkValues.clusterNetworksIpv4),
+        : defaultNetworkValues.clusterNetworksIpv4?.map((network) => ({
+            ...network,
+            clusterId: cluster.id,
+          }))),
     serviceNetworks:
       cluster.serviceNetworks ||
       (isDualStackType
         ? defaultNetworkValues.serviceNetworksDualstack
-        : defaultNetworkValues.serviceNetworksIpv4),
+        : defaultNetworkValues.serviceNetworksIpv4?.map((network) => ({
+            ...network,
+            clusterId: cluster.id,
+          }))),
   };
 };
 
 export const getNetworkConfigurationValidationSchema = (
   initialValues: NetworkConfigurationValues,
   hostSubnets: HostSubnets,
+  openshiftVersion?: string,
 ) =>
   Yup.lazy((values: NetworkConfigurationValues) =>
     Yup.object<NetworkConfigurationValues>().shape({
@@ -75,7 +82,7 @@ export const getNetworkConfigurationValidationSchema = (
         values,
         initialValues.ingressVips,
       ),
-      sshPublicKey: sshPublicKeyListValidationSchema,
+      sshPublicKey: sshPublicKeyValidationSchema,
       machineNetworks:
         values.managedNetworkingType === 'userManaged'
           ? Yup.array()
@@ -85,7 +92,7 @@ export const getNetworkConfigurationValidationSchema = (
               otherwise: () =>
                 values.machineNetworks && values.machineNetworks?.length >= 2
                   ? machineNetworksValidationSchema.concat(
-                      dualStackValidationSchema('machine networks'),
+                      dualStackValidationSchema('machine networks', openshiftVersion),
                     )
                   : Yup.array(),
             }),
@@ -94,7 +101,9 @@ export const getNetworkConfigurationValidationSchema = (
         then: () => clusterNetworksValidationSchema.concat(IPv4ValidationSchema),
         otherwise: () =>
           values.clusterNetworks && values.clusterNetworks?.length >= 2
-            ? clusterNetworksValidationSchema.concat(dualStackValidationSchema('cluster network'))
+            ? clusterNetworksValidationSchema.concat(
+                dualStackValidationSchema('cluster network', openshiftVersion),
+              )
             : Yup.array(),
       }),
       serviceNetworks: serviceNetworkValidationSchema.when('stackType', {
@@ -102,7 +111,9 @@ export const getNetworkConfigurationValidationSchema = (
         then: () => serviceNetworkValidationSchema.concat(IPv4ValidationSchema),
         otherwise: () =>
           values.serviceNetworks && values.serviceNetworks?.length >= 2
-            ? serviceNetworkValidationSchema.concat(dualStackValidationSchema('service network'))
+            ? serviceNetworkValidationSchema.concat(
+                dualStackValidationSchema('service network', openshiftVersion),
+              )
             : Yup.array(),
       }),
     }),

package/lib/ocm/components/clusterConfiguration/networkConfiguration/reorderNetworks.ts

@@ -0,0 +1,72 @@
+import { Address6 } from 'ip-address';
+import { DUAL_STACK, NetworkConfigurationValues } from '../../../../common';
+import type { FormikHelpers } from 'formik';
+
+const reorderByPrimaryCidr = (
+  primaryCidr: string,
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  const isDualStack = values.stackType === DUAL_STACK;
+  if (!isDualStack || !primaryCidr) return;
+
+  const isPrimaryIPv6 = Address6.isValid(primaryCidr);
+
+  // Reorder Cluster Networks
+  if (Array.isArray(values.clusterNetworks) && values.clusterNetworks.length >= 2) {
+    const [first, second] = values.clusterNetworks;
+    const firstClusterCidr = first?.cidr;
+    const secondClusterCidr = second?.cidr;
+    if (firstClusterCidr && secondClusterCidr) {
+      const isFirstClusterIPv6 = Address6.isValid(firstClusterCidr);
+      const isSecondClusterIPv6 = Address6.isValid(secondClusterCidr);
+      if (isFirstClusterIPv6 !== isSecondClusterIPv6) {
+        if (
+          (isPrimaryIPv6 && !isFirstClusterIPv6 && isSecondClusterIPv6) ||
+          (!isPrimaryIPv6 && isFirstClusterIPv6 && !isSecondClusterIPv6)
+        ) {
+          const reordered = [values.clusterNetworks[1], values.clusterNetworks[0]];
+          setFieldValue('clusterNetworks', reordered, false);
+        }
+      }
+    }
+  }
+
+  // Reorder Service Networks
+  if (Array.isArray(values.serviceNetworks) && values.serviceNetworks.length >= 2) {
+    const [first, second] = values.serviceNetworks;
+    const firstServiceCidr = first?.cidr;
+    const secondServiceCidr = second?.cidr;
+    if (firstServiceCidr && secondServiceCidr) {
+      const isFirstServiceIPv6 = Address6.isValid(firstServiceCidr);
+      const isSecondServiceIPv6 = Address6.isValid(secondServiceCidr);
+      if (isFirstServiceIPv6 !== isSecondServiceIPv6) {
+        if (
+          (isPrimaryIPv6 && !isFirstServiceIPv6 && isSecondServiceIPv6) ||
+          (!isPrimaryIPv6 && isFirstServiceIPv6 && !isSecondServiceIPv6)
+        ) {
+          const reordered = [values.serviceNetworks[1], values.serviceNetworks[0]];
+          setFieldValue('serviceNetworks', reordered, false);
+        }
+      }
+    }
+  }
+};
+
+export const reorderNetworksForPrimary = (
+  nextPrimaryCidr: string,
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  if (!nextPrimaryCidr) return;
+  reorderByPrimaryCidr(nextPrimaryCidr, values, setFieldValue);
+};
+
+export const reorderNetworksByCurrentPrimary = (
+  values: NetworkConfigurationValues,
+  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
+) => {
+  const primaryCidr = values.machineNetworks?.[0]?.cidr;
+  if (!primaryCidr) return;
+  reorderByPrimaryCidr(primaryCidr, values, setFieldValue);
+};

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

@@ -198,7 +198,7 @@ const OperatorCheckbox = ({
         description={
           !!Description && (
             <HelperText>
-              <HelperTextItem variant="indeterminate">
+              <HelperTextItem data-testid={`operator-checkbox-description-${operatorId}`}>
                 <Description openshiftVersion={openshiftVersion} searchTerm={searchTerm} />
               </HelperTextItem>
             </HelperText>

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { List, ListItem } from '@patternfly/react-core';
 
 export type BundleSpec = {
-  noSNO?: boolean;
   incompatibleBundles?: string[];
   Description: React.ComponentType;
   docsLink?: string;
@@ -10,7 +9,6 @@ export type BundleSpec = {
 
 export const bundleSpecs: { [key: string]: BundleSpec } = {
   virtualization: {
-    noSNO: true,
     Description: () => (
       <List>
         <ListItem>
@@ -29,7 +27,6 @@ export const bundleSpecs: { [key: string]: BundleSpec } = {
     ),
   },
   'openshift-ai': {
-    noSNO: true,
     incompatibleBundles: [],
     Description: () => (
       <List>

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

@@ -40,13 +40,17 @@ export const getNewOperators = (
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);
-  // uncheck unneeded not-standalone dependencies too
   const notStandaloneDeps = dependencies
     .filter((dep) => opSpecs[dep]?.notStandalone)
-    .filter((dep) =>
-      // some other operator may still depend on the not-standalone operator
-      newOperators.every((op) => !getOperatorDependencies(op, preflightRequirements).includes(dep)),
-    );
+    .filter((dep) => {
+      const hasDependency = newOperators.some((op) =>
+        getOperatorDependencies(op, preflightRequirements).includes(dep),
+      );
+      if (!hasDependency) {
+        newOperators.splice(newOperators.indexOf(dep), 1);
+      }
+      return !hasDependency;
+    });
 
   return currentOperators.filter((op) => op !== operatorId && !notStandaloneDeps.includes(op));
 };
@@ -59,7 +63,7 @@ const getBundleOperators = (
   bundle.operators?.forEach((op) => {
     getOperatorDependencies(op, preflightRequirements).forEach((dep) => bundleOperators.add(dep));
   });
-  return [...bundleOperators];
+  return Array.from(bundleOperators);
 };
 
 export const getNewBundleOperators = (
@@ -73,7 +77,8 @@ export const getNewBundleOperators = (
   const newBundleOperators = getBundleOperators(newBundle, preflightRequirements);
 
   if (add) {
-    return [...new Set([...currentOperators, ...newBundleOperators])];
+    const combined = [...currentOperators, ...newBundleOperators];
+    return Array.from(new Set(combined));
   }
 
   const newBundles = currentBundles.filter((b) => b !== newBundle.id);

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

@@ -11,6 +11,9 @@ import {
   MenuToggle,
   MenuToggleElement,
   DropdownList,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
 import { useField } from 'formik';
 import {
@@ -19,6 +22,8 @@ import {
   SupportedCpuArchitecture,
   architectureData,
   getFieldId,
+  ExternalLink,
+  VSPHERE_LIMITATIONS_LINK,
 } from '../../../../common';
 import { ExternalPlaformIds, ExternalPlatformLabels, ExternalPlatformLinks } from './constants';
 import { PlatformType, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
@@ -245,44 +250,59 @@ export const ExternalPlatformDropdown = ({
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
       ref={toggleRef}
       onClick={() => setOpen(!isOpen)}
       isDisabled={dropdownIsDisabled}
       isExpanded={isOpen}
+      data-testid="external-platform-dropdown-toggle"
     >
       {externalPlatformTypes[field.value as PlatformType]?.label}
     </MenuToggle>
   );
 
   return (
-    <FormGroup
-      id={`form-control__${fieldId}`}
-      fieldId={fieldId}
-      label={'Integrate with external partner platforms'}
-    >
-      <Tooltip
-        content={tooltipDropdownDisabled}
-        hidden={!dropdownIsDisabled}
-        position="top"
-        distance={7}
+    <>
+      <FormGroup
+        id={`form-control__${fieldId}`}
+        fieldId={fieldId}
+        label={'Integrate with external partner platforms'}
       >
-        <Dropdown
-          id={`${fieldId}-dropdown`}
-          toggle={toggle}
-          isOpen={isOpen}
-          onOpenChange={() => setOpen(!isOpen)}
-          onSelect={(event) => {
-            const selectedPlatform = event?.currentTarget.id as PlatformType;
-            setValue(selectedPlatform);
-            setOpen(false);
-            onChange(selectedPlatform);
-          }}
-          shouldFocusToggleOnSelect
+        <Tooltip
+          content={tooltipDropdownDisabled}
+          hidden={!dropdownIsDisabled}
+          position="top"
+          distance={7}
         >
-          <DropdownList>{enabledItems}</DropdownList>
-        </Dropdown>
-      </Tooltip>
-    </FormGroup>
+          <Dropdown
+            id={`${fieldId}-dropdown`}
+            toggle={toggle}
+            isOpen={isOpen}
+            onOpenChange={() => setOpen(!isOpen)}
+            onSelect={(event) => {
+              const selectedPlatform = event?.currentTarget.id as PlatformType;
+              setValue(selectedPlatform);
+              setOpen(false);
+              onChange(selectedPlatform);
+            }}
+            shouldFocusToggleOnSelect
+          >
+            <DropdownList>{enabledItems}</DropdownList>
+          </Dropdown>
+        </Tooltip>
+      </FormGroup>
+      {field.value === 'vsphere' && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              <ExternalLink href={VSPHERE_LIMITATIONS_LINK}>
+                Learn more about vSphere limitations
+              </ExternalLink>
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </>
   );
 };