feat(pci.private-network): implementing editable allocation pool

ref: TAPC-1860
Signed-off-by: tsiorifamonjena <[email protected]>

packages/manager/apps/pci-private-network/src/__tests__/wrapper.tsx

@@ -6,6 +6,11 @@ import { NEW_PRIVATE_NETWORK_FORM_SCHEMA } from '@/pages/new/new.constants';
 
 export function NewPrivateNetworkWrapper({ children }: PropsWithChildren) {
   const form = useForm<NewPrivateNetworkForm>({
+    defaultValues: {
+      subnet: {
+        allocationPools: [],
+      },
+    },
     resolver: zodResolver(NEW_PRIVATE_NETWORK_FORM_SCHEMA),
   });
 

packages/manager/apps/pci-private-network/src/pages/new/subnet/SubnetConfig.spec.tsx

@@ -29,6 +29,7 @@ describe('SubnetConfig CIDR', () => {
         const form = useForm<NewPrivateNetworkForm>({
           defaultValues: {
             subnet: {
+              allocationPools: [],
               cidr,
             },
           },

packages/manager/apps/pci-private-network/src/pages/new/subnet/advanced/allocationPool/AllocationPool.component.tsx

@@ -1,23 +1,54 @@
-import { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { FC, useState, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import {
+  ODS_BUTTON_SIZE,
+  ODS_BUTTON_VARIANT,
+  ODS_ICON_NAME,
+  ODS_ICON_SIZE,
   ODS_TEXT_COLOR_HUE,
   ODS_TEXT_COLOR_INTENT,
   ODS_TEXT_LEVEL,
   ODS_TEXT_SIZE,
 } from '@ovhcloud/ods-components';
-import { OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { OsdsButton, OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react';
 import { NewPrivateNetworkForm } from '@/types/private-network-form.type';
-import NewAllocationPool from './new/NewAllocationPool.component';
-import AllocationPools from './list/AllocationPools.component';
-import { AllocationPool as TAllocationPool } from '@/types/network.type';
-import IpRange from '@/components/ip-range/IpRange.component';
+import AllocationPoolInputEdit from './AllocationPoolInputEdit.component';
+import { ALLOCATION_POOL_LIMIT } from './AllocationPool.constant';
 
 const AllocationPool: FC = () => {
   const { t } = useTranslation('new');
-  const { watch } = useFormContext<NewPrivateNetworkForm>();
-  // const allocationPools = watch('subnet.allocationPools');
+  const [newPosition, setNewPosition] = useState<number>(0);
+  const {
+    setValue,
+    watch,
+    formState: { errors },
+  } = useFormContext<NewPrivateNetworkForm>();
+  const allocationPools = watch('subnet.allocationPools');
+  const isErrors = errors.subnet?.allocationPools?.[newPosition];
+  const isStartIpHasError =
+    !allocationPools?.[newPosition]?.start || !!isErrors?.start;
+  const isEndIpHasError =
+    !allocationPools?.[newPosition]?.end || !!isErrors?.end;
+
+  const isAddUnAvailable =
+    isStartIpHasError ||
+    isEndIpHasError ||
+    newPosition === ALLOCATION_POOL_LIMIT;
+
+  const onAddNewAllocationIp = () => setNewPosition((position) => position + 1);
+
+  const removeAllocationPool = (index: number) => {
+    const updatedPools = allocationPools.filter((_, i) => index !== i);
+    setValue('subnet.allocationPools', updatedPools);
+    setNewPosition((position) => position - 1);
+  };
+
+  const editablePools = useMemo(
+    () => Array.from({ length: newPosition }, (_, index) => index),
+    [newPosition],
+  );
 
   return (
     <>
@@ -29,10 +60,39 @@ const AllocationPool: FC = () => {
       >
         {t('pci_projects_project_network_private_allocation_ip')}
       </OsdsText>
-      {/* {allocationPools.map((_, index) => (
-        <AllocationPools key={index} index={index} />
-      ))} */}
-      <NewAllocationPool index={0} />
+      {editablePools.map((item) => (
+        <AllocationPoolInputEdit key={item} position={item}>
+          <OsdsButton
+            size={ODS_BUTTON_SIZE.sm}
+            variant={ODS_BUTTON_VARIANT.ghost}
+            color={ODS_THEME_COLOR_INTENT.primary}
+            className="self-end"
+            onClick={() => removeAllocationPool(item)}
+          >
+            <OsdsIcon
+              name={ODS_ICON_NAME.TRASH}
+              size={ODS_ICON_SIZE.xs}
+              color={ODS_THEME_COLOR_INTENT.primary}
+            />
+          </OsdsButton>
+        </AllocationPoolInputEdit>
+      ))}
+      <AllocationPoolInputEdit position={newPosition}>
+        <OsdsButton
+          size={ODS_BUTTON_SIZE.sm}
+          variant={ODS_BUTTON_VARIANT.ghost}
+          color={ODS_THEME_COLOR_INTENT.primary}
+          className="self-end"
+          disabled={isAddUnAvailable ? true : undefined}
+          onClick={onAddNewAllocationIp}
+        >
+          <OsdsIcon
+            name={ODS_ICON_NAME.ADD}
+            size={ODS_ICON_SIZE.xs}
+            color={ODS_THEME_COLOR_INTENT.primary}
+          />
+        </OsdsButton>
+      </AllocationPoolInputEdit>
     </>
   );
 };

packages/manager/apps/pci-private-network/src/pages/new/subnet/advanced/allocationPool/AllocationPoolInputEdit.component.tsx

@@ -0,0 +1,58 @@
+import { FC, PropsWithChildren } from 'react';
+import { useFormContext } from 'react-hook-form';
+import IpRange from '@/components/ip-range/IpRange.component';
+import { NewPrivateNetworkForm } from '@/types/private-network-form.type';
+
+const AllocationPoolInputEdit: FC<PropsWithChildren<{ position: number }>> = ({
+  children,
+  position,
+}) => {
+  const {
+    setValue,
+    watch,
+    formState: { touchedFields, errors },
+  } = useFormContext<NewPrivateNetworkForm>();
+  const allocationPools = watch('subnet.allocationPools');
+  const startIp = allocationPools[position]?.start;
+  const endIp = allocationPools[position]?.end;
+
+  const isTouched = touchedFields.subnet?.allocationPools;
+  const isErrors = errors.subnet?.allocationPools?.[position];
+  const isStartIpHasError = isTouched && !!isErrors?.start;
+  const isEndIpHasError = isTouched && !!isErrors?.end;
+
+  const onIpChange = (key: string, value: string) => {
+    if (value) {
+      const updatedPools = [...allocationPools];
+
+      updatedPools[position] = { ...updatedPools[position], [key]: value };
+
+      setValue('subnet.allocationPools', updatedPools, {
+        shouldTouch: true,
+        shouldValidate: true,
+      });
+    }
+  };
+
+  const onStartIpChange = ({ target }) =>
+    onIpChange('start', target.value as string);
+
+  const onEndIpChange = ({ target }) => {
+    onIpChange('end', target.value as string);
+  };
+
+  return (
+    <IpRange
+      start={startIp}
+      end={endIp}
+      isStartIpHasError={isStartIpHasError}
+      isEndIpHasError={isEndIpHasError}
+      onStartIpChange={onStartIpChange}
+      onEndIpChange={onEndIpChange}
+    >
+      {children}
+    </IpRange>
+  );
+};
+
+export default AllocationPoolInputEdit;