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

package/lib/common/components/clusterWizard/networkingSteps/StackTypeControlGroup.tsx

@@ -0,0 +1,350 @@
+import React from 'react';
+import { ButtonVariant, FormGroup, Split, SplitItem, Tooltip } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+import { Address4, Address6 } from 'ip-address';
+
+import { HostSubnets, NetworkConfigurationValues } from '../../../types';
+import { getFieldId } from '../../ui';
+import {
+  DUAL_STACK,
+  IPV4_STACK,
+  NETWORK_TYPE_OVN,
+  NETWORK_TYPE_SDN,
+  NO_SUBNET_SET,
+} from '../../../config';
+import { RadioField } from '../../ui/formik';
+import { ConfirmationModal, PopoverIcon } from '../../ui';
+import { reorderNetworksByCurrentPrimary } from './reorderNetworks';
+import {
+  Cluster,
+  ClusterDefaultConfig,
+  ClusterNetwork,
+  MachineNetwork,
+  ServiceNetwork,
+} from '@openshift-assisted/types/assisted-installer-service';
+
+export type StackTypeDefaultNetworkValues = Pick<
+  ClusterDefaultConfig,
+  | 'clusterNetworksDualstack'
+  | 'clusterNetworksIpv4'
+  | 'serviceNetworksDualstack'
+  | 'serviceNetworksIpv4'
+>;
+
+export type StackTypeControlGroupProps = {
+  clusterId: Cluster['id'];
+  isDualStackSelectable: boolean;
+  hostSubnets: HostSubnets;
+  defaultNetworkValues: StackTypeDefaultNetworkValues;
+  isViewerMode?: boolean;
+};
+
+const hasDualStackConfigurationChanged = (
+  clusterNetworks: ClusterNetwork[],
+  serviceNetworks: ServiceNetwork[],
+  cidrIPv6: MachineNetwork['cidr'],
+  values: NetworkConfigurationValues,
+) =>
+  clusterNetworks &&
+  serviceNetworks &&
+  ((values.machineNetworks?.[1] && values.machineNetworks[1].cidr !== cidrIPv6) ||
+    (values.clusterNetworks?.[1] && values.clusterNetworks[1].cidr !== clusterNetworks[1]?.cidr) ||
+    (values.clusterNetworks?.[1] &&
+      values.clusterNetworks[1].hostPrefix !== clusterNetworks[1]?.hostPrefix) ||
+    (values.serviceNetworks?.[1] && values.serviceNetworks[1].cidr !== serviceNetworks[1]?.cidr) ||
+    values.apiVips?.[1]?.ip ||
+    values.ingressVips?.[1]?.ip);
+
+export const StackTypeControlGroup = ({
+  clusterId,
+  isDualStackSelectable,
+  hostSubnets,
+  defaultNetworkValues,
+  isViewerMode = false,
+}: StackTypeControlGroupProps) => {
+  const { setFieldValue, values, validateForm } = useFormikContext<NetworkConfigurationValues>();
+  const [openConfirmModal, setConfirmModal] = React.useState(false);
+
+  const IPv6Subnets = hostSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
+  const cidrIPv6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
+  const shouldSetSingleStack =
+    !isViewerMode && !isDualStackSelectable && values.stackType === DUAL_STACK;
+
+  const setSingleStack = React.useCallback(() => {
+    setFieldValue('stackType', IPV4_STACK);
+
+    // Determine whether the first machine network is IPv4
+    const firstNetwork = values.machineNetworks?.[0];
+    const isFirstIPv4 = Boolean(firstNetwork?.cidr && Address4.isValid(firstNetwork.cidr));
+
+    if (values.machineNetworks && values.machineNetworks?.length >= 2) {
+      // For single-stack IPv4, prefer IPv4 machine network
+      if (isFirstIPv4) {
+        // Keep the first network if it's IPv4
+        setFieldValue('machineNetworks', [firstNetwork]);
+      } else {
+        // If first is IPv6, look for IPv4 network or set empty for auto-selection
+        const ipv4Network = values.machineNetworks.find(
+          (network) => network.cidr && Address4.isValid(network.cidr),
+        );
+        if (ipv4Network) {
+          setFieldValue('machineNetworks', [ipv4Network]);
+        } else {
+          // No IPv4 network found, set empty for auto-selection
+          setFieldValue('machineNetworks', []);
+        }
+      }
+    }
+    // Ensure single-stack inputs are IPv4 after switching from dual-stack
+    if (values.clusterNetworks && values.clusterNetworks.length >= 1) {
+      const defaultCluster =
+        defaultNetworkValues.clusterNetworksIpv4 && defaultNetworkValues.clusterNetworksIpv4[0];
+      const firstCluster = values.clusterNetworks[0];
+      const ipv4Cluster = defaultCluster
+        ? {
+            cidr: defaultCluster.cidr,
+            hostPrefix: defaultCluster.hostPrefix,
+            clusterId: firstCluster.clusterId, // ← Preserve clusterId from original network
+          }
+        : {
+            cidr: '',
+            hostPrefix: '',
+            clusterId: clusterId, // ← Use current clusterId
+          };
+      setFieldValue('clusterNetworks', [ipv4Cluster]);
+    }
+    if (values.serviceNetworks && values.serviceNetworks.length >= 1) {
+      const defaultService =
+        defaultNetworkValues.serviceNetworksIpv4 && defaultNetworkValues.serviceNetworksIpv4[0];
+      const firstService = values.serviceNetworks[0];
+      const ipv4Service = defaultService
+        ? {
+            cidr: defaultService.cidr,
+            clusterId: firstService.clusterId, // ← Preserve clusterId from original network
+          }
+        : {
+            cidr: '',
+            clusterId: clusterId, // ← Use current clusterId
+          };
+      setFieldValue('serviceNetworks', [ipv4Service]);
+    }
+
+    // Keep only IPv4 VIPs when switching to single-stack (unless DHCP allocation is used)
+    if (!values.vipDhcpAllocation) {
+      const pruneVips = (
+        vips?: { ip?: string; clusterId?: Cluster['id'] }[],
+      ): { ip: string; clusterId: Cluster['id'] }[] => {
+        if (!vips || vips.length === 0) return [];
+        // Choose which index to keep based on whether the first network is IPv4
+        const keepIndex = isFirstIPv4 ? 0 : 1;
+        const chosen = vips[keepIndex];
+        return chosen && chosen.ip
+          ? [{ ip: chosen.ip, clusterId: chosen.clusterId || clusterId }]
+          : [];
+      };
+
+      setFieldValue('apiVips', pruneVips(values.apiVips));
+      setFieldValue('ingressVips', pruneVips(values.ingressVips));
+    }
+
+    void validateForm();
+  }, [
+    setFieldValue,
+    validateForm,
+    clusterId,
+    defaultNetworkValues.clusterNetworksIpv4,
+    defaultNetworkValues.serviceNetworksIpv4,
+    values.clusterNetworks,
+    values.machineNetworks,
+    values.serviceNetworks,
+    values.apiVips,
+    values.ingressVips,
+    values.vipDhcpAllocation,
+  ]);
+
+  const setDualStack = () => {
+    setFieldValue('stackType', DUAL_STACK);
+    setFieldValue('vipDhcpAllocation', false);
+
+    if (values.networkType === NETWORK_TYPE_SDN) {
+      setFieldValue('networkType', NETWORK_TYPE_OVN);
+    }
+
+    if (values.machineNetworks && values.machineNetworks?.length < 2) {
+      // Ensure IPv4 is primary when switching to dual-stack
+      const firstNetwork = values.machineNetworks[0];
+      const isFirstIPv6 = firstNetwork?.cidr && Address6.isValid(firstNetwork.cidr);
+
+      if (isFirstIPv6) {
+        // If first network is IPv6, make IPv4 primary and IPv6 secondary
+        const IPv4Subnets = hostSubnets.filter((subnet) => Address4.isValid(subnet.subnet));
+        const cidrIPv4 = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
+        setFieldValue(
+          'machineNetworks',
+          [
+            { cidr: cidrIPv4, clusterId: clusterId },
+            { cidr: firstNetwork.cidr, clusterId: clusterId },
+          ],
+          false,
+        );
+      } else {
+        // If first network is IPv4, add IPv6 as secondary
+        setFieldValue(
+          'machineNetworks',
+          [...values.machineNetworks, { cidr: cidrIPv6, clusterId: clusterId }],
+          false,
+        );
+      }
+    }
+    if (values.clusterNetworks && values.clusterNetworks?.length < 2) {
+      setFieldValue(
+        'clusterNetworks',
+        [
+          ...values.clusterNetworks,
+          defaultNetworkValues.clusterNetworksDualstack?.length
+            ? defaultNetworkValues.clusterNetworksDualstack[1]
+            : { cidr: '', hostPrefix: '', clusterId: clusterId },
+        ],
+        false,
+      );
+    }
+    if (values.serviceNetworks && values.serviceNetworks?.length < 2) {
+      setFieldValue(
+        'serviceNetworks',
+        [
+          ...values.serviceNetworks,
+          defaultNetworkValues.serviceNetworksDualstack?.length
+            ? defaultNetworkValues.serviceNetworksDualstack[1]
+            : { cidr: '', clusterId: clusterId },
+        ],
+        false,
+      );
+    }
+    // Initialize VIPs for dual-stack
+    if (values.apiVips && values.apiVips.length < 2) {
+      setFieldValue(
+        'apiVips',
+        [values.apiVips[0] || { ip: '', clusterId: clusterId }, { ip: '', clusterId: clusterId }],
+        false,
+      );
+    }
+    if (values.ingressVips && values.ingressVips.length < 2) {
+      setFieldValue(
+        'ingressVips',
+        [
+          values.ingressVips[0] || { ip: '', clusterId: clusterId },
+          { ip: '', clusterId: clusterId },
+        ],
+        false,
+      );
+    }
+  };
+  // Ensure cluster/service networks ordering matches the new primary family
+  const primaryCidr = values.machineNetworks?.[0]?.cidr;
+  React.useEffect(() => {
+    if (isViewerMode) {
+      return;
+    }
+    reorderNetworksByCurrentPrimary(values, setFieldValue);
+  }, [
+    isViewerMode,
+    setFieldValue,
+    values,
+    values.stackType,
+    primaryCidr,
+    values.clusterNetworks,
+    values.serviceNetworks,
+  ]);
+
+  const setStackType = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === DUAL_STACK) {
+      setDualStack();
+    } else if (
+      hasDualStackConfigurationChanged(
+        defaultNetworkValues.clusterNetworksDualstack || [],
+        defaultNetworkValues.serviceNetworksDualstack || [],
+        cidrIPv6,
+        values,
+      )
+    ) {
+      setConfirmModal(true);
+    } else {
+      setSingleStack();
+    }
+  };
+
+  React.useEffect(() => {
+    if (shouldSetSingleStack) {
+      setSingleStack();
+    }
+  }, [shouldSetSingleStack, setSingleStack]);
+
+  return (
+    <>
+      <FormGroup
+        label="Networking stack type"
+        fieldId={getFieldId('stackType', 'radio')}
+        onChange={setStackType}
+        isInline
+      >
+        <Split>
+          <SplitItem>
+            <RadioField
+              name={'stackType'}
+              value={IPV4_STACK}
+              isDisabled={!isDualStackSelectable || isViewerMode}
+              label="IPv4&nbsp;"
+            />
+          </SplitItem>
+          <SplitItem>
+            <PopoverIcon
+              bodyContent="Select this when your hosts are using only IPv4."
+              buttonStyle={{ top: '-4px' }}
+            />
+          </SplitItem>
+        </Split>
+        <Split>
+          <SplitItem>
+            <Tooltip
+              content={
+                'Dual-stack is only available when your hosts are using IPV4 together with IPV6.'
+              }
+              hidden={isDualStackSelectable}
+            >
+              <RadioField
+                name={'stackType'}
+                value={DUAL_STACK}
+                isDisabled={!isDualStackSelectable || isViewerMode}
+                label="Dual-stack&nbsp;"
+              />
+            </Tooltip>
+          </SplitItem>
+          <SplitItem>
+            <PopoverIcon
+              bodyContent="Select dual-stack when your hosts are using IPV4 together with IPV6."
+              buttonStyle={{ top: '-4px' }}
+            />
+          </SplitItem>
+        </Split>
+      </FormGroup>
+
+      {openConfirmModal && (
+        <ConfirmationModal
+          title={'Change stack type?'}
+          titleIconVariant={'warning'}
+          confirmationButtonText={'Change'}
+          confirmationButtonVariant={ButtonVariant.primary}
+          content={<p>All data and configuration done for 'Dual-stack' will be lost.</p>}
+          onClose={() => {
+            setConfirmModal(false);
+            setDualStack();
+          }}
+          onConfirm={() => {
+            setConfirmModal(false);
+            setSingleStack();
+          }}
+        />
+      )}
+    </>
+  );
+};

