Merge pull request #200 from PRO-Robotech/feature/dev

purge arr elements after deletion | relative path in lists

Author: typescreep

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@prorobotech/openapi-k8s-toolkit",
-  "version": "0.0.1-alpha.143",
+  "version": "0.0.1-alpha.144",
   "description": "ProRobotech OpenAPI k8s tools",
   "main": "dist/openapi-k8s-toolkit.cjs.js",
   "module": "dist/openapi-k8s-toolkit.es.js",

package.json

@@ -18,6 +18,7 @@ import {
   useIsTouchedPersisted,
   useUpdateIsTouchedPersisted,
 } from '../../organisms/BlackholeForm/context'
+import { resolveFormPath, normalizeNameToPath, listItemBasePath } from './utils'
 
 type TFormListInputProps = {
   name: TFormName
@@ -61,9 +62,20 @@ export const FormListInput: FC<TFormListInputProps> = ({
 
   const fixedName = name === 'nodeName' ? 'nodeNameBecauseOfSuddenBug' : name
 
-  const rawRelatedFieldValue = Form.useWatch(customProps.relatedValuePath, form)
-  const relatedFieldValue = customProps.relatedValuePath ? rawRelatedFieldValue : undefined
-  const relatedTouched = customProps.relatedValuePath ? form.isFieldTouched(customProps.relatedValuePath) : '~'
+  // Build absolute path of this field from the full 'fixedName'
+  const fullFieldPath = normalizeNameToPath(fixedName)
+
+  // Base for relative paths = the list item object (e.g. ["spec","hosts",0])
+  const baseForRelative = listItemBasePath(fullFieldPath)
+
+  // Resolve the (string) related path against that base
+  const relatedPath = customProps.relatedValuePath
+    ? resolveFormPath(customProps.relatedValuePath, baseForRelative)
+    : undefined
+
+  const rawRelatedFieldValue = Form.useWatch(relatedPath, form)
+  const relatedFieldValue = relatedPath ? rawRelatedFieldValue : undefined
+  const relatedTouched = relatedPath ? form.isFieldTouched(relatedPath) : '~'
 
   // to prevent circular callback onvaluechange call
   const hasFiredRef = useRef(false)
@@ -74,29 +86,24 @@ export const FormListInput: FC<TFormListInputProps> = ({
 
   // managing context of touched/untouched of related field
   useEffect(() => {
-    if (customProps.relatedValuePath && relatedTouched) {
+    if (relatedPath && relatedTouched) {
       updateTouched(prev => ({
         ...prev,
-        [customProps.relatedValuePath?.join('.') || 'your doing it wrong']: true,
+        [relatedPath.join('.') || 'your doing it wrong']: true,
       }))
     }
-  }, [customProps.relatedValuePath, relatedTouched, updateTouched])
+  }, [relatedPath, relatedTouched, updateTouched])
 
   // updating prev value on first user touch of related field
   useEffect(() => {
-    if (
-      customProps.relatedValuePath &&
-      isTouchedPeristed[customProps.relatedValuePath.join('.')] &&
-      relatedFieldValue &&
-      !hasSeededRef.current
-    ) {
+    if (relatedPath && isTouchedPeristed[relatedPath.join('.')] && relatedFieldValue && !hasSeededRef.current) {
       relatedFieldValuePrev.current = relatedFieldValue
       hasSeededRef.current = true
       form.setFieldValue(arrName || fixedName, undefined)
       onValuesChangeCallBack?.()
     }
   }, [
-    customProps.relatedValuePath,
+    relatedPath,
     relatedTouched,
     isTouchedPeristed,
     relatedFieldValue,
@@ -108,7 +115,7 @@ export const FormListInput: FC<TFormListInputProps> = ({
 
   useEffect(() => {
     // only if previous value is touched
-    if (!customProps.relatedValuePath || relatedFieldValuePrev.current === 'unset') {
+    if (!relatedPath || relatedFieldValuePrev.current === 'unset') {
       return
     }
 
@@ -129,15 +136,7 @@ export const FormListInput: FC<TFormListInputProps> = ({
       // user has set it back → re‑arm for the next clear
       hasFiredRef.current = false
     }
-  }, [
-    customProps.relatedValuePath,
-    form,
-    arrName,
-    fixedName,
-    relatedFieldValue,
-    onValuesChangeCallBack,
-    isTouchedPeristed,
-  ])
+  }, [relatedPath, form, arrName, fixedName, relatedFieldValue, onValuesChangeCallBack, isTouchedPeristed])
 
   const uri = prepareTemplate({
     template: customProps.valueUri,
@@ -152,7 +151,7 @@ export const FormListInput: FC<TFormListInputProps> = ({
     uri,
     refetchInterval: false,
     queryKey: [uri || '', JSON.stringify(name)],
-    isEnabled: !!uri && (!customProps.relatedValuePath || (customProps.relatedValuePath && !!relatedFieldValue)),
+    isEnabled: !!uri && (!relatedPath || (relatedPath && !!relatedFieldValue)),
   })
 
   if (isLoadingOptionsObj && (!customProps.relatedValuePath || (customProps.relatedValuePath && !!relatedFieldValue))) {
@@ -262,7 +261,7 @@ export const FormListInput: FC<TFormListInputProps> = ({
           placeholder="Select"
           options={uniqueOptions}
           filterOption={filterSelectOptions}
-          disabled={customProps.relatedValuePath && !rawRelatedFieldValue}
+          disabled={relatedPath && !rawRelatedFieldValue}
           allowClear
           showSearch
         />

src/components/molecules/BlackholeForm/molecules/FormListInput/FormListInput.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-continue */
+type PathSeg = string | number
+
+// Find the nearest list item base by taking the prefix up to (and including) the last numeric segment.
+// If none, fall back to the parent object (drop last key).
+export const listItemBasePath = (fullFieldPath: PathSeg[]): PathSeg[] => {
+  for (let i = fullFieldPath.length - 1; i >= 0; i--) {
+    if (typeof fullFieldPath[i] === 'number') {
+      return fullFieldPath.slice(0, i + 1) // e.g. ["spec","hosts",0]
+    }
+  }
+  return fullFieldPath.slice(0, -1) // no list → parent object
+}
+
+// turn "spec.hosts.0.namespace" → ["spec","hosts",0,"namespace"]
+const parseDotPath = (dotPath: string): PathSeg[] =>
+  dotPath
+    .split('.')
+    .filter(Boolean)
+    .map(seg => (seg.match(/^\d+$/) ? Number(seg) : seg))
+
+export const resolveFormPath = (
+  pathInput: string | string[] | undefined,
+  basePathForRelative: PathSeg[],
+): PathSeg[] => {
+  if (!pathInput) return []
+
+  // if it's already an array (from old usage), just return as-is
+  if (Array.isArray(pathInput)) return pathInput
+
+  const pathStr = String(pathInput)
+  const isRelative = pathStr.startsWith('./') || pathStr.startsWith('../')
+
+  if (!isRelative) {
+    // absolute (dot notation)
+    return parseDotPath(pathStr)
+  }
+
+  // relative: split by "/" then interpret each segment
+  let resolved: PathSeg[] = [...basePathForRelative]
+  const parts = pathStr.split('/').filter(Boolean) // e.g. ["..", "..", "foo"]
+
+  for (const part of parts) {
+    if (part === '.') {
+      continue
+    }
+    if (part === '..') {
+      resolved = resolved.slice(0, -1)
+      continue
+    }
+    resolved.push(...parseDotPath(part))
+  }
+
+  return resolved
+}
+
+// Normalize any antd name → array path
+export const normalizeNameToPath = (name: unknown): PathSeg[] =>
+  Array.isArray(name) ? (name as PathSeg[]) : [name as string]

src/components/molecules/BlackholeForm/molecules/FormListInput/utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable no-plusplus */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-nested-ternary */
@@ -36,7 +37,7 @@ import {
   scrubLiteralWildcardKeys,
 } from './helpers/prefills'
 import { DEBUG_PREFILLS, dbg, group, end, wdbg, wgroup, wend, prettyPath } from './helpers/debugs'
-import { sanitizeWildcardPath, expandWildcardTemplates, toStringPath } from './helpers/hiddenExpanded'
+import { sanitizeWildcardPath, expandWildcardTemplates, toStringPath, isPrefix } from './helpers/hiddenExpanded'
 import { handleSubmitError, handleValidationError } from './utilsErrorHandler'
 import { Styled } from './styled'
 import {
@@ -501,11 +502,11 @@ export const BlackholeForm: FC<TBlackholeFormCreateProps> = ({
         v,
         { includeMissingExact: true }, // only hidden opts in
       )
-      wdbg('hidden resolved', hiddenResolved.map(prettyPath)) // (typo? keep your original prettyPath)
+      wdbg('hidden resolved', hiddenResolved.map(prettyPath))
 
       setResolvedHiddenPaths(hiddenResolved as TFormName[])
 
-      const expandedResolved = expandWildcardTemplates(expandedWildcardTemplates, v) // unchanged
+      const expandedResolved = expandWildcardTemplates(expandedWildcardTemplates, v)
       wdbg('expanded resolved', expandedResolved.map(prettyPath))
 
       // Merge auto-expanded with current expandedKeys (preserve user choices)
@@ -533,6 +534,66 @@ export const BlackholeForm: FC<TBlackholeFormCreateProps> = ({
       const newLengths = collectArrayLengths(v)
       const prevLengths = prevArrayLengthsRef.current
 
+      // If you delete arr el and then add it again. There is no purge
+      // Adding purge:
+      // --- handle SHRINK: indices removed ---
+      for (const [k, prevLen] of prevLengths.entries()) {
+        const newLen = newLengths.get(k) ?? 0
+        if (newLen < prevLen) {
+          const arrayPath = JSON.parse(k) as (string | number)[]
+          for (let i = newLen; i < prevLen; i++) {
+            // purge UI state + tombstones under removed index
+            const removedPrefix = [...arrayPath, i]
+
+            // drop expansions/persisted under this subtree
+            setExpandedKeys(prev =>
+              prev.filter(p => {
+                const full = Array.isArray(p) ? p : [p]
+                return !isPrefix(full, removedPrefix)
+              }),
+            )
+            setPersistedKeys(prev =>
+              prev.filter(p => {
+                const full = Array.isArray(p) ? p : [p]
+                return !isPrefix(full, removedPrefix)
+              }),
+            )
+
+            // clear any blocks (tombstones) beneath removed index
+            for (const k of [...blockedPathsRef.current]) {
+              const path = JSON.parse(k) as (string | number)[]
+              if (isPrefix(path, removedPrefix)) blockedPathsRef.current.delete(k)
+            }
+          }
+        }
+      }
+
+      // --- handle GROW: indices added ---
+      for (const [k, newLen] of newLengths.entries()) {
+        const prevLen = prevLengths.get(k) ?? 0
+        if (newLen > prevLen) {
+          const arrayPath = JSON.parse(k) as (string | number)[]
+          for (let i = prevLen; i < newLen; i++) {
+            const itemPath = [...arrayPath, i]
+
+            // ensure the node exists to stabilize render/hidden resolution
+            const itemVal = form.getFieldValue(itemPath as any)
+            if (typeof itemVal === 'undefined') {
+              form.setFieldValue(itemPath as any, {}) // for object arrays; harmless for others
+            }
+
+            // guarantee no stale tombstone blocks this subtree
+            blockedPathsRef.current.delete(JSON.stringify(itemPath))
+
+            // your existing prefills (wildcards etc.)
+            applyPrefillForNewArrayItem(arrayPath, i)
+          }
+        }
+      }
+
+      // keep tracker in sync
+      prevArrayLengthsRef.current = newLengths
+
       // dump lengths (readable)
       dbg('array lengths (prev → new)')
       const allKeys = new Set([...prevLengths.keys(), ...newLengths.keys()])

src/components/molecules/BlackholeForm/organisms/BlackholeForm/BlackholeForm.tsx

@@ -133,3 +133,6 @@ const isPathArray = (p: TFormName): p is (string | number)[] => Array.isArray(p)
 
 export const toStringPath = (p: TFormName): string[] =>
   isPathArray(p) ? (p as (string | number)[]).map(String) : [String(p)]
+
+export const isPrefix = (full: (string | number)[], prefix: (string | number)[]) =>
+  prefix.length <= full.length && prefix.every((seg, i) => full[i] === seg)

src/components/molecules/BlackholeForm/organisms/BlackholeForm/helpers/hiddenExpanded.ts

@@ -56,5 +56,5 @@ export type TListInputCustomProps = {
     value: unknown
     keepPrefilled?: boolean
   }
-  relatedValuePath?: string[]
+  relatedValuePath?: string
 }