Feat: refactor IPPREFIX table #2143 (#1604)

* Feat: refactor IPPREFIX table

* Create fast-starfishes-design.md

* remove unused imports

* return state for state management

* prefix check lir/sub

* update after review

Author: Igoranze

.changeset/fast-starfishes-design.md

@@ -0,0 +1,5 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": patch
+---
+
+Feat: refactor IPPREFIX table #2143

packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx

@@ -14,18 +14,29 @@
  */
 import React, { useState } from 'react';
 
-import { useTranslations } from 'next-intl';
 import { connectField, filterDOMProps } from 'uniforms';
 
-import { EuiCallOut, EuiFormRow, EuiText } from '@elastic/eui';
+import { EuiFormRow, EuiText } from '@elastic/eui';
 
 import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
 import SplitPrefix from '@/components/WfoForms/formFields/deprecated/SplitPrefix';
 import { useWithOrchestratorTheme } from '@/hooks';
 
 import { FieldProps } from '../types';
-import IpPrefixTableField from './IpPrefixTableField';
-import { IpBlock } from './types';
+
+export function getUsedPrefixMin(
+    netmask: string,
+    prefixMin: number | undefined,
+    name: string,
+) {
+    const netMaskInt = parseInt(netmask, 10);
+    return (
+        prefixMin ??
+        (netMaskInt < 32 && name === 'ip_sub_prefix'
+            ? netMaskInt + 1
+            : netMaskInt)
+    );
+}
 
 export type IPvAnyNetworkFieldProps = FieldProps<
     string,
@@ -48,17 +59,13 @@ function IpNetwork({
 }: IPvAnyNetworkFieldProps) {
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
-    const t = useTranslations('pydanticForms');
-    const [selectedPrefix, setSelectedPrefix] = useState<IpBlock | undefined>(
-        undefined,
-    );
-    const [manualOverride, setManualOverride] = useState(false);
+    // The state is needed in order to keep the selected prefix in the SplitPrefix component
+    const [selectedPrefix] = useState<string | undefined>(value);
 
-    const usePrefix = selectedPrefix?.prefix ?? value;
+    const usePrefix = selectedPrefix;
     const [subnet, netmask] = usePrefix?.split('/') ?? ['', ''];
-    const usedPrefixMin =
-        prefixMin ??
-        parseInt(netmask, 10) + (selectedPrefix?.state === 0 ? 0 : 1);
+
+    const usedPrefixMin = getUsedPrefixMin(netmask, prefixMin, name);
 
     return (
         <section {...filterDOMProps(props)}>
@@ -73,32 +80,7 @@ function IpNetwork({
             >
                 <section className="ipblock-selector">
                     <div id={id}>
-                        {!prefixMin && (
-                            <IpPrefixTableField
-                                id={id}
-                                name={name}
-                                onChange={(prefix: IpBlock) => {
-                                    if (!readOnly) {
-                                        if (
-                                            prefix.state === 0 ||
-                                            prefix.state === 1
-                                        ) {
-                                            setSelectedPrefix(prefix);
-                                        }
-                                        setManualOverride(false);
-                                        onChange(prefix.prefix);
-                                    }
-                                }}
-                                onManualOverride={(prefixString: string) => {
-                                    if (!readOnly) {
-                                        setManualOverride(true);
-                                        onChange(prefixString);
-                                    }
-                                }}
-                                selected_prefix_id={selectedPrefix?.id}
-                            />
-                        )}
-                        {usePrefix && !manualOverride && (
+                        {usePrefix && (
                             <SplitPrefix
                                 id={id}
                                 name={name}
@@ -113,17 +95,6 @@ function IpNetwork({
                                 selectedSubnet={usePrefix}
                             />
                         )}
-                        {usePrefix && manualOverride && (
-                            <EuiCallOut
-                                title={t(
-                                    'widgets.ipvAnyNetworkField.manuallySelectedPrefix',
-                                )}
-                                color="primary"
-                                iconType="check"
-                            >
-                                <p>{value}</p>
-                            </EuiCallOut>
-                        )}
                     </div>
                 </section>
             </EuiFormRow>