Add latest changes from gitlab-org/gitlab@master

29 files changed, 162 insertions, 111 deletions

diff --git a/spec/frontend/crm/organizations_root_spec.js b/spec/frontend/crm/organizations_root_spec.js
index a69a099e03d..cfaeb8ae7e3 100644
--- a/spec/frontend/crm/organizations_root_spec.js
+++ b/spec/frontend/crm/organizations_root_spec.js
@@ -1,16 +1,13 @@
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
 import OrganizationsRoot from '~/crm/components/organizations_root.vue';
 import getGroupOrganizationsQuery from '~/crm/components/queries/get_group_organizations.query.graphql';
 import { getGroupOrganizationsQueryResponse } from './mock_data';
 
-jest.mock('~/flash');
-
 describe('Customer relations organizations root app', () => {
   Vue.use(VueApollo);
   let wrapper;
@@ -18,6 +15,8 @@ describe('Customer relations organizations root app', () => {
 
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findRowByName = (rowName) => wrapper.findAllByRole('row', { name: rowName });
+  const findIssuesLinks = () => wrapper.findAllByTestId('issues-link');
+  const findError = () => wrapper.findComponent(GlAlert);
   const successQueryHandler = jest.fn().mockResolvedValue(getGroupOrganizationsQueryResponse);
 
   const mountComponent = ({
@@ -26,7 +25,7 @@ describe('Customer relations organizations root app', () => {
   } = {}) => {
     fakeApollo = createMockApollo([[getGroupOrganizationsQuery, queryHandler]]);
     wrapper = mountFunction(OrganizationsRoot, {
-      provide: { groupFullPath: 'flightjs' },
+      provide: { groupFullPath: 'flightjs', groupIssuesPath: '/issues' },
       apolloProvider: fakeApollo,
     });
   };
@@ -46,7 +45,7 @@ describe('Customer relations organizations root app', () => {
     mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(findError().exists()).toBe(true);
   });
 
   it('renders correct results', async () => {
@@ -56,5 +55,11 @@ describe('Customer relations organizations root app', () => {
     expect(findRowByName(/Test Inc/i)).toHaveLength(1);
     expect(findRowByName(/VIP/i)).toHaveLength(1);
     expect(findRowByName(/120/i)).toHaveLength(1);
+
+    const issueLink = findIssuesLinks().at(0);
+    expect(issueLink.exists()).toBe(true);
+    expect(issueLink.attributes('href')).toBe(
+      '/issues?scope=all&state=opened&crm_organization_id=2',
+    );
   });
 });
diff --git a/spec/frontend/fixtures/timezones.rb b/spec/frontend/fixtures/timezones.rb
index 157f47855ea..2393f4e797d 100644
--- a/spec/frontend/fixtures/timezones.rb
+++ b/spec/frontend/fixtures/timezones.rb
@@ -8,11 +8,9 @@ RSpec.describe TimeZoneHelper, '(JavaScript fixtures)' do
 
   let(:response) { @timezones.sort_by! { |tz| tz[:name] }.to_json }
 
-  it 'timezones/short.json' do
-    @timezones = timezone_data(format: :short)
-  end
-
-  it 'timezones/full.json' do
-    @timezones = timezone_data(format: :full)
+  %I[short abbr full].each do |format|
+    it "timezones/#{format}.json" do
+      @timezones = timezone_data(format: format)
+    end
   end
 end
diff --git a/spec/frontend/vue_shared/components/issuable/issuable_header_warnings_spec.js b/spec/frontend/issuable/components/issuable_header_warnings_spec.js
index ad8331afcff..11aaa5ca0df 100644
--- a/spec/frontend/vue_shared/components/issuable/issuable_header_warnings_spec.js
+++ b/spec/frontend/issuable/components/issuable_header_warnings_spec.js
@@ -4,7 +4,7 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createStore as createMrStore } from '~/mr_notes/stores';
 import createIssueStore from '~/notes/stores';
-import IssuableHeaderWarnings from '~/vue_shared/components/issuable/issuable_header_warnings.vue';
+import IssuableHeaderWarnings from '~/issuable/components/issuable_header_warnings.vue';
 
 const ISSUABLE_TYPE_ISSUE = 'issue';
 const ISSUABLE_TYPE_MR = 'merge request';
diff --git a/spec/frontend/issue_show/components/app_spec.js b/spec/frontend/issues/show/components/app_spec.js
index e32215b4aa6..0f36303c02a 100644
--- a/spec/frontend/issue_show/components/app_spec.js
+++ b/spec/frontend/issues/show/components/app_spec.js
@@ -4,12 +4,12 @@ import { nextTick } from 'vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import '~/behaviors/markdown/render_gfm';
-import IssuableApp from '~/issue_show/components/app.vue';
-import DescriptionComponent from '~/issue_show/components/description.vue';
-import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue';
-import PinnedLinks from '~/issue_show/components/pinned_links.vue';
-import { IssuableStatus, IssuableStatusText, POLLING_DELAY } from '~/issue_show/constants';
-import eventHub from '~/issue_show/event_hub';
+import IssuableApp from '~/issues/show/components/app.vue';
+import DescriptionComponent from '~/issues/show/components/description.vue';
+import IncidentTabs from '~/issues/show/components/incidents/incident_tabs.vue';
+import PinnedLinks from '~/issues/show/components/pinned_links.vue';
+import { IssuableStatus, IssuableStatusText, POLLING_DELAY } from '~/issues/show/constants';
+import eventHub from '~/issues/show/event_hub';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import {
@@ -25,7 +25,7 @@ function formatText(text) {
 }
 
 jest.mock('~/lib/utils/url_utility');
-jest.mock('~/issue_show/event_hub');
+jest.mock('~/issues/show/event_hub');
 
 const REALTIME_REQUEST_STACK = [initialRequest, secondRequest];
 
diff --git a/spec/frontend/issue_show/components/description_spec.js b/spec/frontend/issues/show/components/description_spec.js
index bdcc82cab81..d39e00b9c9e 100644
--- a/spec/frontend/issue_show/components/description_spec.js
+++ b/spec/frontend/issues/show/components/description_spec.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import '~/behaviors/markdown/render_gfm';
 import { TEST_HOST } from 'helpers/test_constants';
 import mountComponent from 'helpers/vue_mount_component_helper';
-import Description from '~/issue_show/components/description.vue';
+import Description from '~/issues/show/components/description.vue';
 import TaskList from '~/task_list';
 import { descriptionProps as props } from '../mock_data/mock_data';
 
diff --git a/spec/frontend/issue_show/components/edit_actions_spec.js b/spec/frontend/issues/show/components/edit_actions_spec.js
index 50c27cb5bda..711991a6e91 100644
--- a/spec/frontend/issue_show/components/edit_actions_spec.js
+++ b/spec/frontend/issues/show/components/edit_actions_spec.js
@@ -4,8 +4,8 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import IssuableEditActions from '~/issue_show/components/edit_actions.vue';
-import eventHub from '~/issue_show/event_hub';
+import IssuableEditActions from '~/issues/show/components/edit_actions.vue';
+import eventHub from '~/issues/show/event_hub';
 
 import {
   getIssueStateQueryResponse,
diff --git a/spec/frontend/issue_show/components/edited_spec.js b/spec/frontend/issues/show/components/edited_spec.js
index a1683f060c0..8a8fe23230a 100644
--- a/spec/frontend/issue_show/components/edited_spec.js
+++ b/spec/frontend/issues/show/components/edited_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import edited from '~/issue_show/components/edited.vue';
+import edited from '~/issues/show/components/edited.vue';
 
 function formatText(text) {
   return text.trim().replace(/\s\s+/g, ' ');
diff --git a/spec/frontend/issue_show/components/fields/description_spec.js b/spec/frontend/issues/show/components/fields/description_spec.js
index a50be30cf4c..3043c4c3673 100644
--- a/spec/frontend/issue_show/components/fields/description_spec.js
+++ b/spec/frontend/issues/show/components/fields/description_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import DescriptionField from '~/issue_show/components/fields/description.vue';
-import eventHub from '~/issue_show/event_hub';
+import DescriptionField from '~/issues/show/components/fields/description.vue';
+import eventHub from '~/issues/show/event_hub';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 
 describe('Description field component', () => {
diff --git a/spec/frontend/issue_show/components/fields/description_template_spec.js b/spec/frontend/issues/show/components/fields/description_template_spec.js
index dc126c53f5e..abe2805e5b2 100644
--- a/spec/frontend/issue_show/components/fields/description_template_spec.js
+++ b/spec/frontend/issues/show/components/fields/description_template_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import descriptionTemplate from '~/issue_show/components/fields/description_template.vue';
+import descriptionTemplate from '~/issues/show/components/fields/description_template.vue';
 
 describe('Issue description template component with templates as hash', () => {
   let vm;
diff --git a/spec/frontend/issue_show/components/fields/title_spec.js b/spec/frontend/issues/show/components/fields/title_spec.js
index 783ce9eb76c..efd0b6fbd30 100644
--- a/spec/frontend/issue_show/components/fields/title_spec.js
+++ b/spec/frontend/issues/show/components/fields/title_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import TitleField from '~/issue_show/components/fields/title.vue';
-import eventHub from '~/issue_show/event_hub';
+import TitleField from '~/issues/show/components/fields/title.vue';
+import eventHub from '~/issues/show/event_hub';
 
 describe('Title field component', () => {
   let wrapper;
diff --git a/spec/frontend/issue_show/components/fields/type_spec.js b/spec/frontend/issues/show/components/fields/type_spec.js
index 95ae6f37877..3ece10e70db 100644
--- a/spec/frontend/issue_show/components/fields/type_spec.js
+++ b/spec/frontend/issues/show/components/fields/type_spec.js
@@ -3,8 +3,8 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import IssueTypeField, { i18n } from '~/issue_show/components/fields/type.vue';
-import { IssuableTypes } from '~/issue_show/constants';
+import IssueTypeField, { i18n } from '~/issues/show/components/fields/type.vue';
+import { IssuableTypes } from '~/issues/show/constants';
 import {
   getIssueStateQueryResponse,
   updateIssueStateQueryResponse,
diff --git a/spec/frontend/issue_show/components/form_spec.js b/spec/frontend/issues/show/components/form_spec.js
index 28498cb90ec..5cb898ac428 100644
--- a/spec/frontend/issue_show/components/form_spec.js
+++ b/spec/frontend/issues/show/components/form_spec.js
@@ -1,11 +1,11 @@
 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Autosave from '~/autosave';
-import DescriptionTemplate from '~/issue_show/components/fields/description_template.vue';
-import IssueTypeField from '~/issue_show/components/fields/type.vue';
-import formComponent from '~/issue_show/components/form.vue';
-import LockedWarning from '~/issue_show/components/locked_warning.vue';
-import eventHub from '~/issue_show/event_hub';
+import DescriptionTemplate from '~/issues/show/components/fields/description_template.vue';
+import IssueTypeField from '~/issues/show/components/fields/type.vue';
+import formComponent from '~/issues/show/components/form.vue';
+import LockedWarning from '~/issues/show/components/locked_warning.vue';
+import eventHub from '~/issues/show/event_hub';
 
 jest.mock('~/autosave');
 
diff --git a/spec/frontend/issue_show/components/header_actions_spec.js b/spec/frontend/issues/show/components/header_actions_spec.js
index 4df62ec8717..9556d54104f 100644
--- a/spec/frontend/issue_show/components/header_actions_spec.js
+++ b/spec/frontend/issues/show/components/header_actions_spec.js
@@ -3,9 +3,9 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { IssuableType } from '~/issuable_show/constants';
-import HeaderActions from '~/issue_show/components/header_actions.vue';
-import { IssuableStatus, IssueStateEvent } from '~/issue_show/constants';
-import promoteToEpicMutation from '~/issue_show/queries/promote_to_epic.mutation.graphql';
+import HeaderActions from '~/issues/show/components/header_actions.vue';
+import { IssuableStatus, IssueStateEvent } from '~/issues/show/constants';
+import promoteToEpicMutation from '~/issues/show/queries/promote_to_epic.mutation.graphql';
 import * as urlUtility from '~/lib/utils/url_utility';
 import eventHub from '~/notes/event_hub';
 import createStore from '~/notes/stores';
diff --git a/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js b/spec/frontend/issues/show/components/incidents/highlight_bar_spec.js
index 6758e6192b8..a4910d63bb5 100644
--- a/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js
+++ b/spec/frontend/issues/show/components/incidents/highlight_bar_spec.js
@@ -1,7 +1,7 @@
 import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import merge from 'lodash/merge';
-import HighlightBar from '~/issue_show/components/incidents/highlight_bar.vue';
+import HighlightBar from '~/issues/show/components/incidents/highlight_bar.vue';
 import { formatDate } from '~/lib/utils/datetime_utility';
 
 jest.mock('~/lib/utils/datetime_utility');
diff --git a/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js b/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js
index 6b9f5b17e99..9bf0e106194 100644
--- a/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js
+++ b/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js
@@ -3,9 +3,9 @@ import { shallowMount } from '@vue/test-utils';
 import merge from 'lodash/merge';
 import waitForPromises from 'helpers/wait_for_promises';
 import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
-import DescriptionComponent from '~/issue_show/components/description.vue';
-import HighlightBar from '~/issue_show/components/incidents/highlight_bar.vue';
-import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue';
+import DescriptionComponent from '~/issues/show/components/description.vue';
+import HighlightBar from '~/issues/show/components/incidents/highlight_bar.vue';
+import IncidentTabs from '~/issues/show/components/incidents/incident_tabs.vue';
 import INVALID_URL from '~/lib/utils/invalid_url';
 import Tracking from '~/tracking';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
diff --git a/spec/frontend/issue_show/components/pinned_links_spec.js b/spec/frontend/issues/show/components/pinned_links_spec.js
index 3fe1f9fd6d9..aac720df6e9 100644
--- a/spec/frontend/issue_show/components/pinned_links_spec.js
+++ b/spec/frontend/issues/show/components/pinned_links_spec.js
@@ -1,7 +1,7 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import PinnedLinks from '~/issue_show/components/pinned_links.vue';
-import { STATUS_PAGE_PUBLISHED, JOIN_ZOOM_MEETING } from '~/issue_show/constants';
+import PinnedLinks from '~/issues/show/components/pinned_links.vue';
+import { STATUS_PAGE_PUBLISHED, JOIN_ZOOM_MEETING } from '~/issues/show/constants';
 
 const plainZoomUrl = 'https://zoom.us/j/123456789';
 const plainStatusUrl = 'https://status.com';
diff --git a/spec/frontend/issue_show/components/title_spec.js b/spec/frontend/issues/show/components/title_spec.js
index 78880a7f540..f9026557be2 100644
--- a/spec/frontend/issue_show/components/title_spec.js
+++ b/spec/frontend/issues/show/components/title_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import titleComponent from '~/issue_show/components/title.vue';
-import eventHub from '~/issue_show/event_hub';
-import Store from '~/issue_show/stores';
+import titleComponent from '~/issues/show/components/title.vue';
+import eventHub from '~/issues/show/event_hub';
+import Store from '~/issues/show/stores';
 
 describe('Title component', () => {
   let vm;
diff --git a/spec/frontend/issue_show/issue_spec.js b/spec/frontend/issues/show/issue_spec.js
index 76989413edb..0de5e7f774f 100644
--- a/spec/frontend/issue_show/issue_spec.js
+++ b/spec/frontend/issues/show/issue_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import { initIssuableApp } from '~/issue_show/issue';
-import * as parseData from '~/issue_show/utils/parse_data';
+import { initIssuableApp } from '~/issues/show/issue';
+import * as parseData from '~/issues/show/utils/parse_data';
 import axios from '~/lib/utils/axios_utils';
 import createStore from '~/notes/stores';
 import { appProps } from './mock_data/mock_data';
diff --git a/spec/frontend/issue_show/mock_data/apollo_mock.js b/spec/frontend/issues/show/mock_data/apollo_mock.js
index bfd31e74393..bfd31e74393 100644
--- a/spec/frontend/issue_show/mock_data/apollo_mock.js
+++ b/spec/frontend/issues/show/mock_data/apollo_mock.js
diff --git a/spec/frontend/issue_show/mock_data/mock_data.js b/spec/frontend/issues/show/mock_data/mock_data.js
index a73826954c3..a73826954c3 100644
--- a/spec/frontend/issue_show/mock_data/mock_data.js
+++ b/spec/frontend/issues/show/mock_data/mock_data.js
diff --git a/spec/frontend/issue_show/store_spec.js b/spec/frontend/issues/show/store_spec.js
index b7fd70bf00e..20d3a6cdaae 100644
--- a/spec/frontend/issue_show/store_spec.js
+++ b/spec/frontend/issues/show/store_spec.js
@@ -1,7 +1,7 @@
-import Store from '~/issue_show/stores';
-import updateDescription from '~/issue_show/utils/update_description';
+import Store from '~/issues/show/stores';
+import updateDescription from '~/issues/show/utils/update_description';
 
-jest.mock('~/issue_show/utils/update_description');
+jest.mock('~/issues/show/utils/update_description');
 
 describe('Store', () => {
   let store;
diff --git a/spec/frontend/issue_show/utils/update_description_spec.js b/spec/frontend/issues/show/utils/update_description_spec.js
index b2c6bd3c302..f4afef8af12 100644
--- a/spec/frontend/issue_show/utils/update_description_spec.js
+++ b/spec/frontend/issues/show/utils/update_description_spec.js
@@ -1,4 +1,4 @@
-import updateDescription from '~/issue_show/utils/update_description';
+import updateDescription from '~/issues/show/utils/update_description';
 
 describe('updateDescription', () => {
   it('returns the correct value to be set as descriptionHtml', () => {
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index db4de6deeb7..04e004dc6c1 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -1,7 +1,7 @@
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -98,7 +98,6 @@ describe('Pipeline graph wrapper', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   beforeAll(() => {
@@ -136,7 +135,7 @@ describe('Pipeline graph wrapper', () => {
     beforeEach(async () => {
       createComponentWithApollo();
       jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('does not display the loading icon', () => {
@@ -165,7 +164,7 @@ describe('Pipeline graph wrapper', () => {
         getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')),
       });
       jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('does not display the loading icon', () => {
@@ -189,7 +188,7 @@ describe('Pipeline graph wrapper', () => {
         },
       });
       jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('does not display the loading icon', () => {
@@ -211,7 +210,7 @@ describe('Pipeline graph wrapper', () => {
       createComponentWithApollo();
       jest.spyOn(wrapper.vm.$apollo.queries.headerPipeline, 'refetch');
       jest.spyOn(wrapper.vm.$apollo.queries.pipeline, 'refetch');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       getGraph().vm.$emit('refreshPipelineGraph');
     });
 
@@ -225,8 +224,8 @@ describe('Pipeline graph wrapper', () => {
   describe('when query times out', () => {
     const advanceApolloTimers = async () => {
       jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
-      await wrapper.vm.$nextTick();
+      await nextTick();
+      await nextTick();
     };
 
     beforeEach(async () => {
@@ -246,7 +245,7 @@ describe('Pipeline graph wrapper', () => {
         .mockResolvedValueOnce(errorData);
 
       createComponentWithApollo({ getPipelineDetailsHandler: failSucceedFail });
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('shows correct errors and does not overwrite populated data when data is empty', async () => {
@@ -276,7 +275,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('appears when pipeline uses needs', () => {
@@ -319,7 +318,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('sets showLinks to true', async () => {
@@ -329,7 +328,7 @@ describe('Pipeline graph wrapper', () => {
         expect(getViewSelector().props('type')).toBe(LAYER_VIEW);
         await getDependenciesToggle().vm.$emit('change', true);
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(LinksLayer).props('showLinks')).toBe(true);
       });
     });
@@ -345,7 +344,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('shows the hover tip in the view selector', async () => {
@@ -366,7 +365,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('does not show the hover tip', async () => {
@@ -384,7 +383,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       afterEach(() => {
@@ -393,9 +392,10 @@ describe('Pipeline graph wrapper', () => {
 
       it('reads the view type from localStorage when available', () => {
         const viewSelectorNeedsSegment = wrapper
-          .findAll('[data-testid="pipeline-view-selector"] > label')
+          .find(GlButtonGroup)
+          .findAllComponents(GlButton)
           .at(1);
-        expect(viewSelectorNeedsSegment.classes()).toContain('active');
+        expect(viewSelectorNeedsSegment.classes()).toContain('selected');
       });
     });
 
@@ -412,7 +412,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       afterEach(() => {
@@ -435,7 +435,7 @@ describe('Pipeline graph wrapper', () => {
         });
 
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('does not appear when pipeline does not use needs', () => {
@@ -462,7 +462,7 @@ describe('Pipeline graph wrapper', () => {
       beforeEach(async () => {
         createComponentWithApollo();
         jest.runOnlyPendingTimers();
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('is not called', () => {
@@ -506,7 +506,7 @@ describe('Pipeline graph wrapper', () => {
           });
 
           jest.runOnlyPendingTimers();
-          await wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('attempts to collect metrics', () => {
diff --git a/spec/frontend/pipelines/graph/graph_view_selector_spec.js b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
index f4faa25545b..f574f4dccc5 100644
--- a/spec/frontend/pipelines/graph/graph_view_selector_spec.js
+++ b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
@@ -1,4 +1,4 @@
-import { GlAlert, GlLoadingIcon, GlSegmentedControl } from '@gitlab/ui';
+import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import { LAYER_VIEW, STAGE_VIEW } from '~/pipelines/components/graph/constants';
 import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.vue';
@@ -7,9 +7,9 @@ describe('the graph view selector component', () => {
   let wrapper;
 
   const findDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
-  const findViewTypeSelector = () => wrapper.findComponent(GlSegmentedControl);
-  const findStageViewLabel = () => findViewTypeSelector().findAll('label').at(0);
-  const findLayersViewLabel = () => findViewTypeSelector().findAll('label').at(1);
+  const findViewTypeSelector = () => wrapper.findComponent(GlButtonGroup);
+  const findStageViewButton = () => findViewTypeSelector().findAllComponents(GlButton).at(0);
+  const findLayerViewButton = () => findViewTypeSelector().findAllComponents(GlButton).at(1);
   const findSwitcherLoader = () => wrapper.find('[data-testid="switcher-loading-state"]');
   const findToggleLoader = () => findDependenciesToggle().find(GlLoadingIcon);
   const findHoverTip = () => wrapper.findComponent(GlAlert);
@@ -51,8 +51,13 @@ describe('the graph view selector component', () => {
       createComponent({ mountFn: mount });
     });
 
-    it('shows the Stage view label as active in the selector', () => {
-      expect(findStageViewLabel().classes()).toContain('active');
+    it('shows the Stage view button as selected', () => {
+      expect(findStageViewButton().classes('selected')).toBe(true);
+    });
+
+    it('shows the Job dependencies view button not selected', () => {
+      expect(findLayerViewButton().exists()).toBe(true);
+      expect(findLayerViewButton().classes('selected')).toBe(false);
     });
 
     it('does not show the Job dependencies (links) toggle', () => {
@@ -70,8 +75,13 @@ describe('the graph view selector component', () => {
       });
     });
 
-    it('shows the Job dependencies view label as active in the selector', () => {
-      expect(findLayersViewLabel().classes()).toContain('active');
+    it('shows the Job dependencies view as selected', () => {
+      expect(findLayerViewButton().classes('selected')).toBe(true);
+    });
+
+    it('shows the Stage button as not selected', () => {
+      expect(findStageViewButton().exists()).toBe(true);
+      expect(findStageViewButton().classes('selected')).toBe(false);
     });
 
     it('shows the Job dependencies (links) toggle', () => {
@@ -94,7 +104,7 @@ describe('the graph view selector component', () => {
       expect(wrapper.emitted().updateViewType).toBeUndefined();
       expect(findSwitcherLoader().exists()).toBe(false);
 
-      await findStageViewLabel().trigger('click');
+      await findStageViewButton().trigger('click');
       /*
         Loading happens before the event is emitted or timers are run.
         Then we run the timer because the event is emitted in setInterval
@@ -123,6 +133,14 @@ describe('the graph view selector component', () => {
       expect(wrapper.emitted().updateShowLinksState).toHaveLength(1);
       expect(wrapper.emitted().updateShowLinksState).toEqual([[true]]);
     });
+
+    it('does not emit an event if the click occurs on the currently selected view button', async () => {
+      expect(wrapper.emitted().updateShowLinksState).toBeUndefined();
+
+      await findLayerViewButton().trigger('click');
+
+      expect(wrapper.emitted().updateShowLinksState).toBeUndefined();
+    });
   });
 
   describe('hover tip callout', () => {
diff --git a/spec/frontend/runner/components/runner_contacted_state_badge_spec.js b/spec/frontend/runner/components/runner_status_badge_spec.js
index 57a27f39826..e8ad4ae46bd 100644
--- a/spec/frontend/runner/components/runner_contacted_state_badge_spec.js
+++ b/spec/frontend/runner/components/runner_status_badge_spec.js
@@ -1,8 +1,13 @@
 import { GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import RunnerContactedStateBadge from '~/runner/components/runner_contacted_state_badge.vue';
+import RunnerStatusBadge from '~/runner/components/runner_status_badge.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import { STATUS_ONLINE, STATUS_OFFLINE, STATUS_NOT_CONNECTED } from '~/runner/constants';
+import {
+  STATUS_ONLINE,
+  STATUS_OFFLINE,
+  STATUS_STALE,
+  STATUS_NOT_CONNECTED,
+} from '~/runner/constants';
 
 describe('RunnerTypeBadge', () => {
   let wrapper;
@@ -10,14 +15,14 @@ describe('RunnerTypeBadge', () => {
   const findBadge = () => wrapper.findComponent(GlBadge);
   const getTooltip = () => getBinding(findBadge().element, 'gl-tooltip');
 
-  const createComponent = ({ runner = {} } = {}) => {
-    wrapper = shallowMount(RunnerContactedStateBadge, {
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(RunnerStatusBadge, {
       propsData: {
         runner: {
-          contactedAt: '2021-01-01T00:00:00Z',
+          contactedAt: '2020-12-31T23:59:00Z',
           status: STATUS_ONLINE,
-          ...runner,
         },
+        ...props,
       },
       directives: {
         GlTooltip: createMockDirective(),
@@ -27,6 +32,7 @@ describe('RunnerTypeBadge', () => {
 
   beforeEach(() => {
     jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2021-01-01T00:00:00Z'));
   });
 
   afterEach(() => {
@@ -36,8 +42,6 @@ describe('RunnerTypeBadge', () => {
   });
 
   it('renders online state', () => {
-    jest.setSystemTime(new Date('2021-01-01T00:01:00Z'));
-
     createComponent();
 
     expect(wrapper.text()).toBe('online');
@@ -45,11 +49,23 @@ describe('RunnerTypeBadge', () => {
     expect(getTooltip().value).toBe('Runner is online; last contact was 1 minute ago');
   });
 
-  it('renders offline state', () => {
-    jest.setSystemTime(new Date('2021-01-02T00:00:00Z'));
+  it('renders not connected state', () => {
+    createComponent({
+      runner: {
+        contactedAt: null,
+        status: STATUS_NOT_CONNECTED,
+      },
+    });
+
+    expect(wrapper.text()).toBe('not connected');
+    expect(findBadge().props('variant')).toBe('muted');
+    expect(getTooltip().value).toMatch('This runner has never connected');
+  });
 
+  it('renders offline state', () => {
     createComponent({
       runner: {
+        contactedAt: '2020-12-31T00:00:00Z',
         status: STATUS_OFFLINE,
       },
     });
@@ -61,26 +77,40 @@ describe('RunnerTypeBadge', () => {
     );
   });
 
-  it('renders not connected state', () => {
+  it('renders stale state', () => {
     createComponent({
       runner: {
-        contactedAt: null,
-        status: STATUS_NOT_CONNECTED,
+        contactedAt: '2020-01-01T00:00:00Z',
+        status: STATUS_STALE,
       },
     });
 
-    expect(wrapper.text()).toBe('not connected');
-    expect(findBadge().props('variant')).toBe('muted');
-    expect(getTooltip().value).toMatch('This runner has never connected');
+    expect(wrapper.text()).toBe('stale');
+    expect(findBadge().props('variant')).toBe('warning');
+    expect(getTooltip().value).toBe('No contact from this runner in over 3 months');
   });
 
-  it('does not fail when data is missing', () => {
-    createComponent({
-      runner: {
-        status: null,
-      },
+  describe('does not fail when data is missing', () => {
+    it('contacted_at is missing', () => {
+      createComponent({
+        runner: {
+          contactedAt: null,
+          status: STATUS_ONLINE,
+        },
+      });
+
+      expect(wrapper.text()).toBe('online');
+      expect(getTooltip().value).toBe('Runner is online; last contact was n/a');
     });
 
-    expect(wrapper.text()).toBe('');
+    it('status is missing', () => {
+      createComponent({
+        runner: {
+          status: null,
+        },
+      });
+
+      expect(wrapper.text()).toBe('');
+    });
   });
 });
diff --git a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
index 39f63b2a9f4..9c57a3fcf8d 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
@@ -5,7 +5,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/show/constants';
 import SidebarAssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
 import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
diff --git a/spec/frontend/sidebar/components/reference/sidebar_reference_widget_spec.js b/spec/frontend/sidebar/components/reference/sidebar_reference_widget_spec.js
index cc428693930..d2459faf83a 100644
--- a/spec/frontend/sidebar/components/reference/sidebar_reference_widget_spec.js
+++ b/spec/frontend/sidebar/components/reference/sidebar_reference_widget_spec.js
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/show/constants';
 import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import issueReferenceQuery from '~/sidebar/queries/issue_reference.query.graphql';
 import mergeRequestReferenceQuery from '~/sidebar/queries/merge_request_reference.query.graphql';
diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
index c9c121d12a6..bfd6fc22cf5 100644
--- a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
+++ b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
@@ -17,7 +17,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/show/constants';
 import { timeFor } from '~/lib/utils/datetime_utility';
 import SidebarDropdownWidget from '~/sidebar/components/sidebar_dropdown_widget.vue';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
index 7c3b7ae0ff5..aaa636503a3 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
+import { IssuableType } from '~/issues/show/constants';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import DropdownContents from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue';
 import DropdownValue from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue';