Add latest changes from gitlab-org/gitlab@master

17 files changed, 277 insertions, 50 deletions

diff --git a/spec/frontend/airflow/dags/components/dags_spec.js b/spec/frontend/airflow/dags/components/dags_spec.js
new file mode 100644
index 00000000000..f9cf4fc87af
--- /dev/null
+++ b/spec/frontend/airflow/dags/components/dags_spec.js
@@ -0,0 +1,115 @@
+import { GlAlert, GlPagination, GlTableLite } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import AirflowDags from '~/airflow/dags/components/dags.vue';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import { mockDags } from './mock_data';
+
+describe('AirflowDags', () => {
+  let wrapper;
+
+  const createWrapper = (
+    dags = [],
+    pagination = { page: 1, isLastPage: false, per_page: 2, totalItems: 0 },
+  ) => {
+    wrapper = mountExtended(AirflowDags, {
+      propsData: {
+        dags,
+        pagination,
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findEmptyState = () => wrapper.findByText('There are no DAGs to show');
+  const findPagination = () => wrapper.findComponent(GlPagination);
+
+  describe('default (no dags)', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('shows incubation warning', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+
+    it('shows empty state', () => {
+      expect(findEmptyState().exists()).toBe(true);
+    });
+
+    it('does not show pagination', () => {
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
+
+  describe('with dags', () => {
+    const createWrapperWithDags = (pagination = {}) => {
+      createWrapper(mockDags, {
+        page: 1,
+        isLastPage: false,
+        per_page: 2,
+        totalItems: 5,
+        ...pagination,
+      });
+    };
+
+    const findDagsData = () => {
+      return wrapper
+        .findComponent(GlTableLite)
+        .findAll('tbody tr')
+        .wrappers.map((tr) => {
+          return tr.findAll('td').wrappers.map((td) => {
+            const timeAgo = td.findComponent(TimeAgo);
+
+            if (timeAgo.exists()) {
+              return {
+                type: 'time',
+                value: timeAgo.props('time'),
+              };
+            }
+
+            return {
+              type: 'text',
+              value: td.text(),
+            };
+          });
+        });
+    };
+
+    it('renders the table of Dags with data', () => {
+      createWrapperWithDags();
+
+      expect(findDagsData()).toEqual(
+        mockDags.map((x) => [
+          { type: 'text', value: x.dag_name },
+          { type: 'text', value: x.schedule },
+          { type: 'time', value: x.next_run },
+          { type: 'text', value: String(x.is_active) },
+          { type: 'text', value: String(x.is_paused) },
+          { type: 'text', value: x.fileloc },
+        ]),
+      );
+    });
+
+    describe('Pagination behaviour', () => {
+      it.each`
+        pagination                       | expected
+        ${{}}                            | ${{ value: 1, prevPage: null, nextPage: 2 }}
+        ${{ page: 2 }}                   | ${{ value: 2, prevPage: 1, nextPage: 3 }}
+        ${{ isLastPage: true, page: 2 }} | ${{ value: 2, prevPage: 1, nextPage: null }}
+      `('with $pagination, sets pagination props', ({ pagination, expected }) => {
+        createWrapperWithDags({ ...pagination });
+
+        expect(findPagination().props()).toMatchObject(expected);
+      });
+
+      it('generates link for each page', () => {
+        createWrapperWithDags();
+
+        const generateLink = findPagination().props('linkGen');
+
+        expect(generateLink(3)).toBe(`${TEST_HOST}/?page=3`);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/airflow/dags/components/incubation_alert_spec.js b/spec/frontend/airflow/dags/components/incubation_alert_spec.js
new file mode 100644
index 00000000000..29188de8025
--- /dev/null
+++ b/spec/frontend/airflow/dags/components/incubation_alert_spec.js
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import { GlAlert, GlButton, GlLink } from '@gitlab/ui';
+import IncubationAlert from '~/airflow/dags/components/incubation_alert.vue';
+
+describe('IncubationAlert', () => {
+  let wrapper;
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  const findHref = () => wrapper.findComponent(GlLink);
+
+  beforeEach(() => {
+    wrapper = mount(IncubationAlert);
+  });
+
+  it('displays link to issue', () => {
+    expect(findButton().attributes().href).toBe(
+      'https://gitlab.com/gitlab-org/incubation-engineering/airflow/meta/-/issues/2',
+    );
+  });
+
+  it('displays link to handbook', () => {
+    expect(findHref().attributes().href).toBe(
+      'https://about.gitlab.com/handbook/engineering/incubation/airflow/',
+    );
+  });
+
+  it('is removed if dismissed', async () => {
+    await wrapper.find('[aria-label="Dismiss"]').trigger('click');
+
+    expect(findAlert().exists()).toBe(false);
+  });
+});
diff --git a/spec/frontend/airflow/dags/components/mock_data.js b/spec/frontend/airflow/dags/components/mock_data.js
new file mode 100644
index 00000000000..9547282517d
--- /dev/null
+++ b/spec/frontend/airflow/dags/components/mock_data.js
@@ -0,0 +1,67 @@
+export const mockDags = [
+  {
+    id: 1,
+    project_id: 7,
+    created_at: '2023-01-05T14:07:02.975Z',
+    updated_at: '2023-01-05T14:07:02.975Z',
+    has_import_errors: false,
+    is_active: false,
+    is_paused: true,
+    next_run: '2023-01-05T14:07:02.975Z',
+    dag_name: 'Dag number 1',
+    schedule: 'Manual',
+    fileloc: '/opt/dag.py',
+  },
+  {
+    id: 2,
+    project_id: 7,
+    created_at: '2023-01-05T14:07:02.975Z',
+    updated_at: '2023-01-05T14:07:02.975Z',
+    has_import_errors: false,
+    is_active: false,
+    is_paused: true,
+    next_run: '2023-01-05T14:07:02.975Z',
+    dag_name: 'Dag number 2',
+    schedule: 'Manual',
+    fileloc: '/opt/dag.py',
+  },
+  {
+    id: 3,
+    project_id: 7,
+    created_at: '2023-01-05T14:07:02.975Z',
+    updated_at: '2023-01-05T14:07:02.975Z',
+    has_import_errors: false,
+    is_active: false,
+    is_paused: true,
+    next_run: '2023-01-05T14:07:02.975Z',
+    dag_name: 'Dag number 3',
+    schedule: 'Manual',
+    fileloc: '/opt/dag.py',
+  },
+  {
+    id: 4,
+    project_id: 7,
+    created_at: '2023-01-05T14:07:02.975Z',
+    updated_at: '2023-01-05T14:07:02.975Z',
+    has_import_errors: false,
+    is_active: false,
+    is_paused: true,
+    next_run: '2023-01-05T14:07:02.975Z',
+    dag_name: 'Dag number 4',
+    schedule: 'Manual',
+    fileloc: '/opt/dag.py',
+  },
+  {
+    id: 5,
+    project_id: 7,
+    created_at: '2023-01-05T14:07:02.975Z',
+    updated_at: '2023-01-05T14:07:02.975Z',
+    has_import_errors: false,
+    is_active: false,
+    is_paused: true,
+    next_run: '2023-01-05T14:07:02.975Z',
+    dag_name: 'Dag number 5',
+    schedule: 'Manual',
+    fileloc: '/opt/dag.py',
+  },
+];
diff --git a/spec/frontend/api/groups_api_spec.js b/spec/frontend/api/groups_api_spec.js
index abd627dab10..0315db02cf2 100644
--- a/spec/frontend/api/groups_api_spec.js
+++ b/spec/frontend/api/groups_api_spec.js
@@ -75,7 +75,7 @@ describe('GroupsApi', () => {
 
       const response = [{ id: 0, username: 'root' }];
 
-      mock.onGet(expectedUrl).replyOnce(200, response);
+      mock.onGet(expectedUrl).replyOnce(HTTP_STATUS_OK, response);
 
       await expect(getGroupMembers(mockGroupId)).resolves.toMatchObject({
         data: response,
@@ -87,7 +87,7 @@ describe('GroupsApi', () => {
 
       const response = [{ id: 0, username: 'root' }];
 
-      mock.onGet(expectedUrl).replyOnce(200, response);
+      mock.onGet(expectedUrl).replyOnce(HTTP_STATUS_OK, response);
 
       await expect(getGroupMembers(mockGroupId, true)).resolves.toMatchObject({
         data: response,
diff --git a/spec/frontend/api/projects_api_spec.js b/spec/frontend/api/projects_api_spec.js
index a6ae8b14ea9..2d4ed39dad0 100644
--- a/spec/frontend/api/projects_api_spec.js
+++ b/spec/frontend/api/projects_api_spec.js
@@ -132,7 +132,7 @@ describe('~/api/projects_api.js', () => {
 
       const response = [{ id: 0, username: 'root' }];
 
-      mock.onGet(expectedUrl).replyOnce(200, response);
+      mock.onGet(expectedUrl).replyOnce(HTTP_STATUS_OK, response);
 
       await expect(projectsApi.getProjectMembers(projectId)).resolves.toMatchObject({
         data: response,
@@ -144,7 +144,7 @@ describe('~/api/projects_api.js', () => {
 
       const response = [{ id: 0, username: 'root' }];
 
-      mock.onGet(expectedUrl).replyOnce(200, response);
+      mock.onGet(expectedUrl).replyOnce(HTTP_STATUS_OK, response);
 
       await expect(projectsApi.getProjectMembers(projectId, true)).resolves.toMatchObject({
         data: response,
diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js
index 57545c565b4..fb1a8b8c00a 100644
--- a/spec/frontend/environments/edit_environment_spec.js
+++ b/spec/frontend/environments/edit_environment_spec.js
@@ -5,7 +5,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import EditEnvironment from '~/environments/components/edit_environment.vue';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility');
@@ -85,7 +85,7 @@ describe('~/environments/components/edit.vue', () => {
   it('shows errors on error', async () => {
     const expected = { url: 'https://google.ca' };
 
-    await submitForm(expected, [400, { message: ['uh oh!'] }]);
+    await submitForm(expected, [HTTP_STATUS_BAD_REQUEST, { message: ['uh oh!'] }]);
 
     expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' });
     expect(showsLoading()).toBe(false);
diff --git a/spec/frontend/environments/environments_folder_view_spec.js b/spec/frontend/environments/environments_folder_view_spec.js
index 72a7449f24e..a87060f83d8 100644
--- a/spec/frontend/environments/environments_folder_view_spec.js
+++ b/spec/frontend/environments/environments_folder_view_spec.js
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { environmentsList } from './mock_data';
 
 describe('Environments Folder View', () => {
@@ -29,7 +30,7 @@ describe('Environments Folder View', () => {
   describe('successful request', () => {
     beforeEach(() => {
       mock.onGet(mockData.endpoint).reply(
-        200,
+        HTTP_STATUS_OK,
         {
           environments: environmentsList,
           stopped_count: 1,
diff --git a/spec/frontend/environments/folder/environments_folder_view_spec.js b/spec/frontend/environments/folder/environments_folder_view_spec.js
index 9c1f463ec3f..ac9d857e6bd 100644
--- a/spec/frontend/environments/folder/environments_folder_view_spec.js
+++ b/spec/frontend/environments/folder/environments_folder_view_spec.js
@@ -5,7 +5,7 @@ import { removeBreakLine, removeWhitespace } from 'helpers/text_helper';
 import EnvironmentTable from '~/environments/components/environments_table.vue';
 import EnvironmentsFolderViewComponent from '~/environments/folder/environments_folder_view.vue';
 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 { environmentsList } from '../mock_data';
 
 describe('Environments Folder View', () => {
@@ -23,7 +23,7 @@ describe('Environments Folder View', () => {
 
   const mockEnvironments = (environmentList) => {
     mock.onGet(mockData.endpoint).reply(
-      200,
+      HTTP_STATUS_OK,
       {
         environments: environmentList,
         stopped_count: 1,
diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js
index 016d9571094..a8cc05b297b 100644
--- a/spec/frontend/environments/new_environment_spec.js
+++ b/spec/frontend/environments/new_environment_spec.js
@@ -5,7 +5,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import NewEnvironment from '~/environments/components/new_environment.vue';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility');
@@ -96,7 +96,7 @@ describe('~/environments/components/new.vue', () => {
   it('shows errors on error', async () => {
     const expected = { name: 'test', url: 'https://google.ca' };
 
-    await submitForm(expected, [400, { message: ['name taken'] }]);
+    await submitForm(expected, [HTTP_STATUS_BAD_REQUEST, { message: ['name taken'] }]);
 
     expect(createAlert).toHaveBeenCalledWith({ message: 'name taken' });
     expect(showsLoading()).toBe(false);
diff --git a/spec/frontend/error_tracking_settings/store/actions_spec.js b/spec/frontend/error_tracking_settings/store/actions_spec.js
index bad2bdfaa1a..d8f61be6df7 100644
--- a/spec/frontend/error_tracking_settings/store/actions_spec.js
+++ b/spec/frontend/error_tracking_settings/store/actions_spec.js
@@ -47,7 +47,7 @@ describe('error tracking settings actions', () => {
     });
 
     it('should handle a server error', async () => {
-      mock.onGet(`${TEST_HOST}.json`).reply(() => [400]);
+      mock.onGet(`${TEST_HOST}.json`).reply(() => [HTTP_STATUS_BAD_REQUEST]);
       await testAction(
         actions.fetchProjects,
         null,
diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js
index cc2dc084e47..e4fd8649263 100644
--- a/spec/frontend/gfm_auto_complete_spec.js
+++ b/spec/frontend/gfm_auto_complete_spec.js
@@ -17,6 +17,7 @@ import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import AjaxCache from '~/lib/utils/ajax_cache';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import {
   eventlistenersMockDefaultMap,
   crmContactsMock,
@@ -184,17 +185,20 @@ describe('GfmAutoComplete', () => {
           });
         });
 
-        it.each([200, 500])('should set the loading state', async (responseStatus) => {
-          mock.onGet('vulnerabilities_autocomplete_url').replyOnce(responseStatus);
+        it.each([HTTP_STATUS_OK, HTTP_STATUS_INTERNAL_SERVER_ERROR])(
+          'should set the loading state',
+          async (responseStatus) => {
+            mock.onGet('vulnerabilities_autocomplete_url').replyOnce(responseStatus);
 
-          fetchData.call(context, {}, '[vulnerability:', 'query');
+            fetchData.call(context, {}, '[vulnerability:', 'query');
 
-          expect(context.isLoadingData['[vulnerability:']).toBe(true);
+            expect(context.isLoadingData['[vulnerability:']).toBe(true);
 
-          await waitForPromises();
+            await waitForPromises();
 
-          expect(context.isLoadingData['[vulnerability:']).toBe(false);
-        });
+            expect(context.isLoadingData['[vulnerability:']).toBe(false);
+          },
+        );
       });
 
       describe('data is in cache', () => {
diff --git a/spec/frontend/header_search/store/actions_spec.js b/spec/frontend/header_search/store/actions_spec.js
index 1ae149128ca..bd93b0edadf 100644
--- a/spec/frontend/header_search/store/actions_spec.js
+++ b/spec/frontend/header_search/store/actions_spec.js
@@ -4,6 +4,7 @@ import * as actions from '~/header_search/store/actions';
 import * as types from '~/header_search/store/mutation_types';
 import initState from '~/header_search/store/state';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import {
   MOCK_SEARCH,
   MOCK_AUTOCOMPLETE_OPTIONS_RES,
@@ -37,9 +38,9 @@ describe('Header Search Store Actions', () => {
   });
 
   describe.each`
-    axiosMock                                                             | type         | expectedMutations
-    ${{ method: 'onGet', code: 200, res: MOCK_AUTOCOMPLETE_OPTIONS_RES }} | ${'success'} | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }]}
-    ${{ method: 'onGet', code: 500, res: null }}                          | ${'error'}   | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }]}
+    axiosMock                                                                        | type         | expectedMutations
+    ${{ method: 'onGet', code: HTTP_STATUS_OK, res: MOCK_AUTOCOMPLETE_OPTIONS_RES }} | ${'success'} | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }]}
+    ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR, res: null }}       | ${'error'}   | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }]}
   `('fetchAutocompleteOptions', ({ axiosMock, type, expectedMutations }) => {
     describe(`on ${type}`, () => {
       beforeEach(() => {
diff --git a/spec/frontend/performance_bar/index_spec.js b/spec/frontend/performance_bar/index_spec.js
index 2da176dbfe4..f09b0cc3df8 100644
--- a/spec/frontend/performance_bar/index_spec.js
+++ b/spec/frontend/performance_bar/index_spec.js
@@ -1,6 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import '~/performance_bar/components/performance_bar_app.vue';
 import performanceBar from '~/performance_bar';
 import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
@@ -26,7 +27,7 @@ describe('performance bar wrapper', () => {
     mock = new MockAdapter(axios);
 
     mock.onGet('/-/peek/results').reply(
-      200,
+      HTTP_STATUS_OK,
       {
         data: {
           gc: {
diff --git a/spec/frontend/profile/account/components/update_username_spec.js b/spec/frontend/profile/account/components/update_username_spec.js
index bb9ae01963e..fa0e86a7b05 100644
--- a/spec/frontend/profile/account/components/update_username_spec.js
+++ b/spec/frontend/profile/account/components/update_username_spec.js
@@ -5,7 +5,7 @@ import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import UpdateUsername from '~/profile/account/components/update_username.vue';
 
 jest.mock('~/flash');
@@ -133,7 +133,7 @@ describe('UpdateUsername component', () => {
         expect(openModalBtn.props('disabled')).toBe(false);
         expect(openModalBtn.props('loading')).toBe(true);
 
-        return [400, { message: 'Invalid username' }];
+        return [HTTP_STATUS_BAD_REQUEST, { message: 'Invalid username' }];
       });
 
       await expect(wrapper.vm.onConfirm()).rejects.toThrow();
@@ -144,7 +144,7 @@ describe('UpdateUsername component', () => {
 
     it('shows an error message if the error response has a `message` property', async () => {
       axiosMock.onPut(actionUrl).replyOnce(() => {
-        return [400, { message: 'Invalid username' }];
+        return [HTTP_STATUS_BAD_REQUEST, { message: 'Invalid username' }];
       });
 
       await expect(wrapper.vm.onConfirm()).rejects.toThrow();
@@ -156,7 +156,7 @@ describe('UpdateUsername component', () => {
 
     it("shows a fallback error message if the error response doesn't have a `message` property", async () => {
       axiosMock.onPut(actionUrl).replyOnce(() => {
-        return [400];
+        return [HTTP_STATUS_BAD_REQUEST];
       });
 
       await expect(wrapper.vm.onConfirm()).rejects.toThrow();
diff --git a/spec/frontend/projects/project_find_file_spec.js b/spec/frontend/projects/project_find_file_spec.js
index eec54dd04bc..efc9d411a98 100644
--- a/spec/frontend/projects/project_find_file_spec.js
+++ b/spec/frontend/projects/project_find_file_spec.js
@@ -4,6 +4,7 @@ import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import { sanitize } from '~/lib/dompurify';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import ProjectFindFile from '~/projects/project_find_file';
 
 jest.mock('~/lib/dompurify', () => ({
@@ -60,7 +61,7 @@ describe('ProjectFindFile', () => {
 
     element = $(TEMPLATE);
     mock.onGet(FILE_FIND_URL).replyOnce(
-      200,
+      HTTP_STATUS_OK,
       files.map((x) => x.path),
     );
     getProjectFindFileInstance(); // This triggers a load / axios call + subsequent render in the constructor
diff --git a/spec/frontend/search/store/actions_spec.js b/spec/frontend/search/store/actions_spec.js
index 041679e9139..2f87802dfe6 100644
--- a/spec/frontend/search/store/actions_spec.js
+++ b/spec/frontend/search/store/actions_spec.js
@@ -4,6 +4,7 @@ import Api from '~/api';
 import { createAlert } from '~/flash';
 import * as logger from '~/lib/logger';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import * as urlUtils from '~/lib/utils/url_utility';
 import * as actions from '~/search/store/actions';
 import {
@@ -62,11 +63,11 @@ describe('Global Search Store Actions', () => {
   });
 
   describe.each`
-    action                   | axiosMock                                             | type         | expectedMutations                                                                                       | flashCallCount
-    ${actions.fetchGroups}   | ${{ method: 'onGet', code: 200, res: MOCK_GROUPS }}   | ${'success'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_SUCCESS, payload: MOCK_GROUPS }]}       | ${0}
-    ${actions.fetchGroups}   | ${{ method: 'onGet', code: 500, res: null }}          | ${'error'}   | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_ERROR }]}                               | ${1}
-    ${actions.fetchProjects} | ${{ method: 'onGet', code: 200, res: MOCK_PROJECTS }} | ${'success'} | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_SUCCESS, payload: MOCK_PROJECTS }]} | ${0}
-    ${actions.fetchProjects} | ${{ method: 'onGet', code: 500, res: null }}          | ${'error'}   | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_ERROR }]}                           | ${1}
+    action                   | axiosMock                                                                  | type         | expectedMutations                                                                                       | flashCallCount
+    ${actions.fetchGroups}   | ${{ method: 'onGet', code: HTTP_STATUS_OK, res: MOCK_GROUPS }}             | ${'success'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_SUCCESS, payload: MOCK_GROUPS }]}       | ${0}
+    ${actions.fetchGroups}   | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR, res: null }} | ${'error'}   | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_ERROR }]}                               | ${1}
+    ${actions.fetchProjects} | ${{ method: 'onGet', code: HTTP_STATUS_OK, res: MOCK_PROJECTS }}           | ${'success'} | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_SUCCESS, payload: MOCK_PROJECTS }]} | ${0}
+    ${actions.fetchProjects} | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR, res: null }} | ${'error'}   | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_ERROR }]}                           | ${1}
   `(`axios calls`, ({ action, axiosMock, type, expectedMutations, flashCallCount }) => {
     describe(action.name, () => {
       describe(`on ${type}`, () => {
@@ -83,11 +84,11 @@ describe('Global Search Store Actions', () => {
   });
 
   describe.each`
-    action                          | axiosMock                         | type         | expectedMutations                               | flashCallCount
-    ${actions.loadFrequentGroups}   | ${{ method: 'onGet', code: 200 }} | ${'success'} | ${[PROMISE_ALL_EXPECTED_MUTATIONS.resGroups]}   | ${0}
-    ${actions.loadFrequentGroups}   | ${{ method: 'onGet', code: 500 }} | ${'error'}   | ${[]}                                           | ${1}
-    ${actions.loadFrequentProjects} | ${{ method: 'onGet', code: 200 }} | ${'success'} | ${[PROMISE_ALL_EXPECTED_MUTATIONS.resProjects]} | ${0}
-    ${actions.loadFrequentProjects} | ${{ method: 'onGet', code: 500 }} | ${'error'}   | ${[]}                                           | ${1}
+    action                          | axiosMock                                                       | type         | expectedMutations                               | flashCallCount
+    ${actions.loadFrequentGroups}   | ${{ method: 'onGet', code: HTTP_STATUS_OK }}                    | ${'success'} | ${[PROMISE_ALL_EXPECTED_MUTATIONS.resGroups]}   | ${0}
+    ${actions.loadFrequentGroups}   | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR }} | ${'error'}   | ${[]}                                           | ${1}
+    ${actions.loadFrequentProjects} | ${{ method: 'onGet', code: HTTP_STATUS_OK }}                    | ${'success'} | ${[PROMISE_ALL_EXPECTED_MUTATIONS.resProjects]} | ${0}
+    ${actions.loadFrequentProjects} | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR }} | ${'error'}   | ${[]}                                           | ${1}
   `('Promise.all calls', ({ action, axiosMock, type, expectedMutations, flashCallCount }) => {
     describe(action.name, () => {
       describe(`on ${type}`, () => {
@@ -272,10 +273,10 @@ describe('Global Search Store Actions', () => {
   });
 
   describe.each`
-    action                       | axiosMock                         | type         | scope         | expectedMutations                    | errorLogs
-    ${actions.fetchSidebarCount} | ${{ method: 'onGet', code: 200 }} | ${'success'} | ${'issues'}   | ${[MOCK_NAVIGATION_ACTION_MUTATION]} | ${0}
-    ${actions.fetchSidebarCount} | ${{ method: null, code: 0 }}      | ${'success'} | ${'projects'} | ${[]}                                | ${0}
-    ${actions.fetchSidebarCount} | ${{ method: 'onGet', code: 500 }} | ${'error'}   | ${'issues'}   | ${[]}                                | ${1}
+    action                       | axiosMock                                                       | type         | scope         | expectedMutations                    | errorLogs
+    ${actions.fetchSidebarCount} | ${{ method: 'onGet', code: HTTP_STATUS_OK }}                    | ${'success'} | ${'issues'}   | ${[MOCK_NAVIGATION_ACTION_MUTATION]} | ${0}
+    ${actions.fetchSidebarCount} | ${{ method: null, code: 0 }}                                    | ${'success'} | ${'projects'} | ${[]}                                | ${0}
+    ${actions.fetchSidebarCount} | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR }} | ${'error'}   | ${'issues'}   | ${[]}                                | ${1}
   `('fetchSidebarCount', ({ action, axiosMock, type, expectedMutations, scope, errorLogs }) => {
     describe(`on ${type}`, () => {
       beforeEach(() => {
@@ -300,17 +301,17 @@ describe('Global Search Store Actions', () => {
   });
 
   describe.each`
-    action                              | axiosMock                         | type         | expectedMutations                             | errorLogs
-    ${actions.fetchLanguageAggregation} | ${{ method: 'onGet', code: 200 }} | ${'success'} | ${MOCK_RECEIVE_AGGREGATIONS_SUCCESS_MUTATION} | ${0}
-    ${actions.fetchLanguageAggregation} | ${{ method: 'onPut', code: 0 }}   | ${'error'}   | ${MOCK_RECEIVE_AGGREGATIONS_ERROR_MUTATION}   | ${1}
-    ${actions.fetchLanguageAggregation} | ${{ method: 'onGet', code: 500 }} | ${'error'}   | ${MOCK_RECEIVE_AGGREGATIONS_ERROR_MUTATION}   | ${1}
+    action                              | axiosMock                                                       | type         | expectedMutations                             | errorLogs
+    ${actions.fetchLanguageAggregation} | ${{ method: 'onGet', code: HTTP_STATUS_OK }}                    | ${'success'} | ${MOCK_RECEIVE_AGGREGATIONS_SUCCESS_MUTATION} | ${0}
+    ${actions.fetchLanguageAggregation} | ${{ method: 'onPut', code: 0 }}                                 | ${'error'}   | ${MOCK_RECEIVE_AGGREGATIONS_ERROR_MUTATION}   | ${1}
+    ${actions.fetchLanguageAggregation} | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR }} | ${'error'}   | ${MOCK_RECEIVE_AGGREGATIONS_ERROR_MUTATION}   | ${1}
   `('fetchLanguageAggregation', ({ action, axiosMock, type, expectedMutations, errorLogs }) => {
     describe(`on ${type}`, () => {
       beforeEach(() => {
         if (axiosMock.method) {
           mock[axiosMock.method]().reply(
             axiosMock.code,
-            axiosMock.code === 200 ? MOCK_AGGREGATIONS : [],
+            axiosMock.code === HTTP_STATUS_OK ? MOCK_AGGREGATIONS : [],
           );
         }
       });
diff --git a/spec/frontend/vue_shared/components/markdown_drawer/utils/fetch_spec.js b/spec/frontend/vue_shared/components/markdown_drawer/utils/fetch_spec.js
index adcf57b76a4..c1e61f6e43d 100644
--- a/spec/frontend/vue_shared/components/markdown_drawer/utils/fetch_spec.js
+++ b/spec/frontend/vue_shared/components/markdown_drawer/utils/fetch_spec.js
@@ -4,6 +4,7 @@ import {
   splitDocument,
 } from '~/vue_shared/components/markdown_drawer/utils/fetch';
 import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import {
   MOCK_HTML,
   MOCK_DRAWER_DATA,
@@ -20,9 +21,9 @@ describe('utils/fetch', () => {
   });
 
   describe.each`
-    axiosMock                        | type         | toExpect
-    ${{ code: 200, res: MOCK_HTML }} | ${'success'} | ${MOCK_DRAWER_DATA}
-    ${{ code: 500, res: null }}      | ${'error'}   | ${MOCK_DRAWER_DATA_ERROR}
+    axiosMock                                                 | type         | toExpect
+    ${{ code: HTTP_STATUS_OK, res: MOCK_HTML }}               | ${'success'} | ${MOCK_DRAWER_DATA}
+    ${{ code: HTTP_STATUS_INTERNAL_SERVER_ERROR, res: null }} | ${'error'}   | ${MOCK_DRAWER_DATA_ERROR}
   `('process markdown data', ({ axiosMock, type, toExpect }) => {
     describe(`if api fetch responds with ${type}`, () => {
       beforeEach(() => {