Background

Currently code insights "add or remove insights" view (see the picture below) load all reachable/accessible to user insights at once (and actually render them all as well). After that users can search over these insights and select (add) or deselect (remove) to include/exclude insights from a dashboard.

Problem

The problem here has two parts

• First of all we render all insights at once which is a problem, and instead of it we should adopt here "show more"-like pagination
• UI there isn't perfect either, we don't change the order of the insight list and this means you can't see picked insights at the beginning, you have to scroll through this list and find it manually

Solution

So I think for the first problem with pagination solution is simple, we just adopt our internal show more pagination there and pagination UI. Similar to what we have in search context and branch pickers

Search context picker	Branch picker

For the second problem with UI we should add multi combobox picker where all selected values are represented via "pills" and you can remove them individually. Similar to what we have in batch changes list page (the group filter picker)

Note: that library that we use in the batch changes UI isn't perfect (in fact we have a hunch that this library adds a lot of complexity for TypeScript compiler according to TS types profiler report). So we should implement our own multi box based on our combobox UI that we already have. It shouldn't be a big stopper for us, at the first glance it seems as not complicated tasks to do.