Add latest changes from gitlab-org/gitlab@master

4 files changed, 34 insertions, 3 deletions

diff --git a/app/assets/javascripts/design_management/components/design_todo_button.vue b/app/assets/javascripts/design_management/components/design_todo_button.vue
index 3e6d51fb90d..aff4f348d15 100644
--- a/app/assets/javascripts/design_management/components/design_todo_button.vue
+++ b/app/assets/javascripts/design_management/components/design_todo_button.vue
@@ -5,7 +5,7 @@ import createDesignTodoMutation from '../graphql/mutations/create_design_todo.mu
 import TodoButton from '~/vue_shared/components/todo_button.vue';
 import allVersionsMixin from '../mixins/all_versions';
 import { updateStoreAfterDeleteDesignTodo } from '../utils/cache_update';
-import { findIssueId } from '../utils/design_management_utils';
+import { findIssueId, findDesignId } from '../utils/design_management_utils';
 import { CREATE_DESIGN_TODO_ERROR, DELETE_DESIGN_TODO_ERROR } from '../utils/error_messages';
 
 export default {
@@ -45,6 +45,7 @@ export default {
       return {
         projectPath: this.projectPath,
         issueId: findIssueId(this.design.issue.id),
+        designId: findDesignId(this.design.id),
         issueIid: this.issueIid,
         filenames: [this.$route.params.id],
         atVersion: this.designsVersion,
@@ -59,6 +60,22 @@ export default {
     },
   },
   methods: {
+    updateGlobalTodoCount(additionalTodoCount) {
+      const currentCount = parseInt(document.querySelector('.js-todos-count').innerText, 10);
+      const todoToggleEvent = new CustomEvent('todo:toggle', {
+        detail: {
+          count: Math.max(currentCount + additionalTodoCount, 0),
+        },
+      });
+
+      document.dispatchEvent(todoToggleEvent);
+    },
+    incrementGlobalTodoCount() {
+      this.updateGlobalTodoCount(1);
+    },
+    decrementGlobalTodoCount() {
+      this.updateGlobalTodoCount(-1);
+    },
     createTodo() {
       this.todoLoading = true;
       return this.$apollo
@@ -75,6 +92,9 @@ export default {
             }
           },
         })
+        .then(() => {
+          this.incrementGlobalTodoCount();
+        })
         .catch(err => {
           this.$emit('error', Error(CREATE_DESIGN_TODO_ERROR));
           throw err;
@@ -115,6 +135,9 @@ export default {
             }
           },
         })
+        .then(() => {
+          this.decrementGlobalTodoCount();
+        })
         .catch(err => {
           this.$emit('error', Error(DELETE_DESIGN_TODO_ERROR));
           throw err;
diff --git a/app/assets/javascripts/design_management/graphql.js b/app/assets/javascripts/design_management/graphql.js
index 0a17fef4cad..d1fe977b969 100644
--- a/app/assets/javascripts/design_management/graphql.js
+++ b/app/assets/javascripts/design_management/graphql.js
@@ -30,11 +30,15 @@ const resolvers = {
 
       cache.writeQuery({ query: activeDiscussionQuery, data });
     },
-    createDesignTodo: (_, { projectPath, issueId, issueIid, filenames, atVersion }, { cache }) => {
+    createDesignTodo: (
+      _,
+      { projectPath, issueId, designId, issueIid, filenames, atVersion },
+      { cache },
+    ) => {
       return axios
         .post(`/${projectPath}/todos`, {
           issue_id: issueId,
-          issuable_id: issueIid,
+          issuable_id: designId,
           issuable_type: 'design',
         })
         .then(({ data }) => {
diff --git a/app/assets/javascripts/design_management/graphql/mutations/create_design_todo.mutation.graphql b/app/assets/javascripts/design_management/graphql/mutations/create_design_todo.mutation.graphql
index 2fb0b28b1e0..0c989b2fdde 100644
--- a/app/assets/javascripts/design_management/graphql/mutations/create_design_todo.mutation.graphql
+++ b/app/assets/javascripts/design_management/graphql/mutations/create_design_todo.mutation.graphql
@@ -1,6 +1,7 @@
 mutation createDesignTodo(
   $projectPath: String!
   $issueId: String!
+  $designId: String!
   $issueIid: String!
   $filenames: [String]!
   $atVersion: String
@@ -8,6 +9,7 @@ mutation createDesignTodo(
   createDesignTodo(
     projectPath: $projectPath
     issueId: $issueId
+    designId: $designId
     issueIid: $issueIid
     filenames: $filenames
     atVersion: $atVersion
diff --git a/app/assets/javascripts/design_management/utils/design_management_utils.js b/app/assets/javascripts/design_management/utils/design_management_utils.js
index 2a6c8b249a5..93e4d6060c3 100644
--- a/app/assets/javascripts/design_management/utils/design_management_utils.js
+++ b/app/assets/javascripts/design_management/utils/design_management_utils.js
@@ -32,6 +32,8 @@ export const findNoteId = id => (id.match('DiffNote/(.+$)') || [])[1];
 
 export const findIssueId = id => (id.match('Issue/(.+$)') || [])[1];
 
+export const findDesignId = id => (id.match('Design/(.+$)') || [])[1];
+
 export const extractDesigns = data => data.project.issue.designCollection.designs.nodes;
 
 export const extractDesign = data => (extractDesigns(data) || [])[0];