package/lib/common/components/clusterWizard/networkingSteps/SubnetsDropdown.tsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownGroup,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleProps,
+  Divider,
+} from '@patternfly/react-core';
+import { useField } from 'formik';
+import { Address4, Address6 } from 'ip-address';
+import { getFieldId } from '../../ui';
+import { HostSubnet } from '../../../types';
+import { NO_SUBNET_SET } from '../../../config';
+import { TechnologyPreview, PreviewBadgePosition } from '../../ui';
+
+type SubnetsDropdownProps = {
+  name: string;
+  machineSubnets: HostSubnet[];
+  isDisabled: boolean;
+  onAfterSelect?: (selectedValue: string) => void;
+};
+
+const toFormSelectOptions = (subnets: HostSubnet[]) => {
+  return subnets.map((hn, index) => ({
+    label: `${hn.humanized}${hn.isValid ? '' : ' (Invalid network)'}`,
+    value: hn.subnet,
+    isDisabled: false,
+    id: `form-input-hostSubnet-field-option-${index}`,
+  }));
+};
+
+const makeNoSubnetSelectedOption = (availableSubnets: number) => ({
+  label: `Please select a subnet. (${availableSubnets} available)`,
+  value: NO_SUBNET_SET,
+  isDisabled: true,
+  id: 'form-input-hostSubnet-field-option-no-subnet-selected',
+});
+
+const noSubnetAvailableOption = {
+  label: 'No subnets are currently available',
+  value: NO_SUBNET_SET,
+  isDisabled: true,
+  id: 'form-input-hostSubnet-field-option-no-subnet-available',
+};
+
+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, ipv4Subnets, ipv6Subnets, currentDisplayValue } = React.useMemo(() => {
+    const itemsSubnets =
+      machineSubnets.length === 0
+        ? [noSubnetAvailableOption]
+        : [makeNoSubnetSelectedOption(machineSubnets.length)].concat(
+            toFormSelectOptions(machineSubnets),
+          );
+
+    // 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) {
+        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;
+    }
+
+    return { itemsSubnets, ipv4Subnets, ipv6Subnets, currentDisplayValue: currentDisplayValue };
+  }, [machineSubnets, field.value]);
+
+  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 => {
+    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}
+      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>
+  );
+
+  return (
+    <Dropdown
+      {...field}
+      id={`${fieldId}-dropdown`}
+      onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
+      onSelect={onSelect}
+      toggle={toggle}
+      isOpen={isOpen}
+    >
+      {dropdownItems}
+    </Dropdown>
+  );
+};

