Part 1: Add todo-related queries/resolvers to Design Management
What does this MR do?
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 |
|
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
- Enable Feature Flag
design_management_todo_button
- Upload a design to an issue, and open it (by clicking on it)
- Click Add a To-Do button
- Observe network tab. A request to the
/todo
endpoint should fire, return a 200 - 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!
- Create a todo with network tab open
- In the response from the
/todo
request, note down the numerical id in the last part of thedelete_path
- In the sourcecode in the
design_todo_button.vue
component, manually set thependingTodo
prop with your todo from above:
pendingTodo() {
return {
id: 'gid://gitlab/Todo/<YOUR_TODO_ID>',
};
},
- Open your design in GitLab, and click the "Mark as Done" button
- 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