Add latest changes from gitlab-org/gitlab@master

10 files changed, 117 insertions, 117 deletions

diff --git a/doc/api/metrics_dashboard_annotations.md b/doc/api/metrics_dashboard_annotations.md
index 8cfd4dc8eed..a4d5985803f 100644
--- a/doc/api/metrics_dashboard_annotations.md
+++ b/doc/api/metrics_dashboard_annotations.md
@@ -4,16 +4,6 @@
 
 Metrics dashboard annotations allow you to indicate events on your graphs at a single point in time or over a timespan.
 
-## Enable the metrics dashboard annotations API
-
-The `:metrics_dashboard_annotations` feature flag is disabled by default.
-To turn on this API, ask a GitLab administrator with Rails console
-access to run the following command:
-
-```ruby
-Feature.enable(:metrics_dashboard_annotations)
-```
-
 ## Create a new annotation
 
 ```plaintext
diff --git a/doc/api/projects.md b/doc/api/projects.md
index 48df539ed88..ec35eef0dcc 100644
--- a/doc/api/projects.md
+++ b/doc/api/projects.md
@@ -9,10 +9,8 @@ Values for the project visibility level are:
 
 - `private`:
   Project access must be granted explicitly for each user.
-
 - `internal`:
   The project can be cloned by any logged in user.
-
 - `public`:
   The project can be accessed without any authentication.
 
@@ -22,11 +20,9 @@ There are currently three options for `merge_method` to choose from:
 
 - `merge`:
   A merge commit is created for every merge, and merging is allowed as long as there are no conflicts.
-
 - `rebase_merge`:
   A merge commit is created for every merge, but merging is only allowed if fast-forward merge is possible.
   This way you could make sure that if this merge request would build, after merging to target branch it would also build.
-
 - `ff`:
   No merge commits are created and all merges are fast-forwarded, which means that merging is only allowed if the branch could be fast-forwarded.
 
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md
index ce5e14bfe87..972c2ded9c9 100644
--- a/doc/development/fe_guide/vue.md
+++ b/doc/development/fe_guide/vue.md
@@ -189,92 +189,97 @@ Each Vue component has a unique output. This output is always present in the ren
 Although we can test each method of a Vue component individually, our goal must be to test the output
 of the render/template function, which represents the state at all times.
 
-Make use of the [axios mock adapter](axios.md#mock-axios-response-in-tests) to mock data returned.
-
-Here's how we would test the Todo App above:
+Here's an example of a well structured unit test for [this Vue component](#appendix---vue-component-subject-under-test):
 
 ```javascript
-import Vue from 'vue';
-import axios from '~/lib/utils/axios_utils';
+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import App from '~/todos/app.vue';
 
