Part 1: Add todo-related queries/resolvers to Design Management

What does this MR do?

⚠ This MR is behind the design_management_todo_button feature flag (rollout issue: #245074 (closed))

This MR continues efforts to lay the foundations for Design Management To-Do creation and resolution. backend work towards supporting the currentUserTodos in GraphQL is still pending (!40555 (merged)) - frontend needs this for the feature to be functional.

This MR:

• adds a new component, design_todo_button
• adds mutations for creating and resolving To-Dos
• adds error handling logic for these mutations
• adds click event handler to the To-Do button

It does not:

• update Apollo cache with the new state
• query for existing user To-Dos

This will come in a future MR (!41647 (merged)). I'm breaking this into 2 separate MR to keep the MR small and easier to review.

Original issue: #198439 (closed)

Feature flag rollout issue: #245074 (closed)

Part	MR
1. Create shared todo button	!39931 (merged)
2. Add vue_shared/todo_button.vue to Design Management (behind feature flag)	!39935 (merged)
3. Part 1: Add necessary queries and resolvers to Design Management's Apollo client	👉 you are here!
4. Part 2: Add necessary queries and resolvers to Design Management's Apollo client	!41647 (merged)

How to test manually

If you're interested in testing manually, you can check that the network requests are being fired as expected

Creating the todo

1. Enable Feature Flag design_management_todo_button
2. Upload a design to an issue, and open it (by clicking on it)
3. Click Add a To-Do button
4. Observe network tab. A request to the /todo endpoint should fire, return a 200
5. Check your GitLab To-Dos. There should be a new todo created

Deleting the todo

Because we can't query the todo data yet, testing todo deletion required a (gasp!) code change - sorry!

1. Create a todo with network tab open
2. In the response from the /todo request, note down the numerical id in the last part of the delete_path
3. In the sourcecode in the design_todo_button.vue component, manually set the pendingTodo prop with your todo from above:

pendingTodo() {
      return {
        id: 'gid://gitlab/Todo/<YOUR_TODO_ID>',
      };
    },

1. Open your design in GitLab, and click the "Mark as Done" button
2. Observe network tab. /graphql request should fire, and you should no longer have a todo for this design

Does this MR meet the acceptance criteria?

Conformity

• [-] Changelog entry
• Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• Database guides
• Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers
• Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team