Add latest changes from gitlab-org/gitlab@master

5 files changed, 75 insertions, 41 deletions

diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue
index f5b708cf48f..5bd69a1f0ec 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue
@@ -1,8 +1,9 @@
 <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>
diff --git a/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql b/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql
index 18fab429164..92eb828bdf8 100644
--- a/app/assets/javascripts/alert_management/graphql/fragments/detail_item.fragment.graphql
+++ b/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
diff --git a/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.graphql b/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.graphql
deleted file mode 100644
index cdf3d763302..00000000000
--- a/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.graphql
+++ /dev/null
@@ -1,11 +0,0 @@
-mutation($projectPath: ID!, $iid: String!) {
-  alertTodoCreate(input: { iid: $iid, projectPath: $projectPath }) {
-    errors
-    alert {
-      iid
-    }
-    todo {
-      id
-    }
-  }
-}
diff --git a/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.mutation.graphql b/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.mutation.graphql
new file mode 100644
index 00000000000..ac9858c104f
--- /dev/null
+++ b/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.mutation.graphql
@@ -0,0 +1,10 @@
+#import "../fragments/detail_item.fragment.graphql"
+
+mutation alertTodoCreate($projectPath: ID!, $iid: String!) {
+  alertTodoCreate(input: { iid: $iid, projectPath: $projectPath }) {
+    errors
+    alert {
+      ...AlertDetailItem
+    }
+  }
+}
diff --git a/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_mark_done.mutation.graphql b/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_mark_done.mutation.graphql
new file mode 100644
index 00000000000..4d59b4d94cd
--- /dev/null
+++ b/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_mark_done.mutation.graphql
@@ -0,0 +1,8 @@
+mutation todoMarkDone($id: ID!) {
+  todoMarkDone(input: { id: $id }) {
+    errors
+    todo {
+      id
+    }
+  }
+}