package/lib/common/components/clusterWizard/networkingSteps/UserManagedNetworkingTextContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
+import { List, ListItem, Content } from '@patternfly/react-core';
 import { RenderIf, ExternalLink } from '../../ui';
 import { getOpenShiftNetworkingDocsLink } from '../../../config';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
@@ -16,8 +16,8 @@ export const UserManagedNetworkingTextContent = ({
 }: UserManagedNetworkingTextContentProps) => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component={'p'}>
+    <>
+      <Content component={'p'}>
         <Trans t={t}>
           ai:Please refer to the{' '}
           <ExternalLink href={getOpenShiftNetworkingDocsLink(docVersion)}>
@@ -25,7 +25,7 @@ export const UserManagedNetworkingTextContent = ({
           </ExternalLink>{' '}
           to configure your cluster's networking, including:
         </Trans>
-      </Text>
+      </Content>
       <List>
         <ListItem>{t('ai:DHCP or static IP Addresses')}</ListItem>
         <RenderIf condition={shouldDisplayLoadBalancersBullet}>
@@ -34,6 +34,6 @@ export const UserManagedNetworkingTextContent = ({
         <ListItem>{t('ai:Network ports')}</ListItem>
         <ListItem>{t('ai:DNS')}</ListItem>
       </List>
-    </TextContent>
+    </>
   );
 };