@openshift-assisted/ui-lib 2.13.0-cim → 2.14.1-cim

package/lib/ocm/components/clusterConfiguration/staticIp/commonValidationSchemas.tsx

@@ -16,23 +16,30 @@ export type UniqueStringArrayExtractor<FormValues> = (
 export const getUniqueValidationSchema = <FormValues,>(
   uniqueStringArrayExtractor: UniqueStringArrayExtractor<FormValues>,
 ) => {
-  return Yup.string().test('unique', 'Value must be unique', function (value: string) {
-    const context = this.options.context as Yup.TestContext & { values?: FormValues };
-    if (!context || !context.values) {
-      return this.createError({
-        message: 'Unexpected error: Yup test context should contain form values',
-      });
-    }
+  return Yup.string().test(
+    'unique',
+    'Value must be unique',
+    (value, testContext: Yup.TestContext) => {
+      const context = testContext.options.context as Yup.TestContext & { values?: FormValues };
+      if (!context || !context.values) {
+        return testContext.createError({
+          message: 'Unexpected error: Yup test context should contain form values',
+        });
+      }
 
-    const values = uniqueStringArrayExtractor(context.values, this, value);
+      const values = uniqueStringArrayExtractor(context.values, testContext, value as string);
 
-    if (!values) {
-      return this.createError({
-        message: 'Unexpected error: Failed to get values to test uniqueness',
-      });
-    }
-    return values.filter((currentValue) => currentValue === value).length === 1;
-  });
+      if (!values) {
+        return testContext.createError({
+          message: 'Unexpected error: Failed to get values to test uniqueness',
+        });
+      }
+      return (
+        values.filter((currentValue) => currentValue.toLowerCase() === value?.toLowerCase())
+          .length === 1
+      );
+    },
+  );
 };
 
 const isValidIPv4Address = (addressStr: string) => {
@@ -86,7 +93,7 @@ export const getIpAddressValidationSchema = (protocolVersion: ProtocolVersion) =
   return Yup.string().test(
     protocolVersion,
     `Value \${value} is not a valid ${protocolVersionLabel} address`,
-    function (value: string) {
+    (value?: string) => {
       if (!value) {
         return true;
       }
@@ -120,7 +127,7 @@ export const getMultipleIpAddressValidationSchema = (protocolVersion?: ProtocolV
       const duplicates = getDuplicates(addresses);
       return `The following IP addresses are duplicated: ${duplicates.join(',')}`;
     },
-    function (value: string) {
+    (value?: string) => {
       if (!value) {
         return true;
       }
@@ -195,7 +202,7 @@ export const getIpAddressInSubnetValidationSchema = (
   return Yup.string().test(
     'is-in-subnet',
     `IP Address is outside of the machine network ${subnet}`,
-    function (value: string) {
+    (value, testContext: Yup.TestContext) => {
       if (!value) {
         return true;
       }
@@ -204,7 +211,7 @@ export const getIpAddressInSubnetValidationSchema = (
         ipValidationSchema.validateSync(value);
       } catch (err) {
         const error = err as { message: string };
-        return this.createError({ message: error.message });
+        return testContext.createError({ message: error.message });
       }
       try {
         const inSubnet = isInSubnet(value, subnet);

package/lib/ocm/components/clusterConfiguration/staticIp/components/CollapsedHost.tsx

@@ -17,6 +17,21 @@ export type HostSummaryProps = {
   numInterfaces: number;
   hostIdx: number;
   hasError: boolean;
+  bondPrimaryInterface: string;
+  bondSecondaryInterface: string;
+};
+
+const getLabelCollapsedHost = (
+  macAddress: string,
+  mappingValue: string,
+  bondPrimaryInterface: string,
+  bondSecondaryInterface: string,
+) => {
+  if (bondPrimaryInterface !== '' && bondSecondaryInterface !== '') {
+    return `${bondPrimaryInterface}/${bondSecondaryInterface} -> ${mappingValue}`;
+  } else {
+    return `${macAddress} -> ${mappingValue}`;
+  }
 };
 
 const HostSummary: React.FC<HostSummaryProps> = ({
@@ -26,6 +41,8 @@ const HostSummary: React.FC<HostSummaryProps> = ({
   numInterfaces,
   hasError,
   hostIdx,
+  bondPrimaryInterface,
+  bondSecondaryInterface,
 }) => {
   return (
     <>
@@ -49,10 +66,14 @@ const HostSummary: React.FC<HostSummaryProps> = ({
           {!hasError && (
             <>
               <FlexItem>
-                <Label
-                  variant="outline"
-                  data-testid="first-mapping-label"
-                >{`${macAddress} -> ${mappingValue}`}</Label>{' '}
+                <Label variant="outline" data-testid="first-mapping-label">
+                  {getLabelCollapsedHost(
+                    macAddress,
+                    mappingValue,
+                    bondPrimaryInterface,
+                    bondSecondaryInterface,
+                  )}
+                </Label>{' '}
               </FlexItem>
               {numInterfaces > 1 && (
                 <FlexItem>

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsConfirmationModal.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBoxBody,
+  ModalBoxFooter,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
+import { useTranslation } from '../../../../../../common/hooks/use-translation-wrapper';
+
+type BondDeleteModalModalProps = {
+  isOpen: boolean;
+  onConfirm: VoidFunction;
+  onCancel: VoidFunction;
+};
+
+const BondDeleteModalModal = ({ isOpen, onConfirm, onCancel }: BondDeleteModalModalProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      aria-label={t('ai:Remove bond dialog')}
+      title={t('ai:Remove bond?')}
+      isOpen={isOpen}
+      onClose={onCancel}
+      hasNoBodyWrapper
+      id="remove-bond-modal"
+      variant="medium"
+      titleIconVariant="warning"
+    >
+      <ModalBoxBody>
+        <Stack hasGutter>
+          <StackItem>{t('ai:The bond associated with the host will be removed.')}</StackItem>
+        </Stack>
+      </ModalBoxBody>
+      <ModalBoxFooter>
+        <Button onClick={onConfirm} variant={ButtonVariant.danger}>
+          {t('ai:Remove bond')}
+        </Button>
+        <Button onClick={onCancel} variant={ButtonVariant.secondary}>
+          {t('ai:Cancel')}
+        </Button>
+      </ModalBoxFooter>
+    </Modal>
+  );
+};
+
+export default BondDeleteModalModal;

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsSelect.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SelectFieldProps } from '../../../../../../common/components/ui/formik/types';
+import { SelectField } from '../../../../../../common';
+
+type BondsSelectProps = {
+  onChange?: SelectFieldProps['onChange'];
+  name: string;
+};
+
+const bondsList = [
+  { value: 'balance-rr', label: 'Balance-rr (0)', default: false },
+  { value: 'active-backup', label: 'Active-Backup (1)', default: true },
+  { value: 'balance-xor', label: 'Balance-xor (2)', default: false },
+  { value: 'broadcast', label: 'Broadcast (3)', default: false },
+  { value: '802.3ad', label: '802.3ad (4)', default: false },
+  { value: 'balance-tlb', label: 'Balance-tlb (5)', default: false },
+  { value: 'balance-alb', label: 'Balance-alb (6)', default: false },
+];
+const BondsSelect: React.FC<BondsSelectProps> = ({ onChange, name }) => {
+  const selectOptions = bondsList.map((version) => ({
+    label: version.label,
+    value: version.value,
+  }));
+  return (
+    <SelectField
+      name={name}
+      label="Bond type"
+      options={selectOptions}
+      isRequired
+      onChange={onChange}
+    />
+  );
+};
+
+export default BondsSelect;

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -1,38 +1,115 @@
 import React from 'react';
 import { FormGroup, Grid, TextContent, Text, TextVariants } from '@patternfly/react-core';
-import { useField } from 'formik';
+import { useField, useFormikContext } from 'formik';
 import StaticIpHostsArray, { HostComponentProps } from '../StaticIpHostsArray';
-import { getFieldId } from '../../../../../../common';
+import { getFieldId, PopoverIcon } from '../../../../../../common';
 import HostSummary from '../CollapsedHost';
 import { FormViewHost, StaticProtocolType } from '../../data/dataTypes';
 import { getProtocolVersionLabel, getShownProtocolVersions } from '../../data/protocolVersion';
 import { getEmptyFormViewHost } from '../../data/emptyData';
-import { OcmInputField } from '../../../../ui/OcmFormFields';
+import { OcmCheckboxField, OcmInputField } from '../../../../ui/OcmFormFields';
+import '../staticIp.css';
+import BondsSelect from './BondsSelect';
+import BondsConfirmationModal from './BondsConfirmationModal';
 
 const getExpandedHostComponent = (protocolType: StaticProtocolType) => {
   const Component: React.FC<HostComponentProps> = ({ fieldName, hostIdx }) => {
+    const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
+    const { setFieldValue } = useFormikContext();
+    const [bondPrimaryField] = useField(`${fieldName}.bondPrimaryInterface`);
+    const [bondSecondaryField] = useField(`${fieldName}.bondSecondaryInterface`);
+    const [useBond] = useField(`${fieldName}.useBond`);
+
+    const handleUseBondChange = (checked: boolean) => {
+      if (!checked) {
+        if (bondPrimaryField.value || bondSecondaryField.value) {
+          setIsModalOpen(true);
+        } else {
+          setFieldValue(`${fieldName}.useBond`, false);
+          setFieldValue(`${fieldName}.bondType`, 'active-backup');
+          setFieldValue(`${fieldName}.bondPrimaryInterface`, '');
+          setFieldValue(`${fieldName}.bondSecondaryInterface`, '');
+        }
+      }
+    };
+
+    const handleModalConfirm = () => {
+      setFieldValue(`${fieldName}.useBond`, false);
+      setFieldValue(`${fieldName}.bondType`, 'active-backup');
+      setFieldValue(`${fieldName}.bondPrimaryInterface`, '');
+      setFieldValue(`${fieldName}.bondSecondaryInterface`, '');
+      setIsModalOpen(false);
+    };
+
+    const handleModalCancel = () => {
+      setFieldValue(`${fieldName}.useBond`, true);
+      setIsModalOpen(false);
+    };
     return (
-      <Grid hasGutter>
-        <OcmInputField
-          name={`${fieldName}.macAddress`}
-          label="MAC Address"
-          isRequired
-          data-testid={`mac-address-${hostIdx}`}
-        />
-        {getShownProtocolVersions(protocolType).map((protocolVersion) => (
-          <FormGroup
-            label={`IP address (${getProtocolVersionLabel(protocolVersion)})`}
-            fieldId={getFieldId(`${fieldName}.ips.${protocolVersion}`, 'input')}
-            key={protocolVersion}
-          >
+      <>
+        <Grid hasGutter>
+          <FormGroup>
+            <OcmCheckboxField
+              label={
+                <>
+                  {'Use bond'}{' '}
+                  <PopoverIcon
+                    noVerticalAlign
+                    bodyContent="Bonds help you to combine network interfaces  for increased bandwidth and ensure redundancy. To bond more than 2 network interfaces per host, use the YAML view."
+                  />
+                </>
+              }
+              onChange={(value) => handleUseBondChange(value)}
+              name={`${fieldName}.useBond`}
+            />
+          </FormGroup>
+          {useBond.value && (
+            <Grid hasGutter className="pf-v5-u-ml-lg">
+              <FormGroup fieldId={`bond-type-${hostIdx}`}>
+                <BondsSelect name={`${fieldName}.bondType`} data-testid={`bond-type-${hostIdx}`} />
+              </FormGroup>
+              <OcmInputField
+                name={`${fieldName}.bondPrimaryInterface`}
+                label="Port 1 MAC Address"
+                data-testid={`bond-primary-interface-${hostIdx}`}
+                isRequired
+              />{' '}
+              <OcmInputField
+                name={`${fieldName}.bondSecondaryInterface`}
+                label="Port 2 MAC Adddress"
+                data-testid={`bond-secondary-interface-${hostIdx}`}
+                isRequired
+              />
+            </Grid>
+          )}
+          {!useBond.value && (
             <OcmInputField
-              name={`${fieldName}.ips.${protocolVersion}`}
+              name={`${fieldName}.macAddress`}
+              label="MAC Address"
               isRequired
-              data-testid={`${protocolVersion}-address-${hostIdx}`}
-            />{' '}
-          </FormGroup>
-        ))}
-      </Grid>
+              data-testid={`mac-address-${hostIdx}`}
+            />
+          )}
+          {getShownProtocolVersions(protocolType).map((protocolVersion) => (
+            <FormGroup
+              label={`IP address (${getProtocolVersionLabel(protocolVersion)})`}
+              fieldId={getFieldId(`${fieldName}.ips.${protocolVersion}`, 'input')}
+              key={protocolVersion}
+            >
+              <OcmInputField
+                name={`${fieldName}.ips.${protocolVersion}`}
+                isRequired
+                data-testid={`${protocolVersion}-address-${hostIdx}`}
+              />{' '}
+            </FormGroup>
+          ))}
+        </Grid>
+        <BondsConfirmationModal
+          isOpen={isModalOpen}
+          onConfirm={handleModalConfirm}
+          onCancel={handleModalCancel}
+        />
+      </>
     );
   };
   return Component;
@@ -47,14 +124,17 @@ const getCollapsedHostComponent = (protocolType: StaticProtocolType) => {
       (protocolVersion) => value.ips[protocolVersion],
     );
     const mapValue = ipAddresses.join(', ');
+
     return (
       <HostSummary
-        title="MAC to IP mapping"
+        title={value.useBond ? 'Bonds to IP mapping' : 'MAC to IP mapping'}
         numInterfaces={1}
         macAddress={value.macAddress}
         mappingValue={mapValue}
         hostIdx={hostIdx}
         hasError={!!error}
+        bondPrimaryInterface={value.bondPrimaryInterface}
+        bondSecondaryInterface={value.bondSecondaryInterface}
       />
     );
   };

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/formViewHostsValidationSchema.tsx

@@ -1,8 +1,6 @@
 import * as Yup from 'yup';
 
 import {
-  FormViewHost,
-  HostIps,
   FormViewNetworkWideValues,
   FormViewHostsValues,
   ProtocolVersion,
@@ -28,14 +26,30 @@ const getAllIpv6Addresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
 
 const getAllMacAddresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
   values: FormViewHostsValues,
-) => values.hosts.map((host) => host.macAddress);
+) => {
+  return values.hosts.map((host) => host.macAddress);
+};
+
+const getAllBondInterfaces: UniqueStringArrayExtractor<FormViewHostsValues> = (
+  values: FormViewHostsValues,
+) => {
+  return values.hosts.flatMap((host) => [
+    host.bondPrimaryInterface.toLowerCase(),
+    host.bondSecondaryInterface.toLowerCase(),
+  ]);
+};
 
 const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues) =>
-  Yup.object().shape<FormViewHost>({
-    macAddress: macAddressValidationSchema
-      .required(requiredMsg)
-      .concat(getUniqueValidationSchema(getAllMacAddresses)),
-    ips: Yup.object().shape<HostIps>({
+  Yup.object({
+    macAddress: Yup.mixed().when('useBond', {
+      is: false,
+      then: () =>
+        macAddressValidationSchema
+          .required(requiredMsg)
+          .concat(getUniqueValidationSchema(getAllMacAddresses)),
+      otherwise: () => Yup.mixed().notRequired(),
+    }),
+    ips: Yup.object({
       ipv4: showIpv4(networkWideValues.protocolType)
         ? getInMachineNetworkValidationSchema(
             ProtocolVersion.ipv4,
@@ -65,10 +79,26 @@ const getHostValidationSchema = (networkWideValues: FormViewNetworkWideValues) =
             )
         : Yup.string(),
     }),
+    bondPrimaryInterface: Yup.mixed().when('useBond', {
+      is: true,
+      then: () =>
+        macAddressValidationSchema
+          .required(requiredMsg)
+          .concat(getUniqueValidationSchema(getAllBondInterfaces)),
+      otherwise: () => Yup.mixed().notRequired(),
+    }),
+    bondSecondaryInterface: Yup.mixed().when('useBond', {
+      is: true,
+      then: () =>
+        macAddressValidationSchema
+          .required(requiredMsg)
+          .concat(getUniqueValidationSchema(getAllBondInterfaces)),
+      otherwise: () => Yup.mixed().notRequired(),
+    }),
   });
 
 export const getFormViewHostsValidationSchema = (networkWideValues: FormViewNetworkWideValues) => {
   return Yup.object().shape({
-    hosts: Yup.array<FormViewHost>().of(getHostValidationSchema(networkWideValues)),
+    hosts: Yup.array(getHostValidationSchema(networkWideValues)),
   });
 };

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/FormViewNetworkWideFields.tsx

@@ -11,6 +11,9 @@ import {
   Flex,
   FlexItem,
   ButtonVariant,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
 import { useField, useFormikContext } from 'formik';
 import {
@@ -45,6 +48,7 @@ import {
 import { OcmCheckboxField, OcmInputField, OcmRadioField } from '../../../../ui/OcmFormFields';
 
 import '../staticIp.css';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 
 const hostsConfiguredAlert = (
   <Alert
@@ -72,17 +76,15 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
     const cidr = getMachineNetworkCidr(value);
     return getHumanizedSubnetRange(getAddressObject(cidr, protocolVersion));
   }, [value, protocolVersion, errorMessage]);
+  const fieldId = getFieldId(`${fieldName}`, 'input');
   return (
     <FormGroup
       labelIcon={
         <PopoverIcon noVerticalAlign bodyContent="The range of IP addresses of the hosts." />
       }
       label="Machine network"
-      fieldId={getFieldId(`${fieldName}`, 'input')}
+      fieldId={fieldId}
       isRequired
-      helperTextInvalid={errorMessage}
-      validated={errorMessage ? 'error' : 'default'}
-      helperText={machineNetworkHelptext}
       className="machine-network"
     >
       <Flex>
@@ -111,6 +113,19 @@ const MachineNetwork: React.FC<{ fieldName: string; protocolVersion: ProtocolVer
           />
         </FlexItem>
       </Flex>
+      {(errorMessage || machineNetworkHelptext) && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem
+              icon={errorMessage ? <ExclamationCircleIcon /> : null}
+              variant={errorMessage ? 'error' : 'default'}
+              id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
+            >
+              {errorMessage ? errorMessage : machineNetworkHelptext}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewNetworkWide/formViewNetworkWideValidationSchema.tsx

@@ -88,7 +88,7 @@ const getDNSValidationSchema = (protocolType: StaticProtocolType) => {
 };
 
 const getAddressDataValidationSchema = (protocolVersion: ProtocolVersion, ipConfig: IpConfig) => {
-  return Yup.object().shape<IpConfig>({
+  return Yup.object({
     machineNetwork: getMachineNetworkValidationSchema(protocolVersion),
     gateway: getIPValidationSchema(protocolVersion)
       .concat(getInMachineNetworkValidationSchema(protocolVersion, ipConfig.machineNetwork))
@@ -96,32 +96,32 @@ const getAddressDataValidationSchema = (protocolVersion: ProtocolVersion, ipConf
   });
 };
 
-export const networkWideValidationSchema = Yup.lazy<FormViewNetworkWideValues>(
-  (values: FormViewNetworkWideValues) => {
-    const ipConfigsValidationSchemas = Yup.object().shape({
-      ipv4: getAddressDataValidationSchema(ProtocolVersion.ipv4, values.ipConfigs.ipv4),
-      ipv6: showProtocolVersion(values.protocolType, ProtocolVersion.ipv6)
-        ? getAddressDataValidationSchema(ProtocolVersion.ipv6, values.ipConfigs.ipv6)
-        : Yup.object<IpConfig>(),
-    });
-    return Yup.object().shape({
-      useVlan: Yup.boolean(),
-      vlanId: Yup.mixed().when('useVlan', {
-        is: true,
-        then: Yup.number()
+export const networkWideValidationSchema = Yup.lazy((values: FormViewNetworkWideValues) => {
+  const ipConfigsValidationSchemas = Yup.object({
+    ipv4: getAddressDataValidationSchema(ProtocolVersion.ipv4, values.ipConfigs.ipv4),
+    ipv6: showProtocolVersion(values.protocolType, ProtocolVersion.ipv6)
+      ? getAddressDataValidationSchema(ProtocolVersion.ipv6, values.ipConfigs.ipv6)
+      : Yup.object<IpConfig>(),
+  });
+
+  return Yup.object({
+    useVlan: Yup.boolean(),
+    vlanId: Yup.mixed().when('useVlan', {
+      is: (useVlan: boolean) => useVlan,
+      then: () =>
+        Yup.number()
           .required(MUST_BE_A_NUMBER)
           .min(1, `Must be more than or equal to 1`)
           .max(MAX_VLAN_ID, `Must be less than or equal to ${MAX_VLAN_ID}`)
           .test('not-number', MUST_BE_A_NUMBER, () => validateNumber(values.vlanId))
           .nullable()
           .transform(transformNumber) as Yup.NumberSchema,
-      }),
-      protocolType: Yup.string(),
-      dns: getDNSValidationSchema(values.protocolType),
-      ipConfigs: ipConfigsValidationSchemas,
-    });
-  },
-);
+    }),
+    protocolType: Yup.string(),
+    dns: getDNSValidationSchema(values.protocolType),
+    ipConfigs: ipConfigsValidationSchemas,
+  });
+});
 
 export const validateNumber = (vlanId: FormViewNetworkWideValues['vlanId']) => {
   //We need to validate that value is a number(without letters) and is not an exponential number (ex: 1e2)

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpForm.tsx

@@ -77,7 +77,10 @@ export const StaticIpForm = <StaticIpFormValues extends object>({
 
   const validate = (values: StaticIpFormValues) => {
     try {
-      validationSchema.validateSync(values, { abortEarly: false, context: { values } });
+      validationSchema.validateSync(values, {
+        abortEarly: false,
+        context: { values },
+      });
       return {};
     } catch (error) {
       return yupToFormErrors(error);

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpHostsArray.tsx

@@ -239,7 +239,7 @@ const Hosts = <HostFieldType,>({
               <Checkbox
                 label="Copy the YAML content"
                 isChecked={copyConfiguration}
-                onChange={setCopyConfiguration}
+                onChange={(_event, val) => setCopyConfiguration(val)}
                 aria-label="copy host configuration"
                 name="copy-host-configuration"
                 id="copy-host-configuration"

package/lib/ocm/components/clusterConfiguration/staticIp/components/StaticIpViewRadioGroup.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Alert, AlertVariant, ButtonVariant, Form, FormGroup } from '@patternfly/react-core';
 import { StaticIpView } from '../data/dataTypes';
-import { getFieldId } from '../../../../../common';
+import { getFieldId, useAlerts } from '../../../../../common';
 import ConfirmationModal from '../../../../../common/components/ui/ConfirmationModal';
 import { OcmRadio } from '../../../ui/OcmFormFields';
 
@@ -16,10 +16,11 @@ const StaticIpViewRadioGroup = ({
   confirmOnChangeView,
   onChangeView,
 }: StaticIpViewRadioGroupProps) => {
+  const { clearAlerts } = useAlerts();
   const GROUP_NAME = 'select-static-ip-view';
   const [confirmView, setConfirmView] = React.useState<StaticIpView>();
   const [view, setView] = React.useState<StaticIpView>(initialView);
-  const handleChange = (_checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     const selectedView = event.currentTarget.value as StaticIpView;
     if (confirmOnChangeView) {
       setConfirmView(selectedView);
@@ -30,6 +31,7 @@ const StaticIpViewRadioGroup = ({
   };
 
   const onConfirm = (selectedView: StaticIpView) => {
+    clearAlerts();
     setView(selectedView);
     setConfirmView(undefined);
     onChangeView(selectedView);

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/MacIpMapping.tsx

@@ -74,12 +74,12 @@ export const MacIpMapping = ({
 
   return (
     <Grid className="mac-ip-mapping">
-      <GridItem span={6}>
-        <FieldArray
-          name={fieldName}
-          validateOnChange={false}
-          render={({ push, remove }) => (
-            <Grid hasGutter>
+      <FieldArray
+        name={fieldName}
+        validateOnChange={false}
+        render={({ push, remove }) => (
+          <Grid hasGutter>
+            <GridItem span={6}>
               {macInterfaceMap.map((_, idx) => (
                 <MacMappingItem
                   key={getFormikArrayItemFieldName(fieldName, idx)}
@@ -90,12 +90,11 @@ export const MacIpMapping = ({
                   hostIdx={hostIdx}
                 />
               ))}
-
-              {!isViewerMode && <AddMapping onPush={push} />}
-            </Grid>
-          )}
-        />
-      </GridItem>
+            </GridItem>
+            <GridItem>{!isViewerMode && <AddMapping onPush={push} />}</GridItem>
+          </Grid>
+        )}
+      />
     </Grid>
   );
 };

package/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx

@@ -34,6 +34,8 @@ const CollapsedHost: React.FC<HostComponentProps> = ({ fieldName, hostIdx }) =>
       mappingValue={mapValue}
       hostIdx={hostIdx}
       hasError={hasError}
+      bondPrimaryInterface=""
+      bondSecondaryInterface=""
     />
   );
 };