Add latest changes from gitlab-org/gitlab@master

34 files changed, 232 insertions, 140 deletions

diff --git a/spec/frontend/__helpers__/vuex_action_helper_spec.js b/spec/frontend/__helpers__/vuex_action_helper_spec.js
index a78f557d2be..4bd21ff150a 100644
--- a/spec/frontend/__helpers__/vuex_action_helper_spec.js
+++ b/spec/frontend/__helpers__/vuex_action_helper_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import testActionFn from './vuex_action_helper';
 
 const testActionFnWithOptionsArg = (...args) => {
@@ -102,7 +102,7 @@ describe.each([testActionFn, testActionFnWithOptionsArg])(
       };
 
       it('returns original data of successful promise while checking actions/mutations', async () => {
-        mock.onGet(TEST_HOST).replyOnce(200, 42);
+        mock.onGet(TEST_HOST).replyOnce(HTTP_STATUS_OK, 42);
 
         assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
 
@@ -138,7 +138,7 @@ describe.each([testActionFn, testActionFnWithOptionsArg])(
           });
       };
 
-      mock.onGet(TEST_HOST).replyOnce(200, 42);
+      mock.onGet(TEST_HOST).replyOnce(HTTP_STATUS_OK, 42);
 
       assertion = { mutations: [{ type: 'SUCCESS' }], actions: [{ type: 'ACTION' }] };
 
diff --git a/spec/frontend/admin/statistics_panel/store/actions_spec.js b/spec/frontend/admin/statistics_panel/store/actions_spec.js
index bf97699b1fc..20d5860a459 100644
--- a/spec/frontend/admin/statistics_panel/store/actions_spec.js
+++ b/spec/frontend/admin/statistics_panel/store/actions_spec.js
@@ -5,7 +5,7 @@ import * as actions from '~/admin/statistics_panel/store/actions';
 import * as types from '~/admin/statistics_panel/store/mutation_types';
 import getInitialState from '~/admin/statistics_panel/store/state';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import mockStatistics from '../mock_data';
 
 describe('Admin statistics panel actions', () => {
@@ -20,7 +20,7 @@ describe('Admin statistics panel actions', () => {
   describe('fetchStatistics', () => {
     describe('success', () => {
       beforeEach(() => {
-        mock.onGet(/api\/(.*)\/application\/statistics/).replyOnce(200, mockStatistics);
+        mock.onGet(/api\/(.*)\/application\/statistics/).replyOnce(HTTP_STATUS_OK, mockStatistics);
       });
 
       it('dispatches success with received data', () => {
diff --git a/spec/frontend/api/groups_api_spec.js b/spec/frontend/api/groups_api_spec.js
index c354d8a9416..e064ee9fec4 100644
--- a/spec/frontend/api/groups_api_spec.js
+++ b/spec/frontend/api/groups_api_spec.js
@@ -55,7 +55,9 @@ describe('GroupsApi', () => {
       const params = { page: 1 };
       const expectedUrl = `${mockUrlRoot}/api/${mockApiVersion}/groups/${mockGroupId}/transfer_locations`;
 
-      mock.onGet(expectedUrl).replyOnce(200, { data: getGroupTransferLocationsResponse });
+      mock
+        .onGet(expectedUrl)
+        .replyOnce(HTTP_STATUS_OK, { data: getGroupTransferLocationsResponse });
 
       await expect(getGroupTransferLocations(mockGroupId, params)).resolves.toMatchObject({
         data: { data: getGroupTransferLocationsResponse },
diff --git a/spec/frontend/api/projects_api_spec.js b/spec/frontend/api/projects_api_spec.js
index 8459021421f..e2fd3b75fe9 100644
--- a/spec/frontend/api/projects_api_spec.js
+++ b/spec/frontend/api/projects_api_spec.js
@@ -3,6 +3,7 @@ import getTransferLocationsResponse from 'test_fixtures/api/projects/transfer_lo
 import * as projectsApi from '~/api/projects_api';
 import { DEFAULT_PER_PAGE } from '~/api';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 describe('~/api/projects_api.js', () => {
   let mock;
@@ -34,7 +35,7 @@ describe('~/api/projects_api.js', () => {
       const query = '';
       const options = {};
 
-      mock.onGet(expectedUrl).reply(200, { data: expectedProjects });
+      mock.onGet(expectedUrl).reply(HTTP_STATUS_OK, { data: expectedProjects });
 
       return projectsApi.getProjects(query, options).then(({ data }) => {
         expect(axios.get).toHaveBeenCalledWith(expectedUrl, expectedParams);
@@ -53,7 +54,7 @@ describe('~/api/projects_api.js', () => {
       const expectedUrl = '/api/v7/projects/1/import_project_members/2';
       const expectedMessage = 'Successfully imported';
 
-      mock.onPost(expectedUrl).replyOnce(200, expectedMessage);
+      mock.onPost(expectedUrl).replyOnce(HTTP_STATUS_OK, expectedMessage);
 
       return projectsApi.importProjectMembers(projectId, targetId).then(({ data }) => {
         expect(axios.post).toHaveBeenCalledWith(expectedUrl);
@@ -71,7 +72,7 @@ describe('~/api/projects_api.js', () => {
       const params = { page: 1 };
       const expectedUrl = '/api/v7/projects/1/transfer_locations';
 
-      mock.onGet(expectedUrl).replyOnce(200, { data: getTransferLocationsResponse });
+      mock.onGet(expectedUrl).replyOnce(HTTP_STATUS_OK, { data: getTransferLocationsResponse });
 
       await expect(projectsApi.getTransferLocations(projectId, params)).resolves.toMatchObject({
         data: { data: getTransferLocationsResponse },
diff --git a/spec/frontend/api/user_api_spec.js b/spec/frontend/api/user_api_spec.js
index 9e901cf0f71..4d0252aad23 100644
--- a/spec/frontend/api/user_api_spec.js
+++ b/spec/frontend/api/user_api_spec.js
@@ -2,6 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import { followUser, unfollowUser, associationsCount, updateUserStatus } from '~/api/user_api';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import {
   associationsCount as associationsCountData,
   userStatus as mockUserStatus,
@@ -31,7 +32,7 @@ describe('~/api/user_api', () => {
       const expectedUrl = '/api/v4/users/1/follow';
       const expectedResponse = { message: 'Success' };
 
-      axiosMock.onPost(expectedUrl).replyOnce(200, expectedResponse);
+      axiosMock.onPost(expectedUrl).replyOnce(HTTP_STATUS_OK, expectedResponse);
 
       await expect(followUser(1)).resolves.toEqual(
         expect.objectContaining({ data: expectedResponse }),
@@ -45,7 +46,7 @@ describe('~/api/user_api', () => {
       const expectedUrl = '/api/v4/users/1/unfollow';
       const expectedResponse = { message: 'Success' };
 
-      axiosMock.onPost(expectedUrl).replyOnce(200, expectedResponse);
+      axiosMock.onPost(expectedUrl).replyOnce(HTTP_STATUS_OK, expectedResponse);
 
       await expect(unfollowUser(1)).resolves.toEqual(
         expect.objectContaining({ data: expectedResponse }),
@@ -59,7 +60,7 @@ describe('~/api/user_api', () => {
       const expectedUrl = '/api/v4/users/1/associations_count';
       const expectedResponse = { data: associationsCountData };
 
-      axiosMock.onGet(expectedUrl).replyOnce(200, expectedResponse);
+      axiosMock.onGet(expectedUrl).replyOnce(HTTP_STATUS_OK, expectedResponse);
 
       await expect(associationsCount(1)).resolves.toEqual(
         expect.objectContaining({ data: expectedResponse }),
@@ -79,7 +80,7 @@ describe('~/api/user_api', () => {
       };
       const expectedResponse = { data: mockUserStatus };
 
-      axiosMock.onPatch(expectedUrl).replyOnce(200, expectedResponse);
+      axiosMock.onPatch(expectedUrl).replyOnce(HTTP_STATUS_OK, expectedResponse);
 
       await expect(
         updateUserStatus({
diff --git a/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js b/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
index cd16045f92d..6f18899ebac 100644
--- a/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
+++ b/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
@@ -14,7 +14,9 @@ import {
   HTTP_STATUS_OK,
 } from '~/lib/utils/http_status';
 import { redirectTo } from '~/lib/utils/url_utility';
-import PipelineNewForm from '~/ci/pipeline_new/components/pipeline_new_form.vue';
+import PipelineNewForm, {
+  POLLING_INTERVAL,
+} from '~/ci/pipeline_new/components/pipeline_new_form.vue';
 import ciConfigVariablesQuery from '~/ci/pipeline_new/graphql/queries/ci_config_variables.graphql';
 import { resolvers } from '~/ci/pipeline_new/graphql/resolvers';
 import RefsDropdown from '~/ci/pipeline_new/components/refs_dropdown.vue';
@@ -24,6 +26,7 @@ import {
   mockCiConfigVariablesResponseWithoutDesc,
   mockEmptyCiConfigVariablesResponse,
   mockError,
+  mockNoCachedCiConfigVariablesResponse,
   mockQueryParams,
   mockPostParams,
   mockProjectId,
@@ -69,6 +72,10 @@ describe('Pipeline New Form', () => {
   const findCCAlert = () => wrapper.findComponent(CreditCardValidationRequiredAlert);
   const getFormPostParams = () => JSON.parse(mock.history.post[0].data);
 
+  const advanceToNextFetch = (milliseconds) => {
+    jest.advanceTimersByTime(milliseconds);
+  };
+
   const selectBranch = async (branch) => {
     // Select a branch in the dropdown
     findRefsDropdown().vm.$emit('input', {
@@ -266,17 +273,98 @@ describe('Pipeline New Form', () => {
     });
   });
 
-  describe('when yml defines a variable', () => {
-    it('loading icon is shown when content is requested and hidden when received', async () => {
-      mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse);
-      createComponentWithApollo({ props: mockQueryParams, method: mountExtended });
+  describe('When there are no variables in the API cache', () => {
+    beforeEach(async () => {
+      mockCiConfigVariables.mockResolvedValue(mockNoCachedCiConfigVariablesResponse);
+      createComponentWithApollo({ method: mountExtended });
+      await waitForPromises();
+    });
 
+    it('stops polling after CONFIG_VARIABLES_TIMEOUT ms have passed', async () => {
+      advanceToNextFetch(POLLING_INTERVAL);
+      await waitForPromises();
+
+      advanceToNextFetch(POLLING_INTERVAL);
+      await waitForPromises();
+
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(3);
+
+      advanceToNextFetch(POLLING_INTERVAL);
+      await waitForPromises();
+
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(3);
+    });
+
+    it('shows loading icon while query polls for updated values', async () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(1);
+
+      advanceToNextFetch(POLLING_INTERVAL);
+      await waitForPromises();
+
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(2);
+    });
+
+    it('hides loading icon and stops polling after query fetches the updated values', async () => {
       expect(findLoadingIcon().exists()).toBe(true);
 
+      mockCiConfigVariables.mockResolvedValue(mockCiConfigVariablesResponse);
+      advanceToNextFetch(POLLING_INTERVAL);
       await waitForPromises();
 
       expect(findLoadingIcon().exists()).toBe(false);
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(2);
+
+      advanceToNextFetch(POLLING_INTERVAL);
+      await waitForPromises();
+
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(2);
     });
+  });
+
+  const testBehaviorWhenCacheIsPopulated = (queryResponse) => {
+    beforeEach(async () => {
+      mockCiConfigVariables.mockResolvedValue(queryResponse);
+      createComponentWithApollo({ method: mountExtended });
+    });
+
+    it('does not poll for new values', async () => {
+      await waitForPromises();
+
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(1);
+
+      advanceToNextFetch(POLLING_INTERVAL);
+      await waitForPromises();
+
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(1);
+    });
+
+    it('loading icon is shown when content is requested and hidden when received', async () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+
+      await waitForPromises();
+
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+  };
+
+  describe('When no variables are defined in the CI configuration and the cache is updated', () => {
+    testBehaviorWhenCacheIsPopulated(mockEmptyCiConfigVariablesResponse);
+
+    it('displays an empty form', async () => {
+      mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse);
+      createComponentWithApollo({ method: mountExtended });
+      await waitForPromises();
+
+      expect(findKeyInputs().at(0).element.value).toBe('');
+      expect(findValueInputs().at(0).element.value).toBe('');
+      expect(findVariableTypes().at(0).props('text')).toBe('Variable');
+    });
+  });
+
+  describe('When CI configuration has defined variables and they are stored in the cache', () => {
+    testBehaviorWhenCacheIsPopulated(mockCiConfigVariablesResponse);
 
     describe('with different predefined values', () => {
       beforeEach(async () => {
diff --git a/spec/frontend/ci/pipeline_new/mock_data.js b/spec/frontend/ci/pipeline_new/mock_data.js
index dfb643a0ba4..5b935c0c819 100644
--- a/spec/frontend/ci/pipeline_new/mock_data.js
+++ b/spec/frontend/ci/pipeline_new/mock_data.js
@@ -132,3 +132,4 @@ export const mockEmptyCiConfigVariablesResponse = mockCiConfigVariablesQueryResp
 export const mockCiConfigVariablesResponseWithoutDesc = mockCiConfigVariablesQueryResponse(
   mockYamlVariablesWithoutDesc,
 );
+export const mockNoCachedCiConfigVariablesResponse = mockCiConfigVariablesQueryResponse(null);
diff --git a/spec/frontend/code_navigation/store/actions_spec.js b/spec/frontend/code_navigation/store/actions_spec.js
index 3cedb2fe232..ab5d7fce905 100644
--- a/spec/frontend/code_navigation/store/actions_spec.js
+++ b/spec/frontend/code_navigation/store/actions_spec.js
@@ -4,7 +4,7 @@ import testAction from 'helpers/vuex_action_helper';
 import actions from '~/code_navigation/store/actions';
 import { setCurrentHoverElement, addInteractionClass } from '~/code_navigation/utils';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 jest.mock('~/code_navigation/utils');
 
@@ -46,7 +46,7 @@ describe('Code navigation actions', () => {
 
     describe('success', () => {
       beforeEach(() => {
-        mock.onGet(codeNavigationPath).replyOnce(200, [
+        mock.onGet(codeNavigationPath).replyOnce(HTTP_STATUS_OK, [
           {
             start_line: 0,
             start_char: 0,
diff --git a/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js b/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
index 0b82cb32dc4..46f7b2f3604 100644
--- a/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
+++ b/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
@@ -3,7 +3,7 @@ import { nextTick } from 'vue';
 import { GlButton, GlFormCheckbox, GlFormInput, GlFormInputGroup, GlDatepicker } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { TEST_HOST } from 'helpers/test_constants';
 import NewDeployToken from '~/deploy_tokens/components/new_deploy_token.vue';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -184,7 +184,7 @@ describe('New Deploy Token', () => {
             write_package_registry: true,
           },
         })
-        .replyOnce(200, { username: 'test token username', token: 'test token' });
+        .replyOnce(HTTP_STATUS_OK, { username: 'test token username', token: 'test token' });
 
       return submitTokenThenCheck();
     });
@@ -217,7 +217,7 @@ describe('New Deploy Token', () => {
             write_package_registry: true,
           },
         })
-        .replyOnce(200, { username: 'test token username', token: 'test token' });
+        .replyOnce(HTTP_STATUS_OK, { username: 'test token username', token: 'test token' });
 
       return submitTokenThenCheck();
     });
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index 3e9d5363947..78765204322 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -20,6 +20,7 @@ import {
   HTTP_STATUS_BAD_REQUEST,
   HTTP_STATUS_INTERNAL_SERVER_ERROR,
   HTTP_STATUS_NOT_FOUND,
+  HTTP_STATUS_OK,
 } from '~/lib/utils/http_status';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import eventHub from '~/notes/event_hub';
@@ -147,7 +148,7 @@ describe('DiffsStoreActions', () => {
             endpointBatch,
           ),
         )
-        .reply(200, res1)
+        .reply(HTTP_STATUS_OK, res1)
         .onGet(
           mergeUrlParams(
             {
@@ -159,7 +160,7 @@ describe('DiffsStoreActions', () => {
             endpointBatch,
           ),
         )
-        .reply(200, res2);
+        .reply(HTTP_STATUS_OK, res2);
 
       return testAction(
         diffActions.fetchDiffFilesBatch,
@@ -191,7 +192,7 @@ describe('DiffsStoreActions', () => {
     });
 
     it('should fetch diff meta information', () => {
-      mock.onGet(endpointMetadata).reply(200, diffMetadata);
+      mock.onGet(endpointMetadata).reply(HTTP_STATUS_OK, diffMetadata);
 
       return testAction(
         diffActions.fetchDiffFilesMeta,
@@ -253,7 +254,7 @@ describe('DiffsStoreActions', () => {
     it('should commit SET_COVERAGE_DATA with received response', () => {
       const data = { files: { 'app.js': { 1: 0, 2: 1 } } };
 
-      mock.onGet(endpointCoverage).reply(200, { data });
+      mock.onGet(endpointCoverage).reply(HTTP_STATUS_OK, { data });
 
       return testAction(
         diffActions.fetchCoverageFiles,
@@ -550,7 +551,7 @@ describe('DiffsStoreActions', () => {
       const nextLineNumbers = {};
       const options = { endpoint, params, lineNumbers, fileHash, isExpandDown, nextLineNumbers };
       const contextLines = { contextLines: [{ lineCode: 6 }] };
-      mock.onGet(endpoint).reply(200, contextLines);
+      mock.onGet(endpoint).reply(HTTP_STATUS_OK, contextLines);
 
       return testAction(
         diffActions.loadMoreLines,
@@ -573,7 +574,7 @@ describe('DiffsStoreActions', () => {
       const file = { hash: 123, load_collapsed_diff_url: '/load/collapsed/diff/url' };
       const data = { hash: 123, parallelDiffLines: [{ lineCode: 1 }] };
       const commit = jest.fn();
-      mock.onGet(file.loadCollapsedDiffUrl).reply(200, data);
+      mock.onGet(file.loadCollapsedDiffUrl).reply(HTTP_STATUS_OK, data);
 
       return diffActions
         .loadCollapsedDiff({ commit, getters: { commitId: null }, state }, file)
@@ -1012,7 +1013,7 @@ describe('DiffsStoreActions', () => {
       putSpy = jest.spyOn(axios, 'put');
       gon = window.gon;
 
-      mock.onPut(endpointUpdateUser).reply(200, {});
+      mock.onPut(endpointUpdateUser).reply(HTTP_STATUS_OK, {});
       jest.spyOn(eventHub, '$emit').mockImplementation();
     });
 
@@ -1089,7 +1090,7 @@ describe('DiffsStoreActions', () => {
   describe('fetchFullDiff', () => {
     describe('success', () => {
       beforeEach(() => {
-        mock.onGet(`${TEST_HOST}/context`).replyOnce(200, ['test']);
+        mock.onGet(`${TEST_HOST}/context`).replyOnce(HTTP_STATUS_OK, ['test']);
       });
 
       it('commits the success and dispatches an action to expand the new lines', () => {
@@ -1174,7 +1175,7 @@ describe('DiffsStoreActions', () => {
     describe('success', () => {
       beforeEach(() => {
         renamedFile = { ...testFile, context_lines_path: SUCCESS_URL };
-        mock.onGet(SUCCESS_URL).replyOnce(200, testData);
+        mock.onGet(SUCCESS_URL).replyOnce(HTTP_STATUS_OK, testData);
       });
 
       it.each`
@@ -1274,7 +1275,7 @@ describe('DiffsStoreActions', () => {
   describe('setSuggestPopoverDismissed', () => {
     it('commits SET_SHOW_SUGGEST_POPOVER', async () => {
       const state = { dismissEndpoint: `${TEST_HOST}/-/user_callouts` };
-      mock.onPost(state.dismissEndpoint).reply(200, {});
+      mock.onPost(state.dismissEndpoint).reply(HTTP_STATUS_OK, {});
 
       jest.spyOn(axios, 'post');
 
@@ -1449,7 +1450,7 @@ describe('DiffsStoreActions', () => {
     beforeEach(() => {
       putSpy = jest.spyOn(axios, 'put');
 
-      mock.onPut(updateUserEndpoint).reply(200, {});
+      mock.onPut(updateUserEndpoint).reply(HTTP_STATUS_OK, {});
     });
 
     it.each`
diff --git a/spec/frontend/feature_flags/components/edit_feature_flag_spec.js b/spec/frontend/feature_flags/components/edit_feature_flag_spec.js
index 05709cd05e6..cf4605e21ea 100644
--- a/spec/frontend/feature_flags/components/edit_feature_flag_spec.js
+++ b/spec/frontend/feature_flags/components/edit_feature_flag_spec.js
@@ -10,6 +10,7 @@ import EditFeatureFlag from '~/feature_flags/components/edit_feature_flag.vue';
 import Form from '~/feature_flags/components/form.vue';
 import createStore from '~/feature_flags/store/edit';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 Vue.use(Vuex);
 
@@ -35,7 +36,7 @@ describe('Edit feature flag form', () => {
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    mock.onGet(`${TEST_HOST}/feature_flags.json`).replyOnce(200, {
+    mock.onGet(`${TEST_HOST}/feature_flags.json`).replyOnce(HTTP_STATUS_OK, {
       id: 21,
       iid: 5,
       active: true,
diff --git a/spec/frontend/feature_flags/components/feature_flags_spec.js b/spec/frontend/feature_flags/components/feature_flags_spec.js
index 4ed17234971..e80f9c559c4 100644
--- a/spec/frontend/feature_flags/components/feature_flags_spec.js
+++ b/spec/frontend/feature_flags/components/feature_flags_spec.js
@@ -11,7 +11,7 @@ import FeatureFlagsComponent from '~/feature_flags/components/feature_flags.vue'
 import FeatureFlagsTable from '~/feature_flags/components/feature_flags_table.vue';
 import createStore from '~/feature_flags/store/index';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 import { getRequestData } from '../mock_data';
 
@@ -75,7 +75,7 @@ describe('Feature flags', () => {
     beforeEach(() => {
       mock
         .onGet(`${TEST_HOST}/endpoint.json`, { params: { page: '1' } })
-        .reply(200, getRequestData, {});
+        .reply(HTTP_STATUS_OK, getRequestData, {});
       factory(provideData);
       return waitForPromises();
     });
@@ -120,7 +120,7 @@ describe('Feature flags', () => {
     beforeEach(() => {
       mock
         .onGet(`${TEST_HOST}/endpoint.json`, { params: { page: '1' } })
-        .reply(200, getRequestData, {});
+        .reply(HTTP_STATUS_OK, getRequestData, {});
       factory(provideData);
       return waitForPromises();
     });
@@ -142,7 +142,7 @@ describe('Feature flags', () => {
     it('renders a loading icon', () => {
       mock
         .onGet(`${TEST_HOST}/endpoint.json`, { params: { page: '1' } })
-        .replyOnce(200, getRequestData, {});
+        .replyOnce(HTTP_STATUS_OK, getRequestData, {});
 
       factory();
 
@@ -159,7 +159,7 @@ describe('Feature flags', () => {
 
       beforeEach(async () => {
         mock.onGet(mockState.endpoint, { params: { page: '1' } }).reply(
-          200,
+          HTTP_STATUS_OK,
           {
             feature_flags: [],
             count: {
@@ -204,14 +204,16 @@ describe('Feature flags', () => {
 
     describe('with paginated feature flags', () => {
       beforeEach(() => {
-        mock.onGet(mockState.endpoint, { params: { page: '1' } }).replyOnce(200, getRequestData, {
-          'x-next-page': '2',
-          'x-page': '1',
-          'X-Per-Page': '2',
-          'X-Prev-Page': '',
-          'X-TOTAL': '37',
-          'X-Total-Pages': '5',
-        });
+        mock
+          .onGet(mockState.endpoint, { params: { page: '1' } })
+          .replyOnce(HTTP_STATUS_OK, getRequestData, {
+            'x-next-page': '2',
+            'x-page': '1',
+            'X-Per-Page': '2',
+            'X-Prev-Page': '',
+            'X-TOTAL': '37',
+            'X-Total-Pages': '5',
+          });
 
         factory();
         jest.spyOn(store, 'dispatch');
@@ -306,7 +308,7 @@ describe('Feature flags', () => {
     beforeEach(() => {
       mock
         .onGet(`${TEST_HOST}/endpoint.json`, { params: { page: '1' } })
-        .reply(200, getRequestData, {});
+        .reply(HTTP_STATUS_OK, getRequestData, {});
       factory();
       return waitForPromises();
     });
diff --git a/spec/frontend/feature_flags/store/index/actions_spec.js b/spec/frontend/feature_flags/store/index/actions_spec.js
index a7a8793c82c..46a7843b937 100644
--- a/spec/frontend/feature_flags/store/index/actions_spec.js
+++ b/spec/frontend/feature_flags/store/index/actions_spec.js
@@ -20,7 +20,7 @@ import {
 import * as types from '~/feature_flags/store/index/mutation_types';
 import state from '~/feature_flags/store/index/state';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { getRequestData, rotateData, featureFlag } from '../../mock_data';
 
 jest.mock('~/api.js');
@@ -58,7 +58,7 @@ describe('Feature flags actions', () => {
 
     describe('success', () => {
       it('dispatches requestFeatureFlags and receiveFeatureFlagsSuccess', () => {
-        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, getRequestData, {});
+        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(HTTP_STATUS_OK, getRequestData, {});
 
         return testAction(
           fetchFeatureFlags,
@@ -157,7 +157,7 @@ describe('Feature flags actions', () => {
 
     describe('success', () => {
       it('dispatches requestRotateInstanceId and receiveRotateInstanceIdSuccess', () => {
-        mock.onPost(`${TEST_HOST}/endpoint.json`).replyOnce(200, rotateData, {});
+        mock.onPost(`${TEST_HOST}/endpoint.json`).replyOnce(HTTP_STATUS_OK, rotateData, {});
 
         return testAction(
           rotateInstanceId,
@@ -257,7 +257,7 @@ describe('Feature flags actions', () => {
     });
     describe('success', () => {
       it('dispatches updateFeatureFlag and receiveUpdateFeatureFlagSuccess', () => {
-        mock.onPut(featureFlag.update_path).replyOnce(200, featureFlag, {});
+        mock.onPut(featureFlag.update_path).replyOnce(HTTP_STATUS_OK, featureFlag, {});
 
         return testAction(
           toggleFeatureFlag,
diff --git a/spec/frontend/frequent_items/components/app_spec.js b/spec/frontend/frequent_items/components/app_spec.js
index b1e87aca63d..77ffe37546e 100644
--- a/spec/frontend/frequent_items/components/app_spec.js
+++ b/spec/frontend/frequent_items/components/app_spec.js
@@ -12,6 +12,7 @@ import eventHub from '~/frequent_items/event_hub';
 import { createStore } from '~/frequent_items/store';
 import { getTopFrequentItems } from '~/frequent_items/utils';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { currentSession, mockFrequentProjects, mockSearchedProjects } from '../mock_data';
 
 Vue.use(Vuex);
@@ -115,7 +116,9 @@ describe('Frequent Items App Component', () => {
     });
 
     it('should render searched projects list', async () => {
-      mock.onGet(/\/api\/v4\/projects.json(.*)$/).replyOnce(200, mockSearchedProjects.data);
+      mock
+        .onGet(/\/api\/v4\/projects.json(.*)$/)
+        .replyOnce(HTTP_STATUS_OK, mockSearchedProjects.data);
 
       setSearch('gitlab');
       await nextTick();
diff --git a/spec/frontend/frequent_items/store/actions_spec.js b/spec/frontend/frequent_items/store/actions_spec.js
index 15905d71a21..2feb488da2c 100644
--- a/spec/frontend/frequent_items/store/actions_spec.js
+++ b/spec/frontend/frequent_items/store/actions_spec.js
@@ -5,7 +5,7 @@ import * as types from '~/frequent_items/store/mutation_types';
 import state from '~/frequent_items/store/state';
 import AccessorUtilities from '~/lib/utils/accessor';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import {
   mockNamespace,
@@ -174,7 +174,9 @@ describe('Frequent Items Dropdown Store Actions', () => {
     });
 
     it('should dispatch `receiveSearchedItemsSuccess`', () => {
-      mock.onGet(/\/api\/v4\/projects.json(.*)$/).replyOnce(200, mockSearchedProjects, {});
+      mock
+        .onGet(/\/api\/v4\/projects.json(.*)$/)
+        .replyOnce(HTTP_STATUS_OK, mockSearchedProjects, {});
 
       return testAction(
         actions.fetchSearchedItems,
diff --git a/spec/frontend/ide/stores/actions/file_spec.js b/spec/frontend/ide/stores/actions/file_spec.js
index 38a54e569a9..90ca8526698 100644
--- a/spec/frontend/ide/stores/actions/file_spec.js
+++ b/spec/frontend/ide/stores/actions/file_spec.js
@@ -7,6 +7,7 @@ import { createStore } from '~/ide/stores';
 import * as actions from '~/ide/stores/actions/file';
 import * as types from '~/ide/stores/mutation_types';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { stubPerformanceWebAPI } from 'helpers/performance';
 import { file, createTriggerRenameAction, createTriggerUpdatePayload } from '../../helpers';
 
@@ -243,7 +244,7 @@ describe('IDE store file actions', () => {
     describe('success', () => {
       beforeEach(() => {
         mock.onGet(`${RELATIVE_URL_ROOT}/test/test/-/7297abc/${localFile.path}`).replyOnce(
-          200,
+          HTTP_STATUS_OK,
           {
             raw_path: 'raw_path',
           },
@@ -320,7 +321,7 @@ describe('IDE store file actions', () => {
         store.state.entries[localFile.path] = localFile;
 
         mock.onGet(`${RELATIVE_URL_ROOT}/test/test/-/7297abc/old-dull-file`).replyOnce(
-          200,
+          HTTP_STATUS_OK,
           {
             raw_path: 'raw_path',
           },
@@ -377,7 +378,7 @@ describe('IDE store file actions', () => {
 
     describe('success', () => {
       beforeEach(() => {
-        mock.onGet(/(.*)/).replyOnce(200, 'raw');
+        mock.onGet(/(.*)/).replyOnce(HTTP_STATUS_OK, 'raw');
       });
 
       it('calls getRawFileData service method', () => {
@@ -470,7 +471,7 @@ describe('IDE store file actions', () => {
 
     describe('return JSON', () => {
       beforeEach(() => {
-        mock.onGet(/(.*)/).replyOnce(200, JSON.stringify({ test: '123' }));
+        mock.onGet(/(.*)/).replyOnce(HTTP_STATUS_OK, JSON.stringify({ test: '123' }));
       });
 
       it('does not parse returned JSON', () => {
diff --git a/spec/frontend/ide/stores/actions/tree_spec.js b/spec/frontend/ide/stores/actions/tree_spec.js
index 4551a7a21f1..47b6ebb3376 100644
--- a/spec/frontend/ide/stores/actions/tree_spec.js
+++ b/spec/frontend/ide/stores/actions/tree_spec.js
@@ -8,7 +8,7 @@ import { createStore } from '~/ide/stores';
 import { showTreeEntry, getFiles, setDirectoryData } from '~/ide/stores/actions/tree';
 import * as types from '~/ide/stores/mutation_types';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { file, createEntriesFromPaths } from '../../helpers';
 
 describe('Multi-file store tree actions', () => {
@@ -53,7 +53,7 @@ describe('Multi-file store tree actions', () => {
 
         mock
           .onGet(/(.*)/)
-          .replyOnce(200, [
+          .replyOnce(HTTP_STATUS_OK, [
             'file.txt',
             'folder/fileinfolder.js',
             'folder/subfolder/fileinsubfolder.js',
diff --git a/spec/frontend/ide/stores/modules/branches/actions_spec.js b/spec/frontend/ide/stores/modules/branches/actions_spec.js
index 38a2e1ac12f..c1c47ef7e9a 100644
--- a/spec/frontend/ide/stores/modules/branches/actions_spec.js
+++ b/spec/frontend/ide/stores/modules/branches/actions_spec.js
@@ -10,7 +10,7 @@ import {
 import * as types from '~/ide/stores/modules/branches/mutation_types';
 import state from '~/ide/stores/modules/branches/state';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { branches, projectData } from '../../../mock_data';
 
 describe('IDE branches actions', () => {
@@ -95,7 +95,9 @@ describe('IDE branches actions', () => {
 
     describe('success', () => {
       beforeEach(() => {
-        mock.onGet(/\/api\/v4\/projects\/\d+\/repository\/branches(.*)$/).replyOnce(200, branches);
+        mock
+          .onGet(/\/api\/v4\/projects\/\d+\/repository\/branches(.*)$/)
+          .replyOnce(HTTP_STATUS_OK, branches);
       });
 
       it('calls API with params', () => {
diff --git a/spec/frontend/ide/stores/modules/file_templates/actions_spec.js b/spec/frontend/ide/stores/modules/file_templates/actions_spec.js
index 0a99496a147..a5ce507bd3c 100644
--- a/spec/frontend/ide/stores/modules/file_templates/actions_spec.js
+++ b/spec/frontend/ide/stores/modules/file_templates/actions_spec.js
@@ -4,7 +4,7 @@ import * as actions from '~/ide/stores/modules/file_templates/actions';
 import * as types from '~/ide/stores/modules/file_templates/mutation_types';
 import createState from '~/ide/stores/modules/file_templates/state';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 describe('IDE file templates actions', () => {
   let state;
@@ -75,7 +75,7 @@ describe('IDE file templates actions', () => {
           const page = pages[pageNum - 1];
           const hasNextPage = pageNum < pages.length;
 
-          return [200, page, hasNextPage ? { 'X-NEXT-PAGE': pageNum + 1 } : {}];
+          return [HTTP_STATUS_OK, page, hasNextPage ? { 'X-NEXT-PAGE': pageNum + 1 } : {}];
         });
       });
 
@@ -200,10 +200,10 @@ describe('IDE file templates actions', () => {
       beforeEach(() => {
         mock
           .onGet(/api\/(.*)\/templates\/licenses\/mit/)
-          .replyOnce(200, { content: 'MIT content' });
+          .replyOnce(HTTP_STATUS_OK, { content: 'MIT content' });
         mock
           .onGet(/api\/(.*)\/templates\/licenses\/testing/)
-          .replyOnce(200, { content: 'testing content' });
+          .replyOnce(HTTP_STATUS_OK, { content: 'testing content' });
       });
 
       it('dispatches setFileTemplate if template already has content', () => {
diff --git a/spec/frontend/ide/stores/modules/merge_requests/actions_spec.js b/spec/frontend/ide/stores/modules/merge_requests/actions_spec.js
index 5d3bf063ac8..56901383f7b 100644
--- a/spec/frontend/ide/stores/modules/merge_requests/actions_spec.js
+++ b/spec/frontend/ide/stores/modules/merge_requests/actions_spec.js
@@ -10,7 +10,7 @@ import {
 import * as types from '~/ide/stores/modules/merge_requests/mutation_types';
 import state from '~/ide/stores/modules/merge_requests/state';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { mergeRequests } from '../../../mock_data';
 
 describe('IDE merge requests actions', () => {
@@ -81,7 +81,7 @@ describe('IDE merge requests actions', () => {
 
     describe('success', () => {
       beforeEach(() => {
-        mock.onGet(/\/api\/v4\/merge_requests\/?/).replyOnce(200, mergeRequests);
+        mock.onGet(/\/api\/v4\/merge_requests\/?/).replyOnce(HTTP_STATUS_OK, mergeRequests);
       });
 
       it('calls API with params', () => {
@@ -133,7 +133,9 @@ describe('IDE merge requests actions', () => {
 
     describe('success without type', () => {
       beforeEach(() => {
-        mock.onGet(/\/api\/v4\/projects\/.+\/merge_requests\/?$/).replyOnce(200, mergeRequests);
+        mock
+          .onGet(/\/api\/v4\/projects\/.+\/merge_requests\/?$/)
+          .replyOnce(HTTP_STATUS_OK, mergeRequests);
       });
 
       it('calls API with project', () => {
diff --git a/spec/frontend/ide/stores/modules/pipelines/actions_spec.js b/spec/frontend/ide/stores/modules/pipelines/actions_spec.js
index 00403809504..f49ff75ba7e 100644
--- a/spec/frontend/ide/stores/modules/pipelines/actions_spec.js
+++ b/spec/frontend/ide/stores/modules/pipelines/actions_spec.js
@@ -25,7 +25,11 @@ import {
 import * as types from '~/ide/stores/modules/pipelines/mutation_types';
 import state from '~/ide/stores/modules/pipelines/state';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_NOT_FOUND } from '~/lib/utils/http_status';
+import {
+  HTTP_STATUS_INTERNAL_SERVER_ERROR,
+  HTTP_STATUS_NOT_FOUND,
+  HTTP_STATUS_OK,
+} from '~/lib/utils/http_status';
 import waitForPromises from 'helpers/wait_for_promises';
 import { pipelines, jobs } from '../../../mock_data';
 
@@ -119,7 +123,7 @@ describe('IDE pipelines actions', () => {
       beforeEach(() => {
         mock
           .onGet('/abc/def/commit/abc123def456ghi789jkl/pipelines')
-          .reply(200, { data: { foo: 'bar' } }, { 'poll-interval': '10000' });
+          .reply(HTTP_STATUS_OK, { data: { foo: 'bar' } }, { 'poll-interval': '10000' });
       });
 
       it('dispatches request', async () => {
@@ -241,7 +245,7 @@ describe('IDE pipelines actions', () => {
 
     describe('success', () => {
       beforeEach(() => {
-        mock.onGet(stage.dropdownPath).replyOnce(200, jobs);
+        mock.onGet(stage.dropdownPath).replyOnce(HTTP_STATUS_OK, jobs);
       });
 
       it('dispatches request', () => {
@@ -370,7 +374,7 @@ describe('IDE pipelines actions', () => {
     describe('success', () => {
       beforeEach(() => {
         jest.spyOn(axios, 'get');
-        mock.onGet(`${TEST_HOST}/project/builds/trace`).replyOnce(200, { html: 'html' });
+        mock.onGet(`${TEST_HOST}/project/builds/trace`).replyOnce(HTTP_STATUS_OK, { html: 'html' });
       });
 
       it('dispatches request', () => {
diff --git a/spec/frontend/issues/dashboard/utils_spec.js b/spec/frontend/issues/dashboard/utils_spec.js
index 08d00eee3e3..6a1fe6e4d70 100644
--- a/spec/frontend/issues/dashboard/utils_spec.js
+++ b/spec/frontend/issues/dashboard/utils_spec.js
@@ -3,6 +3,7 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import { AutocompleteCache } from '~/issues/dashboard/utils';
 import { MAX_LIST_SIZE } from '~/issues/list/constants';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 describe('AutocompleteCache', () => {
   let autocompleteCache;
@@ -42,7 +43,7 @@ describe('AutocompleteCache', () => {
     let response;
 
     beforeEach(async () => {
-      axiosMock.onGet(url).replyOnce(200, data);
+      axiosMock.onGet(url).replyOnce(HTTP_STATUS_OK, data);
       response = await autocompleteCache.fetch({ url, cacheName, searchProperty });
     });
 
@@ -59,7 +60,7 @@ describe('AutocompleteCache', () => {
     let response;
 
     beforeEach(async () => {
-      axiosMock.onGet(url).replyOnce(200, data);
+      axiosMock.onGet(url).replyOnce(HTTP_STATUS_OK, data);
       jest.spyOn(fuzzaldrinPlus, 'filter');
       // Populate cache
       await autocompleteCache.fetch({ url, cacheName, searchProperty });
diff --git a/spec/frontend/issues/related_merge_requests/store/actions_spec.js b/spec/frontend/issues/related_merge_requests/store/actions_spec.js
index ecadcb1a13f..7339372a8d1 100644
--- a/spec/frontend/issues/related_merge_requests/store/actions_spec.js
+++ b/spec/frontend/issues/related_merge_requests/store/actions_spec.js
@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
+import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import * as actions from '~/issues/related_merge_requests/store/actions';
 import * as types from '~/issues/related_merge_requests/store/mutation_types';
 
@@ -73,7 +73,9 @@ describe('RelatedMergeRequest store actions', () => {
     describe('for a successful request', () => {
       it('should dispatch success action', () => {
         const data = { a: 1 };
-        mock.onGet(`${state.apiEndpoint}?per_page=100`).replyOnce(200, data, { 'x-total': 2 });
+        mock
+          .onGet(`${state.apiEndpoint}?per_page=100`)
+          .replyOnce(HTTP_STATUS_OK, data, { 'x-total': 2 });
 
         return testAction(
           actions.fetchMergeRequests,
diff --git a/spec/frontend/jobs/components/job/job_app_spec.js b/spec/frontend/jobs/components/job/job_app_spec.js
index 98f1979db1b..a38616dad8d 100644
--- a/spec/frontend/jobs/components/job/job_app_spec.js
+++ b/spec/frontend/jobs/components/job/job_app_spec.js
@@ -15,6 +15,7 @@ import StuckBlock from '~/jobs/components/job/stuck_block.vue';
 import UnmetPrerequisitesBlock from '~/jobs/components/job/unmet_prerequisites_block.vue';
 import createStore from '~/jobs/store';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import job from '../../mock_data';
 
 describe('Job App', () => {
@@ -48,8 +49,8 @@ describe('Job App', () => {
   };
 
   const setupAndMount = async ({ jobData = {}, jobLogData = {} } = {}) => {
-    mock.onGet(initSettings.endpoint).replyOnce(200, { ...job, ...jobData });
-    mock.onGet(`${initSettings.pagePath}/trace.json`).reply(200, jobLogData);
+    mock.onGet(initSettings.endpoint).replyOnce(HTTP_STATUS_OK, { ...job, ...jobData });
+    mock.onGet(`${initSettings.pagePath}/trace.json`).reply(HTTP_STATUS_OK, jobLogData);
 
     const asyncInit = store.dispatch('init', initSettings);
 
diff --git a/spec/frontend/jobs/store/actions_spec.js b/spec/frontend/jobs/store/actions_spec.js
index f00cf8f5232..73a158d52d8 100644
--- a/spec/frontend/jobs/store/actions_spec.js
+++ b/spec/frontend/jobs/store/actions_spec.js
@@ -30,7 +30,7 @@ import {
 import * as types from '~/jobs/store/mutation_types';
 import state from '~/jobs/store/state';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 describe('Job State actions', () => {
   let mockedState;
@@ -113,7 +113,9 @@ describe('Job State actions', () => {
 
     describe('success', () => {
       it('dispatches requestJob and receiveJobSuccess', () => {
-        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, { id: 121212, name: 'karma' });
+        mock
+          .onGet(`${TEST_HOST}/endpoint.json`)
+          .replyOnce(HTTP_STATUS_OK, { id: 121212, name: 'karma' });
 
         return testAction(
           fetchJob,
@@ -215,7 +217,7 @@ describe('Job State actions', () => {
 
     describe('success', () => {
       it('dispatches requestJobLog, receiveJobLogSuccess and stopPollingJobLog when job is complete', () => {
-        mock.onGet(`${TEST_HOST}/endpoint/trace.json`).replyOnce(200, {
+        mock.onGet(`${TEST_HOST}/endpoint/trace.json`).replyOnce(HTTP_STATUS_OK, {
           html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :',
           complete: true,
         });
@@ -253,7 +255,7 @@ describe('Job State actions', () => {
             complete: false,
           };
 
-          mock.onGet(`${TEST_HOST}/endpoint/trace.json`).replyOnce(200, jobLogPayload);
+          mock.onGet(`${TEST_HOST}/endpoint/trace.json`).replyOnce(HTTP_STATUS_OK, jobLogPayload);
         });
 
         it('dispatches startPollingJobLog', () => {
@@ -425,9 +427,10 @@ describe('Job State actions', () => {
 
     describe('success', () => {
       it('dispatches requestJobsForStage and receiveJobsForStageSuccess', () => {
-        mock
-          .onGet(`${TEST_HOST}/jobs.json`)
-          .replyOnce(200, { latest_statuses: [{ id: 121212, name: 'build' }], retried: [] });
+        mock.onGet(`${TEST_HOST}/jobs.json`).replyOnce(HTTP_STATUS_OK, {
+          latest_statuses: [{ id: 121212, name: 'build' }],
+          retried: [],
+        });
 
         return testAction(
           fetchJobsForStage,
diff --git a/spec/frontend/lib/utils/favicon_ci_spec.js b/spec/frontend/lib/utils/favicon_ci_spec.js
index 6385af952e7..be647d98f1a 100644
--- a/spec/frontend/lib/utils/favicon_ci_spec.js
+++ b/spec/frontend/lib/utils/favicon_ci_spec.js
@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import { setFaviconOverlay, resetFavicon } from '~/lib/utils/favicon';
 import { setCiStatusFavicon } from '~/lib/utils/favicon_ci';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 jest.mock('~/lib/utils/favicon');
 
@@ -29,7 +29,7 @@ describe('~/lib/utils/favicon_ci', () => {
     `(
       'with response=$response',
       async ({ response, setFaviconOverlayCalls, resetFaviconCalls }) => {
-        mock.onGet(TEST_URL).replyOnce(200, response);
+        mock.onGet(TEST_URL).replyOnce(HTTP_STATUS_OK, response);
 
         expect(setFaviconOverlay).not.toHaveBeenCalled();
         expect(resetFavicon).not.toHaveBeenCalled();
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
index 91824dee5b0..08e2de6c18f 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
@@ -101,18 +101,6 @@ exports[`packages_list_row renders 1`] = `
     </div>
   </div>
    
-  <div
-    class="gl-display-flex"
-  >
-    <div
-      class="gl-w-7"
-    />
-     
-    <!---->
-     
-    <div
-      class="gl-w-9"
-    />
-  </div>
+  <!---->
 </div>
 `;
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap
index bdd0fe3ad9e..f00d707417a 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap
@@ -87,18 +87,6 @@ exports[`VersionRow renders 1`] = `
     <!---->
   </div>
    
-  <div
-    class="gl-display-flex"
-  >
-    <div
-      class="gl-w-7"
-    />
-     
-    <!---->
-     
-    <div
-      class="gl-w-9"
-    />
-  </div>
+  <!---->
 </div>
 `;
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
index a7de751aadd..ec8e77fa923 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
@@ -54,12 +54,15 @@ exports[`packages_list_row renders 1`] = `
           class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-min-h-6 gl-min-w-0 gl-flex-grow-1"
         >
           <div
-            class="gl-display-flex"
+            class="gl-display-flex gl-align-items-center"
             data-testid="left-secondary-infos"
           >
-            <span>
-              1.0.0
-            </span>
+            <gl-truncate-stub
+              class="gl-max-w-15 gl-md-max-w-26"
+              position="end"
+              text="1.0.0"
+              withtooltip="true"
+            />
              
             <!---->
              
@@ -135,18 +138,6 @@ exports[`packages_list_row renders 1`] = `
     </div>
   </div>
    
-  <div
-    class="gl-display-flex"
-  >
-    <div
-      class="gl-w-7"
-    />
-     
-    <!---->
-     
-    <div
-      class="gl-w-9"
-    />
-  </div>
+  <!---->
 </div>
 `;
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
index bb04701a8b7..780f324eaa7 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
@@ -43,6 +43,7 @@ describe('packages_list_row', () => {
   const findPackageLink = () => wrapper.findByTestId('details-link');
   const findWarningIcon = () => wrapper.findByTestId('warning-icon');
   const findLeftSecondaryInfos = () => wrapper.findByTestId('left-secondary-infos');
+  const findPackageVersion = () => findLeftSecondaryInfos().findComponent(GlTruncate);
   const findPublishMethod = () => wrapper.findComponent(PublishMethod);
   const findCreatedDateText = () => wrapper.findByTestId('created-date');
   const findTimeAgoTooltip = () => wrapper.findComponent(TimeagoTooltip);
@@ -213,7 +214,10 @@ describe('packages_list_row', () => {
     it('has the package version', () => {
       mountComponent();
 
-      expect(findLeftSecondaryInfos().text()).toContain(packageWithoutTags.version);
+      expect(findPackageVersion().props()).toMatchObject({
+        text: packageWithoutTags.version,
+        withTooltip: true,
+      });
     });
 
     it('if the pipeline exists show the author message', () => {
diff --git a/spec/frontend/pages/dashboard/todos/index/todos_spec.js b/spec/frontend/pages/dashboard/todos/index/todos_spec.js
index 825aef27327..70d7cb9c839 100644
--- a/spec/frontend/pages/dashboard/todos/index/todos_spec.js
+++ b/spec/frontend/pages/dashboard/todos/index/todos_spec.js
@@ -3,6 +3,7 @@ import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import waitForPromises from 'helpers/wait_for_promises';
 import '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { addDelimiter } from '~/lib/utils/text_utility';
 import Todos from '~/pages/dashboard/todos/index/todos';
 
@@ -41,7 +42,7 @@ describe('Todos', () => {
       // Arrange
       mock
         .onDelete(path)
-        .replyOnce(200, { count: TEST_COUNT_BIG, done_count: TEST_DONE_COUNT_BIG });
+        .replyOnce(HTTP_STATUS_OK, { count: TEST_COUNT_BIG, done_count: TEST_DONE_COUNT_BIG });
       onToggleSpy = jest.fn();
       document.addEventListener('todo:toggle', onToggleSpy);
 
diff --git a/spec/frontend/pipelines/pipeline_multi_actions_spec.js b/spec/frontend/pipelines/pipeline_multi_actions_spec.js
index 544a33b10db..bedde71c48d 100644
--- a/spec/frontend/pipelines/pipeline_multi_actions_spec.js
+++ b/spec/frontend/pipelines/pipeline_multi_actions_spec.js
@@ -5,7 +5,7 @@ import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import PipelineMultiActions, {
   i18n,
 } from '~/pipelines/components/pipelines_list/pipeline_multi_actions.vue';
@@ -80,7 +80,7 @@ describe('Pipeline Multi Actions Dropdown', () => {
   describe('Artifacts', () => {
     it('should fetch artifacts and show search box on dropdown click', async () => {
       const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
-      mockAxios.onGet(endpoint).replyOnce(200, { artifacts });
+      mockAxios.onGet(endpoint).replyOnce(HTTP_STATUS_OK, { artifacts });
       createComponent();
       findDropdown().vm.$emit('show');
       await waitForPromises();
diff --git a/spec/frontend/releases/components/app_edit_new_spec.js b/spec/frontend/releases/components/app_edit_new_spec.js
index 649d8eef6ec..5c4eb6912c8 100644
--- a/spec/frontend/releases/components/app_edit_new_spec.js
+++ b/spec/frontend/releases/components/app_edit_new_spec.js
@@ -125,7 +125,7 @@ describe('Release edit/new component', () => {
 
     it('renders the description text at the top of the page', () => {
       expect(wrapper.find('.js-subtitle-text').text()).toBe(
-        'Releases are based on Git tags. We recommend tags that use semantic versioning, for example v1.0.0, v2.1.0-pre.',
+        'Releases are based on Git tags. We recommend tags that use semantic versioning, for example 1.0.0, 2.1.0-pre.',
       );
     });
 
diff --git a/spec/frontend/single_file_diff_spec.js b/spec/frontend/single_file_diff_spec.js
index a6e532922c8..ff2a4e31e0b 100644
--- a/spec/frontend/single_file_diff_spec.js
+++ b/spec/frontend/single_file_diff_spec.js
@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
+import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import SingleFileDiff from '~/single_file_diff';
 
 describe('SingleFileDiff', () => {
@@ -11,7 +11,9 @@ describe('SingleFileDiff', () => {
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    mock.onGet(blobDiffPath).replyOnce(200, { html: `<div class="diff-content">MOCKED</div>` });
+    mock
+      .onGet(blobDiffPath)
+      .replyOnce(HTTP_STATUS_OK, { html: `<div class="diff-content">MOCKED</div>` });
   });
 
   afterEach(() => {