Refactor list_selector for groups to work in various contexts

When working on a bug fix for a branch protection, we realised that we need to use a different API to fetch a certain set of groups (projectGroups vs getGroups with project access. But the list_selector of type groups already has 3 different fetch methods. Adding another one with each new context feels like defeating the purpose of a reusable component. Here's a plan of what we could do:

1. Remove fetchSubgroupsBySearchTerm from the component, as it was only used for allowed to merge/push rule drawer. Once this MR is merged - !158253 (merged) - this variant will no longer be in use.
2. Add a Storybook story for that shared component (growing and becoming too specific too fast). This will allow us to document various uses and types of the component. And make it easier to reuse it and maintain in the future. ➡ story for group item added in !158639 (merged)
3. Figure out how to actually make that component reusable, so it can consume different endpoints based on the context. Ideally, we want to separate the data from the component. We ended up in the situation in which each location requires different fetch and they are all added to the component.
4. Use list_selector with the right API in rules_drawer.vue