Add latest changes from gitlab-org/gitlab@master

13 files changed, 335 insertions, 88 deletions

diff --git a/spec/frontend/boards/project_select_spec.js b/spec/frontend/boards/project_select_spec.js
index 74ce4b6b786..b4308b38947 100644
--- a/spec/frontend/boards/project_select_spec.js
+++ b/spec/frontend/boards/project_select_spec.js
@@ -1,17 +1,11 @@
-import {
-  GlDropdown,
-  GlDropdownItem,
-  GlFormInput,
-  GlSearchBoxByType,
-  GlLoadingIcon,
-} from '@gitlab/ui';
+import { GlCollapsibleListbox, GlListboxItem, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import ProjectSelect from '~/boards/components/project_select.vue';
 import defaultState from '~/boards/stores/state';
 
-import { mockList, mockActiveGroupProjects } from './mock_data';
+import { mockActiveGroupProjects, mockList } from './mock_data';
 
 const mockProjectsList1 = mockActiveGroupProjects.slice(0, 1);
 
@@ -20,14 +14,17 @@ describe('ProjectSelect component', () => {
   let store;
 
   const findLabel = () => wrapper.find("[data-testid='header-label']");
-  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
+  const findGlCollapsibleListBox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findGlDropdownLoadingIcon = () =>
-    findGlDropdown().find('button:first-child').findComponent(GlLoadingIcon);
-  const findGlSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType);
-  const findGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findFirstGlDropdownItem = () => findGlDropdownItems().at(0);
-  const findInMenuLoadingIcon = () => wrapper.find("[data-testid='dropdown-text-loading-icon']");
-  const findEmptySearchMessage = () => wrapper.find("[data-testid='empty-result-message']");
+    findGlCollapsibleListBox()
+      .find("[data-testid='base-dropdown-toggle'")
+      .findComponent(GlLoadingIcon);
+  const findGlListboxSearchInput = () =>
+    wrapper.find("[data-testid='listbox-search-input'] > .gl-listbox-search-input");
+  const findGlListboxItem = () => wrapper.findAllComponents(GlListboxItem);
+  const findFirstGlDropdownItem = () => findGlListboxItem().at(0);
+  const findInMenuLoadingIcon = () => wrapper.find("[data-testid='listbox-search-loader']");
+  const findEmptySearchMessage = () => wrapper.find("[data-testid='listbox-no-results-text']");
 
   const createStore = ({ state, activeGroupProjects }) => {
     Vue.use(Vuex);
@@ -80,8 +77,8 @@ describe('ProjectSelect component', () => {
   it('renders a default dropdown text', () => {
     createWrapper();
 
-    expect(findGlDropdown().exists()).toBe(true);
-    expect(findGlDropdown().text()).toContain('Select a project');
+    expect(findGlCollapsibleListBox().exists()).toBe(true);
+    expect(findGlCollapsibleListBox().text()).toContain('Select a project');
   });
 
   describe('when mounted', () => {
@@ -102,12 +99,9 @@ describe('ProjectSelect component', () => {
         createWrapper({ activeGroupProjects: mockActiveGroupProjects });
       });
 
-      it('shows GlSearchBoxByType with default attributes', () => {
-        expect(findGlSearchBoxByType().exists()).toBe(true);
-        expect(findGlSearchBoxByType().vm.$attrs).toMatchObject({
-          placeholder: 'Search projects',
-          debounce: '250',
-        });
+      it('shows GlListboxSearchInput with placeholder text', () => {
+        expect(findGlListboxSearchInput().exists()).toBe(true);
+        expect(findGlListboxSearchInput().attributes('placeholder')).toBe('Search projects');
       });
 
       it("displays the fetched project's name", () => {
@@ -116,23 +110,12 @@ describe('ProjectSelect component', () => {
       });
 
       it("doesn't render loading icon in the menu", () => {
-        expect(findInMenuLoadingIcon().isVisible()).toBe(false);
+        expect(findInMenuLoadingIcon().exists()).toBe(false);
       });
 
       it('does not render empty search result message', () => {
         expect(findEmptySearchMessage().exists()).toBe(false);
       });
-
-      it('focuses on the search input', async () => {
-        const dropdownToggle = findGlDropdown().find('.dropdown-toggle');
-
-        await dropdownToggle.trigger('click');
-        jest.runOnlyPendingTimers();
-        await nextTick();
-
-        const searchInput = findGlDropdown().findComponent(GlFormInput).element;
-        expect(document.activeElement).toBe(searchInput);
-      });
     });
 
     describe('when no projects are being returned', () => {
@@ -147,11 +130,11 @@ describe('ProjectSelect component', () => {
       beforeEach(() => {
         createWrapper({ activeGroupProjects: mockProjectsList1 });
 
-        findFirstGlDropdownItem().find('button').trigger('click');
+        findFirstGlDropdownItem().find('li').trigger('click');
       });
 
       it('renders the name of the selected project', () => {
-        expect(findGlDropdown().find('.gl-dropdown-button-text').text()).toBe(
+        expect(findGlCollapsibleListBox().find('.gl-new-dropdown-button-text').text()).toBe(
           mockProjectsList1[0].name,
         );
       });
diff --git a/spec/frontend/contribution_events/components/contribution_event/contribution_event_approved_spec.js b/spec/frontend/contribution_events/components/contribution_event/contribution_event_approved_spec.js
new file mode 100644
index 00000000000..6672d3eb18b
--- /dev/null
+++ b/spec/frontend/contribution_events/components/contribution_event/contribution_event_approved_spec.js
@@ -0,0 +1,47 @@
+import events from 'test_fixtures/controller/users/activity.json';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { EVENT_TYPE_APPROVED } from '~/contribution_events/constants';
+import ContributionEventApproved from '~/contribution_events/components/contribution_event/contribution_event_approved.vue';
+import ContributionEventBase from '~/contribution_events/components/contribution_event/contribution_event_base.vue';
+import TargetLink from '~/contribution_events/components/target_link.vue';
+import ResourceParentLink from '~/contribution_events/components/resource_parent_link.vue';
+
+const eventApproved = events.find((event) => event.action === EVENT_TYPE_APPROVED);
+
+describe('ContributionEventApproved', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = mountExtended(ContributionEventApproved, {
+      propsData: {
+        event: eventApproved,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders `ContributionEventBase`', () => {
+    expect(wrapper.findComponent(ContributionEventBase).props()).toEqual({
+      event: eventApproved,
+      iconName: 'approval-solid',
+      iconClass: 'gl-text-green-500',
+    });
+  });
+
+  it('renders message', () => {
+    expect(wrapper.findByTestId('event-body').text()).toBe(
+      `Approved merge request ${eventApproved.target.reference_link_text} in ${eventApproved.resource_parent.full_name}.`,
+    );
+  });
+
+  it('renders target link', () => {
+    expect(wrapper.findComponent(TargetLink).props('event')).toEqual(eventApproved);
+  });
+
+  it('renders resource parent link', () => {
+    expect(wrapper.findComponent(ResourceParentLink).props('event')).toEqual(eventApproved);
+  });
+});
diff --git a/spec/frontend/contribution_events/components/contribution_event/contribution_event_base_spec.js b/spec/frontend/contribution_events/components/contribution_event/contribution_event_base_spec.js
new file mode 100644
index 00000000000..8c951e20bed
--- /dev/null
+++ b/spec/frontend/contribution_events/components/contribution_event/contribution_event_base_spec.js
@@ -0,0 +1,62 @@
+import { GlAvatarLabeled, GlAvatarLink, GlIcon } from '@gitlab/ui';
+import events from 'test_fixtures/controller/users/activity.json';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ContributionEventBase from '~/contribution_events/components/contribution_event/contribution_event_base.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+const [event] = events;
+
+describe('ContributionEventBase', () => {
+  let wrapper;
+
+  const defaultPropsData = {
+    event,
+    iconName: 'approval-solid',
+    iconClass: 'gl-text-green-500',
+  };
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(ContributionEventBase, {
+      propsData: defaultPropsData,
+      scopedSlots: {
+        default: '<div data-testid="default-slot"></div>',
+        'additional-info': '<div data-testid="additional-info-slot"></div>',
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders avatar', () => {
+    const avatarLink = wrapper.findComponent(GlAvatarLink);
+
+    expect(avatarLink.attributes('href')).toBe(event.author.web_url);
+    expect(avatarLink.findComponent(GlAvatarLabeled).attributes()).toMatchObject({
+      label: event.author.name,
+      sublabel: `@${event.author.username}`,
+      src: event.author.avatar_url,
+      size: '32',
+    });
+  });
+
+  it('renders time ago tooltip', () => {
+    expect(wrapper.findComponent(TimeAgoTooltip).props('time')).toBe(event.created_at);
+  });
+
+  it('renders icon', () => {
+    const icon = wrapper.findComponent(GlIcon);
+
+    expect(icon.props('name')).toBe(defaultPropsData.iconName);
+    expect(icon.classes()).toContain(defaultPropsData.iconClass);
+  });
+
+  it('renders `default` slot', () => {
+    expect(wrapper.findByTestId('default-slot').exists()).toBe(true);
+  });
+
+  it('renders `additional-info` slot', () => {
+    expect(wrapper.findByTestId('additional-info-slot').exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/contribution_events/components/contribution_events_spec.js b/spec/frontend/contribution_events/components/contribution_events_spec.js
new file mode 100644
index 00000000000..4bc354c393f
--- /dev/null
+++ b/spec/frontend/contribution_events/components/contribution_events_spec.js
@@ -0,0 +1,31 @@
+import events from 'test_fixtures/controller/users/activity.json';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { EVENT_TYPE_APPROVED } from '~/contribution_events/constants';
+import ContributionEvents from '~/contribution_events/components/contribution_events.vue';
+import ContributionEventApproved from '~/contribution_events/components/contribution_event/contribution_event_approved.vue';
+
+const eventApproved = events.find((event) => event.action === EVENT_TYPE_APPROVED);
+
+describe('ContributionEvents', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(ContributionEvents, {
+      propsData: {
+        events,
+      },
+    });
+  };
+
+  it.each`
+    expectedComponent            | expectedEvent
+    ${ContributionEventApproved} | ${eventApproved}
+  `(
+    'renders `$expectedComponent.name` component and passes expected event',
+    ({ expectedComponent, expectedEvent }) => {
+      createComponent();
+
+      expect(wrapper.findComponent(expectedComponent).props('event')).toEqual(expectedEvent);
+    },
+  );
+});
diff --git a/spec/frontend/contribution_events/components/resource_parent_link_spec.js b/spec/frontend/contribution_events/components/resource_parent_link_spec.js
new file mode 100644
index 00000000000..8d586db2a30
--- /dev/null
+++ b/spec/frontend/contribution_events/components/resource_parent_link_spec.js
@@ -0,0 +1,30 @@
+import { GlLink } from '@gitlab/ui';
+import events from 'test_fixtures/controller/users/activity.json';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { EVENT_TYPE_APPROVED } from '~/contribution_events/constants';
+import ResourceParentLink from '~/contribution_events/components/resource_parent_link.vue';
+
+const eventApproved = events.find((event) => event.action === EVENT_TYPE_APPROVED);
+
+describe('ResourceParentLink', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(ResourceParentLink, {
+      propsData: {
+        event: eventApproved,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders link', () => {
+    const link = wrapper.findComponent(GlLink);
+
+    expect(link.attributes('href')).toBe(eventApproved.resource_parent.web_url);
+    expect(link.text()).toBe(eventApproved.resource_parent.full_name);
+  });
+});
diff --git a/spec/frontend/contribution_events/components/target_link_spec.js b/spec/frontend/contribution_events/components/target_link_spec.js
new file mode 100644
index 00000000000..7944375487b
--- /dev/null
+++ b/spec/frontend/contribution_events/components/target_link_spec.js
@@ -0,0 +1,33 @@
+import { GlLink } from '@gitlab/ui';
+import events from 'test_fixtures/controller/users/activity.json';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { EVENT_TYPE_APPROVED } from '~/contribution_events/constants';
+import TargetLink from '~/contribution_events/components/target_link.vue';
+
+const eventApproved = events.find((event) => event.action === EVENT_TYPE_APPROVED);
+
+describe('TargetLink', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(TargetLink, {
+      propsData: {
+        event: eventApproved,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders link', () => {
+    const link = wrapper.findComponent(GlLink);
+
+    expect(link.attributes()).toMatchObject({
+      href: eventApproved.target.web_url,
+      title: eventApproved.target.title,
+    });
+    expect(link.text()).toBe(eventApproved.target.reference_link_text);
+  });
+});
diff --git a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
index 0e2f71fa3ee..4b4deafcabd 100644
--- a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
+++ b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
@@ -32,9 +32,9 @@ describe('CsvImportExportButtons', () => {
     });
   }
 
-  const findExportCsvButton = () => wrapper.findByRole('menuitem', { name: 'Export as CSV' });
-  const findImportCsvButton = () => wrapper.findByRole('menuitem', { name: 'Import CSV' });
-  const findImportFromJiraLink = () => wrapper.findByRole('menuitem', { name: 'Import from Jira' });
+  const findExportCsvButton = () => wrapper.findByTestId('export-as-csv-button');
+  const findImportCsvButton = () => wrapper.findByTestId('import-from-csv-button');
+  const findImportFromJiraLink = () => wrapper.findByTestId('import-from-jira-link');
   const findExportCsvModal = () => wrapper.findComponent(CsvExportModal);
   const findImportCsvModal = () => wrapper.findComponent(CsvImportModal);
 
@@ -111,7 +111,7 @@ describe('CsvImportExportButtons', () => {
           });
 
           it('passes the proper path to the link', () => {
-            expect(findImportFromJiraLink().attributes('href')).toBe(projectImportJiraPath);
+            expect(findImportFromJiraLink().props('item').href).toBe(projectImportJiraPath);
           });
         });
 
diff --git a/spec/frontend/issues/list/components/empty_state_without_any_issues_spec.js b/spec/frontend/issues/list/components/empty_state_without_any_issues_spec.js
index 4ea3a39f15b..a61e7ed1e86 100644
--- a/spec/frontend/issues/list/components/empty_state_without_any_issues_spec.js
+++ b/spec/frontend/issues/list/components/empty_state_without_any_issues_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown, GlEmptyState, GlLink } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlEmptyState, GlLink } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import EmptyStateWithoutAnyIssues from '~/issues/list/components/empty_state_without_any_issues.vue';
@@ -26,7 +26,7 @@ describe('EmptyStateWithoutAnyIssues component', () => {
   };
 
   const findCsvImportExportButtons = () => wrapper.findComponent(CsvImportExportButtons);
-  const findCsvImportExportDropdown = () => wrapper.findComponent(GlDropdown);
+  const findCsvImportExportDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const findGlEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findGlLink = () => wrapper.findComponent(GlLink);
   const findIssuesHelpPageLink = () =>
@@ -136,7 +136,7 @@ describe('EmptyStateWithoutAnyIssues component', () => {
             it('renders', () => {
               mountComponent({ props: { showCsvButtons: true } });
 
-              expect(findCsvImportExportDropdown().props('text')).toBe('Import issues');
+              expect(findCsvImportExportDropdown().props('toggleText')).toBe('Import issues');
               expect(findCsvImportExportButtons().props()).toMatchObject({
                 exportCsvPath: defaultProps.exportCsvPathWithQuery,
                 issuableCount: 0,
diff --git a/spec/frontend/issues/list/components/issues_list_app_spec.js b/spec/frontend/issues/list/components/issues_list_app_spec.js
index 4f37717c933..0e87e5e6595 100644
--- a/spec/frontend/issues/list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues/list/components/issues_list_app_spec.js
@@ -1,4 +1,4 @@
-import { GlButton, GlDropdown } from '@gitlab/ui';
+import { GlButton, GlDisclosureDropdown } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { mount, shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
@@ -15,10 +15,10 @@ import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_help
 import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
+  filteredTokens,
   getIssuesCountsQueryResponse,
-  getIssuesQueryResponse,
   getIssuesQueryEmptyResponse,
-  filteredTokens,
+  getIssuesQueryResponse,
   locationSearch,
   setSortPreferenceMutationResponse,
   setSortPreferenceMutationResponseWithErrors,
@@ -129,10 +129,8 @@ describe('CE IssuesListApp component', () => {
   const mockIssuesQueryResponse = jest.fn().mockResolvedValue(defaultQueryResponse);
   const mockIssuesCountsQueryResponse = jest.fn().mockResolvedValue(getIssuesCountsQueryResponse);
 
-  const findCalendarButton = () =>
-    wrapper.findByRole('menuitem', { name: IssuesListApp.i18n.calendarLabel });
   const findCsvImportExportButtons = () => wrapper.findComponent(CsvImportExportButtons);
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const findIssuableByEmail = () => wrapper.findComponent(IssuableByEmail);
   const findGlButton = () => wrapper.findComponent(GlButton);
   const findGlButtons = () => wrapper.findAllComponents(GlButton);
@@ -141,7 +139,8 @@ describe('CE IssuesListApp component', () => {
   const findGridtViewTypeBtn = () => wrapper.findByTestId('grid-view-type');
   const findViewTypeLocalStorageSync = () => wrapper.findAllComponents(LocalStorageSync).at(0);
   const findNewResourceDropdown = () => wrapper.findComponent(NewResourceDropdown);
-  const findRssButton = () => wrapper.findByRole('menuitem', { name: IssuesListApp.i18n.rssLabel });
+  const findCalendarButton = () => wrapper.findByTestId('subscribe-calendar');
+  const findRssButton = () => wrapper.findByTestId('subscribe-rss');
 
   const findLabelsToken = () =>
     findIssuableList()
@@ -250,7 +249,7 @@ describe('CE IssuesListApp component', () => {
         expect(findDropdown().props()).toMatchObject({
           category: 'tertiary',
           icon: 'ellipsis_v',
-          text: 'Actions',
+          toggleText: 'Actions',
           textSrOnly: true,
         });
       });
diff --git a/spec/frontend/profile/components/overview_tab_spec.js b/spec/frontend/profile/components/overview_tab_spec.js
index aeab24cb730..0122735e8a3 100644
--- a/spec/frontend/profile/components/overview_tab_spec.js
+++ b/spec/frontend/profile/components/overview_tab_spec.js
@@ -1,27 +1,47 @@
 import { GlLoadingIcon, GlTab, GlLink } from '@gitlab/ui';
+import AxiosMockAdapter from 'axios-mock-adapter';
 
 import projects from 'test_fixtures/api/users/projects/get.json';
+import events from 'test_fixtures/controller/users/activity.json';
 import { s__ } from '~/locale';
 import OverviewTab from '~/profile/components/overview_tab.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ActivityCalendar from '~/profile/components/activity_calendar.vue';
 import ProjectsList from '~/vue_shared/components/projects_list/projects_list.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import axios from '~/lib/utils/axios_utils';
+import ContributionEvents from '~/contribution_events/components/contribution_events.vue';
+import { createAlert } from '~/alert';
+import waitForPromises from 'helpers/wait_for_promises';
+
+jest.mock('~/alert');
 
 describe('OverviewTab', () => {
   let wrapper;
+  let axiosMock;
 
   const defaultPropsData = {
     personalProjects: convertObjectPropsToCamelCase(projects, { deep: true }),
     personalProjectsLoading: false,
   };
 
+  const defaultProvide = { userActivityPath: '/users/root/activity.json' };
+
   const createComponent = ({ propsData = {} } = {}) => {
     wrapper = shallowMountExtended(OverviewTab, {
       propsData: { ...defaultPropsData, ...propsData },
+      provide: defaultProvide,
     });
   };
 
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+  });
+
   it('renders `GlTab` and sets `title` prop', () => {
     createComponent();
 
@@ -70,4 +90,50 @@ describe('OverviewTab', () => {
       ).toMatchObject(defaultPropsData.personalProjects);
     });
   });
+
+  describe('when activity API request is loading', () => {
+    beforeEach(() => {
+      axiosMock.onGet(defaultProvide.userActivityPath).reply(200, events);
+
+      createComponent();
+    });
+
+    it('shows loading icon', () => {
+      expect(wrapper.findByTestId('activity-section').findComponent(GlLoadingIcon).exists()).toBe(
+        true,
+      );
+    });
+  });
+
+  describe('when activity API request is successful', () => {
+    beforeEach(() => {
+      axiosMock.onGet(defaultProvide.userActivityPath).reply(200, events);
+
+      createComponent();
+    });
+
+    it('renders `ContributionEvents` component', async () => {
+      await waitForPromises();
+
+      expect(wrapper.findComponent(ContributionEvents).props('events')).toEqual(events);
+    });
+  });
+
+  describe('when activity API request is not successful', () => {
+    beforeEach(() => {
+      axiosMock.onGet(defaultProvide.userActivityPath).networkError();
+
+      createComponent();
+    });
+
+    it('calls `createAlert`', async () => {
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({
+        message: OverviewTab.i18n.eventsErrorMessage,
+        error: new Error('Network Error'),
+        captureError: true,
+      });
+    });
+  });
 });
diff --git a/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js b/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js
index f31a7c8fa5d..4b71ff0bedc 100644
--- a/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js
+++ b/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js
@@ -42,7 +42,7 @@ describe('ScopeSidebarNavigation', () => {
   const findNavItems = () => wrapper.findAllComponents(NavItem);
   const findNavItemActive = () => wrapper.find('[aria-current=page]');
   const findNavItemActiveLabel = () =>
-    findNavItemActive().find('[class="gl-pr-8 gl-text-gray-900 gl-truncate-end"]');
+    findNavItemActive().find('[class="gl-flex-grow-1 gl-text-gray-900 gl-truncate-end"]');
 
   describe('scope navigation', () => {
     beforeEach(() => {
diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
index 30e15595193..0d0e45b64b2 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
@@ -1,28 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
-<gl-dropdown-stub
+<gl-disclosure-dropdown-stub
+  autoclose="true"
   category="primary"
-  clearalltext="Clear all"
-  clearalltextclass="gl-px-5"
-  headertext=""
-  hideheaderborder="true"
-  highlighteditemstitle="Selected"
-  highlighteditemstitleclass="gl-px-5"
-  right="true"
+  icon=""
+  items=""
+  placement="right"
+  positioningstrategy="absolute"
   size="medium"
-  text="Clone"
+  toggleid="dropdown-toggle-btn-2"
+  toggletext="Clone"
   variant="confirm"
 >
-  <div
-    class="pb-2 mx-1"
-  >
-    <gl-dropdown-section-header-stub>
-      Clone with SSH
-    </gl-dropdown-section-header-stub>
-     
-    <div
-      class="mx-3"
+  <gl-disclosure-dropdown-item-stub>
+    <gl-form-group-stub
+      class="gl-px-3 gl-my-3"
+      label="Clone with SSH"
+      labeldescription=""
+      optionaltext="(optional)"
     >
       <b-input-group-stub
         readonly=""
@@ -46,7 +42,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
             aria-label="Copy URL"
             buttontextclasses=""
             category="primary"
-            class="d-inline-flex"
+            class="gl-display-inline-flex"
             data-clipboard-text="ssh://foo.bar"
             data-qa-selector="copy_ssh_url_button"
             icon="copy-to-clipboard"
@@ -56,14 +52,15 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
           />
         </b-input-group-append-stub>
       </b-input-group-stub>
-    </div>
-     
-    <gl-dropdown-section-header-stub>
-      Clone with HTTP
-    </gl-dropdown-section-header-stub>
-     
-    <div
-      class="mx-3"
+    </gl-form-group-stub>
+  </gl-disclosure-dropdown-item-stub>
+   
+  <gl-disclosure-dropdown-item-stub>
+    <gl-form-group-stub
+      class="gl-px-3 gl-mb-3"
+      label="Clone with HTTP"
+      labeldescription=""
+      optionaltext="(optional)"
     >
       <b-input-group-stub
         readonly=""
@@ -87,7 +84,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
             aria-label="Copy URL"
             buttontextclasses=""
             category="primary"
-            class="d-inline-flex"
+            class="gl-display-inline-flex"
             data-clipboard-text="http://foo.bar"
             data-qa-selector="copy_http_url_button"
             icon="copy-to-clipboard"
@@ -97,7 +94,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
           />
         </b-input-group-append-stub>
       </b-input-group-stub>
-    </div>
-  </div>
-</gl-dropdown-stub>
+    </gl-form-group-stub>
+  </gl-disclosure-dropdown-item-stub>
+</gl-disclosure-dropdown-stub>
 `;
diff --git a/spec/frontend/vue_shared/components/clone_dropdown_spec.js b/spec/frontend/vue_shared/components/clone_dropdown_spec.js
index 584e29d94c4..bcc1a4352d8 100644
--- a/spec/frontend/vue_shared/components/clone_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/clone_dropdown_spec.js
@@ -1,4 +1,4 @@
-import { GlFormInputGroup, GlDropdownSectionHeader } from '@gitlab/ui';
+import { GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import CloneDropdown from '~/vue_shared/components/clone_dropdown.vue';
 
@@ -46,7 +46,6 @@ describe('Clone Dropdown Button', () => {
       createComponent({ [name]: value });
 
       expect(wrapper.findComponent(GlFormInputGroup).props('value')).toBe(value);
-      expect(wrapper.findAllComponents(GlDropdownSectionHeader).length).toBe(1);
     });
   });
 
@@ -58,12 +57,12 @@ describe('Clone Dropdown Button', () => {
     `('allows null values for the props', ({ name, value }) => {
       createComponent({ ...defaultPropsData, [name]: value });
 
-      expect(wrapper.findAllComponents(GlDropdownSectionHeader).length).toBe(1);
+      expect(wrapper.findAllComponents(GlFormGroup).length).toBe(1);
     });
 
     it('correctly calculates httpLabel for HTTPS protocol', () => {
       createComponent({ httpLink: httpsLink });
-      expect(wrapper.findComponent(GlDropdownSectionHeader).text()).toContain('HTTPS');
+      expect(wrapper.findComponent(GlFormGroup).attributes('label')).toContain('HTTPS');
     });
   });
 });