properly delete connected edges when deleting pods (#228)

lihebi · web-flow · commit 13bda66c5fbe · 2023-02-27T18:16:35.000+08:00
diff --git a/api/src/resolver_repo.ts b/api/src/resolver_repo.ts
@@ -433,46 +433,58 @@ async function addPods(_, { repoId, pods }, { userId }) {
   return true;
 }
 
-async function deletePod(_, { id, toDelete }, { userId }) {
+async function deletePods(_, { ids }: { ids: string[] }, { userId }) {
   if (!userId) throw new Error("Not authenticated.");
-  await ensurePodEditAccess({ id, userId });
-  // find all children of this ID
-  // FIXME how to ensure atomic
-  // 1. find the parent of this node
+  if (ids.length === 0) return false;
+  // find the repo
   const pod = await prisma.pod.findFirst({
-    where: {
-      id: id,
-    },
-    include: {
-      parent: true,
-    },
+    where: { id: ids[0] },
+    include: { repo: true },
   });
   if (!pod) throw new Error("Pod not found");
+  await ensureRepoEditAccess({ repoId: pod.repo.id, userId });
+  // If the pod is connected to a scope, the frontend will fire deleteEdge calls
+  // as well simultaneously. Thus, if this call is fired before the edges are
+  // deleted, an error will be thrown.
+  //
+  // Additional Notes:
+  // 1. The deleteEdge graphQL call will still be fired. This would be redundant
+  //    but should be fine.
+  // 2. We still need the deleteEdge graphQL calls when the edge is selected and
+  //    deleted.
 
-  // 4. update all siblings index
-  await prisma.pod.updateMany({
+  const deletedEdges = await prisma.edge.deleteMany({
     where: {
-      // CAUTION where to put null is tricky
-      parent: pod.parent
-        ? {
-            id: pod.parent.id,
-          }
-        : null,
-      index: {
-        gt: pod.index,
-      },
-    },
-    data: {
-      index: {
-        decrement: 1,
+      OR: [
+        {
+          source: {
+            id: {
+              in: ids,
+            },
+          },
+        },
+        {
+          target: {
+            id: {
+              in: ids,
+            },
+          },
+        },
+      ],
+      repo: {
+        id: pod.repo.id,
       },
     },
   });
-  // 5. delete it and all its children
-  await prisma.pod.deleteMany({
+
+  // delete all the nodes, but make sure they are in this exact repo.
+  const deletedPods = await prisma.pod.deleteMany({
     where: {
       id: {
-        in: toDelete,
+        in: ids,
+      },
+      repo: {
+        id: pod.repo.id,
       },
     },
   });
@@ -492,7 +504,7 @@ export default {
     updateRepo,
     deleteRepo,
     updatePod,
-    deletePod,
+    deletePods,
     addEdge,
     deleteEdge,
     addCollaborator,
diff --git a/api/src/typedefs.ts b/api/src/typedefs.ts
@@ -124,7 +124,7 @@ export const typeDefs = gql`
     createRepo: Repo
     updateRepo(id: ID!, name: String!): Boolean
     deleteRepo(id: ID!): Boolean
-    deletePod(id: String!, toDelete: [String]): Boolean
+    deletePods(ids: [String]): Boolean
     addPods(repoId: String!, pods: [PodInput]): Boolean
     updatePod(id: String!, repoId: String!, input: PodInput): Boolean
     addEdge(source: ID!, target: ID!): Boolean
diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
@@ -305,6 +305,7 @@ function FloatingToolbar({ id }) {
           <IconButton
             size="small"
             onClick={() => {
+              // Delete all edges connected to the node.
               reactFlowInstance.deleteElements({ nodes: [{ id }] });
             }}
           >
diff --git a/ui/src/lib/fetch.tsx b/ui/src/lib/fetch.tsx
@@ -215,17 +215,19 @@ function serializePodInput(pod) {
   }))(pod);
 }
 
-export async function doRemoteDeletePod(client, { id, toDelete }) {
+export async function doRemoteDeletePod(
+  client: ApolloClient<any>,
+  ids: string[]
+) {
   const mutation = gql`
-    mutation deletePod($id: String!, $toDelete: [String]) {
-      deletePod(id: $id, toDelete: $toDelete)
+    mutation deletePods($ids: [String]) {
+      deletePods(ids: $ids)
     }
   `;
   await client.mutate({
     mutation,
     variables: {
-      id,
-      toDelete,
+      ids,
     },
   });
   return true;
diff --git a/ui/src/lib/store/podSlice.tsx b/ui/src/lib/store/podSlice.tsx
@@ -300,7 +300,7 @@ function deletePod(set, get) {
     { id }: { id: string }
   ) => {
     const pods = get().pods;
-    const toDelete: string[] = [];
+    const ids: string[] = [];
 
     // get all ids to delete. Gathering them here is easier than on the server
 
@@ -309,13 +309,13 @@ function deletePod(set, get) {
     const dfs = (id) => {
       const pod = pods[id];
       if (pod) {
-        toDelete.push(id);
+        ids.push(id);
         pod.children.forEach(dfs);
       }
     };
 
     dfs(id);
-    // pop in toDelete
+    // pop in ids
     set(
       produce((state: MyState) => {
         // delete the link to parent
@@ -326,13 +326,13 @@ function deletePod(set, get) {
           // remove all
           parent.children.splice(index, 1);
         }
-        toDelete.forEach((id) => {
+        ids.forEach((id) => {
           delete state.pods[id];
         });
       })
     );
     if (client) {
-      await doRemoteDeletePod(client, { id, toDelete });
+      await doRemoteDeletePod(client, ids);
     }
   };
 }

Original file line number	Diff line number	Diff line change
`@@ -305,6 +305,7 @@ function FloatingToolbar({ id }) {`
`305`	`305`	`<IconButton`
`306`	`306`	`size="small"`
`307`	`307`	`onClick={() => {`
	`308`	`+ // Delete all edges connected to the node.`
`308`	`309`	`reactFlowInstance.deleteElements({ nodes: [{ id }] });`
`309`	`310`	`}}`
`310`	`311`	`>`