Part 2: Add todo-related queries/resolvers to Design Management

app/assets/javascripts/design_management/graphql/fragments/design_list.fragment.graphql

@@ -5,4 +5,9 @@ fragment DesignListItem on Design {
   notesCount
   image
   imageV432x230
+  currentUserTodos(state: pending) {
+    nodes {
+      id
+    }
+  }
 }

app/assets/javascripts/design_management/utils/cache_update.js

@@ -190,25 +190,44 @@ const moveDesignInStore = (store, designManagementMove, query) => {
 };
 
 export const addPendingTodoToStore = (store, pendingTodo, query, queryVariables) => {
-  const data = store.readQuery({
+  const sourceData = store.readQuery({
     query,
     variables: queryVariables,
   });
 
-  // TODO produce new version of data that includes the new pendingTodo.
-  // This is only possible after BE MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/40555
+  const data = produce(sourceData, draftData => {
+    const design = extractDesign(draftData);
+    const existingTodos = design.currentUserTodos?.nodes || [];
+    const newTodoNodes = [...existingTodos, { ...pendingTodo, __typename: 'Todo' }];
+
+    if (!design.currentUserTodos) {
+      design.currentUserTodos = {
+        __typename: 'TodoConnection',
+        nodes: newTodoNodes,
+      };
+    } else {
+      design.currentUserTodos.nodes = newTodoNodes;
+    }
+  });
 
   store.writeQuery({ query, variables: queryVariables, data });
 };
 
-export const deletePendingTodoFromStore = (store, pendingTodo, query, queryVariables) => {
-  const data = store.readQuery({
+export const deletePendingTodoFromStore = (store, todoMarkDone, query, queryVariables) => {
+  const sourceData = store.readQuery({
     query,
     variables: queryVariables,
   });
 
-  // TODO produce new version of data without the pendingTodo.
-  // This is only possible after BE MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/40555
+  const {
+    todo: { id: todoId },
+  } = todoMarkDone;
+  const data = produce(sourceData, draftData => {
+    const design = extractDesign(draftData);
+    const existingTodos = design.currentUserTodos?.nodes || [];
+
+    design.currentUserTodos.nodes = existingTodos.filter(({ id }) => id !== todoId);
+  });
 
   store.writeQuery({ query, variables: queryVariables, data });
 };

spec/frontend/design_management/mock_data/apollo_mock.js

@@ -13,6 +13,9 @@ export const designListQueryResponse = {
                 notesCount: 3,
                 image: 'image-1',
                 imageV432x230: 'image-1',
+                currentUserTodos: {
+                  nodes: [],
+                },
               },
               {
                 id: '2',
@@ -21,6 +24,9 @@ export const designListQueryResponse = {
                 notesCount: 2,
                 image: 'image-2',
                 imageV432x230: 'image-2',
+                currentUserTodos: {
+                  nodes: [],
+                },
               },
               {
                 id: '3',
@@ -29,6 +35,9 @@ export const designListQueryResponse = {
                 notesCount: 1,
                 image: 'image-3',
                 imageV432x230: 'image-3',
+                currentUserTodos: {
+                  nodes: [],
+                },
               },
             ],
           },
@@ -60,6 +69,9 @@ export const reorderedDesigns = [
     notesCount: 2,
     image: 'image-2',
     imageV432x230: 'image-2',
+    currentUserTodos: {
+      nodes: [],
+    },
   },
   {
     id: '1',
@@ -68,6 +80,9 @@ export const reorderedDesigns = [
     notesCount: 3,
     image: 'image-1',
     imageV432x230: 'image-1',
+    currentUserTodos: {
+      nodes: [],
+    },
   },
   {
     id: '3',
@@ -76,6 +91,9 @@ export const reorderedDesigns = [
     notesCount: 1,
     image: 'image-3',
     imageV432x230: 'image-3',
+    currentUserTodos: {
+      nodes: [],
+    },
   },
 ];