Add Direct members tab to project members page

What does this MR do and why?

This MR adds a new "Direct members" tab to the project members page that displays only direct members (excluding inherited members from groups). This can already be done via filters but adding a tab just adds an overview of how many direct members there are and an easy and direct way to show them. Especially in cases where there are hundereds if not thousands of users available in a group, but only a handful are assigned directly.

Changes

  1. app/assets/javascripts/members/constants.js

    • Added directMembers: 'directMembers' to MEMBERS_TAB_TYPES
    • Added directMembers: 'direct_members' to TAB_QUERY_PARAM_VALUES
  2. app/assets/javascripts/members/tabs_metadata.js

    • Added new tab configuration for "Direct members" between the main "Members" tab and "Groups" tab
    • The tab uses the same table fields and sorting options as the main Members tab
    • Filters out the "with_inherited_permissions" token to show only direct members
  3. app/assets/javascripts/pages/projects/project_members/index.js

    • Added configuration for the directMembers tab with appropriate table fields and search functionality
    • Uses a separate storage key for recent searches: project_direct_members

Behavior

  • The "Direct members" tab will display only members directly assigned to the project
  • It excludes members inherited from group links
  • The tab includes the same columns as the main Members tab (account, role, expiration, actions, source, activity)
  • Users can search and filter by role within this tab

Side note

  • ⚠️ We're mixing Tabs with Filters (it's already the case today here) but something to be aware of that we need to fix that down the line.

Screenshots or screen recordings

Before After
before after
after_tab

How to set up and validate locally

  1. https://gdk.test:3000/flightjs/Flight/-/project_members

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Sascha Eggenberger

Merge request reports

Loading
Loading