Skip to content

Extract common parts of MR Tabs to be reusable

Thomas Randolph requested to merge tor/maintenance/pajamas-conversion/new-mr-tabs-base-work into master

What does this MR do and why?

For #230769.

MR Description
We're here! 👉🏻 In preparation for swapping the New MR page to use Pajamas Tabs, we're extracting some of the code from the old class to shareable functions
!81499 (closed) This MR swaps the behavior code from the old Bootstrap implementation to the structure needed to support the Pajamas Tabs component

Unfortunately, the tabs behavior on the new MR creation page is shared with the real tabs on the full Merge Request page.
Because of this, there's a lot of code both here (in the tabs code) and in the page-specific code that loads it, that's unused in one or the other situation.

This MR extracts the shared code from the large tabs class into functions that can be used by the class or new code for the Pajamas Tabs.

The most substantial of these extractions are the two asynchronous loads for the pipelines and changes tabs.
Some UI parsing, like scrolling and computing offsets, is also extracted.

Screenshots or screen recordings

There isn't much to show since this is a behind-the-scenes refactor, but here are videos of the New MR creation page tabs:

Before After
before afterExtraction

Please note that two odd UX behaviors are by "design" and exist in both the before and after videos:

  1. The jumping to the top is because the URL is changing without using History, which means the browser actually reloads the page.
  2. When clicking the changes tab, the whole screen is expanded, shifting layout somewhat dramatically. This is reversed when clicking on other tabs.

Also note the following bugs that exist in the main branch already:

  1. When loading (a "fresh" load) of the pipelines tab, the pipelines tab is not marked as active. There is no tab marked as active.

How to set up and validate locally

  1. Check out this branch
  2. Go to the screen to create a new MR (you will select a source branch first, then choose to compare the branches and continue)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Thomas Randolph

Merge request reports