Skip to content

Remove HAML tabs from user profile

  • Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA

What does this MR do and why?

Background

This merge request intends to resolve #435899 by removing the legacy user tabs, and simplifying the result where easy wins are possible.

Currently, the user/show actions are in an intermediate state due to the navigation overhaul. The rendering of the content for these sections is still coupled to the legacy bootstrap user tabs that are being rendered in a hidden state. Although this code will ultimately be removed, we have some opportunities to delete more code and simplify the legacy solution while it exists.

Alternative Implementation

The issue this MR comes from (#435899) calls for an implementation of moving the data attributes in the hidden tabs to the sidebar (I assumed this meant the vue Super Sidebar™) and then to change the event listeners in user_tabs.js to point to those data attributes in the sidebar. This initially seemed like a good path forward, but getting this implementation to a working state ended having some unforeseen difficulties:

  1. The state of the menu items has an abstraction that requires a bit of modification both on the rails side and the vue side to be able to set arbitrary data attributes.
  2. There is a race condition between the mounting of the Vue Super Sidebar menu items and the initialization of the event handlers in user_tabs.js that required some complexity to successfully bind events, some of which tied into the newer code that is part of the overhaul.

The result of this ended up tangling the legacy code with the newer overhauled code, and felt like we ended up with more complexity than we started with. It also kept us from deleting more code that was no longer used and no longer made sense without the tabs present. I have the code for this implementation in another branch if it would be useful to look through.

Implementation in this MR

This MR removes the user tabs and preserves the current functionality while simplifying the user_tabs.js logic. Instead of data attributes on individual nav items, we can put data attributes on a single div container and remove all logic related to dynamically loading the page as the tab changes. This implementation results in more deleted code while also not involving any of part of the Super Sidebar with legacy code. Some light refactors and renaming of methods are also done to help readability.

MR acceptance checklist

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

Screenshots or screen recordings

These screen captures show that master looks and behaves essentially identically to this refactored feature branch. Each video features three separate logged in users: the default root data, a user with a mass amount of data to test pagination, and a new user with no data.

note: the Activity section shows a bug that appears on both master and this branch where the zero data state for Activities will be shown at the end of the infinite scroll list when activity items are an exact multiple of 20. This happens because the zero data state seems to be activated by having a page size of 0 items, and the next page is always fetched if there are a full 20 items in the page that just finished.

Before After
overview-master overview-branch
activity-master activity-branch
groups-master groups-branch
contributed-master contributed-branch
personalProjects-master personalProjects-branch
starred-master starred-branch
snippets-master snippets-branch
followers-master followers-branch
following-master following-branch
Screenshot_2024-07-07_at_11.11.47_PM Screenshot_2024-07-07_at_11.12.29_PM

How to set up and validate locally

  1. Login as a user and visit the /users/:username path.
  2. For each selected user profile section, swap between master and the feature branch, ensuring both views look and interact the same.
  3. To test the pagination fully, creating mass resources for a given user can be accomplished with this script: https://gitlab.com/-/snippets/3725910
  4. Testing with a brand new user that has no data can be useful to see the zero data states - these views should be identical between master and the feature branch
  5. To test the blocked user view, block a user by going into the rails console and running user.ban, then visit their profile (/user/:username) as a signed out visitor. These views should be identical between master and the feature branch.
Edited by Van Anderson

Merge request reports