Add latest changes from gitlab-org/gitlab@master

26 files changed, 289 insertions, 70 deletions

diff --git a/app/assets/javascripts/diffs/utils/workers.js b/app/assets/javascripts/diffs/utils/tree_worker_utils.js
index 985e75d1a17..985e75d1a17 100644
--- a/app/assets/javascripts/diffs/utils/workers.js
+++ b/app/assets/javascripts/diffs/utils/tree_worker_utils.js
diff --git a/app/assets/javascripts/diffs/workers/tree_worker.js b/app/assets/javascripts/diffs/workers/tree_worker.js
index 6d1bc78ba1c..04010a99b52 100644
--- a/app/assets/javascripts/diffs/workers/tree_worker.js
+++ b/app/assets/javascripts/diffs/workers/tree_worker.js
@@ -1,5 +1,5 @@
 import { sortTree } from '~/ide/stores/utils';
-import { generateTreeList } from '../utils/workers';
+import { generateTreeList } from '../utils/tree_worker_utils';
 
 // eslint-disable-next-line no-restricted-globals
 self.addEventListener('message', (e) => {
diff --git a/app/assets/javascripts/vue_shared/components/dropdown_keyboard_navigation.vue b/app/assets/javascripts/vue_shared/components/dropdown_keyboard_navigation.vue
new file mode 100644
index 00000000000..5d0ed8b0821
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dropdown_keyboard_navigation.vue
@@ -0,0 +1,81 @@
+<script>
+import { UP_KEY_CODE, DOWN_KEY_CODE, TAB_KEY_CODE } from '~/lib/utils/keycodes';
+
+export default {
+  model: {
+    prop: 'index',
+    event: 'change',
+  },
+  props: {
+    /* v-model property to manage location in list */
+    index: {
+      type: Number,
+      required: true,
+    },
+    /* Highest index that can be navigated to */
+    max: {
+      type: Number,
+      required: true,
+    },
+    /* Lowest index that can be navigated to */
+    min: {
+      type: Number,
+      required: true,
+    },
+    /* Which index to set v-model to on init */
+    defaultIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  watch: {
+    max() {
+      // If the max index (list length) changes, reset the index
+      this.$emit('change', this.defaultIndex);
+    },
+  },
+  created() {
+    this.$emit('change', this.defaultIndex);
+    document.addEventListener('keydown', this.handleKeydown);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeydown);
+  },
+  methods: {
+    handleKeydown(event) {
+      if (event.keyCode === DOWN_KEY_CODE) {
+        // Prevents moving scrollbar
+        event.preventDefault();
+        event.stopPropagation();
+        // Moves to next index
+        this.increment(1);
+      } else if (event.keyCode === UP_KEY_CODE) {
+        // Prevents moving scrollbar
+        event.preventDefault();
+        event.stopPropagation();
+        // Moves to previous index
+        this.increment(-1);
+      } else if (event.keyCode === TAB_KEY_CODE) {
+        this.$emit('tab');
+      }
+    },
+    increment(val) {
+      if (this.max === 0) {
+        return;
+      }
+
+      const nextIndex = Math.max(this.min, Math.min(this.index + val, this.max));
+
+      // Return if the index didn't change
+      if (nextIndex === this.index) {
+        return;
+      }
+
+      this.$emit('change', nextIndex);
+    },
+  },
+  render() {
+    return this.$slots.default;
+  },
+};
+</script>
diff --git a/app/helpers/timeboxes_helper.rb b/app/helpers/timeboxes_helper.rb
index 0993e210f42..eca40572735 100644
--- a/app/helpers/timeboxes_helper.rb
+++ b/app/helpers/timeboxes_helper.rb
@@ -78,19 +78,6 @@ module TimeboxesHelper
   end
   # rubocop: enable CodeReuse/ActiveRecord
 
-  # Show 'active' class if provided GET param matches check
-  # `or_blank` allows the function to return 'active' when given an empty param
-  # Could be refactored to be simpler but that may make it harder to read
-  def milestone_class_for_state(param, check, match_blank_param = false)
-    if match_blank_param
-      'active' if param.blank? || param == check
-    elsif param == check
-      'active'
-    else
-      check
-    end
-  end
-
   def milestone_progress_tooltip_text(milestone)
     has_issues = milestone.total_issues_count > 0
 
diff --git a/app/views/shared/_milestones_filter.html.haml b/app/views/shared/_milestones_filter.html.haml
index eb50960202a..117ed212fd9 100644
--- a/app/views/shared/_milestones_filter.html.haml
+++ b/app/views/shared/_milestones_filter.html.haml
@@ -1,13 +1,15 @@
-%ul.nav-links.mobile-separator.nav.nav-tabs
-  %li{ class: milestone_class_for_state(params[:state], 'opened', true) }>
-    = link_to milestones_filter_path(state: 'opened') do
-      = _('Open')
-      %span.badge.badge-pill= counts[:opened]
-  %li{ class: milestone_class_for_state(params[:state], 'closed') }>
-    = link_to milestones_filter_path(state: 'closed', sort: 'due_date_desc') do
-      = _('Closed')
-      %span.badge.badge-pill= counts[:closed]
-  %li{ class: milestone_class_for_state(params[:state], 'all') }>
-    = link_to milestones_filter_path(state: 'all', sort: 'due_date_desc') do
-      = _('All')
-      %span.badge.badge-pill= counts[:all]
+-  count_badge_classes = 'badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex'
+
+= gl_tabs_nav( {class: 'gl-border-b-0 gl-flex-grow-1', data: { testid: 'milestones-filter' } } ) do
+  = gl_tab_link_to milestones_filter_path(state: 'opened'), { item_active: params[:state].blank? || params[:state] == 'opened' } do
+    = _('Open')
+    %span{ class: count_badge_classes }
+      = counts[:opened]
+  = gl_tab_link_to milestones_filter_path(state: 'closed', sort: 'due_date_desc'), { item_active: params[:state] == 'closed' } do
+    = _('Closed')
+    %span{ class: count_badge_classes }
+      = counts[:closed]
+  = gl_tab_link_to milestones_filter_path(state: 'all', sort: 'due_date_desc'), { item_active: params[:state] == 'all' } do
+    = _('All')
+    %span{ class: count_badge_classes }
+      = counts[:all]
diff --git a/doc/ci/index.md b/doc/ci/index.md
index 6abc1cdbcea..c0009ee7b24 100644
--- a/doc/ci/index.md
+++ b/doc/ci/index.md
@@ -97,7 +97,7 @@ GitLab CI/CD features, grouped by DevOps stage, include:
 | [Building Docker images](docker/using_docker_build.md)                                          | Maintain Docker-based projects using GitLab CI/CD.                                                                             |
 | [Canary Deployments](../user/project/canary_deployments.md)                                     | Ship features to only a portion of your pods and let a percentage of your user base to visit the temporarily deployed feature. |
 | [Deploy boards](../user/project/deploy_boards.md)                                               | Check the current health and status of each CI/CD environment running on Kubernetes.                                           |
-| [Feature Flags](../operations/feature_flags.md) **(PREMIUM)**                                   | Deploy your features behind Feature Flags.                                                                                     |
+| [Feature Flags](../operations/feature_flags.md)                                                 | Deploy your features behind Feature Flags.                                                                                     |
 | [GitLab Pages](../user/project/pages/index.md)                                                  | Deploy static websites.                                                                                                        |
 | [GitLab Releases](../user/project/releases/index.md)                                            | Add release notes to Git tags.                                                                                                 |
 | [Review Apps](review_apps/index.md)                                                             | Configure GitLab CI/CD to preview code changes.                                                                                |
diff --git a/doc/ci/lint.md b/doc/ci/lint.md
index e01bd6b79ff..45152e5a0df 100644
--- a/doc/ci/lint.md
+++ b/doc/ci/lint.md
@@ -4,7 +4,7 @@ group: Pipeline Authoring
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
 ---
 
-# Validate `.gitlab-ci.yml` syntax with the CI Lint tool
+# Validate `.gitlab-ci.yml` syntax with the CI Lint tool **(FREE)**
 
 If you want to test the validity of your GitLab CI/CD configuration before committing
 the changes, you can use the CI Lint tool. This tool checks for syntax and logical
diff --git a/doc/ci/metrics_reports.md b/doc/ci/metrics_reports.md
index 9a220121f54..5343af16489 100644
--- a/doc/ci/metrics_reports.md
+++ b/doc/ci/metrics_reports.md
@@ -7,7 +7,7 @@ type: reference
 
 # Metrics Reports **(PREMIUM)**
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/9788) in [GitLab Premium](https://about.gitlab.com/pricing/) 11.10. Requires GitLab Runner 11.10 and above.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/9788) in GitLab 11.10. Requires GitLab Runner 11.10 and above.
 
 GitLab provides a lot of great reporting tools for things like [merge requests](../user/project/merge_requests/index.md) - [Unit test reports](unit_test_reports.md), [code quality](../user/project/merge_requests/code_quality.md), and performance tests. While JUnit is a great open framework for tests that "pass" or "fail", it is also important to see other types of metrics from a given change.
 
diff --git a/doc/ci/pipelines/index.md b/doc/ci/pipelines/index.md
index 23a0badbe61..69e974406e2 100644
--- a/doc/ci/pipelines/index.md
+++ b/doc/ci/pipelines/index.md
@@ -148,7 +148,7 @@ The pipeline now executes the jobs as configured.
 
 #### Prefill variables in manual pipelines
 
-> [Introduced in](https://gitlab.com/gitlab-org/gitlab/-/issues/30101) GitLab 13.7.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/30101) in GitLab 13.7.
 
 You can use the [`value` and `description`](../yaml/index.md#prefill-variables-in-manual-pipelines)
 keywords to define
@@ -339,7 +339,7 @@ GitLab capitalizes the stages' names in the pipeline graphs.
 
 ### View full pipeline graph
 
-> - [Visualization improvements introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/276949) in GitLab 13.11.
+> - Visualization improvements [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/276949) in GitLab 13.11.
 
 The [pipeline details page](#view-pipelines) displays the full pipeline graph of
 all the jobs in the pipeline.
diff --git a/doc/ci/pipelines/job_artifacts.md b/doc/ci/pipelines/job_artifacts.md
index c6b6f61ef11..7ecee5508ef 100644
--- a/doc/ci/pipelines/job_artifacts.md
+++ b/doc/ci/pipelines/job_artifacts.md
@@ -8,7 +8,7 @@ type: reference, howto
 
 # Job artifacts **(FREE)**
 
-> Introduced in [GitLab 12.4](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/16675), artifacts in internal and private projects can be previewed when [GitLab Pages access control](../../administration/pages/index.md#access-control) is enabled.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/16675) in GitLab 12.4, artifacts in internal and private projects can be previewed when [GitLab Pages access control](../../administration/pages/index.md#access-control) is enabled.
 
 Jobs can output an archive of files and directories. This output is known as a job artifact.
 
@@ -111,7 +111,7 @@ the artifact.
 
 ## How searching for job artifacts works
 
-In [GitLab 13.5](https://gitlab.com/gitlab-org/gitlab/-/issues/201784) and later, artifacts
+In [GitLab 13.5 and later](https://gitlab.com/gitlab-org/gitlab/-/issues/201784), artifacts
 for [parent and child pipelines](parent_child_pipelines.md) are searched in hierarchical
 order from parent to child. For example, if both parent and child pipelines have a
 job with the same name, the job artifact from the parent pipeline is returned.
diff --git a/doc/ci/pipelines/merge_request_pipelines.md b/doc/ci/pipelines/merge_request_pipelines.md
index b3dfe8753c7..5b40744aa79 100644
--- a/doc/ci/pipelines/merge_request_pipelines.md
+++ b/doc/ci/pipelines/merge_request_pipelines.md
@@ -198,7 +198,7 @@ which helps you get your starting configuration correct.
 If you are seeing two pipelines when using `only/except`, please see the caveats
 related to using `only/except` above (or, consider moving to `rules`).
 
-In [GitLab 13.7](https://gitlab.com/gitlab-org/gitlab/-/issues/201845) and later,
+In [GitLab 13.7 and later](https://gitlab.com/gitlab-org/gitlab/-/issues/201845),
 you can add `workflow:rules` to [switch from branch pipelines to merge request pipelines](../yaml/index.md#switch-between-branch-pipelines-and-merge-request-pipelines).
 After a merge request is open on the branch, the pipeline switches to a merge request pipeline.
 
diff --git a/doc/ci/pipelines/merge_trains.md b/doc/ci/pipelines/merge_trains.md
index 06c1a6fef44..6074909a887 100644
--- a/doc/ci/pipelines/merge_trains.md
+++ b/doc/ci/pipelines/merge_trains.md
@@ -8,8 +8,8 @@ last_update: 2019-07-03
 
 # Merge trains **(PREMIUM)**
 
-> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/9186) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.0.
-> - [Squash and merge](../../user/project/merge_requests/squash_and_merge.md) support [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13001) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.6.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/9186) in GitLab 12.0.
+> - [Squash and merge](../../user/project/merge_requests/squash_and_merge.md) support [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13001) in GitLab 12.6.
 
 For more information about why you might want to use merge trains, read [How merge trains keep your master green](https://about.gitlab.com/blog/2020/01/30/all-aboard-merge-trains/).
 
@@ -59,8 +59,6 @@ to run. If more merge requests are added to the train, they now include the `A`
 changes that are included in the target branch, and the `C` changes that are from
 the merge request already in the train.
 
-Read more about [how merge trains keep your master green](https://about.gitlab.com/blog/2020/01/30/all-aboard-merge-trains/).
-
 <i class="fa fa-youtube-play youtube" aria-hidden="true"></i>
 Watch this video for a demonstration on [how parallel execution
 of merge trains can prevent commits from breaking the default
diff --git a/doc/ci/pipelines/multi_project_pipelines.md b/doc/ci/pipelines/multi_project_pipelines.md
index afb0a75e504..184961f4c95 100644
--- a/doc/ci/pipelines/multi_project_pipelines.md
+++ b/doc/ci/pipelines/multi_project_pipelines.md
@@ -112,7 +112,7 @@ Use:
 
 - The `project` keyword to specify the full path to a downstream project.
 - The `branch` keyword to specify the name of a branch in the project specified by `project`.
-  [In GitLab 12.4](https://gitlab.com/gitlab-org/gitlab/-/issues/10126) and later, variable expansion is
+  In [GitLab 12.4 and later](https://gitlab.com/gitlab-org/gitlab/-/issues/10126), variable expansion is
   supported.
 
 Pipelines triggered on a protected branch in a downstream project use the [role](../../user/permissions.md)
@@ -290,7 +290,7 @@ When using:
 
 ## Trigger a pipeline when an upstream project is rebuilt **(PREMIUM)**
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/9045) in GitLab Premium 12.8.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/9045) in GitLab 12.8.
 
 You can trigger a pipeline in your project whenever a pipeline finishes for a new
 tag in a different project.
diff --git a/doc/ci/pipelines/parent_child_pipelines.md b/doc/ci/pipelines/parent_child_pipelines.md
index 46a4ff775c4..e48728a904a 100644
--- a/doc/ci/pipelines/parent_child_pipelines.md
+++ b/doc/ci/pipelines/parent_child_pipelines.md
@@ -72,7 +72,7 @@ microservice_a:
       - template: Security/SAST.gitlab-ci.yml
 ```
 
-In [GitLab 13.5](https://gitlab.com/gitlab-org/gitlab/-/issues/205157) and later,
+In [GitLab 13.5 and later](https://gitlab.com/gitlab-org/gitlab/-/issues/205157),
 you can use [`include:file`](../yaml/index.md#includefile) to trigger child pipelines
 with a configuration file in a different project:
 
@@ -169,7 +169,7 @@ runner for testing, the path separator for the trigger job would be `/`. Other C
 configuration for jobs, like scripts, that use the Windows runner would use `\`.
 
 In GitLab 12.9, the child pipeline could fail to be created in certain cases, causing the parent pipeline to fail.
-This is [resolved in GitLab 12.10](https://gitlab.com/gitlab-org/gitlab/-/issues/209070).
+This is [resolved](https://gitlab.com/gitlab-org/gitlab/-/issues/209070) in GitLab 12.10.
 
 ## Nested child pipelines
 
diff --git a/doc/ci/pipelines/pipelines_for_merged_results.md b/doc/ci/pipelines/pipelines_for_merged_results.md
index 08d7d119787..2acef9be557 100644
--- a/doc/ci/pipelines/pipelines_for_merged_results.md
+++ b/doc/ci/pipelines/pipelines_for_merged_results.md
@@ -8,7 +8,7 @@ last_update: 2019-07-03
 
 # Pipelines for merged results **(PREMIUM)**
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/7380) in [GitLab Premium](https://about.gitlab.com/pricing/) 11.10.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/7380) in GitLab 11.10.
 
 When you submit a merge request, you are requesting to merge changes from a
 source branch into a target branch. By default, the CI pipeline runs jobs
@@ -49,7 +49,7 @@ To enable pipelines for merge results:
 - You must be using [GitLab Runner](https://gitlab.com/gitlab-org/gitlab-runner) 11.9 or later.
 - You must not be using
   [fast forward merges](../../user/project/merge_requests/fast_forward_merge.md) yet.
-  To follow progress, see [#58226](https://gitlab.com/gitlab-org/gitlab/-/issues/26996).
+  To follow progress, see [#26996](https://gitlab.com/gitlab-org/gitlab/-/issues/26996).
 - Your repository must be a GitLab repository, not an
   [external repository](../ci_cd_for_external_repos/index.md).
 
@@ -82,7 +82,7 @@ For more information, read the [documentation on Merge Trains](merge_trains.md).
 
 ## Automatic pipeline cancellation
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/12996) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.3.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/12996) in GitLab 12.3.
 
 GitLab CI/CD can detect the presence of redundant pipelines, and cancels them
 to conserve CI resources.
diff --git a/doc/ci/pipelines/settings.md b/doc/ci/pipelines/settings.md
index 4eec4ec1342..e14c1aa621f 100644
--- a/doc/ci/pipelines/settings.md
+++ b/doc/ci/pipelines/settings.md
@@ -94,7 +94,7 @@ For more information, see [Deployment safety](../environments/deployment_safety.
 
 ## Specify a custom CI/CD configuration file
 
-> [Support for external `.gitlab-ci.yml` locations](https://gitlab.com/gitlab-org/gitlab/-/issues/14376) introduced in GitLab 12.6.
+> Support for external `.gitlab-ci.yml` locations [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/14376) in GitLab 12.6.
 
 GitLab expects to find the CI/CD configuration file (`.gitlab-ci.yml`) in the project's root
 directory. However, you can specify an alternate filename path, including locations outside the project.
@@ -241,7 +241,7 @@ Use this regex for commonly used test tools.
 ### View code coverage history
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/209121) the ability to download a `.csv` in GitLab 12.10.
-> - [Graph introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/33743) in GitLab 13.1.
+> - Graph [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/33743) in GitLab 13.1.
 
 To see the evolution of your project code coverage over time,
 you can view a graph or download a CSV file with this data.
diff --git a/doc/ci/troubleshooting.md b/doc/ci/troubleshooting.md
index c3dfc30e867..994e9294ff6 100644
--- a/doc/ci/troubleshooting.md
+++ b/doc/ci/troubleshooting.md
@@ -263,7 +263,7 @@ To [prevent duplicate pipelines](jobs/job_control.md#avoid-duplicate-pipelines),
 [`workflow: rules`](yaml/index.md#workflow) or rewrite your rules to control
 which pipelines can run.
 
-### Console workaround if job using resource_group gets stuck
+### Console workaround if job using resource_group gets stuck **(FREE SELF)**
 
 ```ruby
 # find resource group by name
diff --git a/doc/ci/unit_test_reports.md b/doc/ci/unit_test_reports.md
index 7677908e93a..c37d7f27970 100644
--- a/doc/ci/unit_test_reports.md
+++ b/doc/ci/unit_test_reports.md
@@ -5,7 +5,7 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 type: reference
 ---
 
-# Unit test reports
+# Unit test reports **(FREE)**
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/45318) in GitLab 11.2. Requires GitLab Runner 11.2 and above.
 > - [Renamed](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39737) from JUnit test reports to Unit test reports in GitLab 13.4.
@@ -67,9 +67,9 @@ execution time and the error output.
 
 ### Number of recent failures
 
-> - [Introduced in Merge Requests](https://gitlab.com/gitlab-org/gitlab/-/issues/241759) in GitLab 13.7.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/241759) in Merge Requests in GitLab 13.7.
 > - [Feature flag removed](https://gitlab.com/gitlab-org/gitlab/-/issues/268249) in GitLab 13.8.
-> - [Introduced in Test Reports](https://gitlab.com/gitlab-org/gitlab/-/issues/235525) in GitLab 13.9.
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/235525) in Test Reports in GitLab 13.9.
 
 If a test failed in the project's default branch in the last 14 days, a message like
 `Failed {n} time(s) in {default_branch} in the last 14 days` is displayed for that test.
@@ -328,7 +328,7 @@ phpunit:
 ## Viewing Unit test reports on GitLab
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/24792) in GitLab 12.5 behind a feature flag (`junit_pipeline_view`), disabled by default.
-> - The feature flag was removed and the feature was [made generally available](https://gitlab.com/gitlab-org/gitlab/-/issues/216478) in GitLab 13.3.
+> - [Feature flag removed](https://gitlab.com/gitlab-org/gitlab/-/issues/216478) in GitLab 13.3.
 
 If JUnit report format XML files are generated and uploaded as part of a pipeline, these reports
 can be viewed inside the pipelines details page. The **Tests** tab on this page
@@ -357,7 +357,7 @@ GitLab does not parse very [large nodes](https://nokogiri.org/tutorials/parsing_
 ## Viewing JUnit screenshots on GitLab
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/202114) in GitLab 13.0 behind the `:junit_pipeline_screenshots_view` feature flag, disabled by default.
-> - The feature flag was removed and was [made generally available](https://gitlab.com/gitlab-org/gitlab/-/issues/216979) in GitLab 13.12.
+> - [Feature flag removed](https://gitlab.com/gitlab-org/gitlab/-/issues/216979) in GitLab 13.12.
 
 Upload your screenshots as [artifacts](yaml/index.md#artifactsreportsjunit) to GitLab. If JUnit
 report format XML files contain an `attachment` tag, GitLab parses the attachment. Note that:
diff --git a/doc/ci/variables/index.md b/doc/ci/variables/index.md
index 81c5f7af8f6..8650adf0351 100644
--- a/doc/ci/variables/index.md
+++ b/doc/ci/variables/index.md
@@ -191,7 +191,7 @@ The output is:
 
 ### Add a CI/CD variable to a group
 
-> Support for [environment scopes](https://gitlab.com/gitlab-org/gitlab/-/issues/2874) added to GitLab Premium in 13.11
+> Support for environment scopes [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/2874) in GitLab Premium 13.11
 
 To make a CI/CD variable available to all projects in a group, define a group CI/CD variable.
 
@@ -244,7 +244,7 @@ To add an instance variable:
 1. Select the **Add variable** button, and fill in the details:
 
    - **Key**: Must be one line, with no spaces, using only letters, numbers, or `_`.
-   - **Value**: [In GitLab 13.3 and later](https://gitlab.com/gitlab-org/gitlab/-/issues/220028),
+   - **Value**: In [GitLab 13.3 and later](https://gitlab.com/gitlab-org/gitlab/-/issues/220028),
      10,000 characters is allowed. This is also bounded by the limits of the selected
      runner operating system. In GitLab 13.0 to 13.2, 700 characters is allowed.
    - **Type**: [`File` or `Variable`](#cicd-variable-types).
@@ -346,9 +346,9 @@ The value of the variable must:
 - Be a single line.
 - Be 8 characters or longer, consisting only of:
   - Characters from the Base64 alphabet (RFC4648).
-  - The `@` and `:` characters ([In GitLab 12.2](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/63043) and later).
-  - The `.` character ([In GitLab 12.10](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/29022) and later).
-  - The `~` character ([In GitLab 13.12](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/61517) and later).
+  - The `@` and `:` characters (In [GitLab 12.2 and later](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/63043)).
+  - The `.` character (In [GitLab 12.10 and later](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/29022)).
+  - The `~` character (In [GitLab 13.12 and later](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/61517)).
 - Not match the name of an existing predefined or custom CI/CD variable.
 
 NOTE:
diff --git a/doc/ci/variables/where_variables_can_be_used.md b/doc/ci/variables/where_variables_can_be_used.md
index 8c5b7feed70..9fd1e3eb1a4 100644
--- a/doc/ci/variables/where_variables_can_be_used.md
+++ b/doc/ci/variables/where_variables_can_be_used.md
@@ -5,7 +5,7 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 type: reference
 ---
 
-# Where variables can be used
+# Where variables can be used **(FREE)**
 
 As it's described in the [CI/CD variables](index.md) docs, you can
 define many different variables. Some of them can be used for all GitLab CI/CD
diff --git a/spec/controllers/dashboard/milestones_controller_spec.rb b/spec/controllers/dashboard/milestones_controller_spec.rb
index 899aa7a41c1..2d41bc431ec 100644
--- a/spec/controllers/dashboard/milestones_controller_spec.rb
+++ b/spec/controllers/dashboard/milestones_controller_spec.rb
@@ -65,11 +65,12 @@ RSpec.describe Dashboard::MilestonesController do
       expect(response.body).not_to include(project_milestone.title)
     end
 
-    it 'shows counts of open and closed group and project milestones to which the user belongs to' do
+    it 'shows counts of open/closed/all group and project milestones to which the user belongs to' do
       get :index
 
-      expect(response.body).to include("Open\n<span class=\"badge badge-pill\">2</span>")
-      expect(response.body).to include("Closed\n<span class=\"badge badge-pill\">2</span>")
+      expect(response.body).to have_content('Open 2')
+      expect(response.body).to have_content('Closed 2')
+      expect(response.body).to have_content('All 4')
     end
 
     context 'external authorization' do
diff --git a/spec/features/groups/milestone_spec.rb b/spec/features/groups/milestone_spec.rb
index c51ee250331..4edf27e8fa4 100644
--- a/spec/features/groups/milestone_spec.rb
+++ b/spec/features/groups/milestone_spec.rb
@@ -98,9 +98,11 @@ RSpec.describe 'Group milestones' do
       end
 
       it 'counts milestones correctly' do
-        expect(find('.top-area .active .badge').text).to eq("3")
-        expect(find('.top-area .closed .badge').text).to eq("3")
-        expect(find('.top-area .all .badge').text).to eq("6")
+        page.within '[data-testid="milestones-filter"]' do
+          expect(page).to have_content('Open 3')
+          expect(page).to have_content('Closed 3')
+          expect(page).to have_content('All 6')
+        end
       end
 
       it 'lists group and project milestones' do
diff --git a/spec/frontend/__helpers__/flush_promises.js b/spec/frontend/__helpers__/flush_promises.js
new file mode 100644
index 00000000000..5287a060753
--- /dev/null
+++ b/spec/frontend/__helpers__/flush_promises.js
@@ -0,0 +1,3 @@
+export default function flushPromises() {
+  return new Promise(setImmediate);
+}
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index b35abc9da02..85734e05aeb 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -51,7 +51,7 @@ import {
 } from '~/diffs/store/actions';
 import * as types from '~/diffs/store/mutation_types';
 import * as utils from '~/diffs/store/utils';
-import * as workerUtils from '~/diffs/utils/workers';
+import * as treeWorkerUtils from '~/diffs/utils/tree_worker_utils';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
@@ -253,7 +253,7 @@ describe('DiffsStoreActions', () => {
           // Workers are synchronous in Jest environment (see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/58805)
           {
             type: types.SET_TREE_DATA,
-            payload: workerUtils.generateTreeList(diffMetadata.diff_files),
+            payload: treeWorkerUtils.generateTreeList(diffMetadata.diff_files),
           },
         ],
         [],
diff --git a/spec/frontend/diffs/utils/workers_spec.js b/spec/frontend/diffs/utils/tree_worker_utils_spec.js
index 25d8183b777..8113428f712 100644
--- a/spec/frontend/diffs/utils/workers_spec.js
+++ b/spec/frontend/diffs/utils/tree_worker_utils_spec.js
@@ -1,6 +1,10 @@
-import { generateTreeList, getLowestSingleFolder, flattenTree } from '~/diffs/utils/workers';
+import {
+  generateTreeList,
+  getLowestSingleFolder,
+  flattenTree,
+} from '~/diffs/utils/tree_worker_utils';
 
-describe('~/diffs/utils/workers', () => {
+describe('~/diffs/utils/tree_worker_utils', () => {
   describe('generateTreeList', () => {
     let files;
 
diff --git a/spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js b/spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js
new file mode 100644
index 00000000000..996df34f2ff
--- /dev/null
+++ b/spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js
@@ -0,0 +1,141 @@
+import { shallowMount } from '@vue/test-utils';
+import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
+import { UP_KEY_CODE, DOWN_KEY_CODE, TAB_KEY_CODE } from '~/lib/utils/keycodes';
+
+const MOCK_INDEX = 0;
+const MOCK_MAX = 10;
+const MOCK_MIN = 0;
+const MOCK_DEFAULT_INDEX = 0;
+
+describe('DropdownKeyboardNavigation', () => {
+  let wrapper;
+
+  const defaultProps = {
+    index: MOCK_INDEX,
+    max: MOCK_MAX,
+    min: MOCK_MIN,
+    defaultIndex: MOCK_DEFAULT_INDEX,
+  };
+
+  const createComponent = (props) => {
+    wrapper = shallowMount(DropdownKeyboardNavigation, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  const helpers = {
+    arrowDown: () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: DOWN_KEY_CODE }));
+    },
+    arrowUp: () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: UP_KEY_CODE }));
+    },
+    tab: () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: TAB_KEY_CODE }));
+    },
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('onInit', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('should $emit @change with the default index', async () => {
+      expect(wrapper.emitted('change')[0]).toStrictEqual([MOCK_DEFAULT_INDEX]);
+    });
+
+    it('should $emit @change with the default index when max changes', async () => {
+      wrapper.setProps({ max: 20 });
+      await wrapper.vm.$nextTick();
+      // The first @change`call happens on created() so we test for the second [1]
+      expect(wrapper.emitted('change')[1]).toStrictEqual([MOCK_DEFAULT_INDEX]);
+    });
+  });
+
+  describe('keydown events', () => {
+    let incrementSpy;
+
+    beforeEach(() => {
+      createComponent();
+      incrementSpy = jest.spyOn(wrapper.vm, 'increment');
+    });
+
+    afterEach(() => {
+      incrementSpy.mockRestore();
+    });
+
+    it('onKeydown-Down calls increment(1)', () => {
+      helpers.arrowDown();
+
+      expect(incrementSpy).toHaveBeenCalledWith(1);
+    });
+
+    it('onKeydown-Up calls increment(-1)', () => {
+      helpers.arrowUp();
+
+      expect(incrementSpy).toHaveBeenCalledWith(-1);
+    });
+
+    it('onKeydown-Tab $emits @tab event', () => {
+      helpers.tab();
+
+      expect(wrapper.emitted('tab')).toHaveLength(1);
+    });
+  });
+
+  describe('increment', () => {
+    describe('when max is 0', () => {
+      beforeEach(() => {
+        createComponent({ max: 0 });
+      });
+
+      it('does not $emit any @change events', () => {
+        helpers.arrowDown();
+
+        // The first @change`call happens on created() so we test that we only have 1 call
+        expect(wrapper.emitted('change')).toHaveLength(1);
+      });
+    });
+
+    describe.each`
+      keyboardAction       | direction | index | max   | min
+      ${helpers.arrowDown} | ${1}      | ${10} | ${10} | ${0}
+      ${helpers.arrowUp}   | ${-1}     | ${0}  | ${10} | ${0}
+    `('moving out of bounds', ({ keyboardAction, direction, index, max, min }) => {
+      beforeEach(() => {
+        createComponent({ index, max, min });
+        keyboardAction();
+      });
+
+      it(`in ${direction} direction does not $emit any @change events`, () => {
+        // The first @change`call happens on created() so we test that we only have 1 call
+        expect(wrapper.emitted('change')).toHaveLength(1);
+      });
+    });
+
+    describe.each`
+      keyboardAction       | direction | index | max   | min
+      ${helpers.arrowDown} | ${1}      | ${0}  | ${10} | ${0}
+      ${helpers.arrowUp}   | ${-1}     | ${10} | ${10} | ${0}
+    `('moving in bounds', ({ keyboardAction, direction, index, max, min }) => {
+      beforeEach(() => {
+        createComponent({ index, max, min });
+        keyboardAction();
+      });
+
+      it(`in ${direction} direction $emits @change event with the correct index ${
+        index + direction
+      }`, () => {
+        // The first @change`call happens on created() so we test for the second [1]
+        expect(wrapper.emitted('change')[1]).toStrictEqual([index + direction]);
+      });
+    });
+  });
+});