Adjusting code from review comments

libs/locales/lib/en/translation.json

@@ -1,5 +1,4 @@
 {
-  "ai: The bond associated with the host will be removed.": " The bond associated with the host will be removed.",
   "ai:({{size}} hosts available)": "({{size}} hosts available)",
   "ai:(1 host available)": "(1 host available)",
   "ai:(no hosts available)": "(no hosts available)",
@@ -751,6 +750,7 @@
   "ai:Technology preview features provide early access to upcoming product innovations, enabling you to test functionality and provide feedback during the development process.": "Technology preview features provide early access to upcoming product innovations, enabling you to test functionality and provide feedback during the development process.",
   "ai:The agent is not bound to a cluster.": "The agent is not bound to a cluster.",
   "ai:The agent ran successfully": "The agent ran successfully",
+  "ai:The bond associated with the host will be removed.": "The bond associated with the host will be removed.",
   "ai:The classic bullet-proof networking type": "The classic bullet-proof networking type",
   "ai:The cluster can not be installed yet because there are no available hosts with {{cpuArchitecture}} architecture found. To continue:": "The cluster cannot be installed because there are no available hosts with {{cpuArchitecture}} architecture found. To continue:",
   "ai:The cluster has 0 hosts. No workloads will be able to run.": "The cluster has 0 hosts. No workloads will be able to run.",

libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsConfirmationModal.tsx

@@ -33,7 +33,7 @@ const BondDeleteModalModal = ({ isOpen, onConfirm, onCancel }: BondDeleteModalMo
     >
       <ModalBoxBody>
         <Stack hasGutter>
-          <StackItem>{t('ai: The bond associated with the host will be removed.')}</StackItem>
+          <StackItem>{t('ai:The bond associated with the host will be removed.')}</StackItem>
         </Stack>
       </ModalBoxBody>
       <ModalBoxFooter>

libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsSelect.tsx

@@ -17,14 +17,10 @@ const bondsList = [
   { value: 'balance-alb', label: 'Balance-alb (6)', default: false },
 ];
 const BondsSelect: React.FC<BondsSelectProps> = ({ onChange, name }) => {
-  const selectOptions = React.useMemo(
-    () =>
-      bondsList.map((version) => ({
-        label: version.label,
-        value: version.value,
-      })),
-    [],
-  );
+  const selectOptions = bondsList.map((version) => ({
+    label: version.label,
+    value: version.value,
+  }));
   return (
     <SelectField
       name={name}

libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/FormViewHostsFields.tsx

@@ -18,30 +18,23 @@ const getExpandedHostComponent = (protocolType: StaticProtocolType) => {
     const { setFieldValue } = useFormikContext();
     const [bondPrimaryField] = useField(`${fieldName}.bondPrimaryInterface`);
     const [bondSecondaryField] = useField(`${fieldName}.bondSecondaryInterface`);
-
-    const [useBond, setUseBond] = React.useState<boolean>(
-      !!bondPrimaryField.value || !!bondSecondaryField.value,
-    );
+    const [useBond] = useField(`${fieldName}.useBond`);
 
     const handleUseBondChange = (checked: boolean) => {
       if (!checked) {
-        // Mostrar el modal solo si ambos campos tienen valor
-        if (bondPrimaryField.value && bondSecondaryField.value) {
+        if (bondPrimaryField.value || bondSecondaryField.value) {
           setIsModalOpen(true);
         } else {
-          // Si no tienen valor, simplemente actualiza el estado sin mostrar el modal
-          setUseBond(false);
+          setFieldValue(`${fieldName}.useBond`, false);
           setFieldValue(`${fieldName}.bondType`, 'active-backup');
           setFieldValue(`${fieldName}.bondPrimaryInterface`, '');
           setFieldValue(`${fieldName}.bondSecondaryInterface`, '');
         }
-      } else {
-        setUseBond(true);
       }
     };
 
     const handleModalConfirm = () => {
-      setUseBond(false);
+      setFieldValue(`${fieldName}.useBond`, false);
       setFieldValue(`${fieldName}.bondType`, 'active-backup');
       setFieldValue(`${fieldName}.bondPrimaryInterface`, '');
       setFieldValue(`${fieldName}.bondSecondaryInterface`, '');

libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/formViewHostsValidationSchema.tsx

@@ -27,8 +27,6 @@ const getAllIpv6Addresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
 const getAllMacAddresses: UniqueStringArrayExtractor<FormViewHostsValues> = (
   values: FormViewHostsValues,
 ) => {
-  // eslint-disable-next-line no-console
-  console.log(values.hosts);
   return values.hosts.map((host) => host.macAddress);
 };
 

libs/ui-lib/lib/ocm/components/clusterConfiguration/staticIp/data/formDataFromInfraEnvField.ts

@@ -147,13 +147,14 @@ const getFormViewHost = (
       ipv4: '',
       ipv6: '',
     },
-    useBond: false,
     bondType: 'active-backup',
     bondPrimaryInterface: '',
     bondSecondaryInterface: '',
+    useBond: false,
   };
 
   if (realInterface.type === NmstateInterfaceType.BOND) {
+    ret.useBond = true;
     ret.bondType = realInterface['link-aggregation'].mode;
     ret.bondPrimaryInterface = infraEnvHost.macInterfaceMap[0].macAddress ?? '';
     ret.bondSecondaryInterface = infraEnvHost.macInterfaceMap[1].macAddress ?? '';