Skip to content

Refactor members pagination from HAML to Vue

📖 What does this MR do?

Related to #327648 (closed) part of &5616

Currently the group/project member pages are composed of 4 separate Vue applications that use Bootstrap tabs. We would like to move these into one Vue app so we can use GlTabs and move towards deprecating Bootstrap tabs. As a step towards doing this we need to refactor the pagination that is currently rendered with HAML to Vue.

💻 Local testing

Project members

  1. Create a project
  2. Navigate to "Project" -> "Members"
  3. Use the form to add 5 users
  4. Change app/controllers/projects/project_members_controller.rb#L31 to:
@project_members = present_members(project_members.non_invite.page(params[:page]).per(2))

Group members

  1. Create a group
  2. Navigate to "Group" -> "Members"
  3. Use the from to add 5 users
  4. Use the form to add 5 invited members
    • In the GitLab member or Email address enter an email that a user does not already own
    • Click Invite "example@test.com" by email
  5. Change app/controllers/groups/group_members_controller.rb#L8 to 2

📷 Screenshots

View Before After
Group members Screen_Shot_2021-04-20_at_9.54.48_AM Screen_Shot_2021-04-20_at_9.51.44_AM
Group invites Screen_Shot_2021-04-20_at_9.55.08_AM Screen_Shot_2021-04-20_at_9.51.57_AM
Project members Screen_Shot_2021-04-20_at_9.54.19_AM Screen_Shot_2021-04-20_at_9.52.34_AM

🚦 Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • [-] 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