Add latest changes from gitlab-org/gitlab@master

5 files changed, 139 insertions, 18 deletions

diff --git a/app/assets/javascripts/alert_management/components/alert_sidebar.vue b/app/assets/javascripts/alert_management/components/alert_sidebar.vue
index 8957ee410a3..64e4089c85a 100644
--- a/app/assets/javascripts/alert_management/components/alert_sidebar.vue
+++ b/app/assets/javascripts/alert_management/components/alert_sidebar.vue
@@ -51,9 +51,18 @@ export default {
     <div class="issuable-sidebar js-issuable-update">
       <sidebar-header
         :sidebar-collapsed="sidebarStatus"
+        :project-path="projectPath"
+        :alert="alert"
         @toggle-sidebar="$emit('toggle-sidebar')"
+        @alert-error="$emit('alert-error', $event)"
+      />
+      <sidebar-todo
+        v-if="sidebarStatus"
+        :project-path="projectPath"
+        :alert="alert"
+        :sidebar-collapsed="sidebarStatus"
+        @alert-error="$emit('alert-error', $event)"
       />
-      <sidebar-todo v-if="sidebarStatus" :sidebar-collapsed="sidebarStatus" />
       <sidebar-status
         :project-path="projectPath"
         :alert="alert"
diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
index 7a6bb79c010..cb32a5ffd4f 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
@@ -167,7 +167,7 @@ export default {
 
           if (errors[0]) {
             this.$emit(
-              'alert-sidebar-error',
+              'alert-error',
               `${this.$options.i18n.UPDATE_ALERT_ASSIGNEES_GRAPHQL_ERROR} ${errors[0]}.`,
             );
           }
diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_header.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_header.vue
index 047793d8cee..fd40b5d9f65 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_header.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_header.vue
@@ -8,6 +8,14 @@ export default {
     SidebarTodo,
   },
   props: {
+    alert: {
+      type: Object,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
     sidebarCollapsed: {
       type: Boolean,
       required: true,
@@ -17,18 +25,17 @@ export default {
 </script>
 
 <template>
-  <div class="block  d-flex justify-content-between">
+  <div class="block gl-display-flex gl-justify-content-space-between">
     <span class="issuable-header-text hide-collapsed">
-      {{ __('Quick actions') }}
+      {{ __('To Do') }}
     </span>
-    <toggle-sidebar
-      :collapsed="sidebarCollapsed"
-      css-classes="ml-auto"
-      @toggle="$emit('toggle-sidebar')"
+    <sidebar-todo
+      v-if="!sidebarCollapsed"
+      :project-path="projectPath"
+      :alert="alert"
+      :sidebar-collapsed="sidebarCollapsed"
+      @alert-error="$emit('alert-error', $event)"
     />
-    <!-- TODO: Implement after or as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/215946 -->
-    <template v-if="false">
-      <sidebar-todo v-if="!sidebarCollapsed" :sidebar-collapsed="sidebarCollapsed" />
-    </template>
+    <toggle-sidebar :collapsed="sidebarCollapsed" @toggle="$emit('toggle-sidebar')" />
   </div>
 </template>
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 87090165f82..7d3135ad50d 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue
@@ -1,29 +1,123 @@
 <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';
 
 export default {
+  i18n: {
+    UPDATE_ALERT_TODO_ERROR: s__(
+      'AlertManagement|There was an error while updating the To Do of the alert.',
+    ),
+  },
   components: {
     Todo,
   },
   props: {
+    alert: {
+      type: Object,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
     sidebarCollapsed: {
       type: Boolean,
       required: true,
     },
   },
+  data() {
+    return {
+      isUpdating: false,
+      isTodo: false,
+      todo: '',
+    };
+  },
+  computed: {
+    alertID() {
+      return parseInt(this.alert.iid, 10);
+    },
+  },
+  methods: {
+    updateToDoCount(add) {
+      const oldCount = parseInt(document.querySelector('.todos-count').innerText, 10);
+      const count = add ? oldCount + 1 : oldCount - 1;
+      const headerTodoEvent = new CustomEvent('todo:toggle', {
+        detail: {
+          count,
+        },
+      });
+
+      return document.dispatchEvent(headerTodoEvent);
+    },
+    toggleTodo() {
+      if (this.todo) {
+        return this.markAsDone();
+      }
+
+      this.isUpdating = true;
+      return this.$apollo
+        .mutate({
+          mutation: createAlertTodo,
+          variables: {
+            iid: this.alert.iid,
+            projectPath: this.projectPath,
+          },
+        })
+        .then(({ data: { alertTodoCreate: { todo = {}, errors = [] } } = {} } = {}) => {
+          if (errors[0]) {
+            return this.$emit(
+              'alert-error',
+              `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${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.',
+            )}`,
+          );
+        })
+        .finally(() => {
+          this.isUpdating = false;
+        });
+    },
+    markAsDone() {
+      this.isUpdating = true;
+
+      return axios
+        .delete(`/dashboard/todos/${this.todo.split('/').pop()}`)
+        .then(() => {
+          this.todo = '';
+          return this.updateToDoCount(false);
+        })
+        .catch(() => {
+          this.$emit('alert-error', this.$options.i18n.UPDATE_ALERT_TODO_ERROR);
+        })
+        .finally(() => {
+          this.isUpdating = false;
+        });
+    },
+  },
 };
 </script>
 
-<!-- TODO: Implement after or as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/215946 -->
 <template>
-  <div v-if="false" :class="{ 'block todo': sidebarCollapsed }">
+  <div :class="{ 'block todo': sidebarCollapsed, 'gl-ml-auto': !sidebarCollapsed }">
     <todo
+      data-testid="alert-todo-button"
       :collapsed="sidebarCollapsed"
-      :issuable-id="1"
-      :is-todo="false"
-      :is-action-active="false"
+      :issuable-id="alertID"
+      :is-todo="todo !== ''"
+      :is-action-active="isUpdating"
       issuable-type="alert"
-      @toggleTodo="() => {}"
+      @toggleTodo="toggleTodo"
     />
   </div>
 </template>
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
new file mode 100644
index 00000000000..cdf3d763302
--- /dev/null
+++ b/app/assets/javascripts/alert_management/graphql/mutations/alert_todo_create.graphql
@@ -0,0 +1,11 @@
+mutation($projectPath: ID!, $iid: String!) {
+  alertTodoCreate(input: { iid: $iid, projectPath: $projectPath }) {
+    errors
+    alert {
+      iid
+    }
+    todo {
+      id
+    }
+  }
+}