Add latest changes from gitlab-org/gitlab@master

4 files changed, 175 insertions, 40 deletions

diff --git a/doc/development/cicd/templates.md b/doc/development/cicd/templates.md
index efcc7b363ff..891555d93fc 100644
--- a/doc/development/cicd/templates.md
+++ b/doc/development/cicd/templates.md
@@ -16,7 +16,7 @@ All template files reside in the `lib/gitlab/ci/templates` directory, and are ca
 | Sub-directory  | Content                                                      | [Selectable in UI](#make-sure-the-new-template-can-be-selected-in-ui) |
 |----------------|--------------------------------------------------------------|-----------------------------------------------------------------------|
 | `/AWS/*`       | Cloud Deployment (AWS) related jobs                          | No                                                                    |
-| `/Jobs/*`      | Auto DevOps related jobs                                     | Yes                                                                   |
+| `/Jobs/*`      | Auto DevOps related jobs                                     | No                                                                    |
 | `/Pages/*`     | Static site generators for GitLab Pages (for example Jekyll) | Yes                                                                   |
 | `/Security/*`  | Security related jobs                                        | Yes                                                                   |
 | `/Verify/*`    | Verify/testing related jobs                                  | Yes                                                                   |
diff --git a/doc/development/documentation/styleguide.md b/doc/development/documentation/styleguide.md
index b099d589b0f..27ef0a595da 100644
--- a/doc/development/documentation/styleguide.md
+++ b/doc/development/documentation/styleguide.md
@@ -540,35 +540,10 @@ tenses, words, and phrases:
 
 ### Contractions
 
-- Use common contractions when it helps create a friendly and informal tone,
-  especially in tutorials, instructional documentation, and
-  [user interfaces](https://design.gitlab.com/content/punctuation/#contractions).
-  (Tested in [`Contractions.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/.vale/gitlab/Contractions.yml).)
-
-  <!-- vale gitlab.ContractionsKeep = NO -->
-  <!-- vale gitlab.ContractionsDiscard = NO -->
-  <!-- vale gitlab.FutureTense = NO -->
-  | Do       | Don't     |
-  |----------|-----------|
-  | it's     | it is     |
-  | can't    | cannot    |
-  | wouldn't | would not |
-  | you're   | you are   |
-  | you've   | you have  |
-  | haven't  | have not  |
-  | don't    | do not    |
-  | we're    | we are    |
-  | that's   | that is   |
-  | won't    | will not  |
-
-- Avoid less common contractions:
-
-  | Do           | Don't       |
-  |--------------|-------------|
-  | he would     | he'd        |
-  | it will      | it'll       |
-  | should have  | should've   |
-  | there would  | there'd     |
+Contractions can create a friendly and informal tone, especially in tutorials, instructional
+documentation, and [user interfaces](https://design.gitlab.com/content/punctuation/#contractions).
+
+Some contractions should be avoided:
 
 - Do not use contractions with a proper noun and a verb. For example:
 
@@ -580,13 +555,13 @@ tenses, words, and phrases:
 
   | Do                          | Don't                      |
   |-----------------------------|----------------------------|
-  | Do *not* install X with Y   | *Don't* install X with Y   |
+  | Do **not** install X with Y   | **Don't** install X with Y   |
 
 - Do not use contractions in reference documentation. For example:
 
   | Do                                       | Don't                                  |
   |------------------------------------------|----------------------------------------|
-  | Do *not* set a limit greater than 1000   | *Don't* set a limit greater than 1000  |
+  | Do **not** set a limit greater than 1000   | **Don't** set a limit greater than 1000  |
   | For `parameter1`, the default is 10      | For `parameter1`, the default's 10     |
 
 - Avoid contractions in error messages. Examples:
@@ -596,10 +571,6 @@ tenses, words, and phrases:
   | Requests to localhost are not allowed    | Requests to localhost aren't allowed |
   | Specified URL cannot be used             | Specified URL can't be used          |
 
-  <!-- vale gitlab.ContractionsKeep = YES -->
-  <!-- vale gitlab.ContractionsDiscard = YES -->
-  <!-- vale gitlab.FutureTense = YES -->
-
 ## Text
 
 - [Write in Markdown](#markdown).
diff --git a/doc/development/fe_guide/graphql.md b/doc/development/fe_guide/graphql.md
index f5e16d377f1..a63cb95fafd 100644
--- a/doc/development/fe_guide/graphql.md
+++ b/doc/development/fe_guide/graphql.md
@@ -602,6 +602,174 @@ it('calls mutation on submitting form ', () => {
 });
 ```
 
+### Testing with mocked Apollo Client
+
+To test the logic of Apollo cache updates, we might want to mock an Apollo Client in our unit tests. To separate tests with mocked client from 'usual' unit tests, it's recommended to create an additional component factory. This way we only create Apollo Client instance when it's necessary:
+
+```javascript
+function createComponent() {...}
+
+function createComponentWithApollo() {...}
+```
+
+We use [`mock-apollo-client`](https://www.npmjs.com/package/mock-apollo-client) library to mock Apollo client in tests.
+
+```javascript
+import { createMockClient } from 'mock-apollo-client';
+```
+
+Then we need to inject `VueApollo` to Vue local instance (`localVue.use()` can also be called within `createComponentWithApollo()`)
+
+```javascript
+import VueApollo from 'vue-apollo';
+import { createLocalVue } from '@vue/test-utils';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+```
+
+After this, on the global `describe`, we should create a variable for `fakeApollo`:
+
+```javascript
+describe('Some component with Apollo mock', () => {
+  let wrapper;
+  let fakeApollo
+})
+```
+
+Within component factory, we need to define an array of _handlers_ for every query or mutation:
+
+```javascript
+import getDesignListQuery from '~/design_management/graphql/queries/get_design_list.query.graphql';
+import permissionsQuery from '~/design_management/graphql/queries/design_permissions.query.graphql';
+import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql';
+
+describe('Some component with Apollo mock', () => {
+  let wrapper;
+  let fakeApollo;
+
+  function createComponentWithApollo() {
+    const requestHandlers = [
+      [getDesignListQuery, jest.fn().mockResolvedValue(designListQueryResponse)],
+      [permissionsQuery, jest.fn().mockResolvedValue(permissionsQueryResponse)],
+    ];
+  }
+})
+```
+
+After this, we need to create a mock Apollo Client instance using a helper:
+
+```javascript
+import createMockApollo from 'jest/helpers/mock_apollo_helper';
+
+describe('Some component with Apollo mock', () => {
+  let wrapper;
+  let fakeApollo;
+
+  function createComponentWithApollo() {
+    const requestHandlers = [
+      [getDesignListQuery, jest.fn().mockResolvedValue(designListQueryResponse)],
+      [permissionsQuery, jest.fn().mockResolvedValue(permissionsQueryResponse)],
+    ];
+
+    fakeApollo = createMockApollo(requestHandlers);
+    wrapper = shallowMount(Index, {
+      localVue,
+      apolloProvider: fakeApollo,
+    });
+  }
+})
+```
+
+NOTE: **Note:**
+When mocking resolved values, make sure the structure of the response is the same as actual API response: i.e. root property should be `data` for example
+
+When testing queries, please keep in mind they are promises, so they need to be _resolved_ to render a result. Without resolving, we can check the `loading` state of the query:
+
+```javascript
+it('renders a loading state', () => {
+  createComponentWithApollo();
+
+  expect(wrapper.find(LoadingSpinner).exists()).toBe(true)
+});
+
+it('renders designs list', async () => {
+  createComponentWithApollo();
+
+  jest.runOnlyPendingTimers();
+  await wrapper.vm.$nextTick();
+
+  expect(findDesigns()).toHaveLength(3);
+});
+```
+
+If we need to test a query error, we need to mock a rejected value as request handler:
+
+```javascript
+function createComponentWithApollo() {
+  ...
+  const requestHandlers = [
+    [getDesignListQuery, jest.fn().mockRejectedValue(new Error('GraphQL error')],
+  ];
+  ...
+}
+...
+
+it('renders error if query fails', async () => {
+  createComponent()
+
+  jest.runOnlyPendingTimers();
+  await wrapper.vm.$nextTick();
+
+  expect(wrapper.find('.test-error').exists()).toBe(true)
+})
+```
+
+Request handlers can also be passed to component factory as a parameter.
+
+Mutations could be tested the same way with a few additional `nextTick`s to get the updated result:
+
+```javascript
+function createComponentWithApollo({
+  moveHandler = jest.fn().mockResolvedValue(moveDesignMutationResponse),
+}) {
+  moveDesignHandler = moveHandler;
+
+  const requestHandlers = [
+    [getDesignListQuery, jest.fn().mockResolvedValue(designListQueryResponse)],
+    [permissionsQuery, jest.fn().mockResolvedValue(permissionsQueryResponse)],
+    [moveDesignMutation, moveDesignHandler],
+  ];
+
+  fakeApollo = createMockApollo(requestHandlers);
+  wrapper = shallowMount(Index, {
+    localVue,
+    apolloProvider: fakeApollo,
+  });
+}
+...
+it('calls a mutation with correct parameters and reorders designs', async () => {
+  createComponentWithApollo({});
+
+  wrapper.find(VueDraggable).vm.$emit('change', {
+    moved: {
+      newIndex: 0,
+      element: designToMove,
+    },
+  });
+
+  expect(moveDesignHandler).toHaveBeenCalled();
+
+  await wrapper.vm.$nextTick();
+
+  expect(
+    findDesigns()
+      .at(0)
+      .props('id'),
+  ).toBe('2');
+});
+```
+
 ## Handling errors
 
 GitLab's GraphQL mutations currently have two distinct error modes: [Top-level](#top-level-errors) and [errors-as-data](#errors-as-data).
diff --git a/doc/development/licensed_feature_availability.md b/doc/development/licensed_feature_availability.md
index cf479544eea..62f5bb7e029 100644
--- a/doc/development/licensed_feature_availability.md
+++ b/doc/development/licensed_feature_availability.md
@@ -35,7 +35,3 @@ the instance license.
 ```ruby
 License.feature_available?(:feature_symbol)
 ```
-
-## Enabling promo features on GitLab.com
-
-A paid feature can be made available to everyone on GitLab.com by enabling the feature flag `"promo_#{feature}"`.