Add latest changes from gitlab-org/gitlab@master

31 files changed, 162 insertions, 114 deletions

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