diff --git a/libs/ui-lib-tests/cypress/integration/dualstack/2-networking.cy.ts b/libs/ui-lib-tests/cypress/integration/dualstack/2-networking.cy.ts index b3d530052a..81fc6e6c6f 100644 --- a/libs/ui-lib-tests/cypress/integration/dualstack/2-networking.cy.ts +++ b/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 }) => { diff --git a/libs/ui-lib-tests/cypress/views/networkingPage.ts b/libs/ui-lib-tests/cypress/views/networkingPage.ts index 5382c019a0..237b3261f0 100644 --- a/libs/ui-lib-tests/cypress/views/networkingPage.ts +++ b/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(':') 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 714f430230..2098a4aaaf 100644 --- a/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx +++ b/libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx @@ -35,32 +35,29 @@ 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(); 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 }) => ( @@ -68,11 +65,7 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro )); - const onSelect = ( - event?: React.MouseEvent, - value?: string | number, - ): void => { - setCurrentDisplayValue(value as string); + const onSelect = (event?: React.MouseEvent): void => { setValue(event?.currentTarget.id); setOpen(false); };