75 lines
3.3 KiB
Markdown
75 lines
3.3 KiB
Markdown
# 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.
|
|
1. **Keep it short and simple.**
|
|
Whenever an answer needs more than two sentences it does not belong here.
|
|
1. **Provide background when possible.**
|
|
Linking to relevant source code, issue / epic, or other documentation helps
|
|
to understand the answer.
|
|
1. **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:
|
|
|
|
```javascript
|
|
document.body.dataset.page
|
|
```
|
|
|
|
Find here the [source code setting the attribute](https://gitlab.com/gitlab-org/gitlab/blob/cc5095edfce2b4d4083a4fb1cdc7c0a1898b9921/app/views/layouts/application.html.haml#L4).
|
|
|
|
#### 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.
|
|
|
|
```sh
|
|
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](https://www.npmjs.com/package/clipboard) 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](https://design.gitlab.com/)
|
|
|
|
Some [Pajamas Design System](https://design.gitlab.com/) 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](https://design.gitlab.com/components/forms). 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](https://about.gitlab.com/company/team/?department=ux-department)
|
|
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](https://gitlab.com/groups/gitlab-org/-/epics/973).
|