Skip to content

Convert bootstrap tabs on group/members page to `GlTabs`

📖 What does this MR do?

Related to #324681 (closed), #230782 (closed), #230754 (closed)

Previously the group/project members page was comprised of 4 separate Vue applications that used Bootstrap tabs. As part of an effort to remove Bootstrap tabs from the codebase this MR coverts the group/project member page into 1 Vue application that uses GlTabs.

This MR builds on top of a few other MRs:

💻 Local testing

  1. Create a group or project and navigate to Group or Project -> Members

How to add a group to the Groups tab

  1. Navigate to Group or Project -> Members
  2. Click the Invite group tab

How to add an invited member to the Invited tab

  1. Navigate to Group or Project -> Members
  2. In the GitLab member or Email address enter an email that a user does not already own
  3. Click Invite "example@test.com" by email

How to add a user to the Access requests tab

  1. Log in (or impersonate) a user that doesn't already have access to the group or project
  2. Navigate to the group or project overview
  3. Click Request access located below the project/group name

📷 Screenshots

Visual/functional changes are very minimal. Slightly lighter tab text, GitLab UI focus state

View Before After
Group members Screen_Shot_2021-05-14_at_1.24.21_PM Screen_Shot_2021-05-14_at_1.14.52_PM
Group shared groups Screen_Shot_2021-05-14_at_1.24.29_PM Screen_Shot_2021-05-14_at_1.15.08_PM
Group invited Screen_Shot_2021-05-14_at_1.24.41_PM Screen_Shot_2021-05-14_at_1.15.23_PM
Group access requests Screen_Shot_2021-05-14_at_1.24.52_PM Screen_Shot_2021-05-14_at_1.15.44_PM
Project members Screen_Shot_2021-05-14_at_1.25.23_PM Screen_Shot_2021-05-14_at_1.16.21_PM
Project shared groups Screen_Shot_2021-05-14_at_1.25.32_PM Screen_Shot_2021-05-14_at_1.16.31_PM
Project invited Screen_Shot_2021-05-14_at_1.25.43_PM Screen_Shot_2021-05-14_at_1.16.41_PM
Project access requests Screen_Shot_2021-05-14_at_1.25.57_PM Screen_Shot_2021-05-14_at_1.16.52_PM

🚦 Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • [-] Label as security and @ mention @gitlab-com/gl-security/appsec
  • [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • [-] Security reports checked/validated by a reviewer from the AppSec team
Edited by Peter Hegman

Merge request reports