Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

7 files changed, 62 insertions, 24 deletions

diff --git a/doc/development/fe_guide/accessibility.md b/doc/development/fe_guide/accessibility.md
index c4ebef4c289..e71e414002a 100644
--- a/doc/development/fe_guide/accessibility.md
+++ b/doc/development/fe_guide/accessibility.md
@@ -23,6 +23,17 @@ they found that "ARIA correlated to higher detectable errors".
 It is likely that *misuse* of ARIA is a big cause of increased errors,
 so when in doubt don't use `aria-*`, `role`, and `tabindex` and stick with semantic HTML.
 
+## Enable keyboard navigation on macOS
+
+By default, macOS limits the <kbd>tab</kbd> key to **Text boxes and lists only**. To enable full keyboard navigation:
+
+1. Open **System Preferences**.
+1. Select **Keyboard**.
+1. Open the **Shortcuts** tab.
+1. Enable the setting **Use keyboard navigation to move focus between controls**.
+
+You can read more about enabling browser-specific keyboard navigation on [a11yproject](https://www.a11yproject.com/posts/2017-12-29-macos-browser-keyboard-navigation/).
+
 ## Quick checklist
 
 - [Text](#text-inputs-with-accessible-names),
diff --git a/doc/development/fe_guide/development_process.md b/doc/development/fe_guide/development_process.md
index 4e50621add4..cd82a7dadc3 100644
--- a/doc/development/fe_guide/development_process.md
+++ b/doc/development/fe_guide/development_process.md
@@ -56,7 +56,7 @@ Please use your best judgment when to use it and please contribute new points th
 - [ ] **Performance** Have you checked performance? For example do the same thing with 500 comments instead of 1. Document the tests and possible findings in the MR so a reviewer can directly see it.
 - [ ] Have you tested with a variety of our [supported browsers](../../install/requirements.md#supported-web-browsers)? You can use [browserstack](https://www.browserstack.com/) to be able to access a wide variety of browsers and operating systems.
 - [ ] Did you check the mobile view?
-- [ ] Check the built webpack bundle (For the report run `WEBPACK_REPORT=true gdk run`, then open `webpack-report/index.html`) if we have unnecessary bloat due to wrong references, including libraries multiple times, etc.. If you need help contact the webpack [domain expert](https://about.gitlab.com/handbook/engineering/frontend/#frontend-domain-experts)
+- [ ] Check the built webpack bundle (For the report run `WEBPACK_REPORT=true gdk start`, then open `webpack-report/index.html`) if we have unnecessary bloat due to wrong references, including libraries multiple times, etc.. If you need help contact the webpack [domain expert](https://about.gitlab.com/handbook/engineering/frontend/#frontend-domain-experts)
 - [ ] **Tests** Not only greenfield tests - Test also all bad cases that come to your mind.
 - [ ] If you have multiple MR's then also smoke test against the final merge.
 - [ ] Are there any big changes on how and especially how frequently we use the API then let production know about it
diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md
index 0229aa0123a..44d43a32803 100644
--- a/doc/development/fe_guide/graphql.md
+++ b/doc/development/fe_guide/graphql.md
@@ -103,7 +103,6 @@ Default client accepts two parameters: `resolvers` and `config`.
 - `config` parameter takes an object of configuration settings:
   - `cacheConfig` field accepts an optional object of settings to [customize Apollo cache](https://www.apollographql.com/docs/react/caching/cache-configuration/#configuring-the-cache)
   - `baseUrl` allows us to pass a URL for GraphQL endpoint different from our main endpoint (for example, `${gon.relative_url_root}/api/graphql`)
-  - `assumeImmutableResults` (set to `false` by default) - this setting, when set to `true`, assumes that every single operation on updating Apollo Cache is immutable. It also sets `freezeResults` to `true`, so any attempt on mutating Apollo Cache throws a console warning in development environment. Please ensure you're following the immutability pattern on cache update operations before setting this option to `true`.
   - `fetchPolicy` determines how you want your component to interact with the Apollo cache. Defaults to "cache-first".
 
 ### Multiple client queries for the same object
@@ -179,7 +178,7 @@ with a **new and updated** object.
 
 To facilitate the process of updating the cache and returning the new object we
 use the library [Immer](https://immerjs.github.io/immer/).
-When possible, follow these conventions:
+Please, follow these conventions:
 
 - The updated cache is named `data`.
 - The original cache data is named `sourceData`.
@@ -204,11 +203,6 @@ client.writeQuery({
 As shown in the code example by using `produce`, we can perform any kind of direct manipulation of the
 `draftState`. Besides, `immer` guarantees that a new state which includes the changes to `draftState` is generated.
 
-Finally, to verify whether the immutable cache update is working properly, we need to change
-`assumeImmutableResults` to `true` in the default client configuration. See [Apollo Client](#apollo-client) for more information.
-
-If everything is working properly `assumeImmutableResults` should remain set to `true`.
-
 ## Usage in Vue
 
 To use Vue Apollo, import the [Vue Apollo](https://github.com/vuejs/vue-apollo) plugin as well
@@ -1106,17 +1100,15 @@ To test the logic of Apollo cache updates, we might want to mock an Apollo Clien
 
 To separate tests with mocked client from 'usual' unit tests, create an additional factory and pass the created `mockApollo` as an option to the `createComponent`-factory. This way we only create Apollo Client instance when it's necessary.
 
-We need to inject `VueApollo` to the Vue local instance and, likewise, it is recommended to call `localVue.use()` in `createMockApolloProvider()` to only load it when it is necessary.
+We need to inject `VueApollo` into the Vue instance by calling `Vue.use(VueApollo)`. This will install `VueApollo` globally for all the tests in the file. It is recommended to call `Vue.use(VueApollo)` just after the imports.
 
 ```javascript
 import VueApollo from 'vue-apollo';
-import { createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
 
-const localVue = createLocalVue();
+Vue.use(VueApollo);
 
 function createMockApolloProvider() {
-  localVue.use(VueApollo);
-
   return createMockApollo(requestHandlers);
 }
 
@@ -1124,7 +1116,6 @@ function createComponent(options = {}) {
   const { mockApollo } = options;
   ...
   return shallowMount(..., {
-    localVue,
     apolloProvider: mockApollo,
     ...
   });
@@ -1194,7 +1185,6 @@ describe('Some component', () => {
     const { mockApollo } = options;
 
     return shallowMount(Index, {
-      localVue,
       apolloProvider: mockApollo,
     });
   }
@@ -1281,7 +1271,6 @@ function createComponent(options = {}) {
   const { mockApollo } = options;
 
   return shallowMount(Index, {
-    localVue,
     apolloProvider: mockApollo,
   });
 }
@@ -1414,7 +1403,6 @@ const createComponentWithApollo = ({ props = {} } = {}) => {
   mockApollo = createMockApollo([], mockResolvers); // resolvers are the second parameter
 
   wrapper = shallowMount(MyComponent, {
-    localVue,
     propsData: {},
     apolloProvider: mockApollo,
     // ...
@@ -1482,7 +1470,6 @@ function createComponent(options = {}) {
   const { mockApollo } = options;
 
   return shallowMount(Index, {
-    localVue,
     apolloProvider: mockApollo,
   });
 }
diff --git a/doc/development/fe_guide/storybook.md b/doc/development/fe_guide/storybook.md
index a46157d2cad..9c4bcf02389 100644
--- a/doc/development/fe_guide/storybook.md
+++ b/doc/development/fe_guide/storybook.md
@@ -47,8 +47,9 @@ To add a story:
 1. Write the story as per the [official Storybook instructions](https://storybook.js.org/docs/vue/writing-stories/introduction/)
 
    Notes:
-   - Specify the `title` field of the story as the component's file path from the `javascripts/` directory,
-     e.g. if the component is located at `app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.vue`, specify the story `title` as `vue_shared/components/sidebar/todo_toggle/todo_button`. This will ensure the Storybook navigation maps closely to our internal directory structure.
+   - Specify the `title` field of the story as the component's file path from the `javascripts/` directory.
+
+     For example, if the component is located at `app/assets/javascripts/vue_shared/components/sidebar/todo_toggle/todo_button.vue`, specify the story `title` as `vue_shared/components/sidebar/todo_toggle/todo_button`. This will ensure the Storybook navigation maps closely to our internal directory structure.
 
 ## Mock backend APIs
 
diff --git a/doc/development/fe_guide/style/scss.md b/doc/development/fe_guide/style/scss.md
index ffaaa3e87c7..5d5b250e9a9 100644
--- a/doc/development/fe_guide/style/scss.md
+++ b/doc/development/fe_guide/style/scss.md
@@ -133,6 +133,40 @@ Before adding a new variable for a color or a size, guarantee:
 - There isn't an existing one.
 - There isn't a similar one we can use instead.
 
+### Using `extend` at-rule
+
+Usage of the `extend` at-rule is prohibited due to [memory leaks](https://gitlab.com/gitlab-org/gitlab/-/issues/323021) and [the rule doesn't work as it should to](https://sass-lang.com/documentation/breaking-changes/extend-compound). Use mixins instead:
+
+```scss
+// Bad
+.gl-pt-3 {
+  padding-top: 12px;
+}
+
+.my-element {
+  @extend .gl-pt-3;
+}
+
+// compiles to
+.gl-pt-3, .my-element {
+  padding-top: 12px;
+}
+
+// Good
+@mixing gl-pt-3 {
+  padding-top: 12px;
+}
+
+.my-element {
+  @include gl-pt-3;
+}
+
+// compiles to
+.my-element {
+  padding-top: 12px;
+}
+```
+
 ## Linting
 
 We use [stylelint](https://stylelint.io) to check for style guide conformity. It uses the
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md
index 509e2f4b688..5d5d37e0398 100644
--- a/doc/development/fe_guide/vue.md
+++ b/doc/development/fe_guide/vue.md
@@ -73,9 +73,8 @@ component, is that you avoid the need to create a fixture or an HTML element in
 ##### provide/inject
 
 Vue supports dependency injection through [provide/inject](https://vuejs.org/v2/api/#provide-inject).
-Values passed to the component through `provide` can be accessed in the component the `inject` configuration.
-In the following example of a Vue app initialization, a value from HAML is passed to the component
-through the `provide` configuration:
+In the component the `inject` configuration accesses the values `provide` passes down. 
+This example of a Vue app initialization shows how the `provide` configuration passes a value from HAML to the component:
 
 ```javascript
 #js-vue-app{ data: { endpoint: 'foo' }}
@@ -251,7 +250,7 @@ return new Vue({
   render(createElement) {
     return createElement('my-component', {
       props: {
-        username: gon.current_username,
+        avatarUrl: gl.avatarUrl,
       },
     });
   },
diff --git a/doc/development/fe_guide/vue3_migration.md b/doc/development/fe_guide/vue3_migration.md
index 7da462a5f89..c6f480deb22 100644
--- a/doc/development/fe_guide/vue3_migration.md
+++ b/doc/development/fe_guide/vue3_migration.md
@@ -29,6 +29,12 @@ Component's computed properties / methods or external helpers.
 
 `$on`, `$once`, and `$off` methods [are removed](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md) from the Vue instance, so in Vue 3 it can't be used to create an event hub.
 
+**When to use**
+
+If you are in a Vue app that doesn't use any event hub, try to avoid adding a new one unless absolutely necessary. For example, if you need a child component to react to its parent's event, it's preferred to pass a prop down. Then, use the watch property on that prop in the child component to create the desired side effect. 
+
+If you need cross-component communication (between different Vue apps), then perhaps introducing a hub is the right decision.
+
 **What to use instead**
 
 Vue documentation recommends using the [mitt](https://github.com/developit/mitt) library. It's relatively small (200 bytes, compressed) and has a clear API: