Update the milestone dropdown combobox to display separated sections and badge counters
Problem to solve
In order to complete the feature proposed in #121476 (closed), we'll need to change the existing milestone dropdown combobox
component to look like the propose prototype: #121476[group-milestone-3.png]
To do this, we'll want to allow for the component to have multiple separated sections. In the section headers there should be a badge counter of how many items are in each section. The search functionality should return results that narrow each section down.
This issue does not cover the scope of populating the dropdown with group milestones on the release edit page. That will be covered in #232577 (closed)
Intended users
User experience goal
The developer should be able to pass in props to make it so that this component renders multiple sections, each with a counter of how many items are in each section.
The user should be able to use this UI in order to select items from multiple sections. For example, project milestones and group milestones. They should be able to see how many items are in each section, and should be able to enter a single search term that returns results in each section.
Proposal
Update the current milestone dropdown combobox
component to be able to have separated sections and badge counters like the proposed design. The search functionality should return results in each section. Change the name of that component from project_milestone_combobox.vue to milestone_combobox.vue
Current | Proposed |
---|---|
![]() |
![]() |
Further details
This benefits the completion of #121476 (closed) by enabling the design proposal for the Release edit page.
Permissions and Security
- Add expected impact to members with no access (0)
- Add expected impact to Guest (10) members
- Add expected impact to Reporter (20) members
- Add expected impact to Developer (30) members
- Add expected impact to Maintainer (40) members
- Add expected impact to Owner (50) members