Add latest changes from gitlab-org/gitlab@master

35 files changed, 755 insertions, 401 deletions

diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index 0b079c78209..2daec46e64b 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -3,10 +3,10 @@ import { throttle } from 'lodash';
 import {
   GlLoadingIcon,
   GlSearchBoxByType,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownDivider,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownSectionHeader,
+  GlDropdownItem,
 } from '@gitlab/ui';
 
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -26,10 +26,10 @@ export default {
     BoardForm,
     GlLoadingIcon,
     GlSearchBoxByType,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownDivider,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
   },
   props: {
     currentBoard: {
@@ -235,22 +235,17 @@ export default {
 <template>
   <div class="boards-switcher js-boards-selector gl-mr-3">
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
-      <gl-deprecated-dropdown
+      <gl-dropdown
         data-qa-selector="boards_dropdown"
         toggle-class="dropdown-menu-toggle js-dropdown-toggle"
         menu-class="flex-column dropdown-extended-height"
         :text="board.name"
         @show="loadBoards"
       >
-        <div>
-          <div class="dropdown-title mb-0" @mousedown.prevent>
-            {{ s__('IssueBoards|Switch board') }}
-          </div>
-        </div>
-
-        <gl-deprecated-dropdown-header class="mt-0">
-          <gl-search-box-by-type ref="searchBox" v-model="filterTerm" />
-        </gl-deprecated-dropdown-header>
+        <p class="gl-new-dropdown-header-top" @mousedown.prevent>
+          {{ s__('IssueBoards|Switch board') }}
+        </p>
+        <gl-search-box-by-type ref="searchBox" v-model="filterTerm" class="m-2" />
 
         <div
           v-if="!loading"
@@ -259,49 +254,50 @@ export default {
           class="dropdown-content flex-fill"
           @scroll.passive="throttledSetScrollFade"
         >
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-show="filteredBoards.length === 0"
             class="gl-pointer-events-none text-secondary"
           >
             {{ s__('IssueBoards|No matching boards found') }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
 
-          <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
+          <gl-dropdown-section-header v-if="showRecentSection">
             {{ __('Recent') }}
-          </h6>
+          </gl-dropdown-section-header>
 
           <template v-if="showRecentSection">
-            <gl-deprecated-dropdown-item
+            <gl-dropdown-item
               v-for="recentBoard in recentBoards"
               :key="`recent-${recentBoard.id}`"
               class="js-dropdown-item"
               :href="`${boardBaseUrl}/${recentBoard.id}`"
             >
               {{ recentBoard.name }}
-            </gl-deprecated-dropdown-item>
+            </gl-dropdown-item>
           </template>
 
-          <hr v-if="showRecentSection" class="my-1" />
+          <gl-dropdown-divider v-if="showRecentSection" />
 
-          <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
+          <gl-dropdown-section-header v-if="showRecentSection">
             {{ __('All') }}
-          </h6>
+          </gl-dropdown-section-header>
 
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-for="otherBoard in filteredBoards"
             :key="otherBoard.id"
             class="js-dropdown-item"
             :href="`${boardBaseUrl}/${otherBoard.id}`"
           >
             {{ otherBoard.name }}
-          </gl-deprecated-dropdown-item>
-          <gl-deprecated-dropdown-item v-if="hasMissingBoards" class="small unclickable">
+          </gl-dropdown-item>
+
+          <gl-dropdown-item v-if="hasMissingBoards" class="no-pointer-events">
             {{
               s__(
                 'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
               )
             }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
         </div>
 
         <div
@@ -313,25 +309,25 @@ export default {
         <gl-loading-icon v-if="loading" />
 
         <div v-if="canAdminBoard">
-          <gl-deprecated-dropdown-divider />
+          <gl-dropdown-divider />
 
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-if="multipleIssueBoardsAvailable"
             data-qa-selector="create_new_board_button"
             @click.prevent="showPage('new')"
           >
             {{ s__('IssueBoards|Create new board') }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
 
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-if="showDelete"
             class="text-danger js-delete-board"
             @click.prevent="showPage('delete')"
           >
             {{ s__('IssueBoards|Delete board') }}
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
         </div>
-      </gl-deprecated-dropdown>
+      </gl-dropdown>
 
       <board-form
         v-if="currentPage"
diff --git a/app/assets/javascripts/pages/projects/pipelines/index/index.js b/app/assets/javascripts/pages/projects/pipelines/index/index.js
index bed9a751d4c..63b1f2bf975 100644
--- a/app/assets/javascripts/pages/projects/pipelines/index/index.js
+++ b/app/assets/javascripts/pages/projects/pipelines/index/index.js
@@ -1,60 +1,3 @@
-import Vue from 'vue';
-import { GlToast } from '@gitlab/ui';
-import { doesHashExistInUrl } from '~/lib/utils/url_utility';
-import {
-  parseBoolean,
-  historyReplaceState,
-  buildUrlWithCurrentLocation,
-} from '~/lib/utils/common_utils';
-import { __ } from '~/locale';
-import PipelinesStore from '../../../../pipelines/stores/pipelines_store';
-import pipelinesComponent from '../../../../pipelines/components/pipelines_list/pipelines.vue';
-import Translate from '../../../../vue_shared/translate';
+import { initPipelinesIndex } from '~/pipelines/pipelines_index';
 
-Vue.use(Translate);
-Vue.use(GlToast);
-
-document.addEventListener(
-  'DOMContentLoaded',
-  () =>
-    new Vue({
-      el: '#pipelines-list-vue',
-      components: {
-        pipelinesComponent,
-      },
-      data() {
-        return {
-          store: new PipelinesStore(),
-        };
-      },
-      created() {
-        this.dataset = document.querySelector(this.$options.el).dataset;
-
-        if (doesHashExistInUrl('delete_success')) {
-          this.$toast.show(__('The pipeline has been deleted'));
-          historyReplaceState(buildUrlWithCurrentLocation());
-        }
-      },
-      render(createElement) {
-        return createElement('pipelines-component', {
-          props: {
-            store: this.store,
-            endpoint: this.dataset.endpoint,
-            pipelineScheduleUrl: this.dataset.pipelineScheduleUrl,
-            helpPagePath: this.dataset.helpPagePath,
-            emptyStateSvgPath: this.dataset.emptyStateSvgPath,
-            errorStateSvgPath: this.dataset.errorStateSvgPath,
-            noPipelinesSvgPath: this.dataset.noPipelinesSvgPath,
-            autoDevopsPath: this.dataset.helpAutoDevopsPath,
-            newPipelinePath: this.dataset.newPipelinePath,
-            canCreatePipeline: parseBoolean(this.dataset.canCreatePipeline),
-            hasGitlabCi: parseBoolean(this.dataset.hasGitlabCi),
-            ciLintPath: this.dataset.ciLintPath,
-            resetCachePath: this.dataset.resetCachePath,
-            projectId: this.dataset.projectId,
-            params: JSON.parse(this.dataset.params),
-          },
-        });
-      },
-    }),
-);
+initPipelinesIndex();
diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
index 38d48517bd6..258633e0125 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
@@ -47,7 +47,7 @@ export default {
       class="dropdown-menu-toggle build-content gl-build-content"
     >
       <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
-        <span class="gl-display-flex gl-align-items-center">
+        <span class="gl-display-flex gl-align-items-center gl-w-90">
           <ci-icon :status="group.status" :size="24" />
 
           <span class="gl-text-truncate mw-70p gl-pl-3 gl-display-inline-block">
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index 9ee427d01fd..ff27226b408 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -62,7 +62,7 @@ export default {
       type: String,
       required: true,
     },
-    autoDevopsPath: {
+    autoDevopsHelpPath: {
       type: String,
       required: true,
     },
@@ -342,7 +342,7 @@ export default {
           :pipelines="state.pipelines"
           :pipeline-schedule-url="pipelineScheduleUrl"
           :update-graph-dropdown="updateGraphDropdown"
-          :auto-devops-help-path="autoDevopsPath"
+          :auto-devops-help-path="autoDevopsHelpPath"
           :view-type="viewType"
         />
       </div>
diff --git a/app/assets/javascripts/pipelines/pipelines_index.js b/app/assets/javascripts/pipelines/pipelines_index.js
new file mode 100644
index 00000000000..4575a99f60f
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipelines_index.js
@@ -0,0 +1,75 @@
+import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { doesHashExistInUrl } from '~/lib/utils/url_utility';
+import {
+  parseBoolean,
+  historyReplaceState,
+  buildUrlWithCurrentLocation,
+} from '~/lib/utils/common_utils';
+import Translate from '~/vue_shared/translate';
+import Pipelines from './components/pipelines_list/pipelines.vue';
+import PipelinesStore from './stores/pipelines_store';
+
+Vue.use(Translate);
+Vue.use(GlToast);
+
+export const initPipelinesIndex = (selector = '#pipelines-list-vue') => {
+  const el = document.querySelector(selector);
+  if (!el) {
+    return null;
+  }
+
+  const {
+    endpoint,
+    pipelineScheduleUrl,
+    helpPagePath,
+    emptyStateSvgPath,
+    errorStateSvgPath,
+    noPipelinesSvgPath,
+    autoDevopsHelpPath,
+    newPipelinePath,
+    canCreatePipeline,
+    hasGitlabCi,
+    ciLintPath,
+    resetCachePath,
+    projectId,
+    params,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    data() {
+      return {
+        store: new PipelinesStore(),
+      };
+    },
+    created() {
+      if (doesHashExistInUrl('delete_success')) {
+        this.$toast.show(__('The pipeline has been deleted'));
+        historyReplaceState(buildUrlWithCurrentLocation());
+      }
+    },
+    render(createElement) {
+      return createElement(Pipelines, {
+        props: {
+          store: this.store,
+          endpoint,
+          pipelineScheduleUrl,
+          helpPagePath,
+          emptyStateSvgPath,
+          errorStateSvgPath,
+          noPipelinesSvgPath,
+          autoDevopsHelpPath,
+          newPipelinePath,
+          canCreatePipeline: parseBoolean(canCreatePipeline),
+          hasGitlabCi: parseBoolean(hasGitlabCi),
+          ciLintPath,
+          resetCachePath,
+          projectId,
+          params: JSON.parse(params),
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 7b424882ffa..502f5b08522 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -139,6 +139,10 @@
   width: 186px;
 }
 
+.gl-w-90 {
+  width: 90%;
+}
+
 .gl-build-content {
   @include build-content();
 }
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 6aa1a564499..64ae4ff8daf 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -8,7 +8,7 @@
   project_id: @project.id,
   params: params.to_json,
   "help-page-path" => help_page_path('ci/quick_start/README'),
-  "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
+  "auto-devops-help-path" => help_page_path('topics/autodevops/index.md'),
   "pipeline-schedule-url" => pipeline_schedules_path(@project),
   "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
   "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
diff --git a/changelogs/unreleased/276949-pipeline-number-bugfix.yml b/changelogs/unreleased/276949-pipeline-number-bugfix.yml
new file mode 100644
index 00000000000..e4ed4adefe5
--- /dev/null
+++ b/changelogs/unreleased/276949-pipeline-number-bugfix.yml
@@ -0,0 +1,5 @@
+---
+title: Fix flex overflow bug
+merge_request: 48931
+author:
+type: fixed
diff --git a/changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-bo.yml b/changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-bo.yml
new file mode 100644
index 00000000000..099ac409e2a
--- /dev/null
+++ b/changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-bo.yml
@@ -0,0 +1,5 @@
+---
+title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/boards
+merge_request: 41410
+author: nuwe1
+type: other
diff --git a/doc/.vale/gitlab/SubstitutionSuggestions.yml b/doc/.vale/gitlab/SubstitutionSuggestions.yml
index 5c81a09c732..bc515465dc3 100644
--- a/doc/.vale/gitlab/SubstitutionSuggestions.yml
+++ b/doc/.vale/gitlab/SubstitutionSuggestions.yml
@@ -6,15 +6,15 @@
 #
 # For a list of all options, see https://errata-ai.github.io/vale/styles/
 extends: substitution
-message: 'Consider "%s" instead of "%s".'
+message: 'Consider %s instead of "%s".'
 link: https://docs.gitlab.com/ee/development/documentation/styleguide.html#language
 level: suggestion
 ignorecase: true
 swap:
-  active user: billable user
-  active users: billable users
-  since: because
-  once that: after that
-  once the: after the
-  once you: after you
-  within: in
+  active user: '"billable user"'
+  active users: '"billable users"'
+  since: '"because" or "after"'
+  once that: '"after that"'
+  once the: '"after the"'
+  once you: '"after you"'
+  within: '"in"'
diff --git a/doc/api/graphql/reference/gitlab_schema.graphql b/doc/api/graphql/reference/gitlab_schema.graphql
index e899f735c9d..49237f919d7 100644
--- a/doc/api/graphql/reference/gitlab_schema.graphql
+++ b/doc/api/graphql/reference/gitlab_schema.graphql
@@ -22506,7 +22506,7 @@ Autogenerated input type of UpdateBoard
 """
 input UpdateBoardInput {
   """
-  The id of user to be assigned to the board.
+  The id of user to be assigned to the board
   """
   assigneeId: UserID
 
@@ -22526,12 +22526,12 @@ input UpdateBoardInput {
   hideClosedList: Boolean
 
   """
-  The board global id.
+  The board global ID
   """
   id: BoardID!
 
   """
-  The IDs of labels to be added to the board.
+  The IDs of labels to be added to the board
   """
   labelIds: [LabelID!]
 
@@ -22541,7 +22541,7 @@ input UpdateBoardInput {
   labels: [String!]
 
   """
-  The id of milestone to be assigned to the board.
+  The id of milestone to be assigned to the board
   """
   milestoneId: MilestoneID
 
@@ -22551,7 +22551,7 @@ input UpdateBoardInput {
   name: String
 
   """
-  The weight value to be assigned to the board.
+  The weight value to be assigned to the board
   """
   weight: Int
 }
@@ -22606,7 +22606,7 @@ Autogenerated return type of UpdateBoard
 """
 type UpdateBoardPayload {
   """
-  The board after mutation.
+  The board after mutation
   """
   board: Board
 
diff --git a/doc/api/graphql/reference/gitlab_schema.json b/doc/api/graphql/reference/gitlab_schema.json
index 4faa1803856..a96922b9392 100644
--- a/doc/api/graphql/reference/gitlab_schema.json
+++ b/doc/api/graphql/reference/gitlab_schema.json
@@ -65786,7 +65786,7 @@
           "inputFields": [
             {
               "name": "id",
-              "description": "The board global id.",
+              "description": "The board global ID",
               "type": {
                 "kind": "NON_NULL",
                 "name": null,
@@ -65830,7 +65830,7 @@
             },
             {
               "name": "assigneeId",
-              "description": "The id of user to be assigned to the board.",
+              "description": "The id of user to be assigned to the board",
               "type": {
                 "kind": "SCALAR",
                 "name": "UserID",
@@ -65840,7 +65840,7 @@
             },
             {
               "name": "milestoneId",
-              "description": "The id of milestone to be assigned to the board.",
+              "description": "The id of milestone to be assigned to the board",
               "type": {
                 "kind": "SCALAR",
                 "name": "MilestoneID",
@@ -65850,7 +65850,7 @@
             },
             {
               "name": "weight",
-              "description": "The weight value to be assigned to the board.",
+              "description": "The weight value to be assigned to the board",
               "type": {
                 "kind": "SCALAR",
                 "name": "Int",
@@ -65878,7 +65878,7 @@
             },
             {
               "name": "labelIds",
-              "description": "The IDs of labels to be added to the board.",
+              "description": "The IDs of labels to be added to the board",
               "type": {
                 "kind": "LIST",
                 "name": null,
@@ -66038,7 +66038,7 @@
           "fields": [
             {
               "name": "board",
-              "description": "The board after mutation.",
+              "description": "The board after mutation",
               "args": [
 
               ],
diff --git a/doc/api/graphql/reference/index.md b/doc/api/graphql/reference/index.md
index 3840143ff56..2071aee272c 100644
--- a/doc/api/graphql/reference/index.md
+++ b/doc/api/graphql/reference/index.md
@@ -3425,7 +3425,7 @@ Autogenerated return type of UpdateBoard.
 
 | Field | Type | Description |
 | ----- | ---- | ----------- |
-| `board` | Board | The board after mutation. |
+| `board` | Board | The board after mutation |
 | `clientMutationId` | String | A unique identifier for the client performing the mutation. |
 | `errors` | String! => Array | Errors encountered during execution of the mutation. |
 
diff --git a/doc/ci/examples/README.md b/doc/ci/examples/README.md
index 41b69ee643b..e728941dd9d 100644
--- a/doc/ci/examples/README.md
+++ b/doc/ci/examples/README.md
@@ -41,8 +41,9 @@ The following table lists examples with step-by-step tutorials that are containe
 | Ruby on Heroku                | [Test and deploy a Ruby application with GitLab CI/CD](test-and-deploy-ruby-application-to-heroku.md).                     |
 | Scala on Heroku               | [Test and deploy a Scala application to Heroku](test-scala-application.md).                                                |
 | Parallel testing Ruby & JS    | [GitLab CI/CD parallel jobs testing for Ruby & JavaScript projects](https://docs.knapsackpro.com/2019/how-to-run-parallel-jobs-for-rspec-tests-on-gitlab-ci-pipeline-and-speed-up-ruby-javascript-testing). |
-| Secrets management with Vault | [Authenticating and Reading Secrets With Hashicorp Vault](authenticating-with-hashicorp-vault/index.md).                    |
-| Multi project pipeline | [Build, test deploy using multi project pipeline](https://gitlab.com/gitlab-examples/upstream-project).                    |
+| Secrets management with Vault | [Authenticating and Reading Secrets With Hashicorp Vault](authenticating-with-hashicorp-vault/index.md).                   |
+| Multi project pipeline        | [Build, test deploy using multi project pipeline](https://gitlab.com/gitlab-examples/upstream-project).                    |
+| NPM with semantic-release     | [Publish NPM packages to the GitLab Package Registry using semantic-release](semantic-release.md).                         |
 
 ### Contributing examples
 
diff --git a/doc/ci/examples/semantic-release.md b/doc/ci/examples/semantic-release.md
new file mode 100644
index 00000000000..5d716b571ba
--- /dev/null
+++ b/doc/ci/examples/semantic-release.md
@@ -0,0 +1,159 @@
+---
+stage: Package
+group: Package
+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
+---
+
+# Publish NPM packages to the GitLab Package Registry using semantic-release
+
+This guide demonstrates how to automatically publish NPM packages to the [GitLab Package Registry](../../user/packages/npm_registry/index.md) by using [semantic-release](https://github.com/semantic-release/semantic-release).
+
+You can also view or fork the complete [example source](https://gitlab.com/gitlab-examples/semantic-release-npm).
+
+## Initialize the module
+
+1. Open a terminal and navigate to the project's repo
+1. Run `npm init`. Name the module according to [the Package Registry's naming conventions](../../user/packages/npm_registry/index.md#package-naming-convention). For example, if the project's path is `gitlab-examples/semantic-release-npm`, name the module `@gitlab-examples/semantic-release-npm`.
+
+1. Install the following NPM packages:
+
+   ```shell
+   npm install semantic-release @semantic-release/git @semantic-release/gitlab @semantic-release/npm --save-dev
+   ```
+
+1. Add the following properties to the module's `package.json`:
+
+   ```json
+   {
+     "scripts": {
+       "semantic-release": "semantic-release"
+     },
+     "publishConfig": {
+       "access": "public"
+     },
+     "files": [ <path(s) to files here> ]
+   }
+   ```
+
+1. Update the `files` key with glob pattern(s) that selects all files that should be included in the published module. More information about `files` can be found [in NPM's documentation](https://docs.npmjs.com/cli/v6/configuring-npm/package-json#files).
+
+1. Add a `.gitignore` file to the project to avoid committing `node_modules`:
+
+   ```plaintext
+   node_modules
+   ```
+
+## Configure the pipeline
+
+Create a `.gitlab-ci.yml` with the following content:
+
+```yaml
+default:
+  image: node:latest
+  before_script:
+    - npm ci --cache .npm --prefer-offline
+    - |
+      {
+        echo "@${CI_PROJECT_ROOT_NAMESPACE}:registry=${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/npm/"
+        echo "${CI_API_V4_URL#https?}/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=\${CI_JOB_TOKEN}"
+      } | tee --append .npmrc
+  cache:
+    key: ${CI_COMMIT_REF_SLUG}
+    paths:
+      - .npm/
+
+workflow:
+  rules:
+    - if: $CI_COMMIT_BRANCH
+
+variables:
+  NPM_TOKEN: ${CI_JOB_TOKEN}
+
+stages:
+  - release
+
+publish:
+  stage: release
+  script:
+    - npm run semantic-release
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
+```
+
+This example configures the pipeline with a single job, `publish`, which runs `semantic-release`. The semantic-release library publishes new versions of the NPM package and creates new GitLab releases (if necessary).
+
+The default `before_script` generates a temporary `.npmrc` that is used to authenticate to the Package Registry during the `publish` job.
+
+## Set up environment variables
+
+As part of publishing a package, semantic-release increases the version number in `package.json`. For semantic-release to commit this change and push it back to GitLab, the pipeline requires a custom environment variable named `GITLAB_TOKEN`. To create this variable:
+
+1. Navigate to **Project > Settings > Access Tokens**.
+1. Give the token a name, and select the `api` scope.
+1. Click **Create project access token** and copy its value.
+1. Navigate to **Project > Settings > CI / CD > Variables**.
+1. Click **Add Variable**.
+1. In the **Key** field, enter `GITLAB_TOKEN`. In the **Value** field, paste the token created above. Check the **Mask variable** option and click **Add variable**.
+
+## Configure semantic-release
+
+semantic-release pulls its configuration info from a `.releaserc.json` file in the project. Create a `.releaserc.json` at the root of the repository:
+
+```json
+{
+  "branches": ["master"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/gitlab",
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ]
+  ]
+}
+```
+
+## Begin publishing releases
+
+Test the pipeline by creating a commit with a message like:
+
+```plaintext
+fix: testing patch releases
+```
+
+Push the commit to `master`. The pipeline should create a new release (`v1.0.0`) on the project's **Releases** page and publish a new version of the package to the project's **Package Registry** page.
+
+To create a minor release, use a commit message like:
+
+```plaintext
+feat: testing minor releases
+```
+
+Or, for a breaking change:
+
+```plaintext
+feat: testing major releases
+
+BREAKING CHANGE: This is a breaking change.
+```
+
+More information about how commit messages are mapped to releases can be found in [semantic-releases's documentation](https://github.com/semantic-release/semantic-release#how-does-it-work).
+
+## Use the module in a project
+
+To use the published module, add an `.npmrc` file to the project that depends on the module. For example, to use [the example project](https://gitlab.com/gitlab-examples/semantic-release-npm)'s module:
+
+```plaintext
+@gitlab-examples:registry=https://gitlab.com/api/v4/packages/npm/
+```
+
+Then, install the module:
+
+```shell
+npm install --save @gitlab-examples/semantic-release-npm
+```
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md
index bbacc21996f..e0a8c5ffa70 100644
--- a/doc/development/fe_guide/vue.md
+++ b/doc/development/fe_guide/vue.md
@@ -91,7 +91,7 @@ return new Vue({
       },
     });
   },
-}
+});
 ```
 
 > When adding an `id` attribute to mount a Vue application, please make sure this `id` is unique across the codebase
diff --git a/doc/development/product_analytics/usage_ping.md b/doc/development/product_analytics/usage_ping.md
index 35b5952a381..61171b414cd 100644
--- a/doc/development/product_analytics/usage_ping.md
+++ b/doc/development/product_analytics/usage_ping.md
@@ -467,13 +467,17 @@ Next, get the unique events for the current week.
    start_date: Date.current.beginning_of_week, end_date: Date.current.end_of_week)
    ```
 
-Recommendations:
+##### Recommendations
 
-- Key should expire in 29 days for daily and 42 days for weekly.
-- If possible, data granularity should be a week. For example a key could be composed from the
-  metric's name and week of the year, `2020-33-{metric_name}`.
-- Use a [feature flag](../../operations/feature_flags.md) to have a control over the impact when
-  adding new metrics.
+We have the following recommendations for [Adding new events](#adding-new-events):
+
+- Event aggregation: weekly.
+- Key expiry time: 
+  - Daily: 29 days.
+  - Weekly: 42 days.
+- When adding new metrics, use a [feature flag](../../operations/feature_flags.md) to control the impact.
+- For feature flags triggered by another service, set `default_enabled: false`, 
+  - Events can be triggered using the `UsageData` API, which helps when there are > 10 events per change
 
 ##### Enable/Disable Redis HLL tracking
 
diff --git a/doc/topics/autodevops/index.md b/doc/topics/autodevops/index.md
index 6fbbc03825b..4c1e55c2e64 100644
--- a/doc/topics/autodevops/index.md
+++ b/doc/topics/autodevops/index.md
@@ -38,11 +38,14 @@ For requirements, see [Requirements for Auto DevOps](requirements.md) for more i
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/41729) in GitLab 11.3.
 
-Auto DevOps is enabled by default for all projects and attempts to run on all pipelines
-in each project. An instance administrator can enable or disable this default in the
+On self-managed instances, Auto DevOps is enabled by default for all projects.
+It attempts to run on all pipelines in each project. An instance administrator can
+enable or disable this default in the
 [Auto DevOps settings](../../user/admin_area/settings/continuous_integration.md#auto-devops).
 Auto DevOps automatically disables in individual projects on their first pipeline failure,
-if it has not been explicitly enabled for the project.
+
+NOTE: **Note:**
+Auto DevOps is not enabled by default on GitLab.com.
 
 Since [GitLab 12.7](https://gitlab.com/gitlab-org/gitlab/-/issues/26655), Auto DevOps
 runs on pipelines automatically only if a [`Dockerfile` or matching buildpack](stages.md#auto-build)
diff --git a/doc/user/analytics/value_stream_analytics.md b/doc/user/analytics/value_stream_analytics.md
index 31fd9a3823e..7f74e235a2c 100644
--- a/doc/user/analytics/value_stream_analytics.md
+++ b/doc/user/analytics/value_stream_analytics.md
@@ -4,7 +4,7 @@ group: Optimize
 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
 ---
 
-# Value Stream Analytics
+# Value Stream Analytics **(CORE)**
 
 > - Introduced as Cycle Analytics prior to GitLab 12.3 at the project level.
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/12077) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.3 at the group level.
@@ -21,13 +21,9 @@ to uncover, triage, and identify the root cause of slowdowns in the software dev
 
 For information on how to contribute to the development of Value Stream Analytics, see our [contributor documentation](../../development/value_stream_analytics.md).
 
-## Project Level Value Stream Analytics **(CORE)**
+Project-level Value Stream Analytics is available via **Project > Analytics > Value Stream**.
 
-Project Level Value Stream Analytics is available via **Project > Analytics > Value Stream**.
-
-## Group Level Value Stream Analytics **(PREMIUM)**
-
-From GitLab 12.9, group level Value Stream Analytics is available via **Group > Analytics > Value Stream**.
+Note: [Group-level Value Stream Analytics](../group/value_stream_analytics) is also available.
 
 ## Default stages
 
@@ -46,38 +42,15 @@ The stages tracked by Value Stream Analytics by default represent the [GitLab fl
 - **Staging** (Continuous Deployment)
   - Time between merging and deploying to production
 
-## Filter the analytics data
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13216) in GitLab 13.3
-
-GitLab provides the ability to filter analytics based on the following parameters:
-
-- Milestones (Group level)
-- Labels (Group level)
-- Author
-- Assignees
-
-To filter results:
-
-1. Select a group.
-1. Click on the filter bar.
-1. Select a parameter to filter by.
-1. Select a value from the autocompleted results, or type to refine the results.
-
-![Value stream analytics filter bar](img/vsa_filter_bar_v13.3.png "Active filter bar for value stream analytics")
-
-NOTE: **Note:**
-Filtering is available only for group-level Value Stream Analytics.
-
 ### Date ranges
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13216) in GitLab 12.4.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/36300) in GitLab 10.0.
 
-GitLab provides the ability to filter analytics based on a date range. To filter results:
+GitLab provides the ability to filter analytics based on a date range. To filter results, select one of these options:
 
-1. Select a group.
-1. Optionally select a project.
-1. Select a date range using the available date pickers.
+1. Last 7 days
+1. Last 30 days (default)
+1. Last 90 days
 
 ## How Time metrics are measured
 
@@ -88,8 +61,6 @@ The "Time" metrics near the top of the page are measured as follows:
 
 Note: A commit is associated with an issue by [crosslinking](../project/issues/crosslinking_issues.md) in the commit message or by manually linking the merge request containing the commit.
 
-![Value stream analytics time metrics](img/vsa_time_metrics_v13_0.png "Time metrics for value stream analytics")
-
 ## How the stages are measured
 
 Value Stream Analytics records stage time and data based on the project issues with the
@@ -103,31 +74,30 @@ Each stage of Value Stream Analytics is further described in the table below.
 
 | **Stage** | **Description** |
 | --------- | --------------- |
-| Issue     | Measures the median time between creating an issue and taking action to solve it, by either labeling it or adding it to a milestone, whatever comes first. The label will be tracked only if it already has an [Issue Board list](../project/issue_board.md) created for it. |
-| Plan      | Measures the median time between the action you took for the previous stage, and pushing the first commit to the branch. The very first commit of the branch is the one that triggers the separation between **Plan** and **Code**, and at least one of the commits in the branch needs to contain the related issue number (e.g., `#42`). If none of the commits in the branch mention the related issue number, it is not considered to the measurement time of the stage. |
-| Code      | Measures the median time between pushing a first commit (previous stage) and creating a merge request (MR) related to that commit. The key to keep the process tracked is to include the [issue closing pattern](../project/issues/managing_issues.md#closing-issues-automatically) to the description of the merge request (for example, `Closes #xxx`, where `xxx` is the number of the issue related to this merge request). If the closing pattern is not present, then the calculation takes the creation time of the first commit in the merge request as the start time. |
-| Test      | Measures the median time to run the entire pipeline for that project. It's related to the time GitLab CI/CD takes to run every job for the commits pushed to that merge request defined in the previous stage. It is basically the start->finish time for all pipelines. |
-| Review    | Measures the median time taken to review the merge request that has a closing issue pattern, between its creation and until it's merged. |
-| Staging   | Measures the median time between merging the merge request with a closing issue pattern until the very first deployment to a [production environment](#how-the-production-environment-is-identified). If there isn't a production environment, this is not tracked. |
+| Issue     | Measures the median time between creating an issue and taking action to solve it, by either labeling it or adding it to a milestone, whichever comes first. The label is tracked only if it already includes an [Issue Board list](../project/issue_board.md) created for it. |
+| Plan      | Measures the median time between the action you took for the previous stage, and pushing the first commit to the branch. That first branch commit triggers the separation between **Plan** and **Code**, and at least one of the commits in the branch must include the related issue number (such as `#42`). If the issue number is *not* included in a commit, that data is not included in the measurement time of the stage. |
+| Code      | Measures the median time between pushing a first commit (previous stage) and creating a merge request (MR). The process is tracked with the [issue closing pattern](../project/issues/managing_issues.md#closing-issues-automatically) in the description of the merge request. For example, if the issue is closed with `Closes #xxx`, it's assumed that `xxx` is issue number for the merge request). If there is no closing pattern, the start time is set to the create time of the first commit. |
+| Test      | Essentially the start to finish time for all pipelines. Measures the median time to run the entire pipeline for that project. Related to the time required by GitLab CI/CD to run every job for the commits pushed to that merge request, as defined in the previous stage. |
+| Review    | Measures the median time taken to review merge requests with a closing issue pattern, from creation to merge. |
+| Staging   | Measures the median time between merging the merge request (with a closing issue pattern) to the first deployment to a [production environment](#how-the-production-environment-is-identified). Data not collected without a production environment. |
 
 How this works, behind the scenes:
 
-1. Issues and merge requests are grouped together in pairs, such that for each
-   `<issue, merge request>` pair, the merge request has the [issue closing pattern](../project/issues/managing_issues.md#closing-issues-automatically)
-   for the corresponding issue. All other issues and merge requests are **not**
-   considered.
-1. Then the `<issue, merge request>` pairs are filtered out by last XX days (specified
-   by the UI - default is 90 days). So it prohibits these pairs from being considered.
-1. For the remaining `<issue, merge request>` pairs, we check the information that
-   we need for the stages, like issue creation date, merge request merge time,
-   etc.
+1. Issues and merge requests are grouped in pairs, where the merge request has the
+   [closing pattern](../project/issues/managing_issues.md#closing-issues-automatically)
+   for the corresponding issue. Issue/merge request pairs without closing patterns are
+   **not** included.
+1. Issue/merge request pairs are filtered by the last XX days, specified through the UI
+   (default = 90 days). Pairs outside the filtered range are not included.
+1. For the remaining pairs, review information needed for stages, including
+   issue creation date, merge request merge time, and so on.
 
-To sum up, anything that doesn't follow [GitLab flow](../../topics/gitlab_flow.md) will not be tracked and the
-Value Stream Analytics dashboard will not present any data for:
+In short, the Value Stream Analytics dashboard tracks data related to [GitLab flow](../../topics/gitlab_flow.md). It does not include data for:
 
 - Merge requests that do not close an issue.
-- Issues not labeled with a label present in the Issue Board or for issues not assigned a milestone.
-- Staging stage, if the project has no [production environment](#how-the-production-environment-is-identified).
+- Issues that do not include labels present in the Issue Board
+- Issues without a milestone.
+- Staging stages, in projects without a [production environment](#how-the-production-environment-is-identified).
 
 ## How the production environment is identified
 
@@ -165,8 +135,7 @@ environments is configured.
 1. Now that the merge request is merged, a deployment to the `production`
    environment starts and finishes at 19:30 (stop of **Staging** stage).
 
-From the above example you can conclude the time it took each stage to complete
-as long as their total time:
+From the above example we see the time used for each stage:
 
 - **Issue**: 2h (11:00 - 09:00)
 - **Plan**: 1h (12:00 - 11:00)
@@ -175,203 +144,20 @@ as long as their total time:
 - **Review**: 5h (19:00 - 14:00)
 - **Staging**: 30min (19:30 - 19:00)
 
-A few notes:
-
-- In the above example we demonstrated that it doesn't matter if your first
-  commit doesn't mention the issue number, you can do this later in any commit
-  of the branch you are working on.
-- You can see that the **Test** stage is not calculated to the overall time of
-  the cycle since it is included in the **Review** process (every MR should be
-  tested).
-- The example above was just **one cycle** of the seven stages. Add multiple
-  cycles, calculate their median time and the result is what the dashboard of
-  Value Stream Analytics is showing.
-
-## Customizable Value Stream Analytics **(PREMIUM)**
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/12196) in GitLab 12.9.
-
-The default stages are designed to work straight out of the box, but they might not be suitable for
-all teams. Different teams use different approaches to building software, so some teams might want
-to customize their Value Stream Analytics.
-
-GitLab allows users to create multiple value streams, hide default stages and create custom stages that align better to their development workflow.
-
-NOTE: **Note:**
-Customizability is [only available for group-level](https://gitlab.com/gitlab-org/gitlab/-/issues/35823#note_272558950) Value Stream Analytics.
-
-### Stage path
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/210315) in GitLab 13.0.
-
-Stages are visually depicted as a horizontal process flow. Selecting a stage will update the
-the content below the value stream.
-
-This is disabled by default. If you have a self-managed instance, an
-administrator can [open a Rails console](../../administration/troubleshooting/navigating_gitlab_via_rails_console.md)
-and enable it with the following command:
-
-```ruby
-Feature.enable(:value_stream_analytics_path_navigation)
-```
-
-### Adding a stage
-
-In the following example we're creating a new stage that measures and tracks issues from creation
-time until they are closed.
-
-1. Navigate to your group's **Analytics > Value Stream**.
-1. Click the **Add a stage** button.
-1. Fill in the new stage form:
-   - Name: Issue start to finish.
-   - Start event: Issue created.
-   - End event: Issue closed.
-1. Click the **Add stage** button.
-
-![New Value Stream Analytics Stage](img/new_vsm_stage_v12_9.png "Form for creating a new stage")
-
-The new stage is persisted and it will always show up on the Value Stream Analytics page for your
-group.
-
-If you want to alter or delete the stage, you can easily do that for customized stages by:
-
-1. Hovering over the stage.
-1. Clicking the vertical ellipsis (**{ellipsis_v}**) button that appears.
-
-![Value Stream Analytics Stages](img/vsm_stage_list_v12_9.png)
-
-Creating a custom stage requires specifying two events:
-
-- A start.
-- An end.
-
-Be careful to choose a start event that occurs *before* your end event. For example, consider a
-stage that:
-
-- Started when an issue is added to a board.
-- Ended when the issue is created.
-
-This stage would not work because the end event has already happened when the start event occurs.
-To prevent such invalid stages, the UI prohibits incompatible start and end events. After you select
-the start event, the stop event dropdown will only list the compatible events.
-
-### Re-ordering stages
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/196698) in GitLab 12.10.
-
-Once a custom stage has been added, you can "drag and drop" stages to rearrange their order. These changes are automatically saved to the system.
-
-### Label based stages
+More information:
 
-The pre-defined start and end events can cover many use cases involving both issues and merge requests.
-
-For supporting more complex workflows, use stages based on group labels. These events are based on
-labels being added or removed. In particular, [scoped labels](../project/labels.md#scoped-labels)
-are useful for complex workflows.
-
-In this example, we'd like to measure more accurate code review times. The workflow is the following:
-
-- When the code review starts, the reviewer adds `workflow::code_review_start` label to the merge request.
-- When the code review is finished, the reviewer adds `workflow::code_review_complete` label to the merge request.
-
-Creating a new stage called "Code Review":
-
-![New Label Based Value Stream Analytics Stage](img/label_based_stage_vsm_v12_9.png "Creating a label based Value Stream Analytics Stage")
-
-### Hiding unused stages
-
-Sometimes certain default stages are not relevant to a team. In this case, you can easily hide stages
-so they no longer appear in the list. To hide stages:
-
-1. Add a custom stage to activate customizability.
-1. Hover over the default stage you want to hide.
-1. Click the vertical ellipsis (**{ellipsis_v}**) button that appears and select **Hide stage**.
-
-To recover a default stage that was previously hidden:
-
-1. Click **Add a stage** button.
-1. In the top right corner open the **Recover hidden stage** dropdown.
-1. Select a stage.
-
-### Creating a value stream
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/221202) in GitLab 13.3
-
-A default value stream is readily available for each group. You can create additional value streams based on the different areas of work that you would like to measure.
-
-Once created, a new value stream includes the [seven stages](#default-stages) that follow
-[GitLab workflow](../../topics/gitlab_flow.md)
-best practices. You can customize this flow by adding, hiding or re-ordering stages.
-
-To create a value stream:
-
-1. Navigate to your group's **Analytics > Value Stream**.
-1. Click the Value stream dropdown and select **Create new Value Stream**
-1. Fill in a name for the new Value Stream
-1. Click the **Create Value Stream** button.
-
-![New value stream](img/new_value_stream_v13_3.png "Creating a new value stream")
-
-### Deleting a value stream
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/221205) in GitLab 13.4.
-
-To delete a custom value stream:
-
-1. Navigate to your group's **Analytics > Value Stream**.
-1. Click the Value stream dropdown and select the value stream you would like to delete.
-1. Click the **Delete (name of value stream)**.
-1. Click the **Delete** button to confirm.
-
-![Delete value stream](img/delete_value_stream_v13.4.png "Deleting a custom value stream")
-
-### Disabling custom value streams
-
-Custom value streams are enabled by default. If you have a self-managed instance, an
-administrator can open a Rails console and disable them with the following command:
-
-```ruby
-Feature.disable(:value_stream_analytics_create_multiple_value_streams)
-```
-
-## Days to completion chart
-
-> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/21631) in GitLab 12.6.
-> - [Chart median line removed](https://gitlab.com/gitlab-org/gitlab/-/issues/235455) in GitLab 13.4.
-
-This chart visually depicts the total number of days it takes for cycles to be completed. (Totals are being replaced with averages in [this issue](https://gitlab.com/gitlab-org/gitlab/-/issues/262070).)
-
-This chart uses the global page filters for displaying data based on the selected
-group, projects, and timeframe. In addition, specific stages can be selected
-from within the chart itself.
-
-The chart data is limited to the last 500 items.
-
-### Disabling chart
-
-This chart is enabled by default. If you have a self-managed instance, an
-administrator can open a Rails console and disable it with the following command:
-
-```ruby
-Feature.disable(:cycle_analytics_scatterplot_enabled)
-```
-
-## Type of work - Tasks by type chart
-
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/32421) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.10.
-
-This chart shows a cumulative count of issues and merge requests per day.
-
-This chart uses the global page filters for displaying data based on the selected
-group, projects, and timeframe. The chart defaults to showing counts for issues but can be
-toggled to show data for merge requests and further refined for specific group-level labels.
-
-By default the top group-level labels (max. 10) are pre-selected, with the ability to
-select up to a total of 15 labels.
+- The above example specifies the issue number in a latter commit. The process
+  still collects analytics data for that issue.
+- The time required in the **Test** stage is not included in the overall time of
+  the cycle. It is included in the **Review** process, as every MR should be
+  tested.
+- The example above illustrates only **one cycle** of the multiple stages. Value
+  Stream Analytics, on its dashboard, shows the calculated median elapsed time
+  for these issues.
 
 ## Permissions
 
-The current permissions on the Project Value Stream Analytics dashboard are:
+The current permissions on the Project-level Value Stream Analytics dashboard are:
 
 - Public projects - anyone can access.
 - Internal projects - any authenticated user can access.
@@ -379,9 +165,6 @@ The current permissions on the Project Value Stream Analytics dashboard are:
 
 You can [read more about permissions](../../user/permissions.md) in general.
 
-For Value Stream Analytics functionality introduced in GitLab 12.3 and later,
-users must have Reporter access or above.
-
 ## More resources
 
 Learn more about Value Stream Analytics in the following resources:
diff --git a/doc/user/analytics/img/delete_value_stream_v13.4.png b/doc/user/group/value_stream_analytics/img/delete_value_stream_v13.4.png
index c97fcb76343..c97fcb76343 100644
--- a/doc/user/analytics/img/delete_value_stream_v13.4.png
+++ b/doc/user/group/value_stream_analytics/img/delete_value_stream_v13.4.png
diff --git a/doc/user/analytics/img/label_based_stage_vsm_v12_9.png b/doc/user/group/value_stream_analytics/img/label_based_stage_vsm_v12_9.png
index 84ce33aece5..84ce33aece5 100644
--- a/doc/user/analytics/img/label_based_stage_vsm_v12_9.png
+++ b/doc/user/group/value_stream_analytics/img/label_based_stage_vsm_v12_9.png
diff --git a/doc/user/analytics/img/new_value_stream_v13_3.png b/doc/user/group/value_stream_analytics/img/new_value_stream_v13_3.png
index bc8502e85a6..bc8502e85a6 100644
--- a/doc/user/analytics/img/new_value_stream_v13_3.png
+++ b/doc/user/group/value_stream_analytics/img/new_value_stream_v13_3.png
diff --git a/doc/user/analytics/img/new_vsm_stage_v12_9.png b/doc/user/group/value_stream_analytics/img/new_vsm_stage_v12_9.png
index dbef25d33ed..dbef25d33ed 100644
--- a/doc/user/analytics/img/new_vsm_stage_v12_9.png
+++ b/doc/user/group/value_stream_analytics/img/new_vsm_stage_v12_9.png
diff --git a/doc/user/analytics/img/vsa_filter_bar_v13.3.png b/doc/user/group/value_stream_analytics/img/vsa_filter_bar_v13.3.png
index 506765f63cb..506765f63cb 100644
--- a/doc/user/analytics/img/vsa_filter_bar_v13.3.png
+++ b/doc/user/group/value_stream_analytics/img/vsa_filter_bar_v13.3.png
diff --git a/doc/user/analytics/img/vsa_time_metrics_v13_0.png b/doc/user/group/value_stream_analytics/img/vsa_time_metrics_v13_0.png
index 799a81584a0..799a81584a0 100644
--- a/doc/user/analytics/img/vsa_time_metrics_v13_0.png
+++ b/doc/user/group/value_stream_analytics/img/vsa_time_metrics_v13_0.png
diff --git a/doc/user/analytics/img/vsm_stage_list_v12_9.png b/doc/user/group/value_stream_analytics/img/vsm_stage_list_v12_9.png
index 3b50dd48543..3b50dd48543 100644
--- a/doc/user/analytics/img/vsm_stage_list_v12_9.png
+++ b/doc/user/group/value_stream_analytics/img/vsm_stage_list_v12_9.png
diff --git a/doc/user/group/value_stream_analytics/index.md b/doc/user/group/value_stream_analytics/index.md
new file mode 100644
index 00000000000..88cce7fc62a
--- /dev/null
+++ b/doc/user/group/value_stream_analytics/index.md
@@ -0,0 +1,375 @@
+---
+type: reference
+stage: Manage
+group: Optimize
+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/#designated-technical-writers
+---
+
+# Value Stream Analytics **(PREMIUM)**
+
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/196455) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.9 at the group level.
+
+Value Stream Analytics measures the time spent to go from an
+[idea to production](https://about.gitlab.com/blog/2016/08/05/continuous-integration-delivery-and-deployment-with-gitlab/#from-idea-to-production-with-gitlab)
+(also known as cycle time) for each of your projects or groups. Value Stream Analytics displays the median time
+spent in each stage defined in the process.
+
+Value Stream Analytics can help you quickly dtermine the velocity of a given
+group. It points to bottlenecks in the development process, enabling management
+to uncover, triage, and identify the root cause of slowdowns in the software development life cycle.
+
+For information on how to contribute to the development of Value Stream Analytics, see our [contributor documentation](../../../development/value_stream_analytics.md).
+
+Group-level Value Stream Analytics is available via **Group > Analytics > Value Stream**.
+
+Note: [Project-level Value Stream Analytics](../../analytics/value_stream_analytics.md) is also available.
+
+## Default stages
+
+The stages tracked by Value Stream Analytics by default represent the [GitLab flow](../../../topics/gitlab_flow.md). These stages can be customized in Group Level Value Stream Analytics.
+
+- **Issue** (Tracker)
+  - Time to schedule an issue (by milestone or by adding it to an issue board)
+- **Plan** (Board)
+  - Time to first commit
+- **Code** (IDE)
+  - Time to create a merge request
+- **Test** (CI)
+  - Time it takes GitLab CI/CD to test your code
+- **Review** (Merge Request/MR)
+  - Time spent on code review
+- **Staging** (Continuous Deployment)
+  - Time between merging and deploying to production
+
+## Filter the analytics data
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13216) in GitLab 13.3
+
+GitLab provides the ability to filter analytics based on the following parameters:
+
+- Milestones (Group level)
+- Labels (Group level)
+- Author
+- Assignees
+
+To filter results:
+
+1. Select a group.
+1. Click on the filter bar.
+1. Select a parameter to filter by.
+1. Select a value from the autocompleted results, or type to refine the results.
+
+![Value stream analytics filter bar](img/vsa_filter_bar_v13.3.png "Active filter bar for value stream analytics")
+
+### Date ranges
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/13216) in GitLab 12.4.
+
+GitLab provides the ability to filter analytics based on a date range. To filter results:
+
+1. Select a group.
+1. Optionally select a project.
+1. Select a date range using the available date pickers.
+
+## How Time metrics are measured
+
+The "Time" metrics near the top of the page are measured as follows:
+
+- **Lead time**: median time from issue created to issue closed.
+- **Cycle time**: median time from first commit to issue closed.
+
+A commit is associated with an issue by [crosslinking](../../project/issues/crosslinking_issues.md) in the commit message or by manually linking the merge request containing the commit.
+
+![Value stream analytics time metrics](img/vsa_time_metrics_v13_0.png "Time metrics for value stream analytics")
+
+## How the stages are measured
+
+Value Stream Analytics records stage time and data based on the project issues with the
+exception of the staging stage, where only data deployed to
+production are measured.
+
+Specifically, if your CI is not set up and you have not defined a [production environment](#how-the-production-environment-is-identified), then you will not have any
+data for this stage.
+
+Each stage of Value Stream Analytics is further described in the table below.
+
+| **Stage** | **Description** |
+| --------- | --------------- |
+| Issue     | Measures the median time between creating an issue and taking action to solve it, by either labeling it or adding it to a milestone, whatever comes first. The label will be tracked only if it already has an [Issue Board list](../../project/issue_board.md) created for it. |
+| Plan      | Measures the median time between the action you took for the previous stage, and pushing the first commit to the branch. The very first commit of the branch is the one that triggers the separation between **Plan** and **Code**, and at least one of the commits in the branch needs to contain the related issue number (e.g., `#42`). If none of the commits in the branch mention the related issue number, it is not considered to the measurement time of the stage. |
+| Code      | Measures the median time between pushing a first commit (previous stage) and creating a merge request (MR) related to that commit. The key to keep the process tracked is to include the [issue closing pattern](../../project/issues/managing_issues.md#closing-issues-automatically) to the description of the merge request (for example, `Closes #xxx`, where `xxx` is the number of the issue related to this merge request). If the closing pattern is not present, then the calculation takes the creation time of the first commit in the merge request as the start time. |
+| Test      | Measures the median time to run the entire pipeline for that project. It's related to the time GitLab CI/CD takes to run every job for the commits pushed to that merge request defined in the previous stage. It is basically the start->finish time for all pipelines. |
+| Review    | Measures the median time taken to review the merge request that has a closing issue pattern, between its creation and until it's merged. |
+| Staging   | Measures the median time between merging the merge request with a closing issue pattern until the very first deployment to a [production environment](#how-the-production-environment-is-identified). If there isn't a production environment, this is not tracked. |
+
+How this works, behind the scenes:
+
+1. Issues and merge requests are grouped together in pairs, such that for each
+   `<issue, merge request>` pair, the merge request has the [issue closing pattern](../../project/issues/managing_issues.md#closing-issues-automatically)
+   for the corresponding issue. All other issues and merge requests are **not**
+   considered.
+1. Then the `<issue, merge request>` pairs are filtered out by last XX days (specified
+   by the UI - default is 90 days). So it prohibits these pairs from being considered.
+1. For the remaining `<issue, merge request>` pairs, we check the information that
+   we need for the stages, like issue creation date, merge request merge time,
+   etc.
+
+To sum up, anything that doesn't follow [GitLab flow](../../../topics/gitlab_flow.md) will not be tracked and the
+Value Stream Analytics dashboard will not present any data for:
+
+- Merge requests that do not close an issue.
+- Issues not labeled with a label present in the Issue Board or for issues not assigned a milestone.
+- Staging stage, if the project has no [production environment](#how-the-production-environment-is-identified).
+
+## How the production environment is identified
+
+Value Stream Analytics identifies production environments by looking for project [environments](../../../ci/yaml/README.md#environment) with a name matching any of these patterns:
+
+- `prod` or `prod/*`
+- `production` or `production/*`
+
+These patterns are not case-sensitive.
+
+You can change the name of a project environment in your GitLab CI/CD configuration.
+
+## Example workflow
+
+Below is a simple fictional workflow of a single cycle that happens in a
+single day through all noted stages. Note that if a stage does not include a start
+and a stop time, its data is not included in the median time. It is assumed that
+milestones are created and a CI for testing and setting environments is configured.
+a start and a stop mark, it is not measured and hence not calculated in the median
+time. It is assumed that milestones are created and CI for testing and setting
+environments is configured.
+
+1. Issue is created at 09:00 (start of **Issue** stage).
+1. Issue is added to a milestone at 11:00 (stop of **Issue** stage / start of
+   **Plan** stage).
+1. Start working on the issue, create a branch locally and make one commit at
+   12:00.
+1. Make a second commit to the branch which mentions the issue number at 12.30
+   (stop of **Plan** stage / start of **Code** stage).
+1. Push branch and create a merge request that contains the [issue closing pattern](../../project/issues/managing_issues.md#closing-issues-automatically)
+   in its description at 14:00 (stop of **Code** stage / start of **Test** and
+   **Review** stages).
+1. The CI starts running your scripts defined in [`.gitlab-ci.yml`](../../../ci/yaml/README.md) and
+   takes 5min (stop of **Test** stage).
+1. Review merge request, ensure that everything is OK and merge the merge
+   request at 19:00. (stop of **Review** stage / start of **Staging** stage).
+1. Now that the merge request is merged, a deployment to the `production`
+   environment starts and finishes at 19:30 (stop of **Staging** stage).
+
+From the above example you can conclude the time it took each stage to complete
+as long as their total time:
+
+- **Issue**: 2h (11:00 - 09:00)
+- **Plan**: 1h (12:00 - 11:00)
+- **Code**: 2h (14:00 - 12:00)
+- **Test**: 5min
+- **Review**: 5h (19:00 - 14:00)
+- **Staging**: 30min (19:30 - 19:00)
+
+A few notes:
+
+- In the above example we demonstrated that it doesn't matter if your first
+  commit doesn't mention the issue number, you can do this later in any commit
+  of the branch you are working on.
+- You can see that the **Test** stage is not calculated to the overall time of
+  the cycle since it is included in the **Review** process (every MR should be
+  tested).
+- The example above was just **one cycle** of the seven stages. Add multiple
+  cycles, calculate their median time and the result is what the dashboard of
+  Value Stream Analytics is showing.
+
+## Customizable Stages
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/12196) in GitLab 12.9.
+
+The default stages are designed to work straight out of the box, but they might not be suitable for
+all teams. Different teams use different approaches to building software, so some teams might want
+to customize their Value Stream Analytics.
+
+GitLab allows users to create multiple value streams, hide default stages and create custom stages that align better to their development workflow.
+
+### Stage path
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/210315) in GitLab 13.0.
+
+Stages are visually depicted as a horizontal process flow. Selecting a stage will update the
+the content below the value stream.
+
+This is disabled by default. If you have a self-managed instance, an
+administrator can [open a Rails console](../../../administration/troubleshooting/navigating_gitlab_via_rails_console.md)
+and enable it with the following command:
+
+```ruby
+Feature.enable(:value_stream_analytics_path_navigation)
+```
+
+### Adding a stage
+
+In the following example we're creating a new stage that measures and tracks issues from creation
+time until they are closed.
+
+1. Navigate to your group's **Analytics > Value Stream**.
+1. Click the **Add a stage** button.
+1. Fill in the new stage form:
+   - Name: Issue start to finish.
+   - Start event: Issue created.
+   - End event: Issue closed.
+1. Click the **Add stage** button.
+
+![New Value Stream Analytics Stage](img/new_vsm_stage_v12_9.png "Form for creating a new stage")
+
+The new stage is persisted and it will always show up on the Value Stream Analytics page for your
+group.
+
+If you want to alter or delete the stage, you can easily do that for customized stages by:
+
+1. Hovering over the stage.
+1. Clicking the vertical ellipsis (**{ellipsis_v}**) button that appears.
+
+![Value Stream Analytics Stages](img/vsm_stage_list_v12_9.png)
+
+Creating a custom stage requires specifying two events:
+
+- A start.
+- An end.
+
+Be careful to choose a start event that occurs *before* your end event. For example, consider a
+stage that:
+
+- Started when an issue is added to a board.
+- Ended when the issue is created.
+
+This stage would not work because the end event has already happened when the start event occurs.
+To prevent such invalid stages, the UI prohibits incompatible start and end events. After you select
+the start event, the stop event dropdown will only list the compatible events.
+
+### Re-ordering stages
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/196698) in GitLab 12.10.
+
+Once a custom stage has been added, you can "drag and drop" stages to rearrange their order. These changes are automatically saved to the system.
+
+### Label based stages
+
+The pre-defined start and end events can cover many use cases involving both issues and merge requests.
+
+For supporting more complex workflows, use stages based on group labels. These events are based on
+labels being added or removed. In particular, [scoped labels](../../project/labels.md#scoped-labels)
+are useful for complex workflows.
+
+In this example, we'd like to measure more accurate code review times. The workflow is the following:
+
+- When the code review starts, the reviewer adds `workflow::code_review_start` label to the merge request.
+- When the code review is finished, the reviewer adds `workflow::code_review_complete` label to the merge request.
+
+Creating a new stage called "Code Review":
+
+![New Label Based Value Stream Analytics Stage](img/label_based_stage_vsm_v12_9.png "Creating a label based Value Stream Analytics Stage")
+
+### Hiding unused stages
+
+Sometimes certain default stages are not relevant to a team. In this case, you can easily hide stages
+so they no longer appear in the list. To hide stages:
+
+1. Add a custom stage to activate customizability.
+1. Hover over the default stage you want to hide.
+1. Click the vertical ellipsis (**{ellipsis_v}**) button that appears and select **Hide stage**.
+
+To recover a default stage that was previously hidden:
+
+1. Click **Add a stage** button.
+1. In the top right corner open the **Recover hidden stage** dropdown.
+1. Select a stage.
+
+### Creating a value stream
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/221202) in GitLab 13.3
+
+A default value stream is readily available for each group. You can create additional value streams based on the different areas of work that you would like to measure.
+
+Once created, a new value stream includes the [seven stages](#default-stages) that follow
+[GitLab workflow](../../../topics/gitlab_flow.md)
+best practices. You can customize this flow by adding, hiding or re-ordering stages.
+
+To create a value stream:
+
+1. Navigate to your group's **Analytics > Value Stream**.
+1. Click the Value stream dropdown and select **Create new Value Stream**
+1. Fill in a name for the new Value Stream
+1. Click the **Create Value Stream** button.
+
+![New value stream](img/new_value_stream_v13_3.png "Creating a new value stream")
+
+### Deleting a value stream
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/221205) in GitLab 13.4.
+
+To delete a custom value stream:
+
+1. Navigate to your group's **Analytics > Value Stream**.
+1. Click the Value stream dropdown and select the value stream you would like to delete.
+1. Click the **Delete (name of value stream)**.
+1. Click the **Delete** button to confirm.
+
+![Delete value stream](img/delete_value_stream_v13.4.png "Deleting a custom value stream")
+
+### Disabling custom value streams
+
+Custom value streams are enabled by default. If you have a self-managed instance, an
+administrator can open a Rails console and disable them with the following command:
+
+```ruby
+Feature.disable(:value_stream_analytics_create_multiple_value_streams)
+```
+
+## Days to completion chart
+
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/21631) in GitLab 12.6.
+> - [Chart median line removed](https://gitlab.com/gitlab-org/gitlab/-/issues/235455) in GitLab 13.4.
+
+This chart visually depicts the total number of days it takes for cycles to be completed. (Totals are being replaced with averages in [this issue](https://gitlab.com/gitlab-org/gitlab/-/issues/262070).)
+
+This chart uses the global page filters for displaying data based on the selected
+group, projects, and timeframe. In addition, specific stages can be selected
+from within the chart itself.
+
+The chart data is limited to the last 500 items.
+
+### Disabling chart
+
+This chart is enabled by default. If you have a self-managed instance, an
+administrator can open a Rails console and disable it with the following command:
+
+```ruby
+Feature.disable(:cycle_analytics_scatterplot_enabled)
+```
+
+## Type of work - Tasks by type chart
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/32421) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.10.
+
+This chart shows a cumulative count of issues and merge requests per day.
+
+This chart uses the global page filters for displaying data based on the selected
+group, projects, and timeframe. The chart defaults to showing counts for issues but can be
+toggled to show data for merge requests and further refined for specific group-level labels.
+
+By default the top group-level labels (max. 10) are pre-selected, with the ability to
+select up to a total of 15 labels.
+
+## Permissions
+
+To access Group-level Value Stream Analytics, users must have Reporter access or above.
+
+You can [read more about permissions](../../permissions.md) in general.
+
+## More resources
+
+Learn more about Value Stream Analytics in the following resources:
+
+- [Value Stream Analytics feature page](https://about.gitlab.com/stages-devops-lifecycle/value-stream-analytics/).
+- [Value Stream Analytics feature preview](https://about.gitlab.com/blog/2016/09/16/feature-preview-introducing-cycle-analytics/).
+- [Value Stream Analytics feature highlight](https://about.gitlab.com/blog/2016/09/21/cycle-analytics-feature-highlight/).
diff --git a/doc/user/packages/npm_registry/index.md b/doc/user/packages/npm_registry/index.md
index 756139786d5..74e74ae67f9 100644
--- a/doc/user/packages/npm_registry/index.md
+++ b/doc/user/packages/npm_registry/index.md
@@ -277,6 +277,10 @@ deploy:
     - npm publish
 ```
 
+See the
+[Publish NPM packages to the GitLab Package Registry using semantic-release](../../../ci/examples/semantic-release.md)
+step-by-step guide and demo project for a complete example.
+
 ## Publishing packages with the same name or version
 
 You cannot publish a package if a package of the same name and version already exists.
diff --git a/qa/Gemfile.lock b/qa/Gemfile.lock
index 883c5480689..3ad9b4fed9e 100644
--- a/qa/Gemfile.lock
+++ b/qa/Gemfile.lock
@@ -39,9 +39,6 @@ GEM
       adamantium (~> 0.2.0)
       equalizer (~> 0.0.9)
     concurrent-ruby (1.1.7)
-    debase (0.2.4.1)
-      debase-ruby_core_source (>= 0.10.2)
-    debase-ruby_core_source (0.10.6)
     diff-lcs (1.3)
     domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
@@ -88,7 +85,7 @@ GEM
       byebug (~> 9.1)
       pry (~> 0.10)
     public_suffix (4.0.1)
-    rack (2.2.2)
+    rack (2.2.3)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rake (12.3.3)
@@ -155,7 +152,6 @@ DEPENDENCIES
   airborne (~> 0.3.4)
   capybara (~> 3.29.0)
   capybara-screenshot (~> 1.0.23)
-  debase (~> 0.2.4.1)
   faker (~> 1.6, >= 1.6.6)
   gitlab-qa
   knapsack (~> 1.17)
diff --git a/qa/qa/fixtures/auto_devops_rack/Gemfile.lock b/qa/qa/fixtures/auto_devops_rack/Gemfile.lock
index 9c7c93fb553..04a85be4b2f 100644
--- a/qa/qa/fixtures/auto_devops_rack/Gemfile.lock
+++ b/qa/qa/fixtures/auto_devops_rack/Gemfile.lock
@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    rack (2.0.6)
+    rack (2.2.3)
     rake (12.3.3)
 
 PLATFORMS
diff --git a/qa/qa/specs/features/browser_ui/2_plan/issue/create_issue_spec.rb b/qa/qa/specs/features/browser_ui/2_plan/issue/create_issue_spec.rb
index 9550572bd5c..688f42c48c6 100644
--- a/qa/qa/specs/features/browser_ui/2_plan/issue/create_issue_spec.rb
+++ b/qa/qa/specs/features/browser_ui/2_plan/issue/create_issue_spec.rb
@@ -19,7 +19,7 @@ module QA
         end
       end
 
-      it 'closes an issue', quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/225303', type: :bug }, testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1085' do
+      it 'closes an issue', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1085' do
         closed_issue.visit!
 
         Page::Project::Issue::Show.perform do |issue_page|
diff --git a/spec/frontend/boards/components/boards_selector_spec.js b/spec/frontend/boards/components/boards_selector_spec.js
index 2b7605a3f7c..c30aacb65c9 100644
--- a/spec/frontend/boards/components/boards_selector_spec.js
+++ b/spec/frontend/boards/components/boards_selector_spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
-import { GlDeprecatedDropdown, GlLoadingIcon } from '@gitlab/ui';
+import { GlDropdown, GlLoadingIcon, GlDropdownSectionHeader } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import BoardsSelector from '~/boards/components/boards_selector.vue';
 import boardsStore from '~/boards/stores/boards_store';
@@ -34,8 +34,9 @@ describe('BoardsSelector', () => {
   };
 
   const getDropdownItems = () => wrapper.findAll('.js-dropdown-item');
-  const getDropdownHeaders = () => wrapper.findAll('.dropdown-bold-header');
+  const getDropdownHeaders = () => wrapper.findAll(GlDropdownSectionHeader);
   const getLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findDropdown = () => wrapper.find(GlDropdown);
 
   beforeEach(() => {
     const $apollo = {
@@ -103,7 +104,7 @@ describe('BoardsSelector', () => {
     });
 
     // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
-    wrapper.find(GlDeprecatedDropdown).vm.$emit('show');
+    findDropdown().vm.$emit('show');
   });
 
   afterEach(() => {
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index a272803f9b6..ce0e76ba22d 100644
--- a/spec/frontend/pipelines/pipelines_spec.js
+++ b/spec/frontend/pipelines/pipelines_spec.js
@@ -31,7 +31,7 @@ describe('Pipelines', () => {
 
   const paths = {
     endpoint: 'twitter/flight/pipelines.json',
-    autoDevopsPath: '/help/topics/autodevops/index.md',
+    autoDevopsHelpPath: '/help/topics/autodevops/index.md',
     helpPagePath: '/help/ci/quick_start/README',
     emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
     errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',
@@ -43,7 +43,7 @@ describe('Pipelines', () => {
 
   const noPermissions = {
     endpoint: 'twitter/flight/pipelines.json',
-    autoDevopsPath: '/help/topics/autodevops/index.md',
+    autoDevopsHelpPath: '/help/topics/autodevops/index.md',
     helpPagePath: '/help/ci/quick_start/README',
     emptyStateSvgPath: '/assets/illustrations/pipelines_empty.svg',
     errorStateSvgPath: '/assets/illustrations/pipelines_failed.svg',
diff --git a/spec/lib/gitlab/ci/config/entry/processable_spec.rb b/spec/lib/gitlab/ci/config/entry/processable_spec.rb
index ac8dd2a3267..aadf94365c6 100644
--- a/spec/lib/gitlab/ci/config/entry/processable_spec.rb
+++ b/spec/lib/gitlab/ci/config/entry/processable_spec.rb
@@ -361,7 +361,7 @@ RSpec.describe Gitlab::Ci::Config::Entry::Processable do
         context 'when root yaml variables are used' do
           let(:variables) do
             Gitlab::Ci::Config::Entry::Variables.new(
-              A: 'root', C: 'root', D: 'root'
+              { A: 'root', C: 'root', D: 'root' }
             ).value
           end
 
diff --git a/spec/lib/gitlab/config/entry/configurable_spec.rb b/spec/lib/gitlab/config/entry/configurable_spec.rb
index c72efa66024..0153cfbf091 100644
--- a/spec/lib/gitlab/config/entry/configurable_spec.rb
+++ b/spec/lib/gitlab/config/entry/configurable_spec.rb
@@ -15,7 +15,7 @@ RSpec.describe Gitlab::Config::Entry::Configurable do
 
   describe 'validations' do
     context 'when entry is a hash' do
-      let(:instance) { entry.new(key: 'value') }
+      let(:instance) { entry.new({ key: 'value' }) }
 
       it 'correctly validates an instance' do
         expect(instance).to be_valid