Include designId in todo creation payload

Previously, issuable_id was incorrectly being set.
It should be the designs id.

This commit fixes this.

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,

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 }) => {

app/assets/javascripts/design_management/graphql/mutations/create_design_todo.mutation.graphql

 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

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];

spec/frontend/design_management/components/design_todo_button_spec.js

@@ -112,6 +112,7 @@ describe('Design management design todo button', () => {
           variables: {
             atVersion: null,
             filenames: ['my-design.jpg'],
+            designId: '1',
             issueId: '1',
             issueIid: '10',
             projectPath: 'project-path',