Add latest changes from gitlab-org/gitlab@master

23 files changed, 147 insertions, 114 deletions

diff --git a/spec/controllers/projects/artifacts_controller_spec.rb b/spec/controllers/projects/artifacts_controller_spec.rb
index 00efd7d7b56..61a30cbec01 100644
--- a/spec/controllers/projects/artifacts_controller_spec.rb
+++ b/spec/controllers/projects/artifacts_controller_spec.rb
@@ -423,6 +423,16 @@ RSpec.describe Projects::ArtifactsController do
         end
       end
 
+      context 'when artifacts archive is missing' do
+        let!(:job) { create(:ci_build, :success, pipeline: pipeline) }
+
+        it 'returns 404' do
+          subject
+
+          expect(response).to have_gitlab_http_status(:not_found)
+        end
+      end
+
       context 'fetching an artifact of different type' do
         before do
           job.job_artifacts.each(&:destroy)
diff --git a/spec/features/commit_spec.rb b/spec/features/commit_spec.rb
index 649b67e7fd0..a9672569a4a 100644
--- a/spec/features/commit_spec.rb
+++ b/spec/features/commit_spec.rb
@@ -22,6 +22,8 @@ RSpec.describe 'Commit', feature_category: :source_code_management do
     end
 
     describe "commit details" do
+      subject { page }
+
       before do
         visit project_commit_path(project, commit)
       end
@@ -37,6 +39,8 @@ RSpec.describe 'Commit', feature_category: :source_code_management do
       it 'renders diff stats', :js do
         expect(page).to have_selector(".diff-stats")
       end
+
+      it_behaves_like 'code highlight'
     end
 
     describe "pagination" do
