Add latest changes from gitlab-org/gitlab@master

78 files changed, 601 insertions, 598 deletions

diff --git a/GITALY_SERVER_VERSION b/GITALY_SERVER_VERSION
index 4efb934dc94..8992d421213 100644
--- a/GITALY_SERVER_VERSION
+++ b/GITALY_SERVER_VERSION
@@ -1 +1 @@
-c26e2a89d3841b7c730cd18b0d02831a7daf9c0b
+399389da54c3b5edfbf4d59ced4c243f7178b673
diff --git a/app/assets/javascripts/alert_management/components/alert_status.vue b/app/assets/javascripts/alert_management/components/alert_status.vue
index 9b726fe2944..8531ca1374e 100644
--- a/app/assets/javascripts/alert_management/components/alert_status.vue
+++ b/app/assets/javascripts/alert_management/components/alert_status.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import { trackAlertStatusUpdateOptions } from '../constants';
@@ -18,8 +18,8 @@ export default {
     RESOLVED: s__('AlertManagement|Resolved'),
   },
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlButton,
   },
   props: {
@@ -91,7 +91,7 @@ export default {
 
 <template>
   <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-    <gl-dropdown
+    <gl-deprecated-dropdown
       ref="dropdown"
       right
       :text="$options.statuses[alert.status]"
@@ -112,7 +112,7 @@ export default {
         />
       </div>
       <div class="dropdown-content dropdown-body">
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="(label, field) in $options.statuses"
           :key="field"
           data-testid="statusDropdownItem"
@@ -122,8 +122,8 @@ export default {
           @click="updateAlertStatus(label)"
         >
           {{ label }}
-        </gl-dropdown-item>
+        </gl-deprecated-dropdown-item>
       </div>
-    </gl-dropdown>
+    </gl-deprecated-dropdown>
   </div>
 </template>
diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue
index df07038151e..0a1478ef5fe 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
-    GlDropdownItem,
+    GlDeprecatedDropdownItem,
   },
   props: {
     user: {
@@ -24,7 +24,7 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown-item
+  <gl-deprecated-dropdown-item
     :key="user.username"
     data-testid="assigneeDropdownItem"
     class="assignee-dropdown-item gl-vertical-align-middle"
@@ -47,5 +47,5 @@ export default {
       </strong>
       <span class="dropdown-menu-user-username"> {{ user.username }}</span>
     </span>
-  </gl-dropdown-item>
+  </gl-deprecated-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
index cb32a5ffd4f..1ecbdfd5fc1 100644
--- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
+++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
@@ -1,10 +1,10 @@
 <script>
 import {
   GlIcon,
-  GlDropdown,
-  GlDropdownDivider,
-  GlDropdownHeader,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownDivider,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
   GlLoadingIcon,
   GlTooltip,
   GlButton,
@@ -33,10 +33,10 @@ export default {
   },
   components: {
     GlIcon,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
-    GlDropdownHeader,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
+    GlDeprecatedDropdownHeader,
     GlLoadingIcon,
     GlTooltip,
     GlButton,
@@ -213,7 +213,7 @@ export default {
       </p>
 
       <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-        <gl-dropdown
+        <gl-deprecated-dropdown
           ref="dropdown"
           :text="assignedUser"
           class="w-100"
@@ -243,18 +243,18 @@ export default {
           </div>
           <div class="dropdown-content dropdown-body">
             <template v-if="userListValid">
-              <gl-dropdown-item
+              <gl-deprecated-dropdown-item
                 :active="!userName"
                 active-class="is-active"
                 @click="updateAlertAssignees('')"
               >
                 {{ __('Unassigned') }}
-              </gl-dropdown-item>
-              <gl-dropdown-divider />
+              </gl-deprecated-dropdown-item>
+              <gl-deprecated-dropdown-divider />
 
-              <gl-dropdown-header class="mt-0">
+              <gl-deprecated-dropdown-header class="mt-0">
                 {{ __('Assignee') }}
-              </gl-dropdown-header>
+              </gl-deprecated-dropdown-header>
               <sidebar-assignee
                 v-for="user in sortedUsers"
                 :key="user.username"
@@ -263,12 +263,12 @@ export default {
                 @update-alert-assignees="updateAlertAssignees"
               />
             </template>
-            <gl-dropdown-item v-else-if="userListEmpty">
+            <gl-deprecated-dropdown-item v-else-if="userListEmpty">
               {{ __('No Matching Results') }}
-            </gl-dropdown-item>
+            </gl-deprecated-dropdown-item>
             <gl-loading-icon v-else />
           </div>
-        </gl-dropdown>
+        </gl-deprecated-dropdown>
       </div>
 
       <gl-loading-icon v-if="isUpdating" :inline="true" />
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index dbe3e0790f6..48f6ba6cfc7 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,
-  GlDropdown,
-  GlDropdownDivider,
-  GlDropdownHeader,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownDivider,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
 } from '@gitlab/ui';
 
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -26,10 +26,10 @@ export default {
     BoardForm,
     GlLoadingIcon,
     GlSearchBoxByType,
-    GlDropdown,
-    GlDropdownDivider,
-    GlDropdownHeader,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownDivider,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownItem,
   },
   props: {
     currentBoard: {
@@ -235,7 +235,7 @@ export default {
 <template>
   <div class="boards-switcher js-boards-selector gl-mr-3">
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
-      <gl-dropdown
+      <gl-deprecated-dropdown
         data-qa-selector="boards_dropdown"
         toggle-class="dropdown-menu-toggle js-dropdown-toggle"
         menu-class="flex-column dropdown-extended-height"
@@ -248,9 +248,9 @@ export default {
           </div>
         </div>
 
-        <gl-dropdown-header class="mt-0">
+        <gl-deprecated-dropdown-header class="mt-0">
           <gl-search-box-by-type ref="searchBox" v-model="filterTerm" />
-        </gl-dropdown-header>
+        </gl-deprecated-dropdown-header>
 
         <div
           v-if="!loading"
@@ -259,26 +259,26 @@ export default {
           class="dropdown-content flex-fill"
           @scroll.passive="throttledSetScrollFade"
         >
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-show="filteredBoards.length === 0"
             class="no-pointer-events text-secondary"
           >
             {{ s__('IssueBoards|No matching boards found') }}
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
 
           <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
             {{ __('Recent') }}
           </h6>
 
           <template v-if="showRecentSection">
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               v-for="recentBoard in recentBoards"
               :key="`recent-${recentBoard.id}`"
               class="js-dropdown-item"
               :href="`${boardBaseUrl}/${recentBoard.id}`"
             >
               {{ recentBoard.name }}
-            </gl-dropdown-item>
+            </gl-deprecated-dropdown-item>
           </template>
 
           <hr v-if="showRecentSection" class="my-1" />
@@ -287,21 +287,21 @@ export default {
             {{ __('All') }}
           </h6>
 
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="otherBoard in filteredBoards"
             :key="otherBoard.id"
             class="js-dropdown-item"
             :href="`${boardBaseUrl}/${otherBoard.id}`"
           >
             {{ otherBoard.name }}
-          </gl-dropdown-item>
-          <gl-dropdown-item v-if="hasMissingBoards" class="small unclickable">
+          </gl-deprecated-dropdown-item>
+          <gl-deprecated-dropdown-item v-if="hasMissingBoards" class="small unclickable">
             {{
               s__(
                 'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
               )
             }}
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
         </div>
 
         <div
@@ -313,25 +313,25 @@ export default {
         <gl-loading-icon v-if="loading" />
 
         <div v-if="canAdminBoard">
-          <gl-dropdown-divider />
+          <gl-deprecated-dropdown-divider />
 
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-if="multipleIssueBoardsAvailable"
             data-qa-selector="create_new_board_button"
             @click.prevent="showPage('new')"
           >
             {{ s__('IssueBoards|Create new board') }}
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
 
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-if="showDelete"
             class="text-danger js-delete-board"
             @click.prevent="showPage('delete')"
           >
             {{ s__('IssueBoards|Delete board') }}
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
         </div>
-      </gl-dropdown>
+      </gl-deprecated-dropdown>
 
       <board-form
         v-if="currentPage"
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
index 175e89a454b..993251a6e41 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
@@ -1,8 +1,8 @@
 <script>
 import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
   GlSearchBoxByType,
   GlIcon,
 } from '@gitlab/ui';
@@ -12,9 +12,9 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'CiEnvironmentsDropdown',
   components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     GlSearchBoxByType,
     GlIcon,
   },
@@ -66,9 +66,9 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown :text="value">
+  <gl-deprecated-dropdown :text="value">
     <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
-    <gl-dropdown-item
+    <gl-deprecated-dropdown-item
       v-for="environment in filteredResults"
       :key="environment"
       @click="selectEnvironment(environment)"
@@ -79,15 +79,15 @@ export default {
         class="vertical-align-middle"
       />
       {{ environment }}
-    </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    </gl-deprecated-dropdown-item>
+    <gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
       __('No matching results')
-    }}</gl-dropdown-item>
+    }}</gl-deprecated-dropdown-item>
     <template v-if="shouldRenderCreateButton">
-      <gl-dropdown-divider />
-      <gl-dropdown-item @click="createClicked">
+      <gl-deprecated-dropdown-divider />
+      <gl-deprecated-dropdown-item @click="createClicked">
         {{ composedCreateButtonLabel }}
-      </gl-dropdown-item>
+      </gl-deprecated-dropdown-item>
     </template>
-  </gl-dropdown>
+  </gl-deprecated-dropdown>
 </template>
diff --git a/app/assets/javascripts/clusters/components/crossplane_provider_stack.vue b/app/assets/javascripts/clusters/components/crossplane_provider_stack.vue
index 6b99bb09504..c816fc56d7a 100644
--- a/app/assets/javascripts/clusters/components/crossplane_provider_stack.vue
+++ b/app/assets/javascripts/clusters/components/crossplane_provider_stack.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 import { s__ } from '../../locale';
 
 export default {
   name: 'CrossplaneProviderStack',
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlIcon,
   },
   props: {
@@ -67,17 +67,21 @@ export default {
     <label>
       {{ s__('ClusterIntegration|Enabled stack') }}
     </label>
-    <gl-dropdown
+    <gl-deprecated-dropdown
       :disabled="crossplane.installed"
       :text="dropdownText"
       toggle-class="dropdown-menu-toggle gl-field-error-outline"
       class="w-100"
       :class="{ 'gl-show-field-errors': validationError }"
     >
-      <gl-dropdown-item v-for="stack in stacks" :key="stack.code" @click="selectStack(stack)">
+      <gl-deprecated-dropdown-item
+        v-for="stack in stacks"
+        :key="stack.code"
+        @click="selectStack(stack)"
+      >
         <span class="ml-1">{{ stack.name }}</span>
-      </gl-dropdown-item>
-    </gl-dropdown>
+      </gl-deprecated-dropdown-item>
+    </gl-deprecated-dropdown>
     <span v-if="validationError" class="gl-field-error">{{ validationError }}</span>
     <p class="form-text text-muted">
       {{ s__(`You must select a stack for configuring your cloud provider. Learn more about`) }}
diff --git a/app/assets/javascripts/clusters/components/fluentd_output_settings.vue b/app/assets/javascripts/clusters/components/fluentd_output_settings.vue
index 20f6210aba8..06353131397 100644
--- a/app/assets/javascripts/clusters/components/fluentd_output_settings.vue
+++ b/app/assets/javascripts/clusters/components/fluentd_output_settings.vue
@@ -4,8 +4,8 @@ import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
 import {
   GlAlert,
   GlDeprecatedButton,
-  GlDropdown,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
   GlFormCheckbox,
 } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
@@ -17,8 +17,8 @@ export default {
   components: {
     GlAlert,
     GlDeprecatedButton,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlFormCheckbox,
   },
   props: {
@@ -203,15 +203,15 @@ export default {
         <label for="fluentd-protocol">
           <strong>{{ s__('ClusterIntegration|SIEM Protocol') }}</strong>
         </label>
-        <gl-dropdown :text="protocolName" class="w-100">
-          <gl-dropdown-item
+        <gl-deprecated-dropdown :text="protocolName" class="w-100">
+          <gl-deprecated-dropdown-item
             v-for="(value, index) in protocols"
             :key="index"
             @click="selectProtocol(value.toLowerCase())"
           >
             {{ value }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
       </div>
       <div class="form-group flex flex-wrap">
         <gl-form-checkbox :checked="wafLogEnabled" @input="wafLogChanged">
diff --git a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
index 87c3225085f..f74cf8188b8 100644
--- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
+++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
@@ -8,8 +8,8 @@ import {
   GlLink,
   GlToggle,
   GlDeprecatedButton,
-  GlDropdown,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
   GlIcon,
 } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
@@ -26,8 +26,8 @@ export default {
     GlLink,
     GlToggle,
     GlDeprecatedButton,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlIcon,
   },
   props: {
@@ -221,11 +221,15 @@ export default {
                   </strong>
                 </p>
               </div>
-              <gl-dropdown :text="modSecurityModeName" :disabled="saveButtonDisabled">
-                <gl-dropdown-item v-for="(mode, key) in modes" :key="key" @click="selectMode(key)">
+              <gl-deprecated-dropdown :text="modSecurityModeName" :disabled="saveButtonDisabled">
+                <gl-deprecated-dropdown-item
+                  v-for="(mode, key) in modes"
+                  :key="key"
+                  @click="selectMode(key)"
+                >
                   {{ mode.name }}
-                </gl-dropdown-item>
-              </gl-dropdown>
+                </gl-deprecated-dropdown-item>
+              </gl-deprecated-dropdown>
             </div>
           </div>
           <div v-if="showButtons" class="mt-3">
diff --git a/app/assets/javascripts/clusters/components/knative_domain_editor.vue b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
index ac61cd8e242..1236d2a46c9 100644
--- a/app/assets/javascripts/clusters/components/knative_domain_editor.vue
+++ b/app/assets/javascripts/clusters/components/knative_domain_editor.vue
@@ -1,8 +1,8 @@
 <script>
 import {
-  GlDropdown,
-  GlDropdownDivider,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownDivider,
+  GlDeprecatedDropdownItem,
   GlLoadingIcon,
   GlSearchBoxByType,
   GlSprintf,
@@ -20,9 +20,9 @@ export default {
     LoadingButton,
     ClipboardButton,
     GlLoadingIcon,
-    GlDropdown,
-    GlDropdownDivider,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownDivider,
+    GlDeprecatedDropdownItem,
     GlSearchBoxByType,
     GlSprintf,
   },
@@ -121,7 +121,7 @@ export default {
         <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
       </label>
 
-      <gl-dropdown
+      <gl-deprecated-dropdown
         v-if="showDomainsDropdown"
         :text="domainDropdownText"
         toggle-class="dropdown-menu-toggle"
@@ -132,16 +132,16 @@ export default {
           :placeholder="s__('ClusterIntegration|Search domains')"
           class="m-2"
         />
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="domain in filteredDomains"
           :key="domain.id"
           @click="selectDomain(domain)"
         >
           <span class="ml-1">{{ domain.domain }}</span>
-        </gl-dropdown-item>
+        </gl-deprecated-dropdown-item>
         <template v-if="searchQuery">
-          <gl-dropdown-divider />
-          <gl-dropdown-item key="custom-domain" @click="selectCustomDomain(searchQuery)">
+          <gl-deprecated-dropdown-divider />
+          <gl-deprecated-dropdown-item key="custom-domain" @click="selectCustomDomain(searchQuery)">
             <span class="ml-1">
               <gl-sprintf :message="s__('ClusterIntegration|Use %{query}')">
                 <template #query>
@@ -149,9 +149,9 @@ export default {
                 </template>
               </gl-sprintf>
             </span>
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
         </template>
-      </gl-dropdown>
+      </gl-deprecated-dropdown>
 
       <input
         v-else
diff --git a/app/assets/javascripts/confidential_merge_request/components/dropdown.vue b/app/assets/javascripts/confidential_merge_request/components/dropdown.vue
index 92a5423d5ea..b8163ecfab2 100644
--- a/app/assets/javascripts/confidential_merge_request/components/dropdown.vue
+++ b/app/assets/javascripts/confidential_merge_request/components/dropdown.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     Icon,
   },
   props: {
@@ -38,7 +38,7 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown toggle-class="d-flex align-items-center w-100" class="w-100">
+  <gl-deprecated-dropdown toggle-class="d-flex align-items-center w-100" class="w-100">
     <template #button-content>
       <span class="str-truncated-100 mr-2">
         <icon name="lock" />
@@ -46,13 +46,17 @@ export default {
       </span>
       <icon name="chevron-down" class="ml-auto" />
     </template>
-    <gl-dropdown-item v-for="project in projects" :key="project.id" @click="selectProject(project)">
+    <gl-deprecated-dropdown-item
+      v-for="project in projects"
+      :key="project.id"
+      @click="selectProject(project)"
+    >
       <icon
         name="mobile-issue-close"
         :class="{ icon: project.id !== selectedProject.id }"
         class="js-active-project-check"
       />
       <span class="ml-1">{{ project.name }}</span>
-    </gl-dropdown-item>
-  </gl-dropdown>
+    </gl-deprecated-dropdown-item>
+  </gl-deprecated-dropdown>
 </template>
diff --git a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
index 993eac6f37f..32c09a9452a 100644
--- a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
+++ b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
@@ -1,13 +1,13 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import allVersionsMixin from '../../mixins/all_versions';
 import { findVersionId } from '../../utils/design_management_utils';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
   },
   mixins: [allVersionsMixin],
   computed: {
@@ -50,8 +50,8 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
-    <gl-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
+  <gl-deprecated-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
+    <gl-deprecated-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
       <router-link
         class="d-flex js-version-link"
         :to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }"
@@ -71,6 +71,6 @@ export default {
           class="fa fa-check pull-right"
         ></i>
       </router-link>
-    </gl-dropdown-item>
-  </gl-dropdown>
+    </gl-deprecated-dropdown-item>
+  </gl-deprecated-dropdown>
 </template>
diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 52444d2c493..cc0b916410e 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -9,9 +9,9 @@ import {
   GlBadge,
   GlAlert,
   GlSprintf,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
 } from '@gitlab/ui';
 import { __, sprintf, n__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -43,9 +43,9 @@ export default {
     GlBadge,
     GlAlert,
     GlSprintf,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     TimeAgoTooltip,
   },
   directives: {
@@ -331,38 +331,38 @@ export default {
               </gl-button>
             </form>
           </div>
-          <gl-dropdown
+          <gl-deprecated-dropdown
             text="Options"
             class="error-details-options d-md-none"
             right
             :disabled="issueUpdateInProgress"
           >
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               data-qa-selector="update_ignore_status_button"
               @click="onIgnoreStatusUpdate"
-              >{{ ignoreBtnLabel }}</gl-dropdown-item
+              >{{ ignoreBtnLabel }}</gl-deprecated-dropdown-item
             >
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               data-qa-selector="update_resolve_status_button"
               @click="onResolveStatusUpdate"
-              >{{ resolveBtnLabel }}</gl-dropdown-item
+              >{{ resolveBtnLabel }}</gl-deprecated-dropdown-item
             >
-            <gl-dropdown-divider />
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-divider />
+            <gl-deprecated-dropdown-item
               v-if="error.gitlabIssuePath"
               data-qa-selector="view_issue_button"
               :href="error.gitlabIssuePath"
               variant="success"
-              >{{ __('View issue') }}</gl-dropdown-item
+              >{{ __('View issue') }}</gl-deprecated-dropdown-item
             >
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               v-if="!error.gitlabIssuePath"
               :loading="issueCreationInProgress"
               data-qa-selector="create_issue_button"
               @click="createIssue"
-              >{{ __('Create issue') }}</gl-dropdown-item
+              >{{ __('Create issue') }}</gl-deprecated-dropdown-item
             >
-          </gl-dropdown>
+          </gl-deprecated-dropdown>
         </div>
       </div>
       <div>
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index 3a3f2b12f63..9d6729625e5 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -8,9 +8,9 @@ import {
   GlLoadingIcon,
   GlTable,
   GlFormInput,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
   GlTooltipDirective,
   GlPagination,
 } from '@gitlab/ui';
@@ -72,9 +72,9 @@ export default {
   components: {
     GlEmptyState,
     GlButton,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     GlIcon,
     GlLink,
     GlLoadingIcon,
@@ -233,7 +233,7 @@ export default {
       >
         <div class="search-box flex-fill mb-1 mb-md-0">
           <div class="filtered-search-box mb-0">
-            <gl-dropdown
+            <gl-deprecated-dropdown
               :text="__('Recent searches')"
               class="filtered-search-history-dropdown-wrapper"
               toggle-class="filtered-search-history-dropdown-toggle-button"
@@ -243,19 +243,19 @@ export default {
                 {{ __('This feature requires local storage to be enabled') }}
               </div>
               <template v-else-if="recentSearches.length > 0">
-                <gl-dropdown-item
+                <gl-deprecated-dropdown-item
                   v-for="searchQuery in recentSearches"
                   :key="searchQuery"
                   @click="setSearchText(searchQuery)"
                   >{{ searchQuery }}
-                </gl-dropdown-item>
-                <gl-dropdown-divider />
-                <gl-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
+                </gl-deprecated-dropdown-item>
+                <gl-deprecated-dropdown-divider />
+                <gl-deprecated-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
                   >{{ __('Clear recent searches') }}
-                </gl-dropdown-item>
+                </gl-deprecated-dropdown-item>
               </template>
               <div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
-            </gl-dropdown>
+            </gl-deprecated-dropdown>
             <div class="filtered-search-input-container flex-fill">
               <gl-form-input
                 v-model="errorSearchQuery"
@@ -280,13 +280,13 @@ export default {
           </div>
         </div>
 
-        <gl-dropdown
+        <gl-deprecated-dropdown
           :text="$options.statusFilters[statusFilter]"
           class="status-dropdown mx-md-1 mb-1 mb-md-0"
           menu-class="dropdown"
           :disabled="loading"
         >
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="(label, status) in $options.statusFilters"
             :key="status"
             @click="filterErrors(status, label)"
@@ -299,16 +299,16 @@ export default {
               />
               {{ label }}
             </span>
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
 
-        <gl-dropdown
+        <gl-deprecated-dropdown
           :text="$options.sortFields[sortField]"
           left
           :disabled="loading"
           menu-class="dropdown"
         >
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="(label, field) in $options.sortFields"
             :key="field"
             @click="sortByField(field)"
@@ -321,8 +321,8 @@ export default {
               />
               {{ label }}
             </span>
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
       </div>
 
       <div v-if="loading" class="py-3">
diff --git a/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue b/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
index 11fd06fb40b..561b2565880 100644
--- a/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { getDisplayName } from '../utils';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
   },
   props: {
     dropdownLabel: {
@@ -52,7 +52,7 @@ export default {
   <div :class="{ 'gl-show-field-errors': isProjectInvalid }">
     <label class="label-bold" for="project-dropdown">{{ __('Project') }}</label>
     <div class="row">
-      <gl-dropdown
+      <gl-deprecated-dropdown
         id="project-dropdown"
         class="col-8 col-md-9 gl-pr-0"
         :disabled="!hasProjects"
@@ -60,14 +60,14 @@ export default {
         toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
         :text="dropdownLabel"
       >
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="project in projects"
           :key="`${project.organizationSlug}.${project.slug}`"
           class="w-100"
           @click="$emit('select-project', project)"
-          >{{ getDisplayName(project) }}</gl-dropdown-item
+          >{{ getDisplayName(project) }}</gl-deprecated-dropdown-item
         >
-      </gl-dropdown>
+      </gl-deprecated-dropdown>
     </div>
     <p v-if="isProjectInvalid" class="js-project-dropdown-error gl-field-error">
       {{ invalidProjectLabel }}
diff --git a/app/assets/javascripts/incidents/components/incidents_list.vue b/app/assets/javascripts/incidents/components/incidents_list.vue
index f10c2901adb..f15aed739eb 100644
--- a/app/assets/javascripts/incidents/components/incidents_list.vue
+++ b/app/assets/javascripts/incidents/components/incidents_list.vue
@@ -7,9 +7,11 @@ import {
   GlAvatarLink,
   GlAvatar,
   GlTooltipDirective,
+  GlButton,
 } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { s__ } from '~/locale';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 import { I18N } from '../constants';
 
@@ -48,12 +50,13 @@ export default {
     GlAvatarsInline,
     GlAvatarLink,
     GlAvatar,
+    GlButton,
     TimeAgoTooltip,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['projectPath'],
+  inject: ['projectPath', 'newIssuePath', 'incidentTemplateName'],
   apollo: {
     incidents: {
       query: getIncidents,
@@ -73,6 +76,7 @@ export default {
     return {
       errored: false,
       isErrorAlertDismissed: false,
+      redirecting: false,
     };
   },
   computed: {
@@ -90,6 +94,9 @@ export default {
         [bodyTrClass]: !this.loading && this.hasIncidents,
       };
     },
+    newIncidentPath() {
+      return mergeUrlParams({ issuable_template: this.incidentTemplateName }, this.newIssuePath);
+    },
   },
   methods: {
     hasAssignees(assignees) {
@@ -104,6 +111,21 @@ export default {
       {{ $options.i18n.errorMsg }}
     </gl-alert>
 
+    <div class="gl-display-flex gl-justify-content-end">
+      <gl-button
+        class="gl-mt-3 create-incident-button"
+        data-testid="createIncidentBtn"
+        :loading="redirecting"
+        :disabled="redirecting"
+        category="primary"
+        variant="success"
+        :href="newIncidentPath"
+        @click="redirecting = true"
+      >
+        {{ $options.i18n.createIncidentBtnLabel }}
+      </gl-button>
+    </div>
+
     <h4 class="gl-display-block d-md-none my-3">
       {{ s__('IncidentManagement|Incidents') }}
     </h4>
diff --git a/app/assets/javascripts/incidents/constants.js b/app/assets/javascripts/incidents/constants.js
index 7eac77f7a7f..3e3d0ef71e1 100644
--- a/app/assets/javascripts/incidents/constants.js
+++ b/app/assets/javascripts/incidents/constants.js
@@ -5,4 +5,5 @@ export const I18N = {
   errorMsg: s__('IncidentManagement|There was an error displaying the incidents.'),
   noIncidents: s__('IncidentManagement|No incidents to display.'),
   unassigned: s__('IncidentManagement|Unassigned'),
+  createIncidentBtnLabel: s__('IncidentManagement|Create incident'),
 };
diff --git a/app/assets/javascripts/incidents/list.js b/app/assets/javascripts/incidents/list.js
index f1599477c1a..f6198981bb5 100644
--- a/app/assets/javascripts/incidents/list.js
+++ b/app/assets/javascripts/incidents/list.js
@@ -8,7 +8,7 @@ export default () => {
   const selector = '#js-incidents';
 
   const domEl = document.querySelector(selector);
-  const { projectPath } = domEl.dataset;
+  const { projectPath, newIssuePath, incidentTemplateName } = domEl.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
@@ -18,17 +18,15 @@ export default () => {
     el: selector,
     provide: {
       projectPath,
+      incidentTemplateName,
+      newIssuePath,
     },
     apolloProvider,
     components: {
       IncidentsList,
     },
     render(createElement) {
-      return createElement('incidents-list', {
-        props: {
-          projectPath,
-        },
-      });
+      return createElement('incidents-list');
     },
   });
 };
diff --git a/app/assets/javascripts/logs/components/environment_logs.vue b/app/assets/javascripts/logs/components/environment_logs.vue
index f37f48aa431..97b96cb5839 100644
--- a/app/assets/javascripts/logs/components/environment_logs.vue
+++ b/app/assets/javascripts/logs/components/environment_logs.vue
@@ -5,10 +5,10 @@ import {
   GlSprintf,
   GlIcon,
   GlAlert,
-  GlDropdown,
-  GlDropdownHeader,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
   GlInfiniteScroll,
 } from '@gitlab/ui';
 
@@ -25,10 +25,10 @@ export default {
     GlSprintf,
     GlIcon,
     GlAlert,
-    GlDropdown,
-    GlDropdownHeader,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     GlInfiniteScroll,
     LogSimpleFilters,
     LogAdvancedFilters,
@@ -174,16 +174,16 @@ export default {
 
     <div class="top-bar d-md-flex border bg-secondary-50 pt-2 pr-1 pb-0 pl-2">
       <div class="flex-grow-0">
-        <gl-dropdown
+        <gl-deprecated-dropdown
           id="environments-dropdown"
           :text="environments.current || managedApps.current"
           :disabled="environments.isLoading"
           class="mb-2 gl-h-32 pr-2 d-flex d-md-block js-environments-dropdown"
         >
-          <gl-dropdown-header class="gl-text-center">
+          <gl-deprecated-dropdown-header class="gl-text-center">
             {{ s__('Environments|Environments') }}
-          </gl-dropdown-header>
-          <gl-dropdown-item
+          </gl-deprecated-dropdown-header>
+          <gl-deprecated-dropdown-item
             v-for="env in environments.options"
             :key="env.id"
             @click="showEnvironment(env.name)"
@@ -195,12 +195,12 @@ export default {
               />
               <div class="gl-flex-grow-1">{{ env.name }}</div>
             </div>
-          </gl-dropdown-item>
-          <gl-dropdown-divider />
-          <gl-dropdown-header class="gl-text-center">
+          </gl-deprecated-dropdown-item>
+          <gl-deprecated-dropdown-divider />
+          <gl-deprecated-dropdown-header class="gl-text-center">
             {{ s__('Environments|Managed apps') }}
-          </gl-dropdown-header>
-          <gl-dropdown-item
+          </gl-deprecated-dropdown-header>
+          <gl-deprecated-dropdown-item
             v-for="app in managedApps.options"
             :key="app.id"
             @click="showManagedApp(app.name)"
@@ -212,8 +212,8 @@ export default {
               />
               <div class="gl-flex-grow-1">{{ app.name }}</div>
             </div>
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
       </div>
 
       <log-advanced-filters
diff --git a/app/assets/javascripts/logs/components/log_simple_filters.vue b/app/assets/javascripts/logs/components/log_simple_filters.vue
index 21fe1695624..41514a6ce0e 100644
--- a/app/assets/javascripts/logs/components/log_simple_filters.vue
+++ b/app/assets/javascripts/logs/components/log_simple_filters.vue
@@ -1,14 +1,19 @@
 <script>
 import { s__ } from '~/locale';
 import { mapActions, mapState } from 'vuex';
-import { GlIcon, GlDropdown, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
+import {
+  GlIcon,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
+} from '@gitlab/ui';
 
 export default {
   components: {
     GlIcon,
-    GlDropdown,
-    GlDropdownHeader,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownItem,
   },
   props: {
     disabled: {
@@ -39,22 +44,22 @@ export default {
 </script>
 <template>
   <div>
-    <gl-dropdown
+    <gl-deprecated-dropdown
       ref="podsDropdown"
       :text="podDropdownText"
       :disabled="disabled"
       class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown"
     >
-      <gl-dropdown-header class="text-center">
+      <gl-deprecated-dropdown-header class="text-center">
         {{ s__('Environments|Select pod') }}
-      </gl-dropdown-header>
+      </gl-deprecated-dropdown-header>
 
-      <gl-dropdown-item v-if="!pods.options.length" disabled>
+      <gl-deprecated-dropdown-item v-if="!pods.options.length" disabled>
         <span ref="noPodsMsg" class="text-muted">
           {{ s__('Environments|No pods to display') }}
         </span>
-      </gl-dropdown-item>
-      <gl-dropdown-item
+      </gl-deprecated-dropdown-item>
+      <gl-deprecated-dropdown-item
         v-for="podName in pods.options"
         :key="podName"
         class="text-nowrap"
@@ -67,7 +72,7 @@ export default {
           />
           <div class="flex-grow-1">{{ podName }}</div>
         </div>
-      </gl-dropdown-item>
-    </gl-dropdown>
+      </gl-deprecated-dropdown-item>
+    </gl-deprecated-dropdown>
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/alert_widget_form.vue b/app/assets/javascripts/monitoring/components/alert_widget_form.vue
index b2d7ca0c4e0..c48870be556 100644
--- a/app/assets/javascripts/monitoring/components/alert_widget_form.vue
+++ b/app/assets/javascripts/monitoring/components/alert_widget_form.vue
@@ -7,8 +7,8 @@ import {
   GlButtonGroup,
   GlFormGroup,
   GlFormInput,
-  GlDropdown,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
   GlModal,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -40,8 +40,8 @@ export default {
     GlButtonGroup,
     GlFormGroup,
     GlFormInput,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlModal,
     GlLink,
     Icon,
@@ -244,20 +244,20 @@ export default {
         </template>
       </gl-form-group>
       <gl-form-group v-else label-for="alert-query-dropdown" :label="$options.alertQueryText.label">
-        <gl-dropdown
+        <gl-deprecated-dropdown
           id="alert-query-dropdown"
           :text="queryDropdownLabel"
           toggle-class="dropdown-menu-toggle qa-alert-query-dropdown"
         >
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="query in relevantQueries"
             :key="query.metricId"
             data-qa-selector="alert_query_option"
             @click="selectQuery(query.metricId)"
           >
             {{ query.label }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
       </gl-form-group>
       <gl-button-group class="mb-2" :label="s__('PrometheusAlerts|Operator')">
         <gl-deprecated-button
diff --git a/app/assets/javascripts/monitoring/components/dashboard_header.vue b/app/assets/javascripts/monitoring/components/dashboard_header.vue
index db1267d706f..0d96f24a484 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_header.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_header.vue
@@ -5,10 +5,10 @@ import {
   GlButton,
   GlIcon,
   GlDeprecatedButton,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownHeader,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownDivider,
   GlNewDropdown,
   GlNewDropdownDivider,
   GlNewDropdownItem,
@@ -41,11 +41,11 @@ export default {
     GlButton,
     GlIcon,
     GlDeprecatedButton,
-    GlDropdown,
+    GlDeprecatedDropdown,
     GlLoadingIcon,
-    GlDropdownItem,
-    GlDropdownHeader,
-    GlDropdownDivider,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownDivider,
     GlNewDropdown,
     GlNewDropdownDivider,
     GlNewDropdownItem,
@@ -240,7 +240,7 @@ export default {
     <span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
 
     <div class="mb-2 pr-2 d-flex d-sm-block">
-      <gl-dropdown
+      <gl-deprecated-dropdown
         id="monitor-environments-dropdown"
         ref="monitorEnvironmentsDropdown"
         class="flex-grow-1"
@@ -250,20 +250,20 @@ export default {
         :text="currentEnvironmentName"
       >
         <div class="d-flex flex-column overflow-hidden">
-          <gl-dropdown-header class="monitor-environment-dropdown-header text-center">
+          <gl-deprecated-dropdown-header class="monitor-environment-dropdown-header text-center">
             {{ __('Environment') }}
-          </gl-dropdown-header>
-          <gl-dropdown-divider />
+          </gl-deprecated-dropdown-header>
+          <gl-deprecated-dropdown-divider />
           <gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" />
           <gl-loading-icon v-if="environmentsLoading" :inline="true" />
           <div v-else class="flex-fill overflow-auto">
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               v-for="environment in filteredEnvironments"
               :key="environment.id"
               :active="environment.name === currentEnvironmentName"
               active-class="is-active"
               :href="getEnvironmentPath(environment.id)"
-              >{{ environment.name }}</gl-dropdown-item
+              >{{ environment.name }}</gl-deprecated-dropdown-item
             >
           </div>
           <div
@@ -274,7 +274,7 @@ export default {
             {{ __('No matching results') }}
           </div>
         </div>
-      </gl-dropdown>
+      </gl-deprecated-dropdown>
     </div>
 
     <div class="mb-2 pr-2 d-flex d-sm-block">
diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
index 574f48a72fe..feadbced833 100644
--- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
+++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
@@ -2,10 +2,10 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import {
   GlIcon,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownHeader,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownDivider,
   GlSearchBoxByType,
   GlModalDirective,
 } from '@gitlab/ui';
@@ -17,10 +17,10 @@ const events = {
 export default {
   components: {
     GlIcon,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownHeader,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownDivider,
     GlSearchBoxByType,
   },
   directives: {
@@ -81,16 +81,16 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown
+  <gl-deprecated-dropdown
     toggle-class="dropdown-menu-toggle"
     menu-class="monitor-dashboard-dropdown-menu"
     :text="selectedDashboardText"
   >
     <div class="d-flex flex-column overflow-hidden">
-      <gl-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{
+      <gl-deprecated-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{
         __('Dashboard')
-      }}</gl-dropdown-header>
-      <gl-dropdown-divider />
+      }}</gl-deprecated-dropdown-header>
+      <gl-deprecated-dropdown-divider />
       <gl-search-box-by-type
         ref="monitorDashboardsDropdownSearch"
         v-model="searchTerm"
@@ -98,7 +98,7 @@ export default {
       />
 
       <div class="flex-fill overflow-auto">
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="dashboard in starredDashboards"
           :key="dashboard.path"
           :active="dashboard.path === selectedDashboardPath"
@@ -109,14 +109,14 @@ export default {
             {{ dashboardDisplayName(dashboard) }}
             <gl-icon class="text-muted ml-auto" name="star" />
           </div>
-        </gl-dropdown-item>
+        </gl-deprecated-dropdown-item>
 
-        <gl-dropdown-divider
+        <gl-deprecated-dropdown-divider
           v-if="starredDashboards.length && nonStarredDashboards.length"
           ref="starredListDivider"
         />
 
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="dashboard in nonStarredDashboards"
           :key="dashboard.path"
           :active="dashboard.path === selectedDashboardPath"
@@ -124,7 +124,7 @@ export default {
           @click="selectDashboard(dashboard)"
         >
           {{ dashboardDisplayName(dashboard) }}
-        </gl-dropdown-item>
+        </gl-deprecated-dropdown-item>
       </div>
 
       <div
@@ -140,12 +140,12 @@ export default {
            in https://gitlab.com/gitlab-org/gitlab/-/issues/223223
       -->
       <template v-if="isOutOfTheBoxDashboard">
-        <gl-dropdown-divider />
+        <gl-deprecated-dropdown-divider />
 
-        <gl-dropdown-item v-gl-modal="modalId" data-testid="duplicateDashboardItem">
+        <gl-deprecated-dropdown-item v-gl-modal="modalId" data-testid="duplicateDashboardItem">
           {{ s__('Metrics|Duplicate dashboard') }}
-        </gl-dropdown-item>
+        </gl-deprecated-dropdown-item>
       </template>
     </div>
-  </gl-dropdown>
+  </gl-deprecated-dropdown>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue
index 4e48292c48d..5563a27301d 100644
--- a/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue
+++ b/app/assets/javascripts/monitoring/components/variables/dropdown_field.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlFormGroup, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
     GlFormGroup,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
   },
   props: {
     name: {
@@ -41,13 +41,16 @@ export default {
 </script>
 <template>
   <gl-form-group :label="label">
-    <gl-dropdown toggle-class="dropdown-menu-toggle" :text="text || s__('Metrics|Select a value')">
-      <gl-dropdown-item
+    <gl-deprecated-dropdown
+      toggle-class="dropdown-menu-toggle"
+      :text="text || s__('Metrics|Select a value')"
+    >
+      <gl-deprecated-dropdown-item
         v-for="val in options.values"
         :key="val.value"
         @click="onUpdate(val.value)"
-        >{{ val.text }}</gl-dropdown-item
+        >{{ val.text }}</gl-deprecated-dropdown-item
       >
-    </gl-dropdown>
+    </gl-deprecated-dropdown>
   </gl-form-group>
 </template>
diff --git a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
index 39d6df33a85..bea9af077b5 100644
--- a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
+++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
@@ -1,5 +1,11 @@
 <script>
-import { GlAlert, GlDropdown, GlDropdownItem, GlIcon, GlSprintf } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlIcon,
+  GlSprintf,
+} from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import axios from '~/lib/utils/axios_utils';
@@ -11,8 +17,8 @@ export default {
   components: {
     GlAlert,
     GlAreaChart,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlIcon,
     GlSprintf,
   },
@@ -134,8 +140,8 @@ export default {
           {{ __('It seems that there is currently no available data for code coverage') }}
         </span>
       </gl-alert>
-      <gl-dropdown v-if="canShowData" :text="selectedDailyCoverageName">
-        <gl-dropdown-item
+      <gl-deprecated-dropdown v-if="canShowData" :text="selectedDailyCoverageName">
+        <gl-deprecated-dropdown-item
           v-for="({ group_name }, index) in dailyCoverageData"
           :key="index"
           :value="group_name"
@@ -151,8 +157,8 @@ export default {
               {{ group_name }}
             </span>
           </div>
-        </gl-dropdown-item>
-      </gl-dropdown>
+        </gl-deprecated-dropdown-item>
+      </gl-deprecated-dropdown>
     </div>
     <gl-area-chart
       v-if="!isLoading"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
index b5aeb3fe9e0..35b18d105a4 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
@@ -3,7 +3,7 @@ import {
   GlFilteredSearchToken,
   GlAvatar,
   GlFilteredSearchSuggestion,
-  GlDropdownDivider,
+  GlDeprecatedDropdownDivider,
   GlLoadingIcon,
 } from '@gitlab/ui';
 import Api from '~/api';
@@ -21,7 +21,7 @@ export default {
     GlFilteredSearchToken,
     GlAvatar,
     GlFilteredSearchSuggestion,
-    GlDropdownDivider,
+    GlDeprecatedDropdownDivider,
     GlLoadingIcon,
   },
   props: {
@@ -94,7 +94,7 @@ export default {
       <gl-filtered-search-suggestion :value="$options.anyTriggerAuthor">{{
         $options.anyTriggerAuthor
       }}</gl-filtered-search-suggestion>
-      <gl-dropdown-divider />
+      <gl-deprecated-dropdown-divider />
 
       <gl-loading-icon v-if="loading" />
       <template v-else>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
index 8b06797c0ae..36a46ed58f4 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import Tracking from '~/tracking';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -15,7 +15,7 @@ import {
 
 export default {
   components: {
-    GlDropdown,
+    GlDeprecatedDropdown,
     GlFormGroup,
     GlFormInputGroup,
     ClipboardButton,
@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown
+  <gl-deprecated-dropdown
     :text="$options.i18n.dropdownTitle"
     variant="primary"
     size="sm"
@@ -99,5 +99,5 @@ export default {
         </gl-form-group>
       </form>
     </li>
-  </gl-dropdown>
+  </gl-deprecated-dropdown>
 </template>
diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
index 45c343c3f7f..3fc9cb80474 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -1,5 +1,10 @@
 <script>
-import { GlDropdown, GlDropdownDivider, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
+import {
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownDivider,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
+} from '@gitlab/ui';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
 import { __ } from '../../locale';
 import Icon from '../../vue_shared/components/icon.vue';
@@ -15,10 +20,10 @@ const ROW_TYPES = {
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownDivider,
-    GlDropdownHeader,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownDivider,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownItem,
     Icon,
   },
   apollo: {
@@ -221,11 +226,11 @@ export default {
     getComponent(type) {
       switch (type) {
         case ROW_TYPES.divider:
-          return 'gl-dropdown-divider';
+          return 'gl-deprecated-dropdown-divider';
         case ROW_TYPES.header:
-          return 'gl-dropdown-header';
+          return 'gl-deprecated-dropdown-header';
         default:
-          return 'gl-dropdown-item';
+          return 'gl-deprecated-dropdown-item';
       }
     },
   },
@@ -241,7 +246,7 @@ export default {
         </router-link>
       </li>
       <li v-if="renderAddToTreeDropdown" class="breadcrumb-item">
-        <gl-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1">
+        <gl-deprecated-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1">
           <template #button-content>
             <span class="sr-only">{{ __('Add to tree') }}</span>
             <icon name="plus" :size="16" class="float-left" />
@@ -252,7 +257,7 @@ export default {
               {{ item.text }}
             </component>
           </template>
-        </gl-dropdown>
+        </gl-deprecated-dropdown>
       </li>
     </ol>
   </nav>
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index bd06ef2cfc9..be4efd10e45 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -7,8 +7,8 @@ import {
   GlModal,
   GlAlert,
   GlLoadingIcon,
-  GlDropdown,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
   GlButton,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -26,8 +26,8 @@ export default {
     GlModal,
     GlAlert,
     GlLoadingIcon,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     TimeAgoTooltip,
     GlButton,
   },
@@ -223,17 +223,17 @@ export default {
         </template>
       </div>
       <div class="d-block d-sm-none dropdown">
-        <gl-dropdown :text="__('Options')" class="w-100" toggle-class="text-center">
-          <gl-dropdown-item
+        <gl-deprecated-dropdown :text="__('Options')" class="w-100" toggle-class="text-center">
+          <gl-deprecated-dropdown-item
             v-for="(action, index) in personalSnippetActions"
             :key="index"
             :disabled="action.disabled"
             :title="action.title"
             :href="action.href"
             @click="action.click ? action.click() : undefined"
-            >{{ action.text }}</gl-dropdown-item
+            >{{ action.text }}</gl-deprecated-dropdown-item
           >
-        </gl-dropdown>
+        </gl-deprecated-dropdown>
       </div>
     </div>
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
index b6722de5277..f17e409d996 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
@@ -1,10 +1,10 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
   },
   props: {
     commits: {
@@ -18,20 +18,20 @@ export default {
 
 <template>
   <div>
-    <gl-dropdown
+    <gl-deprecated-dropdown
       right
       text="Use an existing commit message"
       variant="link"
       class="mr-commit-dropdown"
     >
-      <gl-dropdown-item
+      <gl-deprecated-dropdown-item
         v-for="commit in commits"
         :key="commit.short_id"
         class="text-nowrap text-truncate"
         @click="$emit('input', commit.message)"
       >
         <span class="monospace mr-2">{{ commit.short_id }}</span> {{ commit.title }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+      </gl-deprecated-dropdown-item>
+    </gl-deprecated-dropdown>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
index ddbb474bab6..8f471fe2603 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
@@ -1,5 +1,11 @@
 <script>
-import { GlIcon, GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
+import {
+  GlIcon,
+  GlDeprecatedButton,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlFormGroup,
+} from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
@@ -23,8 +29,8 @@ export default {
   components: {
     GlIcon,
     GlDeprecatedButton,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlFormGroup,
     TooltipOnTruncate,
     DateTimePickerInput,
@@ -206,7 +212,7 @@ export default {
     placement="top"
     class="d-inline-block"
   >
-    <gl-dropdown
+    <gl-deprecated-dropdown
       :text="timeWindowText"
       v-bind="$attrs"
       class="date-time-picker w-100"
@@ -256,7 +262,7 @@ export default {
             <span class="gl-pl-5-deprecated-no-really-do-not-use-me">{{ __('Quick range') }}</span>
           </template>
 
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="(option, index) in options"
             :key="index"
             data-qa-selector="quick_range_item"
@@ -270,9 +276,9 @@ export default {
               :class="{ invisible: !isOptionActive(option) }"
             />
             {{ option.label }}
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
         </gl-form-group>
       </div>
-    </gl-dropdown>
+    </gl-deprecated-dropdown>
   </tooltip-on-truncate>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
index d50649d2581..a50a746490e 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
@@ -3,7 +3,7 @@ import {
   GlFilteredSearchToken,
   GlAvatar,
   GlFilteredSearchSuggestion,
-  GlDropdownDivider,
+  GlDeprecatedDropdownDivider,
   GlLoadingIcon,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
@@ -19,7 +19,7 @@ export default {
     GlFilteredSearchToken,
     GlAvatar,
     GlFilteredSearchSuggestion,
-    GlDropdownDivider,
+    GlDeprecatedDropdownDivider,
     GlLoadingIcon,
   },
   props: {
@@ -102,7 +102,7 @@ export default {
       <gl-filtered-search-suggestion :value="$options.anyAuthor">
         {{ __('Any') }}
       </gl-filtered-search-suggestion>
-      <gl-dropdown-divider />
+      <gl-deprecated-dropdown-divider />
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion
diff --git a/app/assets/javascripts/vue_shared/components/split_button.vue b/app/assets/javascripts/vue_shared/components/split_button.vue
index b11ec8b8838..e9b99c6ea78 100644
--- a/app/assets/javascripts/vue_shared/components/split_button.vue
+++ b/app/assets/javascripts/vue_shared/components/split_button.vue
@@ -1,15 +1,19 @@
 <script>
 import { isString } from 'lodash';
-import { GlDropdown, GlDropdownDivider, GlDropdownItem } from '@gitlab/ui';
+import {
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownDivider,
+  GlDeprecatedDropdownItem,
+} from '@gitlab/ui';
 
 const isValidItem = item =>
   isString(item.eventName) && isString(item.title) && isString(item.description);
 
 export default {
   components: {
-    GlDropdown,
-    GlDropdownDivider,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownDivider,
+    GlDeprecatedDropdownItem,
   },
 
   props: {
@@ -57,7 +61,7 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown
+  <gl-deprecated-dropdown
     :menu-class="`dropdown-menu-selectable ${menuClass}`"
     split
     :text="dropdownToggleText"
@@ -66,7 +70,7 @@ export default {
     @click="triggerEvent"
   >
     <template v-for="(item, itemIndex) in actionItems">
-      <gl-dropdown-item
+      <gl-deprecated-dropdown-item
         :key="item.eventName"
         :active="selectedItem === item"
         active-class="is-active"
@@ -74,12 +78,12 @@ export default {
       >
         <strong>{{ item.title }}</strong>
         <div>{{ item.description }}</div>
-      </gl-dropdown-item>
+      </gl-deprecated-dropdown-item>
 
-      <gl-dropdown-divider
+      <gl-deprecated-dropdown-divider
         v-if="itemIndex < actionItems.length - 1"
         :key="`${item.eventName}-divider`"
       />
     </template>
-  </gl-dropdown>
+  </gl-deprecated-dropdown>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue b/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
index 39098899fd2..23ce3e9654a 100644
--- a/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlNewDropdown, GlDropdownItem, GlSearchBoxByType, GlIcon } from '@gitlab/ui';
+import { GlNewDropdown, GlDeprecatedDropdownItem, GlSearchBoxByType, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 
@@ -7,7 +7,7 @@ export default {
   name: 'TimezoneDropdown',
   components: {
     GlNewDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdownItem,
     GlSearchBoxByType,
     GlIcon,
   },
@@ -83,7 +83,7 @@ export default {
     </template>
 
     <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus class="gl-m-3" />
-    <gl-dropdown-item
+    <gl-deprecated-dropdown-item
       v-for="timezone in filteredResults"
       :key="timezone.formattedTimezone"
       @click="selectTimezone(timezone)"
@@ -94,9 +94,9 @@ export default {
         class="gl-vertical-align-middle"
       />
       {{ timezone.formattedTimezone }}
-    </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" data-testid="noMatchingResults">
+    </gl-deprecated-dropdown-item>
+    <gl-deprecated-dropdown-item v-if="!filteredResults.length" data-testid="noMatchingResults">
       {{ $options.tranlations.noResultsText }}
-    </gl-dropdown-item>
+    </gl-deprecated-dropdown-item>
   </gl-new-dropdown>
 </template>
diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss
index a0a4ae5e215..47a8238d3dd 100644
--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -88,4 +88,10 @@
       background-color: $white-normal;
     }
   }
+
+  @include media-breakpoint-down(xs) {
+    .create-incident-button {
+      @include gl-w-full;
+    }
+  }
 }
diff --git a/app/helpers/projects/incidents_helper.rb b/app/helpers/projects/incidents_helper.rb
index 62d02c9f92b..cf61318ff8d 100644
--- a/app/helpers/projects/incidents_helper.rb
+++ b/app/helpers/projects/incidents_helper.rb
@@ -3,7 +3,9 @@
 module Projects::IncidentsHelper
   def incidents_data(project)
     {
-      'project-path' => project.full_path
+      'project-path' => project.full_path,
+      'new-issue-path' => new_project_issue_path(project),
+      'incident-template-name' => 'incident'
     }
   end
 end
diff --git a/changelogs/unreleased/219381-manual-incident-creation.yml b/changelogs/unreleased/219381-manual-incident-creation.yml
new file mode 100644
index 00000000000..f5dfd6b0816
--- /dev/null
+++ b/changelogs/unreleased/219381-manual-incident-creation.yml
@@ -0,0 +1,5 @@
+---
+title: Create incident from the incidents list page
+merge_request: 37802
+author:
+type: added
diff --git a/doc/api/jobs.md b/doc/api/jobs.md
index 089fd565291..ef192dae329 100644
--- a/doc/api/jobs.md
+++ b/doc/api/jobs.md
@@ -269,7 +269,7 @@ Example of response
 ]
 ```
 
-Since GitLab 13.2, this endpoint [returns data for any pipeline](pipelines.md#single-pipeline-requests)
+In GitLab 13.3 and later, this endpoint [returns data for any pipeline](pipelines.md#single-pipeline-requests)
 including [child pipelines](../ci/parent_child_pipelines.md).
 
 ## List pipeline bridges
diff --git a/doc/api/pipelines.md b/doc/api/pipelines.md
index 5e58d4ea64a..69102a1e81c 100644
--- a/doc/api/pipelines.md
+++ b/doc/api/pipelines.md
@@ -2,10 +2,10 @@
 
 ## Single Pipeline Requests
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36494) in GitLab 13.2.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/36494) in GitLab 13.3.
 
 Endpoints that request information about a single pipeline return data for any pipeline.
-Before 13.2, requests for [child pipelines](../ci/parent_child_pipelines.md) returned
+Before 13.3, requests for [child pipelines](../ci/parent_child_pipelines.md) returned
 a 404 error.
 
 ## Pipelines pagination
diff --git a/doc/ci/yaml/README.md b/doc/ci/yaml/README.md
index b3baeb9d155..831ced81a87 100644
--- a/doc/ci/yaml/README.md
+++ b/doc/ci/yaml/README.md
@@ -1265,7 +1265,8 @@ or excluded from a pipeline. In plain English, `if` rules can be interpreted as
 
 `rules:if` differs slightly from `only:variables` by accepting only a single
 expression string per rule, rather than an array of them. Any set of expressions to be
-evaluated can be conjoined into a single expression by using `&&` or `||`, and use
+evaluated can be [conjoined into a single expression](../variables/README.md#conjunction--disjunction)
+by using `&&` or `||`, and use
 the [variable matching syntax](../variables/README.md#syntax-of-environment-variable-expressions).
 
 `if:` clauses are evaluated based on the values of [predefined environment variables](../variables/predefined_variables.md)
diff --git a/doc/development/go_guide/index.md b/doc/development/go_guide/index.md
index 779dcd9b7a2..6954b2bd6dc 100644
--- a/doc/development/go_guide/index.md
+++ b/doc/development/go_guide/index.md
@@ -108,13 +108,13 @@ lint:
     - '[ -e .golangci.yml ] || cp /golangci/.golangci.yml .'
     # Write the code coverage report to gl-code-quality-report.json
     # and print linting issues to stdout in the format: path/to/file:line description
-    - golangci-lint run --out-format code-climate | tee gl-code-quality-report.json | jq -r '.[] | "\(.location.path):\(.location.lines.begin) \(.description)"'
+    # remove `--issues-exit-code 0` or set to non-zero to fail the job if linting issues are detected
+    - golangci-lint run --issues-exit-code 0 --out-format code-climate | tee gl-code-quality-report.json | jq -r '.[] | "\(.location.path):\(.location.lines.begin) \(.description)"'
   artifacts:
     reports:
       codequality: gl-code-quality-report.json
     paths:
       - gl-code-quality-report.json
-  allow_failure: true
 ```
 
 Including a `.golangci.yml` in the root directory of the project allows for
diff --git a/doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md b/doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md
index 1ca348814b3..5415fc48956 100644
--- a/doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md
+++ b/doc/user/project/merge_requests/reviewing_and_managing_merge_requests.md
@@ -148,9 +148,9 @@ in a Merge Request. To do so, click the **{comment}** **comment** icon in the gu
 ### Commenting on multiple lines
 
 > - [Introduced](https://gitlab.com/gitlab-org/ux-research/-/issues/870) in GitLab 13.2.
-> - It's deployed behind a feature flag, enabled by default.
+> - It's deployed behind a feature flag, disabled by default.
 > - It's enabled on GitLab.com.
-> - It's able to be enabled or disabled per-project
+> - It can be enabled or disabled per-project.
 > - It's recommended for production use.
 > - For GitLab self-managed instances, GitLab administrators can opt to [enable it](#enable-or-disable-multiline-comments-core-only). **(CORE ONLY)**
 
@@ -171,20 +171,20 @@ above it.
 ### Enable or disable multiline comments **(CORE ONLY)**
 
 The multiline comments feature is under development but ready for production use.
-It is deployed behind a feature flag that is **enabled by default**.
+It is deployed behind a feature flag that is **disabled by default**.
 [GitLab administrators with access to the GitLab Rails console](../../../administration/feature_flags.md)
-can opt to disable it for your instance.
+can opt to enable it for your instance.
 
-To disable it:
+To enable it:
 
 ```ruby
-Feature.disable(:multiline_comments)
+Feature.enable(:multiline_comments)
 ```
 
-To enable it:
+To disable it:
 
 ```ruby
-Feature.enable(:multiline_comments)
+Feature.disable(:multiline_comments)
 ```
 
 ## Pipeline status in merge requests widgets
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 111ef2d7da2..87c9108d6a9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12701,6 +12701,9 @@ msgstr ""
 msgid "IncidentManagement|Assignees"
 msgstr ""
 
+msgid "IncidentManagement|Create incident"
+msgstr ""
+
 msgid "IncidentManagement|Date created"
 msgstr ""
 
diff --git a/qa/Gemfile b/qa/Gemfile
index cf9c63c5958..e2951db534a 100644
--- a/qa/Gemfile
+++ b/qa/Gemfile
@@ -16,7 +16,6 @@ gem 'faker', '~> 1.6', '>= 1.6.6'
 gem 'knapsack', '~> 1.17'
 gem 'parallel_tests', '~> 2.29'
 gem 'rotp', '~> 3.1.0'
-gem 'rspec-parameterized', '~> 0.4.2'
 
 group :test do
   gem 'pry-byebug', '~> 3.5.1', platform: :mri
diff --git a/qa/Gemfile.lock b/qa/Gemfile.lock
index c6baa49a4c3..c2b876e3b04 100644
--- a/qa/Gemfile.lock
+++ b/qa/Gemfile.lock
@@ -1,16 +1,12 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    abstract_type (0.0.7)
-    activesupport (6.0.3.2)
+    activesupport (6.0.3.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
       zeitwerk (~> 2.2, >= 2.2.2)
-    adamantium (0.2.0)
-      ice_nine (~> 0.11.0)
-      memoizable (~> 0.4.0)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     airborne (0.3.4)
@@ -19,8 +15,6 @@ GEM
       rack-test (>= 1.1.0, < 2.0)
       rest-client (>= 2.0.2, < 3.0)
       rspec (~> 3.8)
-    ast (2.4.1)
-    binding_ninja (0.2.3)
     byebug (9.1.0)
     capybara (3.29.0)
       addressable
@@ -30,93 +24,55 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (~> 1.5)
       xpath (~> 3.2)
-    capybara-screenshot (1.0.24)
+    capybara-screenshot (1.0.23)
       capybara (>= 1.0, < 4)
       launchy
     childprocess (3.0.0)
-    coderay (1.1.3)
-    concord (0.1.5)
-      adamantium (~> 0.2.0)
-      equalizer (~> 0.0.9)
+    coderay (1.1.2)
     concurrent-ruby (1.1.6)
     debase (0.2.4.1)
       debase-ruby_core_source (>= 0.10.2)
-    debase-ruby_core_source (0.10.9)
-    diff-lcs (1.4.4)
+    debase-ruby_core_source (0.10.6)
+    diff-lcs (1.3)
     domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
-    equalizer (0.0.11)
-    faker (1.9.6)
+    faker (1.9.3)
       i18n (>= 0.7)
-    ffi (1.13.1)
-    ffi-compiler (1.0.1)
-      ffi (>= 1.0.0)
-      rake
-    gitlab (4.11.0)
-      httparty (~> 0.14, >= 0.14.0)
-      terminal-table (~> 1.5, >= 1.5.1)
-    gitlab-qa (5.15.0)
-      activesupport (~> 6.0.2)
-      gitlab (~> 4.11.0)
-      http (= 4.3.0)
-      nokogiri (~> 1.10)
-      table_print (= 1.5.6)
-    http (4.3.0)
-      addressable (~> 2.3)
-      http-cookie (~> 1.0)
-      http-form_data (~> 2.2)
-      http-parser (~> 1.2.0)
+    gitlab-qa (4.0.0)
     http-accept (1.7.0)
     http-cookie (1.0.3)
       domain_name (~> 0.5)
-    http-form_data (2.3.0)
-    http-parser (1.2.1)
-      ffi-compiler (>= 1.0, < 2.0)
-    httparty (0.18.1)
-      mime-types (~> 3.0)
-      multi_xml (>= 0.5.2)
-    i18n (1.8.3)
+    i18n (1.8.2)
       concurrent-ruby (~> 1.0)
-    ice_nine (0.11.2)
-    knapsack (1.18.0)
+    knapsack (1.17.1)
       rake
-    launchy (2.5.0)
-      addressable (~> 2.7)
-    memoizable (0.4.2)
-      thread_safe (~> 0.3, >= 0.3.1)
-    method_source (1.0.0)
+    launchy (2.4.3)
+      addressable (~> 2.3)
+    method_source (0.9.0)
     mime-types (3.3.1)
       mime-types-data (~> 3.2015)
-    mime-types-data (3.2020.0512)
+    mime-types-data (3.2020.0425)
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
     minitest (5.14.1)
-    multi_xml (0.6.0)
     netrc (0.11.0)
-    nokogiri (1.10.10)
+    nokogiri (1.10.9)
       mini_portile2 (~> 2.4.0)
-    parallel (1.19.2)
-    parallel_tests (2.32.0)
+    parallel (1.17.0)
+    parallel_tests (2.29.0)
       parallel
-    parser (2.7.1.4)
-      ast (~> 2.4.1)
-    proc_to_ast (0.1.0)
-      coderay
-      parser
-      unparser
-    procto (0.0.3)
-    pry (0.13.1)
-      coderay (~> 1.1)
-      method_source (~> 1.0)
+    pry (0.11.3)
+      coderay (~> 1.1.0)
+      method_source (~> 0.9.0)
     pry-byebug (3.5.1)
       byebug (~> 9.1)
       pry (~> 0.10)
-    public_suffix (4.0.5)
-    rack (2.2.3)
+    public_suffix (4.0.1)
+    rack (2.2.2)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rake (12.3.3)
-    regexp_parser (1.7.1)
+    rake (12.3.0)
+    regexp_parser (1.6.0)
     rest-client (2.1.0)
       http-accept (>= 1.7.0, < 2.0)
       http-cookie (>= 1.0.2, < 2.0)
@@ -129,32 +85,23 @@ GEM
       rspec-mocks (~> 3.9.0)
     rspec-core (3.9.2)
       rspec-support (~> 3.9.3)
-    rspec-expectations (3.9.2)
+    rspec-expectations (3.9.1)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.9.0)
     rspec-mocks (3.9.1)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.9.0)
-    rspec-parameterized (0.4.2)
-      binding_ninja (>= 0.2.3)
-      parser
-      proc_to_ast
-      rspec (>= 2.13, < 4)
-      unparser
-    rspec-retry (0.6.2)
+    rspec-retry (0.6.1)
       rspec-core (> 3.3)
     rspec-support (3.9.3)
     rspec_junit_formatter (0.4.1)
       rspec-core (>= 2, < 4, != 2.12.0)
     ruby-debug-ide (0.7.2)
       rake (>= 0.8.1)
-    rubyzip (2.3.0)
-    selenium-webdriver (3.142.7)
+    rubyzip (1.3.0)
+    selenium-webdriver (3.142.6)
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
-    table_print (1.5.6)
-    terminal-table (1.8.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
     thread_safe (0.3.6)
     timecop (0.9.1)
     tzinfo (1.2.7)
@@ -162,18 +109,9 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.7.7)
-    unicode-display_width (1.7.0)
-    unparser (0.4.7)
-      abstract_type (~> 0.0.7)
-      adamantium (~> 0.2.0)
-      concord (~> 0.1.5)
-      diff-lcs (~> 1.3)
-      equalizer (~> 0.0.9)
-      parser (>= 2.6.5)
-      procto (~> 0.0.2)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.3.1)
+    zeitwerk (2.3.0)
 
 PLATFORMS
   ruby
@@ -194,7 +132,6 @@ DEPENDENCIES
   rest-client (~> 2.1.0)
   rotp (~> 3.1.0)
   rspec (~> 3.7)
-  rspec-parameterized (~> 0.4.2)
   rspec-retry (~> 0.6.1)
   rspec_junit_formatter (~> 0.4.1)
   ruby-debug-ide (~> 0.7.0)
diff --git a/qa/qa/specs/features/browser_ui/7_configure/auto_devops/auto_devops_templates_spec.rb b/qa/qa/specs/features/browser_ui/7_configure/auto_devops/auto_devops_templates_spec.rb
deleted file mode 100644
index 9c417e83902..00000000000
--- a/qa/qa/specs/features/browser_ui/7_configure/auto_devops/auto_devops_templates_spec.rb
+++ /dev/null
@@ -1,59 +0,0 @@
-# frozen_string_literal: true
-
-module QA
-  RSpec.describe 'Configure' do
-    describe 'AutoDevOps Templates', only: { subdomain: :staging } do
-      let(:optional_jobs) do
-        %w[
-          LICENSE_MANAGEMENT_DISABLED
-          SAST_DISABLED DAST_DISABLED
-          DEPENDENCY_SCANNING_DISABLED
-          CONTAINER_SCANNING_DISABLED
-        ]
-      end
-
-      where(:template) do
-        %w[rails spring express]
-      end
-
-      with_them do
-        let!(:project) do
-          Resource::Project.fabricate_via_api! do |project|
-            project.name = "#{template}-autodevops-project-template"
-            project.template_name = template
-            project.description = "Let's see if the #{template} project works..."
-            project.auto_devops_enabled = true
-          end
-        end
-
-        let(:pipeline) do
-          Resource::Pipeline.fabricate_via_api! do |pipeline|
-            pipeline.project = project
-            pipeline.variables =
-              optional_jobs.map do |job|
-                { key: job, value: '1', variable_type: 'env_var' }
-              end
-          end
-        end
-
-        before do
-          Flow::Login.sign_in
-        end
-
-        it 'works with Auto DevOps' do
-          %w[build test].each do |job|
-            pipeline.visit!
-
-            Page::Project::Pipeline::Show.perform do |show_page|
-              show_page.click_job(job)
-            end
-
-            Page::Project::Job::Show.perform do |show|
-              expect(show).to have_passed(timeout: 360)
-            end
-          end
-        end
-      end
-    end
-  end
-end
diff --git a/qa/spec/spec_helper.rb b/qa/spec/spec_helper.rb
index b3251c739a9..0f818b9f89a 100644
--- a/qa/spec/spec_helper.rb
+++ b/qa/spec/spec_helper.rb
@@ -2,7 +2,6 @@
 
 require_relative '../qa'
 require 'rspec/retry'
-require 'rspec-parameterized'
 
 if ENV['CI'] && QA::Runtime::Env.knapsack? && !ENV['NO_KNAPSACK']
   require 'knapsack'
diff --git a/spec/frontend/alert_management/components/alert_management_table_spec.js b/spec/frontend/alert_management/components/alert_management_table_spec.js
index f316126432e..d51fbe5fda5 100644
--- a/spec/frontend/alert_management/components/alert_management_table_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_table_spec.js
@@ -3,8 +3,8 @@ import {
   GlTable,
   GlAlert,
   GlLoadingIcon,
-  GlDropdown,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
   GlIcon,
   GlTabs,
   GlTab,
@@ -32,12 +32,12 @@ describe('AlertManagementTable', () => {
   const findAlerts = () => wrapper.findAll('table tbody tr');
   const findAlert = () => wrapper.find(GlAlert);
   const findLoader = () => wrapper.find(GlLoadingIcon);
-  const findStatusDropdown = () => wrapper.find(GlDropdown);
+  const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
   const findStatusFilterTabs = () => wrapper.findAll(GlTab);
   const findStatusTabs = () => wrapper.find(GlTabs);
   const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
   const findDateFields = () => wrapper.findAll(TimeAgo);
-  const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
+  const findFirstStatusOption = () => findStatusDropdown().find(GlDeprecatedDropdownItem);
   const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]');
   const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
   const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
diff --git a/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js b/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js
index db086782424..a14596b6722 100644
--- a/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js
+++ b/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } from '@gitlab/ui';
 import SidebarAssignee from '~/alert_management/components/sidebar/sidebar_assignee.vue';
 import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue';
 import AlertSetAssignees from '~/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql';
@@ -103,7 +103,7 @@ describe('Alert Details Sidebar Assignees', () => {
     it('renders a unassigned option', () => {
       wrapper.setData({ isDropdownSearching: false });
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdownItem).text()).toBe('Unassigned');
+        expect(wrapper.find(GlDeprecatedDropdownItem).text()).toBe('Unassigned');
       });
     });
 
diff --git a/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js b/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js
index c2eaf540e9c..5bd0d3b3c17 100644
--- a/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js
+++ b/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { trackAlertStatusUpdateOptions } from '~/alert_management/constants';
 import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue';
 import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.mutation.graphql';
@@ -10,8 +10,8 @@ const mockAlert = mockAlerts[0];
 
 describe('Alert Details Sidebar Status', () => {
   let wrapper;
-  const findStatusDropdown = () => wrapper.find(GlDropdown);
-  const findStatusDropdownItem = () => wrapper.find(GlDropdownItem);
+  const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
+  const findStatusDropdownItem = () => wrapper.find(GlDeprecatedDropdownItem);
   const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
   function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) {
diff --git a/spec/frontend/boards/components/boards_selector_spec.js b/spec/frontend/boards/components/boards_selector_spec.js
index b1ae86c2d3f..f2d4de238d1 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 { GlDropdown, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlLoadingIcon } 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';
@@ -103,7 +103,7 @@ describe('BoardsSelector', () => {
     });
 
     // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
-    wrapper.find(GlDropdown).vm.$emit('show');
+    wrapper.find(GlDeprecatedDropdown).vm.$emit('show');
   });
 
   afterEach(() => {
diff --git a/spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js b/spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js
index a52b38599f7..397d7dfb18e 100644
--- a/spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js
@@ -1,7 +1,7 @@
 import Vuex from 'vuex';
 import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -26,8 +26,8 @@ describe('Ci environments dropdown', () => {
     });
   };
 
-  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
-  const findDropdownItemByIndex = index => wrapper.findAll(GlDropdownItem).at(index);
+  const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findDropdownItemByIndex = index => wrapper.findAll(GlDeprecatedDropdownItem).at(index);
   const findActiveIconByIndex = index => wrapper.findAll(GlIcon).at(index);
 
   afterEach(() => {
diff --git a/spec/frontend/clusters/components/fluentd_output_settings_spec.js b/spec/frontend/clusters/components/fluentd_output_settings_spec.js
index f03f2535947..e34c84e86ce 100644
--- a/spec/frontend/clusters/components/fluentd_output_settings_spec.js
+++ b/spec/frontend/clusters/components/fluentd_output_settings_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue';
 import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
-import { GlAlert, GlDropdown, GlFormCheckbox } from '@gitlab/ui';
+import { GlAlert, GlDeprecatedDropdown, GlFormCheckbox } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
 
 const { UPDATING } = APPLICATION_STATUS;
@@ -36,7 +36,7 @@ describe('FluentdOutputSettings', () => {
   };
   const findSaveButton = () => wrapper.find({ ref: 'saveBtn' });
   const findCancelButton = () => wrapper.find({ ref: 'cancelBtn' });
-  const findProtocolDropdown = () => wrapper.find(GlDropdown);
+  const findProtocolDropdown = () => wrapper.find(GlDeprecatedDropdown);
   const findCheckbox = name =>
     wrapper.findAll(GlFormCheckbox).wrappers.find(x => x.text() === name);
   const findHost = () => wrapper.find('#fluentd-host');
diff --git a/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js b/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js
index 683f2e5c35a..a4766038168 100644
--- a/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js
+++ b/spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue';
 import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants';
-import { GlAlert, GlToggle, GlDropdown } from '@gitlab/ui';
+import { GlAlert, GlToggle, GlDeprecatedDropdown } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
 
 const { UPDATING } = APPLICATION_STATUS;
@@ -31,7 +31,7 @@ describe('IngressModsecuritySettings', () => {
   const findSaveButton = () => wrapper.find('.btn-success');
   const findCancelButton = () => wrapper.find('[variant="secondary"]');
   const findModSecurityToggle = () => wrapper.find(GlToggle);
-  const findModSecurityDropdown = () => wrapper.find(GlDropdown);
+  const findModSecurityDropdown = () => wrapper.find(GlDeprecatedDropdown);
 
   describe('when ingress is installed', () => {
     beforeEach(() => {
diff --git a/spec/frontend/clusters/components/knative_domain_editor_spec.js b/spec/frontend/clusters/components/knative_domain_editor_spec.js
index 73d08661199..a07258dcc69 100644
--- a/spec/frontend/clusters/components/knative_domain_editor_spec.js
+++ b/spec/frontend/clusters/components/knative_domain_editor_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } from '@gitlab/ui';
 import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { APPLICATION_STATUS } from '~/clusters/constants';
@@ -113,7 +113,7 @@ describe('KnativeDomainEditor', () => {
       createComponent({ knative: { ...knative, availableDomains: [newDomain] } });
       jest.spyOn(wrapper.vm, 'selectDomain');
 
-      wrapper.find(GlDropdownItem).vm.$emit('click');
+      wrapper.find(GlDeprecatedDropdownItem).vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.selectDomain).toHaveBeenCalledWith(newDomain);
diff --git a/spec/frontend/clusters/services/crossplane_provider_stack_spec.js b/spec/frontend/clusters/services/crossplane_provider_stack_spec.js
index 3e5f8de8e7b..57c538d2650 100644
--- a/spec/frontend/clusters/services/crossplane_provider_stack_spec.js
+++ b/spec/frontend/clusters/services/crossplane_provider_stack_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue';
 
 describe('CrossplaneProviderStack component', () => {
@@ -37,7 +37,7 @@ describe('CrossplaneProviderStack component', () => {
     createComponent({ crossplane });
   });
 
-  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
+  const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
   const findFirstDropdownElement = () => findDropdownElements().at(0);
 
   afterEach(() => {
diff --git a/spec/frontend/confidential_merge_request/components/dropdown_spec.js b/spec/frontend/confidential_merge_request/components/dropdown_spec.js
index 69495f3c161..3e95cd6c0d7 100644
--- a/spec/frontend/confidential_merge_request/components/dropdown_spec.js
+++ b/spec/frontend/confidential_merge_request/components/dropdown_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } from '@gitlab/ui';
 import Dropdown from '~/confidential_merge_request/components/dropdown.vue';
 
 let vm;
@@ -30,7 +30,7 @@ describe('Confidential merge request project dropdown component', () => {
       },
     ]);
 
-    expect(vm.findAll(GlDropdownItem).length).toBe(2);
+    expect(vm.findAll(GlDeprecatedDropdownItem).length).toBe(2);
   });
 
   it('renders selected project icon', () => {
diff --git a/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js b/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
index 388d918e17a..1592e215dd8 100644
--- a/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
+++ b/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
@@ -4,7 +4,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import createStore from '~/deploy_freeze/store';
 import { mockTimezoneData } from '../mock_data';
 
-import { GlDropdownItem, GlNewDropdown } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlNewDropdown } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -30,8 +30,8 @@ describe('Deploy freeze timezone dropdown', () => {
     wrapper.setData({ searchTerm });
   };
 
-  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
-  const findDropdownItemByIndex = index => wrapper.findAll(GlDropdownItem).at(index);
+  const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findDropdownItemByIndex = index => wrapper.findAll(GlDeprecatedDropdownItem).at(index);
 
   afterEach(() => {
     wrapper.destroy();
diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
index 00f1a40dfb2..0bf203577ef 100644
--- a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
+++ b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
-<gl-dropdown-stub
+<gl-deprecated-dropdown-stub
   class="design-version-dropdown"
   issueiid=""
   projectpath=""
   text="Showing Latest Version"
   variant="link"
 >
-  <gl-dropdown-item-stub>
+  <gl-deprecated-dropdown-item-stub>
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -31,8 +31,8 @@ exports[`Design management design version dropdown component renders design vers
         class="fa fa-check pull-right"
       />
     </router-link-stub>
-  </gl-dropdown-item-stub>
-  <gl-dropdown-item-stub>
+  </gl-deprecated-dropdown-item-stub>
+  <gl-deprecated-dropdown-item-stub>
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -51,19 +51,19 @@ exports[`Design management design version dropdown component renders design vers
        
       <!---->
     </router-link-stub>
-  </gl-dropdown-item-stub>
-</gl-dropdown-stub>
+  </gl-deprecated-dropdown-item-stub>
+</gl-deprecated-dropdown-stub>
 `;
 
 exports[`Design management design version dropdown component renders design version list 1`] = `
-<gl-dropdown-stub
+<gl-deprecated-dropdown-stub
   class="design-version-dropdown"
   issueiid=""
   projectpath=""
   text="Showing Latest Version"
   variant="link"
 >
-  <gl-dropdown-item-stub>
+  <gl-deprecated-dropdown-item-stub>
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -86,8 +86,8 @@ exports[`Design management design version dropdown component renders design vers
         class="fa fa-check pull-right"
       />
     </router-link-stub>
-  </gl-dropdown-item-stub>
-  <gl-dropdown-item-stub>
+  </gl-deprecated-dropdown-item-stub>
+  <gl-deprecated-dropdown-item-stub>
     <router-link-stub
       class="d-flex js-version-link"
       to="[object Object]"
@@ -106,6 +106,6 @@ exports[`Design management design version dropdown component renders design vers
        
       <!---->
     </router-link-stub>
-  </gl-dropdown-item-stub>
-</gl-dropdown-stub>
+  </gl-deprecated-dropdown-item-stub>
+</gl-deprecated-dropdown-stub>
 `;
diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
index 7521b9fad2a..0bd45e02814 100644
--- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
+++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import mockAllVersions from './mock_data/all_versions';
 
 const LATEST_VERSION_ID = 3;
@@ -75,7 +75,9 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
+          'Showing Latest Version',
+        );
       });
     });
 
@@ -83,7 +85,9 @@ describe('Design management design version dropdown component', () => {
       createComponent({ maxVersions: 1 });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
+          'Showing Latest Version',
+        );
       });
     });
 
@@ -91,7 +95,7 @@ describe('Design management design version dropdown component', () => {
       createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing Version #1`);
+        expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(`Showing Version #1`);
       });
     });
 
@@ -99,7 +103,9 @@ describe('Design management design version dropdown component', () => {
       createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
+        expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
+          'Showing Latest Version',
+        );
       });
     });
 
@@ -107,7 +113,9 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
+        expect(wrapper.findAll(GlDeprecatedDropdownItem)).toHaveLength(
+          wrapper.vm.allVersions.length,
+        );
       });
     });
   });
diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index d88a412fb50..bad70a31599 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -1,6 +1,12 @@
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlEmptyState, GlLoadingIcon, GlFormInput, GlPagination, GlDropdown } from '@gitlab/ui';
+import {
+  GlEmptyState,
+  GlLoadingIcon,
+  GlFormInput,
+  GlPagination,
+  GlDeprecatedDropdown,
+} from '@gitlab/ui';
 import stubChildren from 'helpers/stub_children';
 import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
 import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue';
@@ -18,19 +24,19 @@ describe('ErrorTrackingList', () => {
 
   const findErrorListTable = () => wrapper.find('table');
   const findErrorListRows = () => wrapper.findAll('tbody tr');
-  const dropdownsArray = () => wrapper.findAll(GlDropdown);
+  const dropdownsArray = () => wrapper.findAll(GlDeprecatedDropdown);
   const findRecentSearchesDropdown = () =>
     dropdownsArray()
       .at(0)
-      .find(GlDropdown);
+      .find(GlDeprecatedDropdown);
   const findStatusFilterDropdown = () =>
     dropdownsArray()
       .at(1)
-      .find(GlDropdown);
+      .find(GlDeprecatedDropdown);
   const findSortDropdown = () =>
     dropdownsArray()
       .at(2)
-      .find(GlDropdown);
+      .find(GlDeprecatedDropdown);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findPagination = () => wrapper.find(GlPagination);
   const findErrorActions = () => wrapper.find(ErrorTrackingActions);
@@ -128,8 +134,8 @@ describe('ErrorTrackingList', () => {
       mountComponent({
         stubs: {
           GlTable: false,
-          GlDropdown: false,
-          GlDropdownItem: false,
+          GlDeprecatedDropdown: false,
+          GlDeprecatedDropdownItem: false,
           GlLink: false,
         },
       });
@@ -199,8 +205,8 @@ describe('ErrorTrackingList', () => {
       mountComponent({
         stubs: {
           GlTable: false,
-          GlDropdown: false,
-          GlDropdownItem: false,
+          GlDeprecatedDropdown: false,
+          GlDeprecatedDropdownItem: false,
         },
       });
     });
@@ -335,8 +341,8 @@ describe('ErrorTrackingList', () => {
     beforeEach(() => {
       mountComponent({
         stubs: {
-          GlDropdown: false,
-          GlDropdownItem: false,
+          GlDeprecatedDropdown: false,
+          GlDeprecatedDropdownItem: false,
         },
       });
     });
diff --git a/spec/frontend/error_tracking_settings/components/project_dropdown_spec.js b/spec/frontend/error_tracking_settings/components/project_dropdown_spec.js
index d924f895da8..023a3e26781 100644
--- a/spec/frontend/error_tracking_settings/components/project_dropdown_spec.js
+++ b/spec/frontend/error_tracking_settings/components/project_dropdown_spec.js
@@ -1,7 +1,7 @@
 import { pick, clone } from 'lodash';
 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import ProjectDropdown from '~/error_tracking_settings/components/project_dropdown.vue';
 import { defaultProps, projectList, staleProject } from '../mock';
 
@@ -43,7 +43,7 @@ describe('error tracking settings project dropdown', () => {
   describe('empty project list', () => {
     it('renders the dropdown', () => {
       expect(wrapper.find('#project-dropdown').exists()).toBeTruthy();
-      expect(wrapper.find(GlDropdown).exists()).toBeTruthy();
+      expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeTruthy();
     });
 
     it('shows helper text', () => {
@@ -58,8 +58,8 @@ describe('error tracking settings project dropdown', () => {
     });
 
     it('does not contain any dropdown items', () => {
-      expect(wrapper.find(GlDropdownItem).exists()).toBeFalsy();
-      expect(wrapper.find(GlDropdown).props('text')).toBe('No projects available');
+      expect(wrapper.find(GlDeprecatedDropdownItem).exists()).toBeFalsy();
+      expect(wrapper.find(GlDeprecatedDropdown).props('text')).toBe('No projects available');
     });
   });
 
@@ -72,12 +72,12 @@ describe('error tracking settings project dropdown', () => {
 
     it('renders the dropdown', () => {
       expect(wrapper.find('#project-dropdown').exists()).toBeTruthy();
-      expect(wrapper.find(GlDropdown).exists()).toBeTruthy();
+      expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeTruthy();
     });
 
     it('contains a number of dropdown items', () => {
-      expect(wrapper.find(GlDropdownItem).exists()).toBeTruthy();
-      expect(wrapper.findAll(GlDropdownItem).length).toBe(2);
+      expect(wrapper.find(GlDeprecatedDropdownItem).exists()).toBeTruthy();
+      expect(wrapper.findAll(GlDeprecatedDropdownItem).length).toBe(2);
     });
   });
 
diff --git a/spec/frontend/incidents/components/incidents_list_spec.js b/spec/frontend/incidents/components/incidents_list_spec.js
index 11b2980b7de..873b1b67bba 100644
--- a/spec/frontend/incidents/components/incidents_list_spec.js
+++ b/spec/frontend/incidents/components/incidents_list_spec.js
@@ -7,6 +7,8 @@ import mockIncidents from '../mocks/incidents.json';
 
 describe('Incidents List', () => {
   let wrapper;
+  const newIssuePath = 'namespace/project/-/issues/new';
+  const incidentTemplateName = 'incident';
 
   const findTable = () => wrapper.find(GlTable);
   const findTableRows = () => wrapper.findAll('table tbody tr');
@@ -14,6 +16,7 @@ describe('Incidents List', () => {
   const findLoader = () => wrapper.find(GlLoadingIcon);
   const findTimeAgo = () => wrapper.findAll(TimeAgoTooltip);
   const findAssingees = () => wrapper.findAll('[data-testid="incident-assignees"]');
+  const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
 
   function mountComponent({ data = { incidents: [] }, loading = false }) {
     wrapper = mount(IncidentsList, {
@@ -31,8 +34,11 @@ describe('Incidents List', () => {
       },
       provide: {
         projectPath: '/project/path',
+        newIssuePath,
+        incidentTemplateName,
       },
       stubs: {
+        GlButton: true,
         GlAvatar: true,
       },
     });
@@ -107,4 +113,27 @@ describe('Incidents List', () => {
       });
     });
   });
+
+  describe('Create Incident', () => {
+    beforeEach(() => {
+      mountComponent({
+        data: { incidents: [] },
+        loading: false,
+      });
+    });
+
+    it('shows the button linking to new incidents page with prefilled incident template', () => {
+      expect(findCreateIncidentBtn().exists()).toBe(true);
+      expect(findCreateIncidentBtn().attributes('href')).toBe(
+        `${newIssuePath}?issuable_template=${incidentTemplateName}`,
+      );
+    });
+
+    it('sets button loading on click', () => {
+      findCreateIncidentBtn().vm.$emit('click');
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findCreateIncidentBtn().attributes('loading')).toBe('true');
+      });
+    });
+  });
 });
diff --git a/spec/frontend/logs/components/environment_logs_spec.js b/spec/frontend/logs/components/environment_logs_spec.js
index dee62709d81..6421aca684f 100644
--- a/spec/frontend/logs/components/environment_logs_spec.js
+++ b/spec/frontend/logs/components/environment_logs_spec.js
@@ -1,4 +1,4 @@
-import { GlSprintf, GlIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlSprintf, GlIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import EnvironmentLogs from '~/logs/components/environment_logs.vue';
 
@@ -124,7 +124,7 @@ describe('EnvironmentLogs', () => {
     expect(wrapper.isVueInstance()).toBe(true);
     expect(wrapper.isEmpty()).toBe(false);
 
-    expect(findEnvironmentsDropdown().is(GlDropdown)).toBe(true);
+    expect(findEnvironmentsDropdown().is(GlDeprecatedDropdown)).toBe(true);
     expect(findSimpleFilters().exists()).toBe(true);
     expect(findLogControlButtons().exists()).toBe(true);
 
@@ -167,7 +167,7 @@ describe('EnvironmentLogs', () => {
 
     it('displays a disabled environments dropdown', () => {
       expect(findEnvironmentsDropdown().attributes('disabled')).toBe('true');
-      expect(findEnvironmentsDropdown().findAll(GlDropdownItem).length).toBe(0);
+      expect(findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem).length).toBe(0);
     });
 
     it('does not update buttons state', () => {
@@ -244,7 +244,7 @@ describe('EnvironmentLogs', () => {
     });
 
     it('populates environments dropdown', () => {
-      const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
+      const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
       expect(findEnvironmentsDropdown().props('text')).toBe(mockEnvName);
       expect(items.length).toBe(mockEnvironments.length);
       mockEnvironments.forEach((env, i) => {
@@ -254,7 +254,7 @@ describe('EnvironmentLogs', () => {
     });
 
     it('dropdown has one environment selected', () => {
-      const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
+      const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
       mockEnvironments.forEach((env, i) => {
         const item = items.at(i);
 
@@ -289,7 +289,7 @@ describe('EnvironmentLogs', () => {
 
     describe('when user clicks', () => {
       it('environment name, trace is refreshed', () => {
-        const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
+        const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
         const index = 1; // any env
 
         expect(dispatch).not.toHaveBeenCalledWith(`${module}/showEnvironment`, expect.anything());
diff --git a/spec/frontend/logs/components/log_simple_filters_spec.js b/spec/frontend/logs/components/log_simple_filters_spec.js
index 13504a2b1fc..e739621431e 100644
--- a/spec/frontend/logs/components/log_simple_filters_spec.js
+++ b/spec/frontend/logs/components/log_simple_filters_spec.js
@@ -1,4 +1,4 @@
-import { GlIcon, GlDropdownItem } from '@gitlab/ui';
+import { GlIcon, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/logs/stores';
 import { mockPods, mockPodName } from '../mock_data';
@@ -17,7 +17,7 @@ describe('LogSimpleFilters', () => {
   const findPodsNoPodsText = () => wrapper.find({ ref: 'noPodsMsg' });
   const findPodsDropdownItems = () =>
     findPodsDropdown()
-      .findAll(GlDropdownItem)
+      .findAll(GlDeprecatedDropdownItem)
       .filter(item => !item.is('[disabled]'));
 
   const mockPodsLoading = () => {
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 e7c51d82cd2..486515f4f0e 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -33,7 +33,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
     <div
       class="mb-2 pr-2 d-flex d-sm-block"
     >
-      <gl-dropdown-stub
+      <gl-deprecated-dropdown-stub
         class="flex-grow-1"
         data-qa-selector="environments_dropdown"
         id="monitor-environments-dropdown"
@@ -44,15 +44,15 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         <div
           class="d-flex flex-column overflow-hidden"
         >
-          <gl-dropdown-header-stub
+          <gl-deprecated-dropdown-header-stub
             class="monitor-environment-dropdown-header text-center"
           >
             
           Environment
         
-          </gl-dropdown-header-stub>
+          </gl-deprecated-dropdown-header-stub>
            
-          <gl-dropdown-divider-stub />
+          <gl-deprecated-dropdown-divider-stub />
            
           <gl-search-box-by-type-stub
             class="m-2"
@@ -72,7 +72,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         
           </div>
         </div>
-      </gl-dropdown-stub>
+      </gl-deprecated-dropdown-stub>
     </div>
      
     <div
diff --git a/spec/frontend/monitoring/components/dashboard_header_spec.js b/spec/frontend/monitoring/components/dashboard_header_spec.js
index 7c841fbbbc5..9b78947d146 100644
--- a/spec/frontend/monitoring/components/dashboard_header_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_header_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
-import { GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
 import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
 import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
 import CreateDashboardModal from '~/monitoring/components/create_dashboard_modal.vue';
@@ -27,7 +27,7 @@ describe('Dashboard header', () => {
   let wrapper;
 
   const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
-  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem);
+  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDeprecatedDropdownItem);
   const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType);
   const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' });
   const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon);
diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
index d09fcc92ee7..098d94981fa 100644
--- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
+++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 
@@ -38,8 +38,8 @@ describe('DashboardsDropdown', () => {
     });
   }
 
-  const findItems = () => wrapper.findAll(GlDropdownItem);
-  const findItemAt = i => wrapper.findAll(GlDropdownItem).at(i);
+  const findItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findItemAt = i => wrapper.findAll(GlDeprecatedDropdownItem).at(i);
   const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' });
   const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' });
   const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' });
diff --git a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
index cc384aef231..788f3abf617 100644
--- a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
+++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import DropdownField from '~/monitoring/components/variables/dropdown_field.vue';
 
 describe('Custom variable component', () => {
@@ -23,8 +23,8 @@ describe('Custom variable component', () => {
     });
   };
 
-  const findDropdown = () => wrapper.find(GlDropdown);
-  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
+  const findDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
 
   it('renders dropdown element when all necessary props are passed', () => {
     createShallowWrapper();
diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
index 94089ea922b..211f4ea20f5 100644
--- a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
+++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
@@ -9,10 +9,10 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
      
     <!---->
      
-    <gl-dropdown-stub
+    <gl-deprecated-dropdown-stub
       text="rspec"
     >
-      <gl-dropdown-item-stub
+      <gl-deprecated-dropdown-item-stub
         value="rspec"
       >
         <div
@@ -32,8 +32,8 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
           
           </span>
         </div>
-      </gl-dropdown-item-stub>
-      <gl-dropdown-item-stub
+      </gl-deprecated-dropdown-item-stub>
+      <gl-deprecated-dropdown-item-stub
         value="cypress"
       >
         <div
@@ -49,8 +49,8 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
           
           </span>
         </div>
-      </gl-dropdown-item-stub>
-      <gl-dropdown-item-stub
+      </gl-deprecated-dropdown-item-stub>
+      <gl-deprecated-dropdown-item-stub
         value="karma"
       >
         <div
@@ -66,8 +66,8 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
           
           </span>
         </div>
-      </gl-dropdown-item-stub>
-    </gl-dropdown-stub>
+      </gl-deprecated-dropdown-item-stub>
+    </gl-deprecated-dropdown-stub>
   </div>
    
   <gl-area-chart-stub
diff --git a/spec/frontend/pages/projects/graphs/code_coverage_spec.js b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
index 30c7ff78c6e..509b002bbe9 100644
--- a/spec/frontend/pages/projects/graphs/code_coverage_spec.js
+++ b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import { shallowMount } from '@vue/test-utils';
-import { GlAlert, GlIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlAlert, GlIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 
 import axios from '~/lib/utils/axios_utils';
@@ -17,7 +17,7 @@ describe('Code Coverage', () => {
 
   const findAlert = () => wrapper.find(GlAlert);
   const findAreaChart = () => wrapper.find(GlAreaChart);
-  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
   const findFirstDropdownItem = () => findAllDropdownItems().at(0);
   const findSecondDropdownItem = () => findAllDropdownItems().at(1);
 
@@ -124,7 +124,7 @@ describe('Code Coverage', () => {
     });
 
     it('renders the dropdown with all custom names as options', () => {
-      expect(wrapper.contains(GlDropdown)).toBeDefined();
+      expect(wrapper.contains(GlDeprecatedDropdown)).toBeDefined();
       expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length);
       expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name);
     });
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
index 8917251d285..4c73225b54c 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import GLDropdown from '~/gl_dropdown'; // eslint-disable-line no-unused-vars
+import '~/gl_dropdown';
 import TimezoneDropdown, {
   formatUtcOffset,
   formatTimezone,
diff --git a/spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js b/spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js
index a556be12089..b0291de5f3c 100644
--- a/spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js
@@ -1,6 +1,6 @@
 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
-import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import * as getters from '~/registry/explorer/stores/getters';
 import QuickstartDropdown from '~/registry/explorer/components/list_page/cli_commands.vue';
@@ -23,7 +23,7 @@ describe('cli_commands', () => {
   let wrapper;
   let store;
 
-  const findDropdownButton = () => wrapper.find(GlDropdown);
+  const findDropdownButton = () => wrapper.find(GlDeprecatedDropdown);
   const findFormGroups = () => wrapper.findAll(GlFormGroup);
 
   const mountComponent = () => {
diff --git a/spec/frontend/repository/components/breadcrumbs_spec.js b/spec/frontend/repository/components/breadcrumbs_spec.js
index 38e5c9aaca5..ca4120576f5 100644
--- a/spec/frontend/repository/components/breadcrumbs_spec.js
+++ b/spec/frontend/repository/components/breadcrumbs_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
-import { GlDropdown } from '@gitlab/ui';
+import { GlDeprecatedDropdown } from '@gitlab/ui';
 import Breadcrumbs from '~/repository/components/breadcrumbs.vue';
 
 let vm;
@@ -61,7 +61,7 @@ describe('Repository breadcrumbs component', () => {
     vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
 
     return vm.vm.$nextTick(() => {
-      expect(vm.find(GlDropdown).exists()).toBe(false);
+      expect(vm.find(GlDeprecatedDropdown).exists()).toBe(false);
     });
   });
 
@@ -71,7 +71,7 @@ describe('Repository breadcrumbs component', () => {
     vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
 
     return vm.vm.$nextTick(() => {
-      expect(vm.find(GlDropdown).exists()).toBe(true);
+      expect(vm.find(GlDeprecatedDropdown).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
index 56832f82b05..5c7e6a87c16 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } from '@gitlab/ui';
 import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
 
 const commits = [
@@ -39,7 +39,7 @@ describe('Commits message dropdown component', () => {
     wrapper.destroy();
   });
 
-  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
+  const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
   const findFirstDropdownElement = () => findDropdownElements().at(0);
 
   it('should have 3 elements in dropdown list', () => {
diff --git a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
index 74f71c23d02..fcb9c4b8b02 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SplitButton renders actionItems 1`] = `
-<gl-dropdown-stub
+<gl-deprecated-dropdown-stub
   menu-class="dropdown-menu-selectable "
   split="true"
   text="professor"
   variant="secondary"
 >
-  <gl-dropdown-item-stub
+  <gl-deprecated-dropdown-item-stub
     active="true"
     active-class="is-active"
   >
@@ -18,10 +18,10 @@ exports[`SplitButton renders actionItems 1`] = `
     <div>
       very symphonic
     </div>
-  </gl-dropdown-item-stub>
+  </gl-deprecated-dropdown-item-stub>
    
-  <gl-dropdown-divider-stub />
-  <gl-dropdown-item-stub
+  <gl-deprecated-dropdown-divider-stub />
+  <gl-deprecated-dropdown-item-stub
     active-class="is-active"
   >
     <strong>
@@ -31,8 +31,8 @@ exports[`SplitButton renders actionItems 1`] = `
     <div>
       warp drive
     </div>
-  </gl-dropdown-item-stub>
+  </gl-deprecated-dropdown-item-stub>
    
   <!---->
-</gl-dropdown-stub>
+</gl-deprecated-dropdown-stub>
 `;
diff --git a/spec/frontend/vue_shared/components/split_button_spec.js b/spec/frontend/vue_shared/components/split_button_spec.js
index e09bc073042..f3bd4c14717 100644
--- a/spec/frontend/vue_shared/components/split_button_spec.js
+++ b/spec/frontend/vue_shared/components/split_button_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
 import SplitButton from '~/vue_shared/components/split_button.vue';
@@ -25,10 +25,10 @@ describe('SplitButton', () => {
     });
   };
 
-  const findDropdown = () => wrapper.find(GlDropdown);
+  const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
   const findDropdownItem = (index = 0) =>
     findDropdown()
-      .findAll(GlDropdownItem)
+      .findAll(GlDeprecatedDropdownItem)
       .at(index);
   const selectItem = index => {
     findDropdownItem(index).vm.$emit('click');
diff --git a/spec/helpers/projects/incidents_helper_spec.rb b/spec/helpers/projects/incidents_helper_spec.rb
index 20f2680bfd4..3ed3edfff8d 100644
--- a/spec/helpers/projects/incidents_helper_spec.rb
+++ b/spec/helpers/projects/incidents_helper_spec.rb
@@ -7,12 +7,17 @@ RSpec.describe Projects::IncidentsHelper do
 
   let(:project) { create(:project) }
   let(:project_path) { project.full_path }
+  let(:new_issue_path) { new_project_issue_path(project) }
 
   describe '#incidents_data' do
     subject(:data) { helper.incidents_data(project) }
 
     it 'returns frontend configuration' do
-      expect(data).to match('project-path' => project_path)
+      expect(data).to match(
+        'project-path' => project_path,
+        'new-issue-path' => new_issue_path,
+        'incident-template-name' => 'incident'
+      )
     end
   end
 end