MGMT-20895: Use humanized label for displaying the selected subnet

libs/ui-lib-tests/cypress/integration/dualstack/2-networking.cy.ts

@@ -27,6 +27,9 @@ describe(`Assisted Installer Dualstack Networking`, () => {
       networkingPage.getClusterManagedNetworking().should('be.enabled').and('be.checked');
       networkingPage.getVipDhcp().should('be.enabled').and('not.be.checked');
       networkingPage.getAdvancedNetwork().should('be.enabled').and('not.be.checked');
+      networkingPage
+        .getClusterSubnetCidrIpv4()
+        .should('contain.text', '192.168.122.0/24 (192.168.122.0 - 192.168.122.255)');
     });
 
     it('Can switch to dual-stack', () => {
@@ -38,6 +41,12 @@ describe(`Assisted Installer Dualstack Networking`, () => {
       networkingPage.getVipDhcp().should('be.disabled').and('not.be.checked');
       networkingPage.getOvnNetworkingField().should('not.be.enabled').and('be.checked');
       networkingPage.getSdnNetworkingField().should('not.be.enabled').and('not.be.checked');
+      networkingPage
+        .getClusterSubnetCidrIpv4()
+        .should('contain.text', '192.168.122.0/24 (192.168.122.0 - 192.168.122.255)');
+      networkingPage
+        .getClusterSubnetCidrIpv6()
+        .should('contain.text', '1001:db9::/120 (1001:db9:: - 1001:db9::ff)');
       networkingPage.waitForNetworkStatusToNotContain('Some validations failed');
 
       cy.wait('@update-cluster').then(({ request }) => {

libs/ui-lib-tests/cypress/views/networkingPage.ts

@@ -24,6 +24,12 @@ export const networkingPage = {
         cy.get(Cypress.env('hostSubnetFieldId')).select(text);
       });
   },
+  getClusterSubnetCidrIpv4: () => {
+    return cy.get('#form-input-machineNetworks-0-cidr-field');
+  },
+  getClusterSubnetCidrIpv6: () => {
+    return cy.get('#form-input-machineNetworks-1-cidr-field');
+  },
   setClusterSubnetCidrIpv6: () => {
     cy.get('#form-input-machineNetworks-1-cidr-field')
       .contains(':')

libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -35,44 +35,37 @@ const noSubnetAvailableOption = {
 export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDropdownProps) => {
   const [field, , { setValue }] = useField(name);
   const [isOpen, setOpen] = React.useState(false);
-  const [currentDisplayValue, setCurrentDisplayValue] = React.useState<string | undefined>();
   const fieldId = getFieldId(name, 'input');
 
-  const itemsSubnets = React.useMemo(() => {
-    return machineSubnets.length === 0
-      ? [noSubnetAvailableOption]
-      : [makeNoSubnetSelectedOption(machineSubnets.length)].concat(
-          toFormSelectOptions(machineSubnets),
-        );
-  }, [machineSubnets]);
+  const { itemsSubnets, currentDisplayValue } = React.useMemo(() => {
+    const itemsSubnets =
+      machineSubnets.length === 0
+        ? [noSubnetAvailableOption]
+        : [makeNoSubnetSelectedOption(machineSubnets.length)].concat(
+            toFormSelectOptions(machineSubnets),
+          );
 
-  React.useEffect(() => {
+    let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
     if (field.value) {
-      // If the field already has a value then it must have been assigned from one of the entries in the `itemsSubnets`
       const subnetItem = itemsSubnets.find((item) => item.value === field.value);
-      setCurrentDisplayValue(subnetItem?.label ?? itemsSubnets[0].label);
-    } else {
-      // When `itemsSubnets.length === 2`, there is a placeholder at index 0 and only one subnet at index 1.
-      // In all the other cases the user should see the placeholder saying that either there is no subnet available
-      // or there is more than one option they can choose from.
-      const defaultValue =
-        itemsSubnets.length === 2 ? itemsSubnets[1].label : itemsSubnets[0].label;
-      setCurrentDisplayValue(defaultValue);
+      if (subnetItem) {
+        currentDisplayValue = subnetItem.label;
+      }
+    } else if (machineSubnets.length === 1) {
+      // When there is only one subnet, it's selected by default. We skip the placeholder at index 0.
+      currentDisplayValue = itemsSubnets[1].label;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+    return { itemsSubnets, currentDisplayValue: currentDisplayValue };
+  }, [machineSubnets, field.value]);
 
   const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
     <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
       {label}
     </DropdownItem>
   ));
 
-  const onSelect = (
-    event?: React.MouseEvent<Element, MouseEvent>,
-    value?: string | number,
-  ): void => {
-    setCurrentDisplayValue(value as string);
+  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
     setValue(event?.currentTarget.id);
     setOpen(false);
   };