diff --git a/spec/frontend/admin/broadcast_messages/components/message_form_spec.js b/spec/frontend/admin/broadcast_messages/components/message_form_spec.js
index 88ea79f38b3..36c0ac303ba 100644
--- a/spec/frontend/admin/broadcast_messages/components/message_form_spec.js
+++ b/spec/frontend/admin/broadcast_messages/components/message_form_spec.js
@@ -3,7 +3,7 @@ import { GlBroadcastMessage, GlForm } from '@gitlab/ui';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import httpStatus from '~/lib/utils/http_status';
+import { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 import MessageForm from '~/admin/broadcast_messages/components/message_form.vue';
 import {
   BROADCAST_MESSAGES_PATH,
@@ -160,7 +160,7 @@ describe('MessageForm', () => {
 
     it('shows an error alert if the create request fails', async () => {
       createComponent({ broadcastMessage: { id: undefined } });
-      axiosMock.onPost(BROADCAST_MESSAGES_PATH).replyOnce(httpStatus.BAD_REQUEST);
+      axiosMock.onPost(BROADCAST_MESSAGES_PATH).replyOnce(HTTP_STATUS_BAD_REQUEST);
       findForm().vm.$emit('submit', { preventDefault: () => {} });
       await waitForPromises();
 
@@ -187,7 +187,7 @@ describe('MessageForm', () => {
     it('shows an error alert if the update request fails', async () => {
       const id = 1337;
       createComponent({ broadcastMessage: { id } });
-      axiosMock.onPost(`${BROADCAST_MESSAGES_PATH}/${id}`).replyOnce(httpStatus.BAD_REQUEST);
+      axiosMock.onPost(`${BROADCAST_MESSAGES_PATH}/${id}`).replyOnce(HTTP_STATUS_BAD_REQUEST);
       findForm().vm.$emit('submit', { preventDefault: () => {} });
       await waitForPromises();
 
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
index 62a3e07186a..a15c78cc456 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
@@ -32,7 +32,7 @@ import {
 } from '~/alerts_settings/utils/error_messages';
 import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import httpStatusCodes, { HTTP_STATUS_UNPROCESSABLE_ENTITY } from '~/lib/utils/http_status';
+import { HTTP_STATUS_FORBIDDEN, HTTP_STATUS_UNPROCESSABLE_ENTITY } from '~/lib/utils/http_status';
 import {
   createHttpVariables,
   updateHttpVariables,
@@ -365,7 +365,7 @@ describe('AlertsSettingsWrapper', () => {
       });
 
       it('shows an error alert when integration is not activated', async () => {
-        mock.onPost(/(.*)/).replyOnce(httpStatusCodes.FORBIDDEN);
+        mock.onPost(/(.*)/).replyOnce(HTTP_STATUS_FORBIDDEN);
         await wrapper.vm.testAlertPayload({ endpoint: '', data: '', token: '' });
         expect(createAlert).toHaveBeenCalledWith({
           message: INTEGRATION_INACTIVE_PAYLOAD_TEST_ERROR,
diff --git a/spec/frontend/analytics/cycle_analytics/store/actions_spec.js b/spec/frontend/analytics/cycle_analytics/store/actions_spec.js
index f87807804c9..3f5f1dbb51b 100644
--- a/spec/frontend/analytics/cycle_analytics/store/actions_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/store/actions_spec.js
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/analytics/cycle_analytics/store/actions';
 import * as getters from '~/analytics/cycle_analytics/store/getters';
-import httpStatusCodes from '~/lib/utils/http_status';
+import httpStatusCodes, { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 import {
   allowedStages,
   selectedStage,
@@ -247,7 +247,7 @@ describe('Project Value Stream Analytics actions', () => {
           selectedStage,
         };
         mock = new MockAdapter(axios);
-        mock.onGet(mockStagePath).reply(httpStatusCodes.BAD_REQUEST);
+        mock.onGet(mockStagePath).reply(HTTP_STATUS_BAD_REQUEST);
       });
 
       it(`commits the 'RECEIVE_STAGE_DATA_ERROR' mutation`, () =>
@@ -284,7 +284,7 @@ describe('Project Value Stream Analytics actions', () => {
     describe('with a failing request', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
-        mock.onGet(mockValueStreamPath).reply(httpStatusCodes.BAD_REQUEST);
+        mock.onGet(mockValueStreamPath).reply(HTTP_STATUS_BAD_REQUEST);
       });
 
       it(`commits the 'RECEIVE_VALUE_STREAMS_ERROR' mutation`, () =>
@@ -294,7 +294,7 @@ describe('Project Value Stream Analytics actions', () => {
           payload: {},
           expectedMutations: [
             { type: 'REQUEST_VALUE_STREAMS' },
-            { type: 'RECEIVE_VALUE_STREAMS_ERROR', payload: httpStatusCodes.BAD_REQUEST },
+            { type: 'RECEIVE_VALUE_STREAMS_ERROR', payload: HTTP_STATUS_BAD_REQUEST },
           ],
           expectedActions: [],
         }));
@@ -355,7 +355,7 @@ describe('Project Value Stream Analytics actions', () => {
     describe('with a failing request', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
-        mock.onGet(mockValueStreamPath).reply(httpStatusCodes.BAD_REQUEST);
+        mock.onGet(mockValueStreamPath).reply(HTTP_STATUS_BAD_REQUEST);
       });
 
       it(`commits the 'RECEIVE_VALUE_STREAM_STAGES_ERROR' mutation`, () =>
@@ -365,7 +365,7 @@ describe('Project Value Stream Analytics actions', () => {
           payload: {},
           expectedMutations: [
             { type: 'REQUEST_VALUE_STREAM_STAGES' },
-            { type: 'RECEIVE_VALUE_STREAM_STAGES_ERROR', payload: httpStatusCodes.BAD_REQUEST },
+            { type: 'RECEIVE_VALUE_STREAM_STAGES_ERROR', payload: HTTP_STATUS_BAD_REQUEST },
           ],
           expectedActions: [],
         }));
@@ -382,7 +382,7 @@ describe('Project Value Stream Analytics actions', () => {
     ];
 
     const stageMedianError = new Error(
-      `Request failed with status code ${httpStatusCodes.BAD_REQUEST}`,
+      `Request failed with status code ${HTTP_STATUS_BAD_REQUEST}`,
     );
 
     beforeEach(() => {
@@ -410,7 +410,7 @@ describe('Project Value Stream Analytics actions', () => {
     describe('with a failing request', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
-        mock.onGet(mockValueStreamPath).reply(httpStatusCodes.BAD_REQUEST);
+        mock.onGet(mockValueStreamPath).reply(HTTP_STATUS_BAD_REQUEST);
       });
 
       it(`commits the 'RECEIVE_VALUE_STREAM_STAGES_ERROR' mutation`, () =>
@@ -435,9 +435,7 @@ describe('Project Value Stream Analytics actions', () => {
       { id: 'code', count: 3 },
     ];
 
-    const stageCountError = new Error(
-      `Request failed with status code ${httpStatusCodes.BAD_REQUEST}`,
-    );
+    const stageCountError = new Error(`Request failed with status code ${HTTP_STATUS_BAD_REQUEST}`);
 
     beforeEach(() => {
       state = {
@@ -470,7 +468,7 @@ describe('Project Value Stream Analytics actions', () => {
     describe('with a failing request', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
-        mock.onGet(mockValueStreamPath).reply(httpStatusCodes.BAD_REQUEST);
+        mock.onGet(mockValueStreamPath).reply(HTTP_STATUS_BAD_REQUEST);
       });
 
       it(`commits the 'RECEIVE_STAGE_COUNTS_ERROR' mutation`, () =>
diff --git a/spec/frontend/commit/pipelines/pipelines_table_spec.js b/spec/frontend/commit/pipelines/pipelines_table_spec.js
index d89a238105b..ecab88e378b 100644
--- a/spec/frontend/commit/pipelines/pipelines_table_spec.js
+++ b/spec/frontend/commit/pipelines/pipelines_table_spec.js
@@ -7,7 +7,10 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
 import PipelinesTable from '~/commit/pipelines/pipelines_table.vue';
-import httpStatusCodes from '~/lib/utils/http_status';
+import httpStatusCodes, {
+  HTTP_STATUS_BAD_REQUEST,
+  HTTP_STATUS_UNAUTHORIZED,
+} from '~/lib/utils/http_status';
 import { createAlert } from '~/flash';
 import { TOAST_MESSAGE } from '~/pipelines/constants';
 import axios from '~/lib/utils/axios_utils';
@@ -244,8 +247,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
         it.each`
           status                                   | message
-          ${httpStatusCodes.BAD_REQUEST}           | ${defaultMsg}
-          ${httpStatusCodes.UNAUTHORIZED}          | ${permissionsMsg}
+          ${HTTP_STATUS_BAD_REQUEST}               | ${defaultMsg}
+          ${HTTP_STATUS_UNAUTHORIZED}              | ${permissionsMsg}
           ${httpStatusCodes.INTERNAL_SERVER_ERROR} | ${defaultMsg}
         `('displays permissions error message', async ({ status, message }) => {
           const response = { response: { status } };
diff --git a/spec/frontend/error_tracking/store/list/actions_spec.js b/spec/frontend/error_tracking/store/list/actions_spec.js
index 2809bbe834e..4a3e0de3ae9 100644
--- a/spec/frontend/error_tracking/store/list/actions_spec.js
+++ b/spec/frontend/error_tracking/store/list/actions_spec.js
@@ -4,7 +4,7 @@ import * as actions from '~/error_tracking/store/list/actions';
 import * as types from '~/error_tracking/store/list/mutation_types';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import httpStatusCodes from '~/lib/utils/http_status';
+import httpStatusCodes, { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 
 jest.mock('~/flash.js');
 
@@ -39,7 +39,7 @@ describe('error tracking actions', () => {
     });
 
     it('should show flash on API error', async () => {
-      mock.onGet().reply(httpStatusCodes.BAD_REQUEST);
+      mock.onGet().reply(HTTP_STATUS_BAD_REQUEST);
 
       await testAction(
         actions.startPolling,
diff --git a/spec/frontend/ide/stores/modules/terminal/actions/checks_spec.js b/spec/frontend/ide/stores/modules/terminal/actions/checks_spec.js
index 8d21088bcaf..56a75b6b954 100644
--- a/spec/frontend/ide/stores/modules/terminal/actions/checks_spec.js
+++ b/spec/frontend/ide/stores/modules/terminal/actions/checks_spec.js
@@ -10,7 +10,10 @@ import {
 import * as messages from '~/ide/stores/modules/terminal/messages';
 import * as mutationTypes from '~/ide/stores/modules/terminal/mutation_types';
 import axios from '~/lib/utils/axios_utils';
-import httpStatus, { HTTP_STATUS_UNPROCESSABLE_ENTITY } from '~/lib/utils/http_status';
+import httpStatus, {
+  HTTP_STATUS_FORBIDDEN,
+  HTTP_STATUS_UNPROCESSABLE_ENTITY,
+} from '~/lib/utils/http_status';
 
 const TEST_PROJECT_PATH = 'lorem/root';
 const TEST_BRANCH_ID = 'main';
@@ -102,7 +105,7 @@ describe('IDE store terminal check actions', () => {
       );
     });
 
-    [httpStatus.FORBIDDEN, httpStatus.NOT_FOUND].forEach((status) => {
+    [HTTP_STATUS_FORBIDDEN, httpStatus.NOT_FOUND].forEach((status) => {
       it(`hides tab, when status is ${status}`, () => {
         const payload = { response: { status } };
 
diff --git a/spec/frontend/ide/stores/modules/terminal/messages_spec.js b/spec/frontend/ide/stores/modules/terminal/messages_spec.js
index 2a802d6b4af..d4fe432e7cf 100644
--- a/spec/frontend/ide/stores/modules/terminal/messages_spec.js
+++ b/spec/frontend/ide/stores/modules/terminal/messages_spec.js
@@ -1,7 +1,10 @@
 import { escape } from 'lodash';
 import { TEST_HOST } from 'spec/test_constants';
 import * as messages from '~/ide/stores/modules/terminal/messages';
-import httpStatus, { HTTP_STATUS_UNPROCESSABLE_ENTITY } from '~/lib/utils/http_status';
+import httpStatus, {
+  HTTP_STATUS_FORBIDDEN,
+  HTTP_STATUS_UNPROCESSABLE_ENTITY,
+} from '~/lib/utils/http_status';
 import { sprintf } from '~/locale';
 
 const TEST_HELP_URL = `${TEST_HOST}/help`;
@@ -26,7 +29,7 @@ describe('IDE store terminal messages', () => {
     });
 
     it('returns permission error, with status FORBIDDEN', () => {
-      const result = messages.configCheckError(httpStatus.FORBIDDEN, TEST_HELP_URL);
+      const result = messages.configCheckError(HTTP_STATUS_FORBIDDEN, TEST_HELP_URL);
 
       expect(result).toBe(messages.ERROR_PERMISSION);
     });
diff --git a/spec/frontend/import_entities/import_groups/components/import_table_spec.js b/spec/frontend/import_entities/import_groups/components/import_table_spec.js
index f7a97f22d44..d094fbb0e9d 100644
--- a/spec/frontend/import_entities/import_groups/components/import_table_spec.js
+++ b/spec/frontend/import_entities/import_groups/components/import_table_spec.js
@@ -7,7 +7,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { createAlert } from '~/flash';
-import httpStatus from '~/lib/utils/http_status';
+import { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
 import { STATUSES } from '~/import_entities/constants';
 import { i18n, ROOT_NAMESPACE } from '~/import_entities/import_groups/constants';
@@ -258,7 +258,7 @@ describe('import table', () => {
       },
     });
 
-    axiosMock.onPost('/import/bulk_imports.json').reply(httpStatus.BAD_REQUEST);
+    axiosMock.onPost('/import/bulk_imports.json').reply(HTTP_STATUS_BAD_REQUEST);
 
     await waitForPromises();
     await findImportButtons()[0].trigger('click');
diff --git a/spec/frontend/incidents_settings/components/incidents_settings_service_spec.js b/spec/frontend/incidents_settings/components/incidents_settings_service_spec.js
index 08c407cc4b4..ceb996926dd 100644
--- a/spec/frontend/incidents_settings/components/incidents_settings_service_spec.js
+++ b/spec/frontend/incidents_settings/components/incidents_settings_service_spec.js
@@ -3,7 +3,7 @@ import { createAlert } from '~/flash';
 import { ERROR_MSG } from '~/incidents_settings/constants';
 import IncidentsSettingsService from '~/incidents_settings/incidents_settings_service';
 import axios from '~/lib/utils/axios_utils';
-import httpStatusCodes from '~/lib/utils/http_status';
+import httpStatusCodes, { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 
 jest.mock('~/flash');
@@ -34,7 +34,7 @@ describe('IncidentsSettingsService', () => {
     });
 
     it('should display a flash message on update error', () => {
-      mock.onPatch().reply(httpStatusCodes.BAD_REQUEST);
+      mock.onPatch().reply(HTTP_STATUS_BAD_REQUEST);
 
       return service.updateSettings({}).then(() => {
         expect(createAlert).toHaveBeenCalledWith({
diff --git a/spec/frontend/invite_members/components/invite_members_modal_spec.js b/spec/frontend/invite_members/components/invite_members_modal_spec.js
index 22fcedb2eaf..04e16178dc6 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -24,7 +24,7 @@ import {
 import eventHub from '~/invite_members/event_hub';
 import ContentTransition from '~/vue_shared/components/content_transition.vue';
 import axios from '~/lib/utils/axios_utils';
-import httpStatus, { HTTP_STATUS_CREATED } from '~/lib/utils/http_status';
+import httpStatus, { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_CREATED } from '~/lib/utils/http_status';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import {
   displaySuccessfulInvitationAlert,
@@ -648,7 +648,7 @@ describe('InviteMembersModal', () => {
         });
 
         it('displays the api error for invalid email syntax', async () => {
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
+          mockInvitationsApi(HTTP_STATUS_BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
 
           clickInviteButton();
 
@@ -660,7 +660,7 @@ describe('InviteMembersModal', () => {
         });
 
         it('clears the error when the modal is hidden', async () => {
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
+          mockInvitationsApi(HTTP_STATUS_BAD_REQUEST, invitationsApiResponse.EMAIL_INVALID);
 
           clickInviteButton();
 
@@ -715,7 +715,7 @@ describe('InviteMembersModal', () => {
         });
 
         it('displays the invalid syntax error for bad request', async () => {
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
+          mockInvitationsApi(HTTP_STATUS_BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
 
           clickInviteButton();
 
@@ -739,7 +739,7 @@ describe('InviteMembersModal', () => {
           createInviteMembersToGroupWrapper();
 
           await triggerMembersTokenSelect([user3, user4]);
-          mockInvitationsApi(httpStatus.BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
+          mockInvitationsApi(HTTP_STATUS_BAD_REQUEST, invitationsApiResponse.ERROR_EMAIL_INVALID);
 
           clickInviteButton();
 
diff --git a/spec/frontend/monitoring/requests/index_spec.js b/spec/frontend/monitoring/requests/index_spec.js
index def4bfe9443..d105fe0def2 100644
--- a/spec/frontend/monitoring/requests/index_spec.js
+++ b/spec/frontend/monitoring/requests/index_spec.js
@@ -3,7 +3,9 @@ import { backoffMockImplementation } from 'helpers/backoff_helper';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import statusCodes, {
+  HTTP_STATUS_BAD_REQUEST,
   HTTP_STATUS_NO_CONTENT,
+  HTTP_STATUS_UNAUTHORIZED,
   HTTP_STATUS_UNPROCESSABLE_ENTITY,
 } from '~/lib/utils/http_status';
 import { getDashboard, getPrometheusQueryData } from '~/monitoring/requests';
@@ -107,7 +109,7 @@ describe('monitoring metrics_requests', () => {
 
     it('rejects after retrying twice and getting an HTTP 401 error', () => {
       // Mock multiple attempts while the cache is filling up and fails
-      mock.onGet(prometheusEndpoint).reply(statusCodes.UNAUTHORIZED, {
+      mock.onGet(prometheusEndpoint).reply(HTTP_STATUS_UNAUTHORIZED, {
         status: 'error',
         error: 'An error occurred',
       });
@@ -134,7 +136,7 @@ describe('monitoring metrics_requests', () => {
 
     it.each`
       code                                | reason
-      ${statusCodes.BAD_REQUEST}          | ${'Parameters are missing or incorrect'}
+      ${HTTP_STATUS_BAD_REQUEST}          | ${'Parameters are missing or incorrect'}
       ${HTTP_STATUS_UNPROCESSABLE_ENTITY} | ${"Expression can't be executed"}
       ${statusCodes.SERVICE_UNAVAILABLE}  | ${'Query timed out or aborted'}
     `('rejects with details: "$reason" after getting an HTTP $code error', ({ code, reason }) => {
diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index 93af6526c67..9322ce1168a 100644
--- a/spec/frontend/monitoring/store/actions_spec.js
+++ b/spec/frontend/monitoring/store/actions_spec.js
@@ -5,6 +5,7 @@ import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import statusCodes, {
+  HTTP_STATUS_BAD_REQUEST,
   HTTP_STATUS_CREATED,
   HTTP_STATUS_UNPROCESSABLE_ENTITY,
 } from '~/lib/utils/http_status';
@@ -983,7 +984,7 @@ describe('Monitoring store actions', () => {
     });
 
     it('Failed POST request throws an error', async () => {
-      mock.onPost(state.dashboardsEndpoint).reply(statusCodes.BAD_REQUEST);
+      mock.onPost(state.dashboardsEndpoint).reply(HTTP_STATUS_BAD_REQUEST);
 
       await expect(testAction(duplicateSystemDashboard, {}, state, [], [])).rejects.toEqual(
         'There was an error creating the dashboard.',
@@ -994,7 +995,7 @@ describe('Monitoring store actions', () => {
     it('Failed POST request throws an error with a description', async () => {
       const backendErrorMsg = 'This file already exists!';
 
-      mock.onPost(state.dashboardsEndpoint).reply(statusCodes.BAD_REQUEST, {
+      mock.onPost(state.dashboardsEndpoint).reply(HTTP_STATUS_BAD_REQUEST, {
         error: backendErrorMsg,
       });
 
diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js
index 49e8ab9ebd4..94f32777f4b 100644
--- a/spec/frontend/monitoring/store/mutations_spec.js
+++ b/spec/frontend/monitoring/store/mutations_spec.js
@@ -1,5 +1,4 @@
-import httpStatusCodes from '~/lib/utils/http_status';
-
+import httpStatusCodes, { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 import { dashboardEmptyStates, metricStates } from '~/monitoring/constants';
 import * as types from '~/monitoring/stores/mutation_types';
 import mutations from '~/monitoring/stores/mutations';
@@ -336,7 +335,7 @@ describe('Monitoring mutations', () => {
           metricId,
           error: {
             response: {
-              status: httpStatusCodes.BAD_REQUEST,
+              status: HTTP_STATUS_BAD_REQUEST,
             },
           },
         });
diff --git a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
index 9718d847ed5..051dc349b6b 100644
--- a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
@@ -463,16 +463,12 @@ describe('ForkForm component', () => {
         expect(urlUtility.redirectTo).not.toHaveBeenCalled();
       });
 
-      it('does not make POST request if no visbility is checked', async () => {
+      it('does not make POST request if no visibility is checked', async () => {
         jest.spyOn(axios, 'post');
 
-        setupComponent({
-          fields: {
-            visibility: {
-              value: null,
-            },
-          },
-        });
+        setupComponent();
+        wrapper.vm.form.fields.visibility.value = null;
+        await nextTick();
 
         await submitForm();
 
diff --git a/spec/frontend/pages/projects/graphs/code_coverage_spec.js b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
index e99734963e3..5829c4d5546 100644
--- a/spec/frontend/pages/projects/graphs/code_coverage_spec.js
+++ b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
@@ -6,7 +6,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
-import httpStatusCodes from '~/lib/utils/http_status';
+import httpStatusCodes, { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 import CodeCoverage from '~/pages/projects/graphs/components/code_coverage.vue';
 import { codeCoverageMockData, sortedDataByDates } from './mock_data';
 
@@ -84,7 +84,7 @@ describe('Code Coverage', () => {
   describe('when fetching data fails', () => {
     beforeEach(() => {
       mockAxios = new MockAdapter(axios);
-      mockAxios.onGet().replyOnce(httpStatusCodes.BAD_REQUEST);
+      mockAxios.onGet().replyOnce(HTTP_STATUS_BAD_REQUEST);
 
       createComponent();
 
diff --git a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
index 2360dd7d103..2f7c17723cc 100644
--- a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
+++ b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
@@ -8,7 +8,7 @@ import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_help
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
-import httpStatusCodes from '~/lib/utils/http_status';
+import httpStatusCodes, { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 import { redirectTo } from '~/lib/utils/url_utility';
 import PipelineNewForm from '~/pipeline_new/components/pipeline_new_form.vue';
 import ciConfigVariablesQuery from '~/pipeline_new/graphql/queries/ci_config_variables.graphql';
@@ -378,7 +378,7 @@ describe('Pipeline New Form', () => {
 
     describe('when the error response can be handled', () => {
       beforeEach(async () => {
-        mock.onPost(pipelinesPath).reply(httpStatusCodes.BAD_REQUEST, mockError);
+        mock.onPost(pipelinesPath).reply(HTTP_STATUS_BAD_REQUEST, mockError);
 
         findForm().vm.$emit('submit', dummySubmitEvent);
 
@@ -416,7 +416,7 @@ describe('Pipeline New Form', () => {
         beforeEach(async () => {
           mock
             .onPost(pipelinesPath)
-            .reply(httpStatusCodes.BAD_REQUEST, mockCreditCardValidationRequiredError);
+            .reply(HTTP_STATUS_BAD_REQUEST, mockCreditCardValidationRequiredError);
 
           window.gon = {
             subscriptions_url: TEST_HOST,
diff --git a/spec/frontend/work_items/components/notes/system_note_spec.js b/spec/frontend/work_items/components/notes/system_note_spec.js
index 3e3b8bf65b2..457d432565f 100644
--- a/spec/frontend/work_items/components/notes/system_note_spec.js
+++ b/spec/frontend/work_items/components/notes/system_note_spec.js
@@ -43,6 +43,7 @@ describe('system note component', () => {
           path: '/root',
         },
         bodyHtml: '<p dir="auto">closed</p>',
+        note_html: '<p dir="auto">closed</p>',
         systemNoteIconName: 'status_closed',
         createdAt: '2017-08-02T10:51:58.559Z',
       },
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js
index 6b3023173f5..e693ccfb156 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js
@@ -1,29 +1,26 @@
-import { GlIcon, GlLabel, GlAvatarsInline } from '@gitlab/ui';
+import { GlLabel, GlAvatarsInline } from '@gitlab/ui';
 
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import ItemMilestone from '~/issuable/components/issue_milestone.vue';
 import WorkItemLinkChildMetadata from '~/work_items/components/work_item_links/work_item_link_child_metadata.vue';
 
-import { mockMilestone, mockAssignees, mockLabels } from '../../mock_data';
+import { workItemObjectiveMetadataWidgets } from '../../mock_data';
 
 describe('WorkItemLinkChildMetadata', () => {
+  const { MILESTONE, ASSIGNEES, LABELS } = workItemObjectiveMetadataWidgets;
+  const mockMilestone = MILESTONE.milestone;
+  const mockAssignees = ASSIGNEES.assignees.nodes;
+  const mockLabels = LABELS.labels.nodes;
   let wrapper;
 
-  const createComponent = ({
-    allowsScopedLabels = true,
-    progress = 10,
-    milestone = mockMilestone,
-    assignees = mockAssignees,
-    labels = mockLabels,
-  } = {}) => {
+  const createComponent = ({ metadataWidgets = workItemObjectiveMetadataWidgets } = {}) => {
     wrapper = shallowMountExtended(WorkItemLinkChildMetadata, {
       propsData: {
-        allowsScopedLabels,
-        progress,
-        milestone,
-        assignees,
-        labels,
+        metadataWidgets,
+      },
+      slots: {
+        default: `<div data-testid="default-slot">Foo</div>`,
       },
     });
   };
@@ -32,13 +29,8 @@ describe('WorkItemLinkChildMetadata', () => {
     createComponent();
   });
 
-  it('renders item progress', () => {
-    const progressEl = wrapper.findByTestId('item-progress');
-
-    expect(progressEl.exists()).toBe(true);
-    expect(progressEl.attributes('title')).toBe('Progress');
-    expect(progressEl.text().trim()).toBe('10%');
-    expect(progressEl.findComponent(GlIcon).props('name')).toBe('progress');
+  it('renders default slot contents', () => {
+    expect(wrapper.findByTestId('default-slot').text()).toBe('Foo');
   });
 
   it('renders item milestone', () => {
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
index d8e0e80db79..7da592eb1eb 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
@@ -5,11 +5,12 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
+import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/work_item_links/work_item_link_child_metadata.vue';
+
 import { createAlert } from '~/flash';
 import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
 
 import getWorkItemTreeQuery from '~/work_items/graphql/work_item_tree.query.graphql';
-import WorkItemLinkChildMetadata from '~/work_items/components/work_item_links/work_item_link_child_metadata.vue';
 import WorkItemLinkChild from '~/work_items/components/work_item_links/work_item_link_child.vue';
 import WorkItemLinksMenu from '~/work_items/components/work_item_links/work_item_links_menu.vue';
 import WorkItemTreeChildren from '~/work_items/components/work_item_links/work_item_tree_children.vue';
@@ -25,11 +26,9 @@ import {
   workItemObjectiveNoMetadata,
   confidentialWorkItemTask,
   closedWorkItemTask,
-  mockMilestone,
-  mockAssignees,
-  mockLabels,
   workItemHierarchyTreeResponse,
   workItemHierarchyTreeFailureResponse,
+  workItemObjectiveMetadataWidgets,
 } from '../../mock_data';
 
 jest.mock('~/flash');
@@ -148,11 +147,7 @@ describe('WorkItemLinkChild', () => {
       const metadataEl = findMetadataComponent();
       expect(metadataEl.exists()).toBe(true);
       expect(metadataEl.props()).toMatchObject({
-        allowsScopedLabels: true,
-        progress: 10,
-        milestone: mockMilestone,
-        assignees: mockAssignees,
-        labels: mockLabels,
+        metadataWidgets: workItemObjectiveMetadataWidgets,
       });
     });
 
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index da2de9d721e..fa9fa3e1131 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -942,6 +942,43 @@ export const workItemHierarchyResponse = {
   },
 };
 
+export const workItemObjectiveMetadataWidgets = {
+  ASSIGNEES: {
+    type: 'ASSIGNEES',
+    __typename: 'WorkItemWidgetAssignees',
+    canInviteMembers: true,
+    allowsMultipleAssignees: true,
+    assignees: {
+      __typename: 'UserCoreConnection',
+      nodes: mockAssignees,
+    },
+  },
+  HEALTH_STATUS: {
+    type: 'HEALTH_STATUS',
+    __typename: 'WorkItemWidgetHealthStatus',
+    healthStatus: 'onTrack',
+  },
+  LABELS: {
+    type: 'LABELS',
+    __typename: 'WorkItemWidgetLabels',
+    allowsScopedLabels: true,
+    labels: {
+      __typename: 'LabelConnection',
+      nodes: mockLabels,
+    },
+  },
+  MILESTONE: {
+    type: 'MILESTONE',
+    __typename: 'WorkItemWidgetMilestone',
+    milestone: mockMilestone,
+  },
+  PROGRESS: {
+    type: 'PROGRESS',
+    __typename: 'WorkItemWidgetProgress',
+    progress: 10,
+  },
+};
+
 export const workItemObjectiveWithChild = {
   id: 'gid://gitlab/WorkItem/12',
   iid: '12',
@@ -976,35 +1013,11 @@ export const workItemObjectiveWithChild = {
       },
       __typename: 'WorkItemWidgetHierarchy',
     },
-    {
-      type: 'PROGRESS',
-      __typename: 'WorkItemWidgetProgress',
-      progress: 10,
-    },
-    {
-      type: 'MILESTONE',
-      __typename: 'WorkItemWidgetMilestone',
-      milestone: mockMilestone,
-    },
-    {
-      type: 'ASSIGNEES',
-      __typename: 'WorkItemWidgetAssignees',
-      canInviteMembers: true,
-      allowsMultipleAssignees: true,
-      assignees: {
-        __typename: 'UserCoreConnection',
-        nodes: mockAssignees,
-      },
-    },
-    {
-      type: 'LABELS',
-      __typename: 'WorkItemWidgetLabels',
-      allowsScopedLabels: true,
-      labels: {
-        __typename: 'LabelConnection',
-        nodes: mockLabels,
-      },
-    },
+    workItemObjectiveMetadataWidgets.PROGRESS,
+    workItemObjectiveMetadataWidgets.HEALTH_STATUS,
+    workItemObjectiveMetadataWidgets.MILESTONE,
+    workItemObjectiveMetadataWidgets.ASSIGNEES,
+    workItemObjectiveMetadataWidgets.LABELS,
   ],
   __typename: 'WorkItem',
 };
diff --git a/spec/support/shared_examples/features/code_highlight_shared_examples.rb b/spec/support/shared_examples/features/code_highlight_shared_examples.rb
new file mode 100644
index 00000000000..3917ac9b489
--- /dev/null
+++ b/spec/support/shared_examples/features/code_highlight_shared_examples.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+RSpec.shared_examples 'code highlight' do
+  include PreferencesHelper
+
+  let_it_be(:current_user) { user }
+  let_it_be(:scheme_class) { user_color_scheme }
+
+  it 'has highlighted code', :js do
+    wait_for_requests
+    expect(subject).to have_selector(".js-syntax-highlight.#{scheme_class}")
+  end
+end