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()}>
+
+
+ )}
);