Alert To Do UI

We now allow to Add A To Do
button to have its Mark as
done status via the alert API

app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue

 <script>
 import { s__ } from '~/locale';
 import Todo from '~/sidebar/components/todo_toggle/todo.vue';
-import axios from '~/lib/utils/axios_utils';
-import createAlertTodo from '../../graphql/mutations/alert_todo_create.graphql';
+import createAlertTodo from '../../graphql/mutations/alert_todo_create.mutation.graphql';
+import todoMarkDone from '../../graphql/mutations/alert_todo_mark_done.mutation.graphql';
+import alertQuery from '../../graphql/queries/details.query.graphql';
 
 export default {
   i18n: {
@@ -30,14 +31,24 @@ export default {
   data() {
     return {
       isUpdating: false,
-      isTodo: false,
-      todo: '',
     };
   },
   computed: {
     alertID() {
       return parseInt(this.alert.iid, 10);
     },
+    firstToDoId() {
+      return this.alert?.todos?.nodes[0]?.id;
+    },
+    hasPendingTodos() {
+      return this.alert?.todos?.nodes.length > 0;
+    },
+    getAlertQueryVariables() {
+      return {
+        fullPath: this.projectPath,
+        alertId: this.alert.iid,
+      };
+    },
   },
   methods: {
     updateToDoCount(add) {
@@ -51,11 +62,7 @@ export default {
 
       return document.dispatchEvent(headerTodoEvent);
     },
-    toggleTodo() {
-      if (this.todo) {
-        return this.markAsDone();
-      }
-
+    addToDo() {
       this.isUpdating = true;
       return this.$apollo
         .mutate({
@@ -65,24 +72,14 @@ export default {
             projectPath: this.projectPath,
           },
         })
-        .then(({ data: { alertTodoCreate: { todo = {}, errors = [] } } = {} } = {}) => {
+        .then(({ data: { errors = [] } }) => {
           if (errors[0]) {
-            return this.$emit(
-              'alert-error',
-              `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${errors[0]}.`,
-            );
+            return this.throwError(errors[0]);
           }
-
-          this.todo = todo.id;
           return this.updateToDoCount(true);
         })
         .catch(() => {
-          this.$emit(
-            'alert-error',
-            `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${s__(
-              'AlertManagement|Please try again.',
-            )}`,
-          );
+          this.throwError();
         })
         .finally(() => {
           this.isUpdating = false;
@@ -90,20 +87,45 @@ export default {
     },
     markAsDone() {
       this.isUpdating = true;
-
-      return axios
-        .delete(`/dashboard/todos/${this.todo.split('/').pop()}`)
-        .then(() => {
-          this.todo = '';
+      return this.$apollo
+        .mutate({
+          mutation: todoMarkDone,
+          variables: {
+            id: this.firstToDoId,
+          },
+          update: this.updateCache,
+        })
+        .then(({ data: { errors = [] } }) => {
+          if (errors[0]) {
+            return this.throwError(errors[0]);
+          }
           return this.updateToDoCount(false);
         })
         .catch(() => {
-          this.$emit('alert-error', this.$options.i18n.UPDATE_ALERT_TODO_ERROR);
+          this.throwError();
         })
         .finally(() => {
           this.isUpdating = false;
         });
     },
+    updateCache(store) {
+      const data = store.readQuery({
+        query: alertQuery,
+        variables: this.getAlertQueryVariables,
+      });
+
+      data.project.alertManagementAlerts.nodes[0].todos.nodes.shift();
+
+      store.writeQuery({
+        query: alertQuery,
+        variables: this.getAlertQueryVariables,
+        data,
+      });
+    },
+    throwError(err = '') {
+      const error = err || s__('AlertManagement|Please try again.');
+      this.$emit('alert-error', `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${error}`);
+    },
   },
 };
 </script>
@@ -114,10 +136,10 @@ export default {
       data-testid="alert-todo-button"
       :collapsed="sidebarCollapsed"
       :issuable-id="alertID"
-      :is-todo="todo !== ''"
+      :is-todo="hasPendingTodos"
       :is-action-active="isUpdating"
       issuable-type="alert"
-      @toggleTodo="toggleTodo"
+      @toggleTodo="hasPendingTodos ? markAsDone() : addToDo()"
     />
   </div>
 </template>

app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql

@@ -11,6 +11,11 @@ fragment AlertDetailItem on AlertManagementAlert {
   updatedAt
   endedAt
   details
+  todos {
+    nodes {
+      id
+    }
+  }
   notes {
     nodes {
       ...AlertNote

app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.graphql → app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.mutation.graphql

-mutation($projectPath: ID!, $iid: String!) {
+#import "../fragments/detail_item.fragment.graphql"
+
+mutation alertTodoCreate($projectPath: ID!, $iid: String!) {
   alertTodoCreate(input: { iid: $iid, projectPath: $projectPath }) {
     errors
     alert {
-      iid
-    }
-    todo {
-      id
+      ...AlertDetailItem
     }
   }
 }

app/assets/javascripts/alert_management/graphql/mutations/alert_todo_mark_done.mutation.graphql

+mutation todoMarkDone($id: ID!) {
+  todoMarkDone(input: { id: $id }) {
+    errors
+    todo {
+      id
+    }
+  }
+}

changelogs/unreleased/222359-alert-todo.yml

+---
+title: Add Mark as done capability to Alert To Do's
+merge_request: 38595
+author:
+type: changed

spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js

 import { mount } from '@vue/test-utils';
 import SidebarTodo from '~/alert_management/components/sidebar/sidebar_todo.vue';
-import AlertMarkTodo from '~/alert_management/graphql/mutations/alert_todo_create.graphql';
+import AlertMarkTodo from '~/alert_management/graphql/mutations/alert_todo_create.mutation.graphql';
 import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
@@ -34,6 +34,8 @@ describe('Alert Details Sidebar To Do', () => {
     wrapper.destroy();
   });
 
+  const findToDoButton = () => wrapper.find('[data-testid="alert-todo-button"]');
+
   describe('updating the alert to do', () => {
     const mockUpdatedMutationResult = {
       data: {
@@ -44,25 +46,27 @@ describe('Alert Details Sidebar To Do', () => {
       },
     };
 
-    beforeEach(() => {
-      mountComponent({
-        data: { alert: mockAlert },
-        sidebarCollapsed: false,
-        loading: false,
+    describe('adding a todo', () => {
+      beforeEach(() => {
+        mountComponent({
+          data: { alert: mockAlert },
+          sidebarCollapsed: false,
+          loading: false,
+        });
       });
-    });
 
-    it('renders a button for adding a To-Do', () => {
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('[data-testid="alert-todo-button"]').text()).toBe('Add a To-Do');
+      it('renders a button for adding a To-Do', async () => {
+        await wrapper.vm.$nextTick();
+
+        expect(findToDoButton().text()).toBe('Add a To-Do');
       });
-    });
 
-    it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', () => {
-      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+      it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', async () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+
+        findToDoButton().trigger('click');
+        await wrapper.vm.$nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        wrapper.find('button').trigger('click');
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: AlertMarkTodo,
           variables: {
@@ -72,5 +76,28 @@ describe('Alert Details Sidebar To Do', () => {
         });
       });
     });
+    describe('removing a todo', () => {
+      beforeEach(() => {
+        mountComponent({
+          data: { alert: { ...mockAlert, todos: { nodes: [{ id: '1234' }] } } },
+          sidebarCollapsed: false,
+          loading: false,
+        });
+      });
+
+      it('renders a Mark As Done button when todo is present', async () => {
+        await wrapper.vm.$nextTick();
+
+        expect(findToDoButton().text()).toBe('Mark as done');
+      });
+
+      it('calls `$apollo.mutate` with `AlertMarkTodoDone` mutation and variables containing `id`', async () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+
+        findToDoButton().trigger('click');
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
+      });
+    });
   });
 });

spec/frontend/alert_management/mocks/alerts.json

@@ -9,7 +9,8 @@
     "endedAt": "2020-04-17T23:18:14.996Z",
     "status": "TRIGGERED",
     "assignees": { "nodes": [] },
-    "notes": { "nodes": [] }
+    "notes": { "nodes": [] },
+    "todos": { "nodes": [] }
   },
   {
     "iid": "1527543",
@@ -37,7 +38,8 @@
           "systemNoteIconName": "user"
         }
       ]
-    }
+    },
+    "todos": { "nodes": [] }
   },
   {
     "iid": "1527544",
@@ -63,6 +65,7 @@
           }
         }
       ]
-    }
+    },
+    "todos": { "nodes": [] }
   }
 ]