gitlab-org--gitlab-foss/doc/development/fe_guide/frontend_faq.md

# 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

### 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"
```

### `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.
Create frontend FAQ (documentation) 2019-04-16 11:22:05 -04:00			`# 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.`
Update numbered lists for docs standards Ensure that all numbered lists use only 1. and no other numbers. Also ensure that numbered lists use proper spacing. 2019-07-18 22:20:32 -04:00			`1. Keep it short and simple.`
Create frontend FAQ (documentation) 2019-04-16 11:22:05 -04:00			`Whenever an answer needs more than two sentences it does not belong here.`
Update numbered lists for docs standards Ensure that all numbered lists use only 1. and no other numbers. Also ensure that numbered lists use proper spacing. 2019-07-18 22:20:32 -04:00			`1. Provide background when possible.`
Create frontend FAQ (documentation) 2019-04-16 11:22:05 -04:00			`Linking to relevant source code, issue / epic, or other documentation helps`
			`to understand the answer.`
Update numbered lists for docs standards Ensure that all numbered lists use only 1. and no other numbers. Also ensure that numbered lists use proper spacing. 2019-07-18 22:20:32 -04:00			`1. If you see something, do something.`
Create frontend FAQ (documentation) 2019-04-16 11:22:05 -04:00			`Please remove or update any content that is outdated as soon as you see it.`

			`## FAQ`

			`### How do I find the Rails route for a page?`

Add latest changes from gitlab-org/gitlab@master 2019-09-18 10:02:45 -04:00			`#### Check the 'page' data attribute`

Create frontend FAQ (documentation) 2019-04-16 11:22:05 -04:00			`The easiest way is to type the following in the browser while on the page in`
			`question:`

			```javascript
			`document.body.dataset.page`
			```

Add latest changes from gitlab-org/gitlab@master 2019-09-18 14:06:14 -04:00			`Find here the [source code setting the attribute](https://gitlab.com/gitlab-org/gitlab/blob/cc5095edfce2b4d4083a4fb1cdc7c0a1898b9921/app/views/layouts/application.html.haml#L4).`
Add latest changes from gitlab-org/gitlab@master 2019-09-18 10:02:45 -04:00
			`#### 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"`
			```
Add a New Copy Button That Works in Modals This copy button manages a local instance of the Clipboard plugin specific to it, which means it is created/destroyed on the creation/destruction of the component. This allows it to work well in gitlab-ui modals, as the event listeners are bound on creation of the button. It also allows for bindings to the `container` option of the Clipboard plugin, which allows it to work within the focus trap set by bootstrap's modals. 2019-06-06 05:36:17 -04:00
			### `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.`