fix(ui): delete nested children when disabling a child

Author: a-asaad

ui/src/singletons/store/appActions.test.ts

@@ -57,6 +57,7 @@ const STANDARD_INBOUND_ADAPTER = "9KWCqlIyy7"
 const STANDARD_ROUTER = "LoiC2CFbLP"
 const STANDARD_POLLER_CHILD = "mcyTryMPewJ"
 const STANDARD_TRANSACTIONAL_CHILD = "V1ls9ri4szs"
+const NESTED_CHILD_PARENT_ID = "FL5Tssm8tV"
 
 beforeEach(() => {
   act(() => {
@@ -423,6 +424,28 @@ describe("disable child", () => {
     )
 
     expect(children).toHaveLength(0)
+    expect(getEipId(STANDARD_POLLER_CHILD)).toBeUndefined()
+  })
+
+  test("disable child deletes all nested children", () => {
+    act(() => resetMockStore(nestedChildFlow))
+
+    const initChildren = renderAndUnwrapHook(() =>
+      useGetEnabledChildren(NESTED_CHILD_PARENT_ID)
+    )
+    expect(initChildren).toHaveLength(3)
+
+    const topChildId = "43FAdk5SdBR"
+    act(() => disableChild(NESTED_CHILD_PARENT_ID, topChildId))
+
+    const updatedChildren = renderAndUnwrapHook(() =>
+      useGetEnabledChildren(NESTED_CHILD_PARENT_ID)
+    )
+    expect(updatedChildren).toHaveLength(initChildren.length - 1)
+
+    expect(getEipId(topChildId)).toBeUndefined()
+    expect(getEipId("9OymVfY4n4p")).toBeUndefined()
+    expect(getEipId("gCL0YkrFGgW")).toBeUndefined()
   })
 
   test("disable child unknown child id -> error", () => {
@@ -455,10 +478,10 @@ describe("reorder enabled child list", () => {
     })
   })
 
-  const PARENT_ID = "FL5Tssm8tV"
-
   test("reorder enabled children success", () => {
-    const initial = renderAndUnwrapHook(() => useGetEnabledChildren(PARENT_ID))
+    const initial = renderAndUnwrapHook(() =>
+      useGetEnabledChildren(NESTED_CHILD_PARENT_ID)
+    )
 
     const updated = [...initial]
 
@@ -467,26 +490,38 @@ describe("reorder enabled child list", () => {
     updated[2] = updated[0]
     updated[0] = temp
 
-    act(() => reorderEnabledChildren(PARENT_ID, updated))
+    act(() => reorderEnabledChildren(NESTED_CHILD_PARENT_ID, updated))
 
-    const children = renderAndUnwrapHook(() => useGetEnabledChildren(PARENT_ID))
+    const children = renderAndUnwrapHook(() =>
+      useGetEnabledChildren(NESTED_CHILD_PARENT_ID)
+    )
     expect(children).toEqual(updated)
   })
 
   test("adding child -> error ", () => {
-    const initial = renderAndUnwrapHook(() => useGetEnabledChildren(PARENT_ID))
+    const initial = renderAndUnwrapHook(() =>
+      useGetEnabledChildren(NESTED_CHILD_PARENT_ID)
+    )
     const updated = [...initial, "extra"]
-    expect(() => reorderEnabledChildren(PARENT_ID, updated)).toThrowError()
+    expect(() =>
+      reorderEnabledChildren(NESTED_CHILD_PARENT_ID, updated)
+    ).toThrowError()
   })
 
   test("removing child -> error ", () => {
-    const initial = renderAndUnwrapHook(() => useGetEnabledChildren(PARENT_ID))
+    const initial = renderAndUnwrapHook(() =>
+      useGetEnabledChildren(NESTED_CHILD_PARENT_ID)
+    )
     const updated = initial.slice(1)
-    expect(() => reorderEnabledChildren(PARENT_ID, updated)).toThrowError()
+    expect(() =>
+      reorderEnabledChildren(NESTED_CHILD_PARENT_ID, updated)
+    ).toThrowError()
   })
 
   test("changing child list -> error ", () => {
-    expect(() => reorderEnabledChildren(PARENT_ID, ["c1", "c2"])).toThrowError()
+    expect(() =>
+      reorderEnabledChildren(NESTED_CHILD_PARENT_ID, ["c1", "c2"])
+    ).toThrowError()
   })
 })
 

ui/src/singletons/store/appActions.ts

@@ -14,6 +14,7 @@ import { EipId } from "../../api/generated/eipFlow"
 import { newFlowLayout } from "../../components/layout/layouting"
 import { AppStore, EipConfig, SerializedFlow } from "./api"
 import { useAppStore } from "./appStore"
+import { childrenDepthTraversal } from "./storeViews"
 
 export const createDroppedNode = (eipId: EipId, position: XYPosition) =>
   useAppStore.setState((state) => {
@@ -127,20 +128,30 @@ export const enableChild = (parentId: string, childEipId: EipId) =>
 
 export const disableChild = (parentId: string, childId: string) =>
   useAppStore.setState((state) => {
-    const idx = state.eipConfigs[parentId].children.findIndex(
-      (id) => id === childId
-    )
+    const parentConfig = state.eipConfigs[parentId]
+    const idx = parentConfig.children.findIndex((id) => id === childId)
 
     if (idx === -1) {
       throw new Error(
         `Node (id: ${parentId}) did not have child with id: ${childId}`
       )
     }
 
-    return produce(state, (draft: AppStore) => {
-      draft.eipConfigs[parentId].children.splice(idx, 1)
-      delete draft.eipConfigs[childId]
-    })
+    // remove target child from parent's children list
+    const updatedConfigs = {
+      ...state.eipConfigs,
+      [parentId]: {
+        ...parentConfig,
+        children: parentConfig.children.filter((c) => c !== childId),
+      },
+    }
+
+    // delete target child and its nested children
+    for (const child of childrenDepthTraversal(childId)) {
+      delete updatedConfigs[child.id]
+    }
+
+    return { eipConfigs: updatedConfigs }
   })
 
 export const reorderEnabledChildren = (parentId: string, children: string[]) =>