Improve the UX of the Members page to display multiple sources for one member

Problem

Users are confused why sometimes group and project members are listed multiple times. They would like an improved view that clearly states how many unique members are part of a group or project, and when someone has been added multiple times as a member, this should be transparent as well. See also #417760 (closed) to understand the customer impact better:

The UI doesn't show the direct membership, so we can't remove it.

Suggestion

The following requirements should be met:

1. Ensure member count represents unique number of members
2. Members that were added multiple times, for instance as direct members, via inheritance and group sharing, should be listed once, with an option to fold out details to view all their sources and roles.
   • Consider that we still need to display the highest role with which the member has access to the group or project they are looking at. See #337222 (closed).
3. Balance the need to display a list of members with the need to manage groups. It should still be possible to get an easy overview of the groups that were shared into the group/project so that the Owner can easily manage them, and for instance remove them, if necessary. This might be require two separate tabs, one for Members and one for Groups. Perhaps groups in the members overview could link to the overview listing invited groups.

See some initial design explorations here.

Iterations

1. Iteration: Display an entry on the Members page for each source that a member has gained access to the group or project from. This means that if a member has both inherited and direct access to a group or project, the member will be listed twice.
2. Iteration: Improve the UX of the Members page to combine entries for one member into one line. When a member has been added via multiple sources, users have the option to expand the sources field to see all sources and related permissions. By default, the source giving the member the highest permission is shown.

Proposal

Popover

Display a popover listing the additional sources.

In the source column, we indicate when there are other sources (+2 sources). Hovering over the source column reveals a popover that lists the additional sources.

This means that for each member, we will only display one row.

Update tab counts

Adjust the counts on tabs so they accurately reflect the number of members and do not count duplicates.

Implementation guide

Frontend

• Rename app/assets/javascripts/members/components/table/member_source.vue to group_link_source.vue
• Create a new app/assets/javascripts/members/components/table/member_source.vue file that accepts an array of sources as a prop
• In app/assets/javascripts/members/components/table/members_table.vue render the correct source component based on member type.
• Use popover component to display all the sources

Backend

• In app/serializers/member_entity.rb expose a sources attribute that returns an array of sources. Should have same format as source attribute. If backend is completed in a separate MR from the frontend keep source column so frontend continues to work.