Manage achievements for groups
Add the ability to create, award, and manage achievements for groups
Problem
With the addition of GitLab Achievement (Badging/Award) System groups need a UI to create, award, and manage achievements for groups and projects.
Proposal
Add a section to group and project General settings -/edit to manage achievements.
Add achievements section below Badges section
| Description | Mockup |
|---|---|
| Add/Edit modal. Replace add with edit for edit modal |  |
| Award to dropdown |  |
| Ellipse options |  |
Implementation Plan
We have a hidden screen to view a group's achievements (see !129370 (merged))
We need to flesh this out to:
- Be able to create a new achievement
- Be able to update an achievement
- Be able to delete an achievement
- Be able to award an achievement
- Revoke an achievement
- Delete a "user" achievement
- Look better
Create achievement
Conditionally display an Add achievement button at the top of the achievements page if the current user can :admin_achievement.
I think using Vue-router would be a good idea to correctly handle achievements/new (and in the future achievements/1/edit etc. There is a similar implementation in app/assets/javascripts/crm/contacts/components/contacts_root.vue
We should use the gl-drawer component from gitlab-ui (again as per contacts above).
We could hopefully use gl-form-fields to generate the form. This is the next iteration of contact_form_wrapper/crm_form.
I would suggest the first iteration doesn't need to include the avatar (that may be a little trickier). When we are ready to tackle this, I think the design management UI uses GraphQL to upload designs, so we can potentially borrow something from there.