Skip to content

Frontend FAQ

Rules of Frontend FAQ

  1. You talk about Frontend FAQ. Please share links to it whenever applicable, so more eyes catch when content gets outdated.
  2. Keep it short and simple. Whenever an answer needs more than two sentences it does not belong here.
  3. Provide background when possible. Linking to relevant source code, issue / epic, or other documentation helps to understand the answer.
  4. If you see something, do something. Please remove or update any content that is outdated as soon as you see it.

FAQ

1. How do I find the Rails route for a page?

Check the 'page' data attribute

The easiest way is to type the following in the browser while on the page in question:

document.body.dataset.page

Find here the source code setting the attribute.

Rails routes

The rake routes command can be used to list all the routes available in the application, piping the output into grep, we can perform a search through the list of available routes. The output includes the request types available, route parameters and the relevant controller.

bundle exec rake routes | grep "issues"

2. modal_copy_button vs clipboard_button

The clipboard_button uses the copy_to_clipboard.js behaviour, which is initialized on page load, so if there are vue-based clipboard buttons that don't exist at page load (such as ones in a GlModal), they do not have the click handlers associated with the clipboard package.

modal_copy_button was added that manages an instance of the clipboard plugin specific to the instance of that component, which means that clipboard events are bound on mounting and destroyed when the button is, mitigating the above issue. It also has bindings to a particular container or modal ID available, to work with the focus trap created by our GlModal.

3. A gitlab-ui component not conforming to Pajamas Design System

Some Pajamas Design System components implemented in gitlab-ui do not conform with the design system specs because they lack some planned features or are not correctly styled yet. In the Pajamas website, a banner on top of the component examples indicates that:

This component does not yet conform to the correct styling defined in our Design System. Refer to the Design System documentation when referencing visuals for this component.

For example, at the time of writing, this type of warning can be observed for all form components. It, however, doesn't imply that the component should not be used.

GitLab always asks to use <gl-*> components whenever a suitable component exists. It makes codebase unified and more comfortable to maintain/refactor in the future.

Ensure a Product Designer reviews the use of the non-conforming component as part of the MR review. Make a follow up issue and attach it to the component implementation epic found within the Components of Pajamas Design System epic.