UX improvements in MR diff settings dropdown
Problem to solve
The dropdown from the ellipsis menu above the MR diff in the Changes tab doesn't show the current selection. Our Pajamas guidelines for dropdowns state that with multi-select items such as this:
Each item contains a checkbox and can be clicked to select that item. The dropdown stays open when making selections and each selection will send a request to update the content. The dropdown closes when a user clicks outside of the dropdown or if the user clicks the “x” icon in the top right corner.
This is an interesting use case as 2 items above the line are single-selection and open a new view, while the other item above the line and the 2 below the line are more along the lines of multi-select view preferences. As part of showing Static Analysis findings in the MR diff, we may want to utilize this component to show/ hide the finding. Let's discuss whether it's better UX to show a checkmark and static text in place of the text changing between show and hide. AFAIK most of our dropdowns use the
Related to gitlab-com/www-gitlab-com#11204 (closed)