Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.0-rc42

9 files changed, 136 insertions, 26 deletions

diff --git a/doc/development/fe_guide/architecture.md b/doc/development/fe_guide/architecture.md
index 3d27f67a8a6..c7e1ba59f23 100644
--- a/doc/development/fe_guide/architecture.md
+++ b/doc/development/fe_guide/architecture.md
@@ -15,5 +15,5 @@ You can find the Frontend Architecture experts on the [team page](https://about.
 
 ## Examples
 
-You can find documentation about the desired architecture for a new feature
-built with Vue.js [here](vue.md).
+You can find [documentation about the desired architecture](vue.md) for a new
+feature built with Vue.js.
diff --git a/doc/development/fe_guide/dependencies.md b/doc/development/fe_guide/dependencies.md
index 7f078df887d..ba97e7e39be 100644
--- a/doc/development/fe_guide/dependencies.md
+++ b/doc/development/fe_guide/dependencies.md
@@ -18,9 +18,9 @@ automatically create merge requests for updating dependencies of several project
 up-to-date list of projects managed by the renovate bot in the project’s README. Some key dependencies
 updated using renovate are:
 
-- [`@gitlab/ui`](https://gitlab.com/gitlab-org/gitlab-ui/)
-- [`@gitlab/svgs`](https://gitlab.com/gitlab-org/gitlab-svgs/)
-- [`@gitlab/eslint-config`](https://gitlab.com/gitlab-org/gitlab-eslint-config)
+- [`@gitlab/ui`](https://gitlab.com/gitlab-org/gitlab-ui)
+- [`@gitlab/svgs`](https://gitlab.com/gitlab-org/gitlab-svgs)
+- [`@gitlab/eslint-plugin`](https://gitlab.com/gitlab-org/frontend/eslint-plugin)
 
 ### Blocked dependencies
 
diff --git a/doc/development/fe_guide/event_tracking.md b/doc/development/fe_guide/event_tracking.md
index 93e135772ef..79ea80a52ea 100644
--- a/doc/development/fe_guide/event_tracking.md
+++ b/doc/development/fe_guide/event_tracking.md
@@ -1,5 +1,5 @@
 ---
-redirect_to: '../telemetry/index.md'
+redirect_to: '../product_analytics/index.md'
 ---
 
-This document was moved to [another location](../telemetry/index.md).
+This document was moved to [another location](../product_analytics/index.md).
diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md
index 82cd19dce4f..ad3958d4496 100644
--- a/doc/development/fe_guide/graphql.md
+++ b/doc/development/fe_guide/graphql.md
@@ -187,7 +187,7 @@ As shown in the code example by using `produce`, we can perform any kind of dire
 `draftState`. Besides, `immer` guarantees that a new state which includes the changes to `draftState` will be generated.
 
 Finally, to verify whether the immutable cache update is working properly, we need to change
-`assumeImmutableResults` to `true` in the `default client config` (see [Apollo Client](#apollo-client) for more info). 
+`assumeImmutableResults` to `true` in the `default client config` (see [Apollo Client](#apollo-client) for more info).
 
 If everything is working properly `assumeImmutableResults` should remain set to `true`.
 
@@ -308,7 +308,7 @@ const resolvers = {
 export default resolvers;
 ```
 
-We need to pass resolvers object to our existing Apollo Client:
+We need to pass a resolvers object to our existing Apollo Client:
 
 ```javascript
 // graphql.js
@@ -319,13 +319,13 @@ import resolvers from './graphql/resolvers';
 const defaultClient = createDefaultClient(resolvers);
 ```
 
-Now every single time on attempt to fetch a version, our client will fetch `id` and `sha` from the remote API endpoint and will assign our hardcoded values to `author` and `createdAt` version properties. With this data, frontend developers are able to work on UI part without being blocked by backend. When actual response is added to the API, a custom local resolver can be removed fast and the only change to query/fragment is `@client` directive removal.
+For each attempt to fetch a version, our client will fetch `id` and `sha` from the remote API endpoint and will assign our hardcoded values to the `author` and `createdAt` version properties. With this data, frontend developers are able to work on their UI without being blocked by backend. When the actual response is added to the API, our custom local resolver can be removed and the only change to the query/fragment is to remove the `@client` directive.
 
 Read more about local state management with Apollo in the [Vue Apollo documentation](https://vue-apollo.netlify.app/guide/local-state.html#local-state).
 
 ### Using with Vuex
 
-When Apollo Client is used within Vuex and fetched data is stored in the Vuex store, there is no need in keeping Apollo Client cache enabled. Otherwise we would have data from the API stored in two places - Vuex store and Apollo Client cache. More to say, with Apollo's default settings, a subsequent fetch from the GraphQL API could result in fetching data from Apollo cache (in the case where we have the same query and variables). To prevent this behavior, we need to disable Apollo Client cache passing a valid `fetchPolicy` option to its constructor:
+When Apollo Client is used within Vuex and fetched data is stored in the Vuex store, there is no need to keep Apollo Client cache enabled. Otherwise we would have data from the API stored in two places - Vuex store and Apollo Client cache. With Apollo's default settings, a subsequent fetch from the GraphQL API could result in fetching data from Apollo cache (in the case where we have the same query and variables). To prevent this behavior, we need to disable Apollo Client cache by passing a valid `fetchPolicy` option to its constructor:
 
 ```javascript
 import fetchPolicies from '~/graphql_shared/fetch_policy_constants';
diff --git a/doc/development/fe_guide/icons.md b/doc/development/fe_guide/icons.md
index b539293e9cf..67add5709d9 100644
--- a/doc/development/fe_guide/icons.md
+++ b/doc/development/fe_guide/icons.md
@@ -1,9 +1,10 @@
 # Icons and SVG Illustrations
 
-We manage our own Icon and Illustration library in the [`gitlab-svgs`](https://gitlab.com/gitlab-org/gitlab-svgs) repository.
-This repository is published on [npm](https://www.npmjs.com/package/@gitlab/svgs) and managed as a dependency via yarn.
-You can browse all available Icons and Illustrations [here](https://gitlab-org.gitlab.io/gitlab-svgs).
-To upgrade to a new version run `yarn upgrade @gitlab/svgs`.
+We manage our own icon and illustration library in the [`gitlab-svgs`](https://gitlab.com/gitlab-org/gitlab-svgs)
+repository. This repository is published on [npm](https://www.npmjs.com/package/@gitlab/svgs),
+and is managed as a dependency with yarn. You can browse all available
+[icons and illustrations](https://gitlab-org.gitlab.io/gitlab-svgs). To upgrade
+to a new version run `yarn upgrade @gitlab/svgs`.
 
 ## Icons
 
@@ -21,10 +22,11 @@ To use a sprite Icon in HAML or Rails we use a specific helper function :
 sprite_icon(icon_name, size: nil, css_class: '')
 ```
 
-- **icon_name** Use the icon_name that you can find in the SVG Sprite
-  ([Overview is available here](https://gitlab-org.gitlab.io/gitlab-svgs)).
-- **size (optional)** Use one of the following sizes : 16, 24, 32, 48, 72 (this will be translated into a `s16` class)
-- **css_class (optional)** If you want to add additional CSS classes
+- **icon_name**: Use the icon_name for the SVG sprite in the list of
+  ([GitLab SVGs](https://gitlab-org.gitlab.io/gitlab-svgs)).
+- **size (optional)**: Use one of the following sizes : 16, 24, 32, 48, 72 (this
+  will be translated into a `s16` class)
+- **css_class (optional)**: If you want to add additional CSS classes.
 
 **Example**
 
@@ -66,10 +68,12 @@ export default {
 </template>
 ```
 
-- **name** Name of the Icon in the SVG Sprite ([Overview is available here](https://gitlab-org.gitlab.io/gitlab-svgs)).
-- **size (optional)** Number value for the size which is then mapped to a specific CSS class
-  (Available Sizes: 8, 12, 16, 18, 24, 32, 48, 72 are mapped to `sXX` CSS classes)
-- **class (optional)** Additional CSS Classes to add to the SVG tag.
+- **name**: Name of the icon of the SVG sprite, as listed in the
+  ([GitLab SVG Previewer](https://gitlab-org.gitlab.io/gitlab-svgs)).
+- **size: (optional)** Number value for the size which is then mapped to a
+  specific CSS class (Available sizes: 8, 12, 16, 18, 24, 32, 48, 72 are mapped
+  to `sXX` CSS classes)
+- **class (optional)**: Additional CSS classes to add to the SVG tag.
 
 ### Usage in HTML/JS
 
diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md
index ef23b6c4ed2..f909866d44e 100644
--- a/doc/development/fe_guide/index.md
+++ b/doc/development/fe_guide/index.md
@@ -76,6 +76,10 @@ How we use SVG for our [Icons and Illustrations](icons.md).
 
 General information about frontend [dependencies](dependencies.md) and how we manage them.
 
+## Keyboard Shortcuts
+
+How we implement [keyboard shortcuts](keyboard_shortcuts.md) that can be customized and disabled.
+
 ## Frontend FAQ
 
 Read the [frontend's FAQ](frontend_faq.md) for common small pieces of helpful information.
diff --git a/doc/development/fe_guide/keyboard_shortcuts.md b/doc/development/fe_guide/keyboard_shortcuts.md
new file mode 100644
index 00000000000..da9b3702a8d
--- /dev/null
+++ b/doc/development/fe_guide/keyboard_shortcuts.md
@@ -0,0 +1,98 @@
+# Implementing keyboard shortcuts
+
+We use [Mousetrap](https://craig.is/killing/mice) to implement keyboard
+shortcuts in GitLab.
+
+Mousetrap provides an API that allows keyboard shortcut strings (like
+`mod+shift+p` or `p b`) to be bound to a JavaScript handler:
+
+```javascript
+// Don't do this; see note below
+Mousetrap.bind('p b', togglePerformanceBar)
+```
+
+However, associating a hard-coded key sequence to a handler (as shown above)
+prevents these keyboard shortcuts from being customized or disabled by users.
+
+To allow keyboard shortcuts to be customized, commands are defined in
+`~/behaviors/shortcuts/keybindings.js`. The `keysFor` method is responsible for
+returning the correct key sequence for the provided command:
+
+```javascript
+import { keysFor, TOGGLE_PERFORMANCE_BAR } from '~/behaviors/shortcuts/keybindings'
+
+Mousetrap.bind(keysFor(TOGGLE_PERFORMANCE_BAR), togglePerformanceBar);
+```
+
+## Shortcut customization
+
+`keybindings.js` stores keyboard shortcut customizations as a JSON string in
+`localStorage`. When `keybindings.js` is first imported, it fetches any
+customizations from `localStorage` and merges these customizations into the
+default set of keybindings. There is no UI to edit these customizations.
+
+## Adding new shortcuts
+
+Because keyboard shortcuts can be customized or disabled by end users,
+developers are encouraged to build _lots_ of keyboard shortcuts into GitLab.
+Shortcuts that are less likely to be used should be
+[disabled](#disabling-shortcuts) by default.
+
+To add a new shortcut, define and export a new command string in
+`keybindings.js`:
+
+```javascript
+export const MAKE_COFFEE = 'foodAndBeverage.makeCoffee';
+```
+
+Next, add a new command definition under the appropriate group in the
+`keybindingGroups` array:
+
+```javascript
+{
+  description: s__('KeyboardShortcuts|Make coffee'),
+  command: MAKE_COFFEE,
+  defaultKeys: ['mod+shift+c'],
+  customKeys: customizations[MAKE_COFFEE],
+}
+```
+
+Finally, in the application code, import the `keysFor` function and the new
+command and bind the shortcut to the handler using Mousetrap:
+
+```javascript
+import { keysFor, MAKE_COFFEE } from '~/behaviors/shortcuts/keybindings'
+
+Mousetrap.bind(keysFor(MAKE_COFFEE), makeCoffee);
+```
+
+See the existing the command definitions in `keybindings.js` for more examples.
+
+## Disabling shortcuts
+
+A shortcut can be disabled, also known as _unassigned_, by assigning the
+shortcut to an empty array `[]`. For example, to introduce a new shortcut that
+is disabled by default, a command can be defined like this:
+
+```javascript
+export const MAKE_MOCHA = 'foodAndBeverage.makeMocha';
+
+{
+  description: s__('KeyboardShortcuts|Make a mocha'),
+  command: MAKE_MOCHA,
+  defaultKeys: [],
+  customKeys: customizations[MAKE_MOCHA],
+}
+```
+
+## Make cross-platform shortcuts
+
+It's difficult to make shortcuts that work well in all platforms and browsers.
+This is one of the reasons that being able to customize and disable shortcuts is
+so important.
+
+One important way to make keyboard shortcuts more portable is to use the `mod`
+shortcut string, which resolves to `command` on Mac and `ctrl` otherwise.
+
+See [Mousetrap's documentation](https://craig.is/killing/mice#api.bind.combo)
+for more information.
diff --git a/doc/development/fe_guide/tooling.md b/doc/development/fe_guide/tooling.md
index 5685ac5abcd..b93c0a9736b 100644
--- a/doc/development/fe_guide/tooling.md
+++ b/doc/development/fe_guide/tooling.md
@@ -101,7 +101,10 @@ Our code is automatically formatted with [Prettier](https://prettier.io) to foll
 
 ### Editor
 
-The easiest way to include prettier in your workflow is by setting up your preferred editor (all major editors are supported) accordingly. We suggest setting up prettier to run automatically when each file is saved. Find [here](https://prettier.io/docs/en/editors.html) the best way to set it up in your preferred editor.
+The recommended method to include Prettier in your workflow is to set up your
+preferred editor (all major editors are supported) accordingly. We suggest
+setting up Prettier to run when each file is saved. For instructions about using
+Prettier in your preferred editor, see the [Prettier documentation](https://prettier.io/docs/en/editors.html).
 
 Please take care that you only let Prettier format the same file types as the global Yarn script does (`.js`, `.vue`, `.graphql`, and `.scss`). In VSCode by example you can easily exclude file formats in your settings file:
 
diff --git a/doc/development/fe_guide/vuex.md b/doc/development/fe_guide/vuex.md
index 4badf3f0845..528dcb3b7f4 100644
--- a/doc/development/fe_guide/vuex.md
+++ b/doc/development/fe_guide/vuex.md
@@ -32,8 +32,9 @@ When using Vuex at GitLab, separate these concerns into different files to impro
   └── mutation_types.js # mutation types
 ```
 
-The following example shows an application that lists and adds users to the state.
-(For a more complex example implementation take a look at the security applications store in [here](https://gitlab.com/gitlab-org/gitlab/tree/master/ee/app/assets/javascripts/vue_shared/security_reports/store))
+The following example shows an application that lists and adds users to the
+state. (For a more complex example implementation, review the security
+applications stored in this [repository](https://gitlab.com/gitlab-org/gitlab/tree/master/ee/app/assets/javascripts/vue_shared/security_reports/store)).
 
 ### `index.js`