From 5acbbb808f9532e49653dd9075706118a36c7be0 Mon Sep 17 00:00:00 2001 From: Igor van Spengen Date: Thu, 28 Nov 2024 16:49:04 +0100 Subject: [PATCH 1/6] Feat: refactor IPPREFIX table --- .../formFields/deprecated/IpNetworkField.tsx | 60 ++++--------------- 1 file changed, 10 insertions(+), 50 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx index 56bd2a221..7fd3a3f2a 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx @@ -14,18 +14,15 @@ */ 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 type IPvAnyNetworkFieldProps = FieldProps< string, @@ -48,17 +45,16 @@ function IpNetwork({ }: IPvAnyNetworkFieldProps) { const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles); - const t = useTranslations('pydanticForms'); - const [selectedPrefix, setSelectedPrefix] = useState( - undefined, - ); - const [manualOverride, setManualOverride] = useState(false); + const [selectedPrefix] = useState(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); + + let usedPrefixMin = prefixMin ?? parseInt(netmask, 10); + + if (usedPrefixMin < 32) { + usedPrefixMin += 1; + } return (
@@ -73,32 +69,7 @@ function IpNetwork({ >
- {!prefixMin && ( - { - 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 && ( )} - {usePrefix && manualOverride && ( - -

{value}

- - )}
From 8d58cf6d38209643a5ad06580af65f2372376c77 Mon Sep 17 00:00:00 2001 From: Igor van Spengen Date: Mon, 2 Dec 2024 12:44:14 +0100 Subject: [PATCH 2/6] Create fast-starfishes-design.md --- .changeset/fast-starfishes-design.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fast-starfishes-design.md diff --git a/.changeset/fast-starfishes-design.md b/.changeset/fast-starfishes-design.md new file mode 100644 index 000000000..eeec21b7b --- /dev/null +++ b/.changeset/fast-starfishes-design.md @@ -0,0 +1,5 @@ +--- +"@orchestrator-ui/orchestrator-ui-components": patch +--- + +Feat: refactor IPPREFIX table #2143 From eaf5e17c083f42f4111189b882781ac7f2bae49e Mon Sep 17 00:00:00 2001 From: Igor van Spengen Date: Mon, 2 Dec 2024 12:58:03 +0100 Subject: [PATCH 3/6] remove unused imports --- .../formFields/deprecated/IpNetworkField.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx index 7fd3a3f2a..33a1fde97 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx @@ -12,7 +12,7 @@ * limitations under the License. * */ -import React, { useState } from 'react'; +import React from 'react'; import { connectField, filterDOMProps } from 'uniforms'; @@ -45,16 +45,12 @@ function IpNetwork({ }: IPvAnyNetworkFieldProps) { const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles); - const [selectedPrefix] = useState(value); - - const usePrefix = selectedPrefix; + const usePrefix = value; const [subnet, netmask] = usePrefix?.split('/') ?? ['', '']; - let usedPrefixMin = prefixMin ?? parseInt(netmask, 10); - - if (usedPrefixMin < 32) { - usedPrefixMin += 1; - } + const netMaskInt = parseInt(netmask, 10); + const usedPrefixMin = + prefixMin ?? netMaskInt < 32 ? netMaskInt + 1 : netMaskInt; return (
From 34c6437272320ae6188e006ab5eb6eb6ecd8f4c8 Mon Sep 17 00:00:00 2001 From: Igor van Spengen Date: Tue, 3 Dec 2024 09:29:07 +0100 Subject: [PATCH 4/6] return state for state management --- .../WfoForms/formFields/deprecated/IpNetworkField.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx index 33a1fde97..b39abc0f3 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx @@ -12,7 +12,7 @@ * limitations under the License. * */ -import React from 'react'; +import React, { useState } from 'react'; import { connectField, filterDOMProps } from 'uniforms'; @@ -45,7 +45,10 @@ function IpNetwork({ }: IPvAnyNetworkFieldProps) { const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles); - const usePrefix = value; + // The state is needed in order to keep the selected prefix in the SplitPrefix component + const [selectedPrefix] = useState(value); + + const usePrefix = selectedPrefix; const [subnet, netmask] = usePrefix?.split('/') ?? ['', '']; const netMaskInt = parseInt(netmask, 10); From 894b541aaeeb5bd9149139a434699b53723c3cf8 Mon Sep 17 00:00:00 2001 From: Igor van Spengen Date: Tue, 3 Dec 2024 17:17:00 +0100 Subject: [PATCH 5/6] prefix check lir/sub --- .../WfoForms/formFields/deprecated/IpNetworkField.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx index b39abc0f3..b42744537 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx @@ -53,7 +53,10 @@ function IpNetwork({ const netMaskInt = parseInt(netmask, 10); const usedPrefixMin = - prefixMin ?? netMaskInt < 32 ? netMaskInt + 1 : netMaskInt; + prefixMin ?? + (netMaskInt < 32 && name === 'ip_sub_prefix' + ? netMaskInt + 1 + : netMaskInt); return (
From 28d209243e08817ad2f40761457823c2f4845934 Mon Sep 17 00:00:00 2001 From: Igor van Spengen Date: Tue, 10 Dec 2024 13:27:09 +0100 Subject: [PATCH 6/6] update after review --- .../formFields/deprecated/IpNetworkField.tsx | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx index b42744537..96745d997 100644 --- a/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx +++ b/packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx @@ -24,6 +24,20 @@ import { useWithOrchestratorTheme } from '@/hooks'; import { FieldProps } 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, { prefixMin?: number } @@ -51,12 +65,7 @@ function IpNetwork({ const usePrefix = selectedPrefix; const [subnet, netmask] = usePrefix?.split('/') ?? ['', '']; - const netMaskInt = parseInt(netmask, 10); - const usedPrefixMin = - prefixMin ?? - (netMaskInt < 32 && name === 'ip_sub_prefix' - ? netMaskInt + 1 - : netMaskInt); + const usedPrefixMin = getUsedPrefixMin(netmask, prefixMin, name); return (