diff --git a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx b/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx index 6ef2392dbc..fe1626430b 100644 --- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx +++ b/libs/ui-lib/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} )); - + ipv4Items.push(); const ipv6Items = toFormSelectOptions(ipv6Subnets).map(({ value, label, isDisabled }) => ( {label} @@ -119,7 +127,7 @@ export const SubnetsDropdown = ({ {ipv4Items} , - + {ipv6Items} , ]; @@ -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) => ( {currentDisplayValue} + {showBadge && ( + e.stopPropagation()}> + + + )} );