Add latest changes from gitlab-org/gitlab@master

19 files changed, 147 insertions, 73 deletions

diff --git a/GITLAB_KAS_VERSION b/GITLAB_KAS_VERSION
index bcab45af15a..bbdeab6222c 100644
--- a/GITLAB_KAS_VERSION
+++ b/GITLAB_KAS_VERSION
@@ -1 +1 @@
-0.0.3
+0.0.5
diff --git a/app/assets/javascripts/milestones/project_milestone_combobox.vue b/app/assets/javascripts/milestones/project_milestone_combobox.vue
index d06e79d259b..5ee917573ce 100644
--- a/app/assets/javascripts/milestones/project_milestone_combobox.vue
+++ b/app/assets/javascripts/milestones/project_milestone_combobox.vue
@@ -2,7 +2,7 @@
 import {
   GlDropdown,
   GlDropdownDivider,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownItem,
   GlLoadingIcon,
   GlSearchBoxByType,
@@ -19,7 +19,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownDivider,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
     GlLoadingIcon,
     GlSearchBoxByType,
@@ -196,9 +196,9 @@ export default {
       <gl-icon name="chevron-down" />
     </template>
 
-    <gl-new-dropdown-header>
+    <gl-dropdown-section-header>
       <span class="text-center d-block">{{ $options.translations.selectMilestone }}</span>
-    </gl-new-dropdown-header>
+    </gl-dropdown-section-header>
 
     <gl-dropdown-divider />
 
diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue
index cd9232eaae8..e468728a954 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_header.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue
@@ -6,7 +6,7 @@ import {
   GlDropdown,
   GlLoadingIcon,
   GlDropdownItem,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlSearchBoxByType,
   GlModalDirective,
   GlTooltipDirective,
@@ -31,7 +31,7 @@ export default {
     GlDropdown,
     GlLoadingIcon,
     GlDropdownItem,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
 
     GlSearchBoxByType,
 
@@ -191,7 +191,7 @@ export default {
         :text="environmentDropdownText"
       >
         <div class="d-flex flex-column overflow-hidden">
-          <gl-new-dropdown-header>{{ __('Environment') }}</gl-new-dropdown-header>
+          <gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header>
           <gl-search-box-by-type class="gl-m-3" @input="debouncedEnvironmentsSearch" />
 
           <gl-loading-icon v-if="environmentsLoading" :inline="true" />
diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
index a84977d9da9..932efeaaf0e 100644
--- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
+++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
@@ -4,7 +4,7 @@ import {
   GlIcon,
   GlDropdown,
   GlDropdownItem,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownDivider,
   GlSearchBoxByType,
   GlModalDirective,
@@ -19,7 +19,7 @@ export default {
     GlIcon,
     GlDropdown,
     GlDropdownItem,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownDivider,
     GlSearchBoxByType,
   },
@@ -79,7 +79,7 @@ export default {
     :text="selectedDashboardText"
   >
     <div class="d-flex flex-column overflow-hidden">
-      <gl-new-dropdown-header>{{ __('Dashboard') }}</gl-new-dropdown-header>
+      <gl-dropdown-section-header>{{ __('Dashboard') }}</gl-dropdown-section-header>
       <gl-search-box-by-type
         ref="monitorDashboardsDropdownSearch"
         v-model="searchTerm"
diff --git a/app/assets/javascripts/projects/commits/components/author_select.vue b/app/assets/javascripts/projects/commits/components/author_select.vue
index ba81101abc3..2204ec3cbe7 100644
--- a/app/assets/javascripts/projects/commits/components/author_select.vue
+++ b/app/assets/javascripts/projects/commits/components/author_select.vue
@@ -3,7 +3,7 @@ import { debounce } from 'lodash';
 import { mapState, mapActions } from 'vuex';
 import {
   GlDropdown,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownItem,
   GlSearchBoxByType,
   GlDropdownDivider,
@@ -19,7 +19,7 @@ export default {
   name: 'AuthorSelect',
   components: {
     GlDropdown,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
     GlSearchBoxByType,
     GlDropdownDivider,
@@ -113,9 +113,9 @@ export default {
       toggle-class="gl-py-3 gl-border-0"
       class="w-100 mt-2 mt-sm-0"
     >
-      <gl-new-dropdown-header>
+      <gl-dropdown-section-header>
         {{ __('Search by author') }}
-      </gl-new-dropdown-header>
+      </gl-dropdown-section-header>
       <gl-dropdown-divider />
       <gl-search-box-by-type
         v-model.trim="authorInput"
diff --git a/app/assets/javascripts/ref/components/ref_results_section.vue b/app/assets/javascripts/ref/components/ref_results_section.vue
index 57a3c2482c9..dc74f86fd70 100644
--- a/app/assets/javascripts/ref/components/ref_results_section.vue
+++ b/app/assets/javascripts/ref/components/ref_results_section.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlNewDropdownHeader, GlDropdownItem, GlBadge, GlIcon } from '@gitlab/ui';
+import { GlDropdownSectionHeader, GlDropdownItem, GlBadge, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 export default {
   name: 'RefResultsSection',
   components: {
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
     GlBadge,
     GlIcon,
@@ -84,12 +84,12 @@ export default {
 
 <template>
   <div>
-    <gl-new-dropdown-header>
+    <gl-dropdown-section-header>
       <div class="gl-display-flex align-items-center" data-testid="section-header">
         <span class="gl-mr-2 gl-mb-1">{{ sectionTitle }}</span>
         <gl-badge variant="neutral">{{ totalCountText }}</gl-badge>
       </div>
-    </gl-new-dropdown-header>
+    </gl-dropdown-section-header>
     <template v-if="error">
       <div class="gl-display-flex align-items-start text-danger gl-ml-4 gl-mr-4 gl-mb-3">
         <gl-icon name="error" class="gl-mr-2 gl-mt-2 gl-flex-shrink-0" />
diff --git a/app/assets/javascripts/ref/components/ref_selector.vue b/app/assets/javascripts/ref/components/ref_selector.vue
index d982893b4c6..85b123530b5 100644
--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/app/assets/javascripts/ref/components/ref_selector.vue
@@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import {
   GlDropdown,
   GlDropdownDivider,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlSearchBoxByType,
   GlSprintf,
   GlIcon,
@@ -20,7 +20,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownDivider,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlSearchBoxByType,
     GlSprintf,
     GlIcon,
@@ -130,9 +130,9 @@ export default {
     </template>
 
     <div class="gl-display-flex gl-flex-direction-column ref-selector-dropdown-content">
-      <gl-new-dropdown-header>
+      <gl-dropdown-section-header>
         <span class="gl-text-center gl-display-block">{{ i18n.dropdownHeader }}</span>
-      </gl-new-dropdown-header>
+      </gl-dropdown-section-header>
 
       <gl-dropdown-divider />
 
diff --git a/app/assets/javascripts/snippets/components/embed_dropdown.vue b/app/assets/javascripts/snippets/components/embed_dropdown.vue
index b87077352f7..589754a8b19 100644
--- a/app/assets/javascripts/snippets/components/embed_dropdown.vue
+++ b/app/assets/javascripts/snippets/components/embed_dropdown.vue
@@ -3,7 +3,7 @@ import { escape as esc } from 'lodash';
 import {
   GlButton,
   GlDropdown,
-  GlDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownText,
   GlFormInputGroup,
   GlTooltipDirective,
@@ -18,7 +18,7 @@ export default {
   components: {
     GlButton,
     GlDropdown,
-    GlDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownText,
     GlFormInputGroup,
   },
@@ -51,9 +51,9 @@ export default {
     menu-class="gl-px-1! gl-pb-5! gl-dropdown-menu-wide"
   >
     <template v-for="{ name, value } in sections">
-      <gl-dropdown-header :key="`header_${name}`" data-testid="header">{{
+      <gl-dropdown-section-header :key="`header_${name}`" data-testid="header">{{
         name
-      }}</gl-dropdown-header>
+      }}</gl-dropdown-section-header>
       <gl-dropdown-text
         :key="`input_${name}`"
         tag="div"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 349f2641378..814d4e8341e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -5,7 +5,7 @@ import { escape } from 'lodash';
 import {
   GlButton,
   GlDropdown,
-  GlNewDropdownHeader as GlDropdownHeader,
+  GlDropdownSectionHeader,
   GlDropdownItem,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -23,7 +23,7 @@ export default {
     MrWidgetIcon,
     GlButton,
     GlDropdown,
-    GlDropdownHeader,
+    GlDropdownSectionHeader,
     GlDropdownItem,
   },
   directives: {
@@ -168,7 +168,7 @@ export default {
           right
           data-qa-selector="download_dropdown"
         >
-          <gl-dropdown-header>{{ s__('Download as') }}</gl-dropdown-header>
+          <gl-dropdown-section-header>{{ s__('Download as') }}</gl-dropdown-section-header>
           <gl-dropdown-item
             :href="mr.emailPatchesPath"
             class="js-download-email-patches"
diff --git a/app/assets/javascripts/vue_shared/components/clone_dropdown.vue b/app/assets/javascripts/vue_shared/components/clone_dropdown.vue
index e02d55d372d..5c6bd5892ae 100644
--- a/app/assets/javascripts/vue_shared/components/clone_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/clone_dropdown.vue
@@ -1,7 +1,7 @@
 <script>
 import {
   GlDropdown,
-  GlNewDropdownHeader,
+  GlDropdownSectionHeader,
   GlFormInputGroup,
   GlButton,
   GlTooltipDirective,
@@ -12,7 +12,7 @@ import { getHTTPProtocol } from '~/lib/utils/url_utility';
 export default {
   components: {
     GlDropdown,
-    GlNewDropdownHeader,
+    GlDropdownSectionHeader,
     GlFormInputGroup,
     GlButton,
   },
@@ -48,7 +48,7 @@ export default {
   <gl-dropdown right :text="$options.labels.defaultLabel" category="primary" variant="info">
     <div class="pb-2 mx-1">
       <template v-if="sshLink">
-        <gl-new-dropdown-header>{{ $options.labels.ssh }}</gl-new-dropdown-header>
+        <gl-dropdown-section-header>{{ $options.labels.ssh }}</gl-dropdown-section-header>
 
         <div class="mx-3">
           <gl-form-input-group :value="sshLink" readonly select-on-click>
@@ -67,7 +67,7 @@ export default {
       </template>
 
       <template v-if="httpLink">
-        <gl-new-dropdown-header>{{ httpLabel }}</gl-new-dropdown-header>
+        <gl-dropdown-section-header>{{ httpLabel }}</gl-dropdown-section-header>
 
         <div class="mx-3">
           <gl-form-input-group :value="httpLink" readonly select-on-click>
diff --git a/doc/user/analytics/merge_request_analytics.md b/doc/user/analytics/merge_request_analytics.md
index 40210cc8200..2c2199240a8 100644
--- a/doc/user/analytics/merge_request_analytics.md
+++ b/doc/user/analytics/merge_request_analytics.md
@@ -15,7 +15,7 @@ Merge Request Analytics helps you understand the efficiency of your code review
 
 Merge Request Analytics displays information that will help you evaluate the efficiency and productivity of your merge request process.
 
-The Throughput chart shows the number of completed merge requests, by month. Merge request throughput is
+The Throughput chart shows the number of merge requests merged, by month. Merge request throughput is
 a common measure of productivity in software engineering. Although imperfect, the average throughput can
 be a meaningful benchmark of your team's overall productivity.
 
@@ -40,7 +40,7 @@ The following visualizations and data are available, representing all merge requ
 
 ### Throughput chart
 
-The throughput chart shows the number of completed merge requests per month.
+The throughput chart shows the number of merge requests merged per month.
 
 ![Throughput chart](img/mr_throughput_chart_v13_3.png "Merge Request Analytics - Throughput chart showing merge requests merged in the past 12 months")
 
diff --git a/doc/user/application_security/dast/index.md b/doc/user/application_security/dast/index.md
index 94952d7df9f..13dc001220c 100644
--- a/doc/user/application_security/dast/index.md
+++ b/doc/user/application_security/dast/index.md
@@ -643,7 +643,72 @@ To delete an existing site profile:
 1. Click **Manage** in the **DAST Profiles** row.
 1. Click **{remove}** in the row of the profile to delete.
 
-## On-Demand Scans
+## Scanner profile
+
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/222767) in GitLab 13.4.
+> - [Deployed behind a feature flag](../../feature_flags.md), enabled by default.
+> - Enabled on GitLab.com.
+> - Can be enabled or disabled per-project.
+> - Recommended for production use.
+> - For GitLab self-managed instances, GitLab administrators can [disable this feature](#enable-or-disable-dast-scanner-profiles).
+
+A scanner profile defines the scanner settings used to run an on-demand scan:
+
+- **Profile name:** A name you give the scanner profile. For example, "Spider_15".
+- **Spider timeout:** The maximum number of minutes allowed for the spider to traverse the site.
+- **Target timeout:** The maximum number of seconds DAST waits for the site to be available before
+  starting the scan.
+
+### Create a scanner profile
+
+To create a scanner profile:
+
+1. From your project's home page, go to **Security & Compliance > Configuration**.
+1. Click **Manage** in the **DAST Profiles** row.
+1. Click **New Profile > Scanner Profile**.
+1. Enter a unique **Profile name**, the desired **Spider timeout**, and the **Target timeout**.
+1. Click **Save profile**.
+
+### Edit a scanner profile
+
+To edit a scanner profile:
+
+1. From your project's home page, go to **Security & Compliance > Configuration**.
+1. Click **Manage** in the **DAST Profiles** row.
+1. Click **Edit** in the scanner profile's row.
+
+### Delete a scanner profile
+
+To delete a scanner profile:
+
+1. From your project's home page, go to **Security & Compliance > Configuration**.
+1. Click **Manage** in the **DAST Profiles** row.
+1. Click **{remove}** in the scanner profile's row.
+
+### Enable or disable DAST scanner profiles
+
+The scanner profile feature is ready for production use. It's deployed behind a feature flag that
+is **enabled by default**. [GitLab administrators with access to the GitLab Rails console](../../../administration/feature_flags.md) can opt to disable it.
+
+To disable it:
+
+```ruby
+# Instance-wide
+Feature.disable(:security_on_demand_scans_scanner_profiles)
+# or by project
+Feature.disable(:security_on_demand_scans_scanner_profiles, Project.find(<project id>))
+```
+
+To enable it:
+
+```ruby
+# Instance-wide
+Feature.enable(:security_on_demand_scans_scanner_profiles)
+# or by project
+Feature.enable(:security_on_demand_scans_scanner_profiles, Project.find(<project ID>))
+```
+
+## On-demand scans
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/218465) in GitLab 13.2.
 > - [Improved](https://gitlab.com/gitlab-org/gitlab/-/issues/218465) in GitLab 13.3.
@@ -652,37 +717,46 @@ To delete an existing site profile:
 > - It's able to be enabled or disabled per-project.
 > - To use it in GitLab self-managed instances, ask a GitLab administrator to [enable it](#enable-or-disable-on-demand-scans).
 
-You can run a passive DAST scan against a target website, outside the DevOps life cycle. These scans
-are always associated with the default branch of your project and the results are available in the
-project's dashboard. An on-demand DAST scan has a fixed timeout of 60 seconds.
+An on-demand DAST scan runs outside the DevOps life cycle. Changes in your repository don't trigger
+the scan. You must start it manually.
+
+An on-demand DAST scan:
 
-### Run an on-demand scan
+- Uses settings in the site profile and scanner profile you select when you run the scan,
+  instead of those in the `.gitlab-ci.yml` file.
+- Is associated with your project's default branch.
+
+### Run an on-demand DAST scan
 
 NOTE: **Note:**
 You must have permission to run an on-demand DAST scan against a protected branch.
 The default branch is automatically protected. For more details, see [Pipeline security on protected branches](../../../ci/pipelines/index.md#pipeline-security-on-protected-branches).
 
-To run an on-demand scan, you need a site profile for the target URL.
+To run an on-demand DAST scan, you need:
+
+- A [scanner profile](#create-a-scanner-profile).
+- A [site profile](#create-a-site-profile).
 
 1. From your project's home page, go to **Security & Compliance > On-demand Scans** in the left sidebar.
 1. Click **Create new DAST scan**.
-1. Select a site profile from the profiles dropdown.
+1. In **Scanner settings**, select a scanner profile from the dropdown.
+1. In **Site profiles**, select a site profile from the dropdown.
 1. Click **Run scan**.
 
-The on-demand scan runs and the project's dashboard shows the results.
+The on-demand DAST scan runs and the project's dashboard shows the results.
 
 ### Enable or disable On-demand Scans
 
-On-demand Scans is enabled by default. You can disable On-demand Scans
+The On-demand DAST Scans feature is enabled by default. You can disable on-demand scans
 instance-wide, or disable it for specific projects if you prefer.
 
-Use of On-demand Scans requires the `security_on_demand_scans_feature_flag`
-feature flag enabled.
+To run on-demand DAST scans, an administrator must enable the
+`security_on_demand_scans_feature_flag` feature flag.
 
 [GitLab administrators with access to the GitLab Rails console](../../../administration/feature_flags.md)
 can disable or enable the feature flags.
 
-To disable On-demand Scans:
+To disable On-demand DAST Scans:
 
 ```ruby
 # Instance-wide
@@ -691,7 +765,7 @@ Feature.disable(:security_on_demand_scans_feature_flag)
 Feature.disable(:security_on_demand_scans_feature_flag, Project.find(<project id>))
 ```
 
-To enable On-demand Scans:
+To enable On-demand DAST Scans:
 
 ```ruby
 # Instance-wide
diff --git a/doc/user/project/clusters/add_remove_clusters.md b/doc/user/project/clusters/add_remove_clusters.md
index 9c6af728857..18d9fa67ee1 100644
--- a/doc/user/project/clusters/add_remove_clusters.md
+++ b/doc/user/project/clusters/add_remove_clusters.md
@@ -206,7 +206,7 @@ To add a Kubernetes cluster to your project, group, or instance:
          apiVersion: v1
          kind: ServiceAccount
          metadata:
-           name: gitlab-admin
+           name: gitlab
            namespace: kube-system
          ---
          apiVersion: rbac.authorization.k8s.io/v1beta1
@@ -219,7 +219,7 @@ To add a Kubernetes cluster to your project, group, or instance:
            name: cluster-admin
          subjects:
            - kind: ServiceAccount
-             name: gitlab-admin
+             name: gitlab
              namespace: kube-system
          ```
 
@@ -245,23 +245,23 @@ To add a Kubernetes cluster to your project, group, or instance:
          Output:
 
          ```shell
-         serviceaccount "gitlab-admin" created
+         serviceaccount "gitlab" created
          clusterrolebinding "gitlab-admin" created
          ```
 
-      1. Retrieve the token for the `gitlab-admin` service account:
+      1. Retrieve the token for the `gitlab` service account:
 
          ```shell
-         kubectl -n kube-system describe secret $(kubectl -n kube-system get secret | grep gitlab-admin | awk '{print $1}')
+         kubectl -n kube-system describe secret $(kubectl -n kube-system get secret | grep gitlab | awk '{print $1}')
          ```
 
          Copy the `<authentication_token>` value from the output:
 
          ```yaml
-         Name:         gitlab-admin-token-b5zv4
+         Name:         gitlab-token-b5zv4
          Namespace:    kube-system
          Labels:       <none>
-         Annotations:  kubernetes.io/service-account.name=gitlab-admin
+         Annotations:  kubernetes.io/service-account.name=gitlab
                       kubernetes.io/service-account.uid=bcfe66ac-39be-11e8-97e8-026dce96b6e8
 
          Type:  kubernetes.io/service-account-token
diff --git a/package.json b/package.json
index 53c980cc6e8..d421ecc2836 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@babel/preset-env": "^7.10.1",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.164.0",
-    "@gitlab/ui": "20.20.0",
+    "@gitlab/ui": "21.0.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-1",
     "@sentry/browser": "^5.22.3",
diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
index a85c5a2bffc..a28ecac00fd 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -47,9 +47,9 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         <div
           class="d-flex flex-column overflow-hidden"
         >
-          <gl-new-dropdown-header-stub>
+          <gl-dropdown-section-header-stub>
             Environment
-          </gl-new-dropdown-header-stub>
+          </gl-dropdown-section-header-stub>
            
           <gl-search-box-by-type-stub
             class="gl-m-3"
diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js
index 26b2810fc48..68c285a4097 100644
--- a/spec/frontend/projects/commits/components/author_select_spec.js
+++ b/spec/frontend/projects/commits/components/author_select_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDropdown, GlNewDropdownHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import * as urlUtility from '~/lib/utils/url_utility';
 import AuthorSelect from '~/projects/commits/components/author_select.vue';
 import { createStore } from '~/projects/commits/store';
@@ -59,7 +59,7 @@ describe('Author Select', () => {
 
   const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' });
   const findDropdown = () => wrapper.find(GlDropdown);
-  const findDropdownHeader = () => wrapper.find(GlNewDropdownHeader);
+  const findDropdownHeader = () => wrapper.find(GlDropdownSectionHeader);
   const findSearchBox = () => wrapper.find(GlSearchBoxByType);
   const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
 
diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
index 402a6daf922..dfd114a2d1c 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
@@ -12,9 +12,9 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
   <div
     class="pb-2 mx-1"
   >
-    <gl-new-dropdown-header-stub>
+    <gl-dropdown-section-header-stub>
       Clone with SSH
-    </gl-new-dropdown-header-stub>
+    </gl-dropdown-section-header-stub>
      
     <div
       class="mx-3"
@@ -53,9 +53,9 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
       </div>
     </div>
      
-    <gl-new-dropdown-header-stub>
+    <gl-dropdown-section-header-stub>
       Clone with HTTP
-    </gl-new-dropdown-header-stub>
+    </gl-dropdown-section-header-stub>
      
     <div
       class="mx-3"
diff --git a/spec/frontend/vue_shared/components/clone_dropdown_spec.js b/spec/frontend/vue_shared/components/clone_dropdown_spec.js
index 1354578cc64..5b8576ad761 100644
--- a/spec/frontend/vue_shared/components/clone_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/clone_dropdown_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlFormInputGroup, GlNewDropdownHeader } from '@gitlab/ui';
+import { GlFormInputGroup, GlDropdownSectionHeader } from '@gitlab/ui';
 import CloneDropdown from '~/vue_shared/components/clone_dropdown.vue';
 
 describe('Clone Dropdown Button', () => {
@@ -51,7 +51,7 @@ describe('Clone Dropdown Button', () => {
       createComponent({ [name]: value });
 
       expect(wrapper.find(GlFormInputGroup).props('value')).toBe(value);
-      expect(wrapper.findAll(GlNewDropdownHeader).length).toBe(1);
+      expect(wrapper.findAll(GlDropdownSectionHeader).length).toBe(1);
     });
   });
 
@@ -63,12 +63,12 @@ describe('Clone Dropdown Button', () => {
     `('allows null values for the props', ({ name, value }) => {
       createComponent({ ...defaultPropsData, [name]: value });
 
-      expect(wrapper.findAll(GlNewDropdownHeader).length).toBe(1);
+      expect(wrapper.findAll(GlDropdownSectionHeader).length).toBe(1);
     });
 
     it('correctly calculates httpLabel for HTTPS protocol', () => {
       createComponent({ httpLink: httpsLink });
-      expect(wrapper.find(GlNewDropdownHeader).text()).toContain('HTTPS');
+      expect(wrapper.find(GlDropdownSectionHeader).text()).toContain('HTTPS');
     });
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 2a04ded94c6..9dce1852fe8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -848,10 +848,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.164.0.tgz#6cefad871c45f945ef92b99015d0f510b1d2de4a"
   integrity sha512-a9e/cYUc1QQk7azjH4x/m6/p3icavwGEi5F9ipNlDqiJtUor5tqojxvMxPOhuVbN/mTwnC6lGsSZg4tqTsdJAQ==
 
-"@gitlab/ui@20.20.0":
-  version "20.20.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-20.20.0.tgz#3985ee6dac8acdfa292d1878d4a61f5daff0e69c"
-  integrity sha512-bNP0qHdQj486xyRDvlecOgrnt6XWpAbqyYS7wcECo3W23hfuldMu9sM3N+wP2c6o/tMzCSO8wvuL1bc6ec+XTg==
+"@gitlab/ui@21.0.0":
+  version "21.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-21.0.0.tgz#3e3b725fbce21dd9d2dc290c19111b49014d4700"
+  integrity sha512-3uiqhRXZurbZsGZ3YpuTGnEfZPNcatG13ynJNuHKTH6CjwlYsjxlxKnTcSHPFnrbfy+bmSfcFYs0nDQsA1xcTA==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"