Skip to content

No-Reload URL Permalinks

Thomas Randolph requested to merge 39048-generate-file-permalink-without-reloading-the-page into master

What does this MR do?

For #39048 (closed)

There are two effects of the code in this MR, both in service of a single feature.

The single feature is - as the title implies - to be able to switch to the permalink URL when viewing a file without triggering a full page reload.

The two effects are:

  1. Update the URL without causing the browser to request the document from the backend (the permalink and non-permalink documents are identical, so requesting a full page refresh is wasteful and slow).
  2. Change the page title to reflect the new URL

For the former, the permalink button and keyboard shortcut are simply updated to use the window.history object instead of directly changing the location. This works as far back as IE10, so there is no fallback provided.

For the latter, a simple string replacement is used to load the document title, replace the appropriate section, and then re-set the title. This is done without any knowledge of the path, ref, or project (as needed in setTitle) to avoid having to pass a lot of otherwise unavailable (?) data through the DOM.

Notable: Because this uses history.{push|replace}State, nothing is changing in the DOM. This means that the Vue app that sets the title never re-mounts. Because of this, navigating to the permalink works to update the title (since the logic runs in the handler for that behavior) but using the back button to go from the permalink back to the non-permalink does not update the title.

The correct solution for this is to place a frontend router in the browser that runs for every page. Then, when history states are popped, we can run universal updates like properly updating the title. This is a much larger task that will require some very high-level architectural work to make sure it adds as little weight as possible to the page. As such, it's well outside the scope of this MR. However, getting a well-architected router running globally will set the stage for much more robust SPAs and frontend routing.

Screenshots

There are no screenshots because the UI isn't changing.

Basically when y is pressed on a file page or the Permalink button is clicked, the page should not reload, but the URL should update with the new SHA URL.

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 Thomas Randolph

Merge request reports