Design review: sticky header in the MR page

Overview 💡

This is coming from the consolidating actions button issue #249601 (closed)

There was feedback from recent SUS research (FY22-Q1 SUS Verbatims) and also from the async design critique

Verbatim example from the research:

It is overwhelming as the UI is cluttered with so many features

Goal of the design 🎯

To have an accessible, global action button set in one single location of the UI.

Design 🎨

Please keep in mind that this is not ready to be implemented. I would still call it a draft, so the UI text would be revisited later talking to @aqualls and @pedroms

Clickable prototype 👀

• To make it more clear, I've also created a clickable prototype in Figma 🔗
• If you click on Add a To Do then you can switch the different versions with the different sizes of the action buttons.

Before scrolling

Overview, Commits and Pipelines tab

Open with options	More options

• The rationale behind having the open with option to the top was to make it easily accessible to the Web IDE and VS code.

Users who cannot merge the MR - we can hide the merge button.

Changes tab

Review options	More options

When the MR is mergeable

Modal1	Modal2	Modal3

When the MR is not mergeable

Users need to double-check by clicking the unblock merge button. Two possible approaches (which can also be two iterative steps):

1. Simply lead the user to the merge widget in the Overview tab, where they can see what's blocking the merge.
2. OR have a modal-only approach, that duplicates the contents of the merge widget in a modal (something like this).

Next steps 🚀

• Re-work corresponding to the team's feedback
• Validate the design by running a solution validation
• Plan how we can deliver this iteratively
• Deliver 💥

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.