-describe('Todos App', () => {
-  let vm;
+const TEST_TODOS = [
+  { text: 'Lorem ipsum test text' },
+  { text: 'Lorem ipsum 2' },
+];
+const TEST_NEW_TODO = 'New todo title';
+const TEST_TODO_PATH = '/todos';
+
+describe('~/todos/app.vue', () => {
+  let wrapper;
   let mock;
 
   beforeEach(() => {
-    // Create a mock adapter for stubbing axios API requests
+    // IMPORTANT: Use axios-mock-adapter for stubbing axios API requests
     mock = new MockAdapter(axios);
-
-    const Component = Vue.extend(component);
-
-    // Mount the Component
-    vm = new Component().$mount();
+    mock.onGet(TEST_TODO_PATH).reply(200, TEST_TODOS);
+    mock.onPost(TEST_TODO_PATH).reply(200);
   });
 
   afterEach(() => {
-    // Reset the mock adapter
-    mock.restore();
-    // Destroy the mounted component
-    vm.$destroy();
-  });
+    // IMPORTANT: Clean up the component instance and axios mock adapter
+    wrapper.destroy();
+    wrapper = null;
 
-  it('should render the loading state while the request is being made', () => {
-    expect(vm.$el.querySelector('i.fa-spin')).toBeDefined();
+    mock.restore();
   });
 
-  it('should render todos returned by the endpoint', done => {
-    // Mock the get request on the API endpoint to return data
-    mock.onGet('/todos').replyOnce(200, [
-      {
-        title: 'This is a todo',
-        text: 'This is the text',
+  // NOTE: It is very helpful to separate setting up the component from
+  // its collaborators (i.e. Vuex, axios, etc.)
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMount(App, {
+      propsData: {
+        path: TEST_TODO_PATH,
+        ...props,
       },
-    ]);
+    });
+  };
+  // NOTE: Helper methods greatly help test maintainability and readability.
+  const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findAddButton = () => wrapper.find('[data-testid="add-button"]');
+  const findTextInput = () => wrapper.find('[data-testid="text-input"]');
+  const findTodoData = () => wrapper.findAll('[data-testid="todo-item"]').wrappers.map(wrapper => ({ text: wrapper.text() }));
+
+  describe('when mounted and loading', () => {
+    beforeEach(() => {
+      // Create request which will never resolve
+      mock.onGet(TEST_TODO_PATH).reply(() => new Promise(() => {}));
+      createWrapper();
+    });
 
-    Vue.nextTick(() => {
-      const items = vm.$el.querySelectorAll('.js-todo-list div')
-      expect(items.length).toBe(1);
-      expect(items[0].textContent).toContain('This is the text');
-      done();
+    it('should render the loading state', () => {
+      expect(findLoader().exists()).toBe(true);
     });
   });
 
-  it('should add a todos on button click', (done) => {
+  describe('when todos are loaded', () => {
+    beforeEach(() => {
+      createWrapper();
+      // IMPORTANT: This component fetches data asynchronously on mount, so let's wait for the Vue template to update
+      return wrapper.vm.$nextTick();
+    });
 
-    // Mock the put request and check that the sent data object is correct
-    mock.onPut('/todos').replyOnce((req) => {
-      expect(req.data).toContain('text');
-      expect(req.data).toContain('title');
+    it('should not show loading', () => {
+      expect(findLoader().exists()).toBe(false);
+    });
 
-      return [201, {}];
+    it('should render todos', () => {
+      expect(findTodoData()).toEqual(TEST_TODOS);
     });
 
-    vm.$el.querySelector('.js-add-todo').click();
+    it('when todo is added, should post new todo', () => {
+      findTextInput().vm.$emit('update', TEST_NEW_TODO)
+      findAddButton().vm.$emit('click');
 
-    // Add a new interceptor to mock the add Todo request
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelectorAll('.js-todo-list div').length).toBe(2);
-      done();
+      return wrapper.vm.$nextTick()
+        .then(() => {
+          expect(mock.history.post.map(x => JSON.parse(x.data))).toEqual([{ text: TEST_NEW_TODO }]);
+        });
     });
   });
 });
 ```
 
-### `mountComponent` helper
-
-There is a helper in `spec/javascripts/helpers/vue_mount_component_helper.js` that allows you to mount a component with the given props:
-
-```javascript
-import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper'
-import component from 'component.vue'
-
-const Component = Vue.extend(component);
-const data = {prop: 'foo'};
-const vm = mountComponent(Component, data);
-```
-
 ### Test the component's output
 
 The main return value of a Vue component is the rendered output. In order to test the component we
@@ -336,3 +341,35 @@ Currently, we recommend to minimize adding certain features to the codebase to p
 - `slot` attributes
 
 You can find more details on [Migration to Vue 3](vue3_migration.md)
+
+## Appendix - Vue component subject under test
+
+This is the template for the example component which is tested in the [Testing Vue components](#testing-vue-components) section:
+
+```html
+<template>
+  <div class="content">
+    <gl-loading-icon v-if="isLoading" />
+    <template v-else>
+      <div
+        v-for="todo in todos"
+        :key="todo.id"
+        :class="{ 'gl-strike': todo.isDone }"
+        data-testid="todo-item"
+      >{{ toddo.text }}</div>
+      <footer class="gl-border-t-1 gl-mt-3 gl-pt-3">
+        <gl-form-input
+          type="text"
+          v-model="todoText"
+          data-testid="text-input"
+        >
+        <gl-button
+          variant="success"
+          data-testid="add-button"
+          @click="addTodo"
+        >Add</gl-button>
+      </footer>
+    </template>
+  </div>
+</template>
+```
diff --git a/doc/development/testing_guide/frontend_testing.md b/doc/development/testing_guide/frontend_testing.md
index a956a054a8c..52d538c7159 100644
--- a/doc/development/testing_guide/frontend_testing.md
+++ b/doc/development/testing_guide/frontend_testing.md
@@ -832,43 +832,6 @@ testAction(
 
 Check an example in [spec/javascripts/ide/stores/actions_spec.jsspec/javascripts/ide/stores/actions_spec.js](https://gitlab.com/gitlab-org/gitlab/blob/master/spec/javascripts/ide/stores/actions_spec.js).
 
-### Vue Helper: `mountComponent`
-
-To make mounting a Vue component easier and more readable, we have a few helpers available in `spec/helpers/vue_mount_component_helper`:
-
-- `createComponentWithStore`
-- `mountComponentWithStore`
-
-Examples of usage:
-
-```javascript
-beforeEach(() => {
-  vm = createComponentWithStore(Component, store);
-
-  vm.$store.state.currentBranchId = 'master';
-
-  vm.$mount();
-});
-```
-
-```javascript
-beforeEach(() => {
-  vm = mountComponentWithStore(Component, {
-    el: '#dummy-element',
-    store,
-    props: { badge },
-  });
-});
-```
-
-Don't forget to clean up:
-
-```javascript
-afterEach(() => {
-  vm.$destroy();
-});
-```
-
 ### Wait until axios requests finish
 
 The axios utils mock module located in `spec/frontend/mocks/ce/lib/utils/axios_utils.js` contains two helper methods for Jest tests that spawn HTTP requests.
diff --git a/doc/install/requirements.md b/doc/install/requirements.md
index 27a65fe8181..e4af18ebf93 100644
--- a/doc/install/requirements.md
+++ b/doc/install/requirements.md
@@ -139,9 +139,12 @@ MySQL/MariaDB are advised to [migrate to PostgreSQL](../update/mysql_to_postgres
 
 ### PostgreSQL Requirements
 
-As of GitLab 10.0, PostgreSQL 9.6 or newer is required, and earlier versions are
-not supported. We highly recommend users to use PostgreSQL 9.6 as this
-is the PostgreSQL version used for development and testing.
+We highly recommend users to use the minimum PostgreSQL versions specified below as these are the versions used for development and testing.
+
+GitLab version | Minimum PostgreSQL version
+-|-
+10.0 | 9.6
+12.10 | 11
 
 Users using PostgreSQL must ensure the `pg_trgm` extension is loaded into every
 GitLab database. This extension can be enabled (using a PostgreSQL super user)
diff --git a/doc/telemetry/snowplow.md b/doc/telemetry/snowplow.md
index 02e161b8662..4961f4f0938 100644
--- a/doc/telemetry/snowplow.md
+++ b/doc/telemetry/snowplow.md
@@ -153,11 +153,16 @@ describe('my component', () => {
   let trackingSpy;
 
   beforeEach(() => {
-    const vm = mountComponent(MyComponent);
     trackingSpy = mockTracking('_category_', vm.$el, spyOn);
   });
 
+  const triggerEvent = () => {
+    // action which should trigger a event
+  };
+
   it('tracks an event when toggled', () => {
+    expect(trackingSpy).not.toHaveBeenCalled();
+
     triggerEvent('a.toggle');
 
     expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_edit_button', {
diff --git a/doc/tools/email.md b/doc/tools/email.md
index e9ff88152ba..eacf63ecdcd 100644
--- a/doc/tools/email.md
+++ b/doc/tools/email.md
@@ -26,6 +26,9 @@ at their primary email address.
 
    ![compose an email](email2.png)
 
+NOTE: **Note:**
+[Starting with GitLab 13.0](https://gitlab.com/gitlab-org/gitlab/-/issues/31509), email notifications can be sent only once every 10 minutes. This helps minimize performance issues.
+
 ## Unsubscribing from emails
 
 Users can choose to unsubscribe from receiving emails from GitLab by following
diff --git a/doc/user/permissions.md b/doc/user/permissions.md
index e54063e3eed..3f34695d011 100644
--- a/doc/user/permissions.md
+++ b/doc/user/permissions.md
@@ -87,10 +87,8 @@ The following table depicts the various user permission levels in a project.
 | Create new merge request                          |         | ✓          | ✓           | ✓        | ✓      |
 | View metrics dashboard annotations                |         | ✓          | ✓           | ✓        | ✓      |
 | Create/edit requirements **(ULTIMATE)**           |         | ✓          | ✓           | ✓        | ✓      |
-| Pull [packages](packages/index.md)                |         | ✓          | ✓           | ✓        | ✓      |
-| Publish [packages](packages/index.md)             |         |            | ✓           | ✓        | ✓      |
-| Pull from [Conan repository](packages/conan_repository/index.md), [Maven repository](packages/maven_repository/index.md), or [NPM registry](packages/npm_registry/index.md) **(PREMIUM)** |         | ✓          | ✓           | ✓        | ✓      |
-| Publish to [Conan repository](packages/conan_repository/index.md), [Maven repository](packages/maven_repository/index.md), or [NPM registry](packages/npm_registry/index.md) **(PREMIUM)** |         |            | ✓           | ✓        | ✓      |
+| Pull [packages](packages/index.md) **(PREMIUM)**  |         | ✓          | ✓           | ✓        | ✓      |
+| Publish [packages](packages/index.md) **(PREMIUM)**|         |            | ✓           | ✓        | ✓      |
 | Upload [Design Management](project/issues/design_management.md) files |  |  | ✓        | ✓        | ✓      |
 | Create/edit/delete [Releases](project/releases/index.md)|   |            | ✓           | ✓        | ✓      |
 | Create new branches                               |         |            | ✓           | ✓        | ✓      |
@@ -235,6 +233,8 @@ group.
 | Create/edit group epic **(ULTIMATE)**                  |       | ✓        | ✓         | ✓          | ✓     |
 | Manage group labels                                    |       | ✓        | ✓         | ✓          | ✓     |
 | See a container registry                               |       | ✓        | ✓         | ✓          | ✓     |
+| Pull [packages](packages/index.md) **(PREMIUM)**     |       | ✓        | ✓         | ✓          | ✓     |
+| Publish [packages](packages/index.md) **(PREMIUM)**  |       |          | ✓         | ✓          | ✓     |
 | View metrics dashboard annotations                     |       | ✓        | ✓         | ✓          | ✓     |
 | Create project in group                                |       |          | ✓ (3)     | ✓ (3)      | ✓ (3) |
 | Create/edit/delete group milestones                    |       |          | ✓         | ✓          | ✓     |
diff --git a/doc/user/project/integrations/img/metrics_dashboard_annotations_ui_v13.0.png b/doc/user/project/integrations/img/metrics_dashboard_annotations_ui_v13.0.png
new file mode 100644
index 00000000000..a042fbbcf4e
--- /dev/null
+++ b/doc/user/project/integrations/img/metrics_dashboard_annotations_ui_v13.0.png
diff --git a/doc/user/project/integrations/prometheus.md b/doc/user/project/integrations/prometheus.md
index 4b7d634a293..30f24a5cf3e 100644
--- a/doc/user/project/integrations/prometheus.md
+++ b/doc/user/project/integrations/prometheus.md
@@ -673,7 +673,8 @@ The options are:
 
 ### Dashboard Annotations
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/issues/211330) in GitLab 12.10 (enabled by feature flag `metrics_dashboard_annotations`).
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/issues/211330) in GitLab 12.10 (enabled by feature flag `metrics_dashboard_annotations`).
+> - [Feature flag removed](https://gitlab.com/gitlab-org/gitlab/-/issues/215224) in GitLab 13.0.
 
 You can use **Metrics Dashboard Annotations** to mark any important events on
 every metrics dashboard by adding annotations to it. While viewing a dashboard,
@@ -685,6 +686,8 @@ its description.
 You can create annotations by making requests to the
 [Metrics dashboard annotations API](../../../api/metrics_dashboard_annotations.md)
 
+![Annotations UI](img/metrics_dashboard_annotations_ui_v13.0.png)
+
 ### View Logs **(ULTIMATE)**
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/issues/122013) in GitLab 12.8.