Add latest changes from gitlab-org/gitlab@master

20 files changed, 259 insertions, 52 deletions

diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index 346e43e5a72..638e4713ddc 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -13,7 +13,7 @@ import * as diffActions from '~/diffs/store/actions';
 import * as types from '~/diffs/store/mutation_types';
 import * as utils from '~/diffs/store/utils';
 import * as treeWorkerUtils from '~/diffs/utils/tree_worker_utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -54,7 +54,7 @@ describe('DiffsStoreActions', () => {
     ['requestAnimationFrame', 'requestIdleCallback'].forEach((method) => {
       global[method] = originalMethods[method];
     });
-    createFlash.mockClear();
+    createAlert.mockClear();
     mock.restore();
   });
 
@@ -254,8 +254,8 @@ describe('DiffsStoreActions', () => {
       mock.onGet(endpointCoverage).reply(400);
 
       await testAction(diffActions.fetchCoverageFiles, {}, { endpointCoverage }, [], []);
-      expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledWith({
         message: expect.stringMatching('Something went wrong'),
       });
     });
diff --git a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
index fe20c23e4d7..1ff351b6554 100644
--- a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
+++ b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
@@ -12,7 +12,7 @@ import {
 } from '~/editor/constants';
 import { EditorMarkdownPreviewExtension } from '~/editor/extensions/source_editor_markdown_livepreview_ext';
 import SourceEditor from '~/editor/source_editor';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import syntaxHighlight from '~/syntax_highlight';
 import { spyOnApi } from './helpers';
@@ -279,7 +279,7 @@ describe('Markdown Live Preview Extension for Source Editor', () => {
       mockAxios.onPost().reply(500);
 
       await fetchPreview();
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/environments/delete_environment_modal_spec.js b/spec/frontend/environments/delete_environment_modal_spec.js
index 48e4f661c1d..cc18bf754eb 100644
--- a/spec/frontend/environments/delete_environment_modal_spec.js
+++ b/spec/frontend/environments/delete_environment_modal_spec.js
@@ -6,7 +6,7 @@ import { s__, sprintf } from '~/locale';
 import DeleteEnvironmentModal from '~/environments/components/delete_environment_modal.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { resolvedEnvironment } from './graphql/mock_data';
 
 jest.mock('~/flash');
@@ -57,7 +57,7 @@ describe('~/environments/components/delete_environment_modal.vue', () => {
 
     await nextTick();
 
-    expect(createFlash).not.toHaveBeenCalled();
+    expect(createAlert).not.toHaveBeenCalled();
 
     expect(deleteResolver).toHaveBeenCalledWith(
       expect.anything(),
@@ -76,7 +76,7 @@ describe('~/environments/components/delete_environment_modal.vue', () => {
 
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith(
+    expect(createAlert).toHaveBeenCalledWith(
       expect.objectContaining({
         message: s__(
           'Environments|An error occurred while deleting the environment. Check if the environment stopped; if not, stop it and try again.',
diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js
index 0f2d6e95bf0..5ea23af4c16 100644
--- a/spec/frontend/environments/edit_environment_spec.js
+++ b/spec/frontend/environments/edit_environment_spec.js
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import EditEnvironment from '~/environments/components/edit_environment.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 
@@ -85,7 +85,7 @@ describe('~/environments/components/edit.vue', () => {
 
     await submitForm(expected, [400, { message: ['uh oh!'] }]);
 
-    expect(createFlash).toHaveBeenCalledWith({ message: 'uh oh!' });
+    expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' });
     expect(showsLoading()).toBe(false);
   });
 
diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js
index 2405cb82eac..6dd4eea7437 100644
--- a/spec/frontend/environments/new_environment_spec.js
+++ b/spec/frontend/environments/new_environment_spec.js
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import NewEnvironment from '~/environments/components/new_environment.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 
@@ -94,7 +94,7 @@ describe('~/environments/components/new.vue', () => {
 
     await submitForm(expected, [400, { message: ['name taken'] }]);
 
-    expect(createFlash).toHaveBeenCalledWith({ message: 'name taken' });
+    expect(createAlert).toHaveBeenCalledWith({ message: 'name taken' });
     expect(showsLoading()).toBe(false);
   });
 });
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js b/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js
new file mode 100644
index 00000000000..155fc5342ca
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js
@@ -0,0 +1,54 @@
+const usersMock = [
+  {
+    username: 'usr1',
+    webUrl: 'http://test.test/usr1',
+    name: 'User 1',
+    avatarUrl: 'http://test.test/avt1.png',
+  },
+  {
+    username: 'usr2',
+    webUrl: 'http://test.test/usr2',
+    name: 'User 2',
+    avatarUrl: 'http://test.test/avt2.png',
+  },
+  {
+    username: 'usr3',
+    webUrl: 'http://test.test/usr3',
+    name: 'User 3',
+    avatarUrl: 'http://test.test/avt3.png',
+  },
+  {
+    username: 'usr4',
+    webUrl: 'http://test.test/usr4',
+    name: 'User 4',
+    avatarUrl: 'http://test.test/avt4.png',
+  },
+  {
+    username: 'usr5',
+    webUrl: 'http://test.test/usr5',
+    name: 'User 5',
+    avatarUrl: 'http://test.test/avt5.png',
+  },
+];
+
+const accessLevelsMock = [
+  { accessLevelDescription: 'Administrator' },
+  { accessLevelDescription: 'Maintainer' },
+];
+
+const groupsMock = [{ name: 'test_group_1' }, { name: 'test_group_2' }];
+
+export const protectionPropsMock = {
+  header: 'Test protection',
+  headerLinkTitle: 'Test link title',
+  headerLinkHref: 'Test link href',
+  roles: accessLevelsMock,
+  users: usersMock,
+  groups: groupsMock,
+};
+
+export const protectionRowPropsMock = {
+  title: 'Test title',
+  users: usersMock,
+  accessLevels: accessLevelsMock,
+};
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js
new file mode 100644
index 00000000000..a1a2016fa17
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js
@@ -0,0 +1,63 @@
+import { GlAvatarsInline, GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ProtectionRow, {
+  MAX_VISIBLE_AVATARS,
+  AVATAR_SIZE,
+} from '~/projects/settings/branch_rules/components/view/protection_row.vue';
+import { protectionRowPropsMock } from './mock_data';
+
+describe('Branch rule protection row', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(ProtectionRow, {
+      propsData: protectionRowPropsMock,
+      stubs: { GlAvatarsInline },
+    });
+  };
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  const findTitle = () => wrapper.findByText(protectionRowPropsMock.title);
+  const findAvatarsInline = () => wrapper.findComponent(GlAvatarsInline);
+  const findAvatarLinks = () => wrapper.findAllComponents(GlAvatarLink);
+  const findAvatars = () => wrapper.findAllComponents(GlAvatar);
+  const findAccessLevels = () => wrapper.findAllByTestId('access-level');
+
+  it('renders a title', () => {
+    expect(findTitle().exists()).toBe(true);
+  });
+
+  it('renders an avatars-inline component', () => {
+    expect(findAvatarsInline().props('avatars')).toMatchObject(protectionRowPropsMock.users);
+    expect(findAvatarsInline().props('badgeSrOnlyText')).toBe('1 additional user');
+  });
+
+  it('renders avatar-link components', () => {
+    expect(findAvatarLinks().length).toBe(MAX_VISIBLE_AVATARS);
+
+    expect(findAvatarLinks().at(1).attributes('href')).toBe(protectionRowPropsMock.users[1].webUrl);
+    expect(findAvatarLinks().at(1).attributes('title')).toBe(protectionRowPropsMock.users[1].name);
+  });
+
+  it('renders avatar components', () => {
+    expect(findAvatars().length).toBe(MAX_VISIBLE_AVATARS);
+
+    expect(findAvatars().at(1).attributes('src')).toBe(protectionRowPropsMock.users[1].avatarUrl);
+    expect(findAvatars().at(1).attributes('label')).toBe(protectionRowPropsMock.users[1].name);
+    expect(findAvatars().at(1).props('size')).toBe(AVATAR_SIZE);
+  });
+
+  it('renders access level descriptions', () => {
+    expect(findAccessLevels().length).toBe(protectionRowPropsMock.accessLevels.length);
+
+    expect(findAccessLevels().at(0).text()).toBe(
+      protectionRowPropsMock.accessLevels[0].accessLevelDescription,
+    );
+    expect(findAccessLevels().at(1).text()).toBe(
+      protectionRowPropsMock.accessLevels[1].accessLevelDescription,
+    );
+  });
+});
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js
new file mode 100644
index 00000000000..91d16fd86a6
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js
@@ -0,0 +1,59 @@
+import { GlCard, GlLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import Protection, { i18n } from '~/projects/settings/branch_rules/components/view/protection.vue';
+import ProtectionRow from '~/projects/settings/branch_rules/components/view/protection_row.vue';
+import { protectionPropsMock } from './mock_data';
+
+describe('Branch rule protection', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(Protection, {
+      propsData: protectionPropsMock,
+      stubs: { GlCard },
+    });
+  };
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  const findCard = () => wrapper.findComponent(GlCard);
+  const findHeader = () => wrapper.findByText(protectionPropsMock.header);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findProtectionRows = () => wrapper.findAllComponents(ProtectionRow);
+
+  it('renders a card component', () => {
+    expect(findCard().exists()).toBe(true);
+  });
+
+  it('renders a header with a link', () => {
+    expect(findHeader().exists()).toBe(true);
+    expect(findLink().text()).toBe(protectionPropsMock.headerLinkTitle);
+    expect(findLink().attributes('href')).toBe(protectionPropsMock.headerLinkHref);
+  });
+
+  it('renders a protection row for roles', () => {
+    expect(findProtectionRows().at(0).props()).toMatchObject({
+      accessLevels: protectionPropsMock.roles,
+      showDivider: false,
+      title: i18n.rolesTitle,
+    });
+  });
+
+  it('renders a protection row for users', () => {
+    expect(findProtectionRows().at(1).props()).toMatchObject({
+      users: protectionPropsMock.users,
+      showDivider: true,
+      title: i18n.usersTitle,
+    });
+  });
+
+  it('renders a protection row for groups', () => {
+    expect(findProtectionRows().at(2).props()).toMatchObject({
+      accessLevels: protectionPropsMock.groups,
+      showDivider: true,
+      title: i18n.groupsTitle,
+    });
+  });
+});
diff --git a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
index 635ef0f6b0d..519475f8953 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
+++ b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
@@ -72,7 +72,9 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
       <div
         class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
       >
-        <div>
+        <div
+          class="gl-display-flex"
+        >
           <div
             class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
             lazy=""
@@ -246,7 +248,9 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
       <div
         class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
       >
-        <div>
+        <div
+          class="gl-display-flex"
+        >
           <div
             class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
             lazy=""
diff --git a/spec/frontend/vue_merge_request_widget/deployment/deployment_actions_spec.js b/spec/frontend/vue_merge_request_widget/deployment/deployment_actions_spec.js
index a8912405fa8..d3e17065d89 100644
--- a/spec/frontend/vue_merge_request_widget/deployment/deployment_actions_spec.js
+++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_actions_spec.js
@@ -11,6 +11,7 @@ import {
   REDEPLOYING,
   STOPPING,
 } from '~/vue_merge_request_widget/components/deployment/constants';
+import eventHub from '~/vue_merge_request_widget/event_hub';
 import DeploymentActions from '~/vue_merge_request_widget/components/deployment/deployment_actions.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 import {
@@ -192,6 +193,7 @@ describe('DeploymentAction component', () => {
               describe('it should call the executeAction method', () => {
                 beforeEach(async () => {
                   jest.spyOn(wrapper.vm, 'executeAction').mockImplementation();
+                  jest.spyOn(eventHub, '$emit');
 
                   await waitForPromises();
 
@@ -206,11 +208,16 @@ describe('DeploymentAction component', () => {
                     actionButtonMocks[configConst],
                   );
                 });
+
+                it('emits the FetchDeployments event', () => {
+                  expect(eventHub.$emit).toHaveBeenCalledWith('FetchDeployments');
+                });
               });
 
               describe('when executeInlineAction errors', () => {
                 beforeEach(async () => {
                   executeActionSpy.mockRejectedValueOnce();
+                  jest.spyOn(eventHub, '$emit');
 
                   await waitForPromises();
 
@@ -224,6 +231,10 @@ describe('DeploymentAction component', () => {
                     message: actionButtonMocks[configConst].errorMessage,
                   });
                 });
+
+                it('emits the FetchDeployments event', () => {
+                  expect(eventHub.$emit).toHaveBeenCalledWith('FetchDeployments');
+                });
               });
             });
           });
diff --git a/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js b/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
index e8233d5b2eb..30e299dea9a 100644
--- a/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
@@ -368,12 +368,13 @@ describe('MrWidgetOptions', () => {
 
       describe('bindEventHubListeners', () => {
         it.each`
-          event                        | method                   | methodArgs
-          ${'MRWidgetUpdateRequested'} | ${'checkStatus'}         | ${(x) => [x]}
-          ${'MRWidgetRebaseSuccess'}   | ${'checkStatus'}         | ${(x) => [x, true]}
-          ${'FetchActionsContent'}     | ${'fetchActionsContent'} | ${() => []}
-          ${'EnablePolling'}           | ${'resumePolling'}       | ${() => []}
-          ${'DisablePolling'}          | ${'stopPolling'}         | ${() => []}
+          event                        | method                        | methodArgs
+          ${'MRWidgetUpdateRequested'} | ${'checkStatus'}              | ${(x) => [x]}
+          ${'MRWidgetRebaseSuccess'}   | ${'checkStatus'}              | ${(x) => [x, true]}
+          ${'FetchActionsContent'}     | ${'fetchActionsContent'}      | ${() => []}
+          ${'EnablePolling'}           | ${'resumePolling'}            | ${() => []}
+          ${'DisablePolling'}          | ${'stopPolling'}              | ${() => []}
+          ${'FetchDeployments'}        | ${'fetchPreMergeDeployments'} | ${() => []}
         `('should bind to $event', ({ event, method, methodArgs }) => {
           jest.spyOn(wrapper.vm, method).mockImplementation();
 
diff --git a/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js b/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
index 518cf354675..537367940e0 100644
--- a/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
+++ b/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
@@ -4,7 +4,7 @@ import actionsFactory from '~/vue_shared/components/metric_images/store/actions'
 import * as types from '~/vue_shared/components/metric_images/store/mutation_types';
 import createStore from '~/vue_shared/components/metric_images/store';
 import testAction from 'helpers/vuex_action_helper';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { fileList, initialData } from '../mock_data';
 
@@ -35,7 +35,7 @@ describe('Metrics tab store actions', () => {
   });
 
   afterEach(() => {
-    createFlash.mockClear();
+    createAlert.mockClear();
   });
 
   describe('fetching metric images', () => {
@@ -61,7 +61,7 @@ describe('Metrics tab store actions', () => {
         [{ type: types.REQUEST_METRIC_IMAGES }, { type: types.RECEIVE_METRIC_IMAGES_ERROR }],
         [],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
@@ -98,7 +98,7 @@ describe('Metrics tab store actions', () => {
         [{ type: types.REQUEST_METRIC_UPLOAD }, { type: types.RECEIVE_METRIC_UPLOAD_ERROR }],
         [],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
@@ -129,7 +129,7 @@ describe('Metrics tab store actions', () => {
         [{ type: types.REQUEST_METRIC_UPLOAD }, { type: types.RECEIVE_METRIC_UPLOAD_ERROR }],
         [],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js b/spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js
index c5672bc28cc..09b0b3d43ad 100644
--- a/spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js
+++ b/spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js
@@ -6,7 +6,7 @@ import {
   expectedDownloadDropdownPropsWithTitle,
   securityReportMergeRequestDownloadPathsQueryResponse,
 } from 'jest/vue_shared/security_reports/mock_data';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import Component from '~/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue';
 import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
 import {
@@ -93,8 +93,8 @@ describe('Merge request artifact Download', () => {
       });
     });
 
-    it('calls createFlash correctly', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+    it('calls createAlert correctly', () => {
+      expect(createAlert).toHaveBeenCalledWith({
         message: Component.i18n.apiError,
         captureError: true,
         error: expect.any(Error),
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
index 2bc513e87bf..edd044bd754 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 
 import testAction from 'helpers/vuex_action_helper';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as actions from '~/vue_shared/components/sidebar/labels_select_vue/store/actions';
 import * as types from '~/vue_shared/components/sidebar/labels_select_vue/store/mutation_types';
@@ -102,7 +102,7 @@ describe('LabelsSelect Actions', () => {
     it('shows flash error', () => {
       actions.receiveLabelsFailure({ commit: () => {} });
 
-      expect(createFlash).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
+      expect(createAlert).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
     });
   });
 
@@ -186,7 +186,7 @@ describe('LabelsSelect Actions', () => {
     it('shows flash error', () => {
       actions.receiveCreateLabelFailure({ commit: () => {} });
 
-      expect(createFlash).toHaveBeenCalledWith({ message: 'Error creating label.' });
+      expect(createAlert).toHaveBeenCalledWith({ message: 'Error creating label.' });
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js
index 9c29f304c71..237f174e048 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js
@@ -4,7 +4,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { workspaceLabelsQueries } from '~/sidebar/constants';
 import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue';
 import createLabelMutation from '~/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql';
@@ -202,7 +202,7 @@ describe('DropdownContentsCreateView', () => {
     });
   });
 
-  it('calls createFlash is mutation has a user-recoverable error', async () => {
+  it('calls createAlert is mutation has a user-recoverable error', async () => {
     createComponent({ mutationHandler: createLabelUserRecoverableErrorHandler });
     fillLabelAttributes();
     await nextTick();
@@ -210,10 +210,10 @@ describe('DropdownContentsCreateView', () => {
     findCreateButton().vm.$emit('click');
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
-  it('calls createFlash is mutation was rejected', async () => {
+  it('calls createAlert is mutation was rejected', async () => {
     createComponent({ mutationHandler: createLabelErrorHandler });
     fillLabelAttributes();
     await nextTick();
@@ -221,7 +221,7 @@ describe('DropdownContentsCreateView', () => {
     findCreateButton().vm.$emit('click');
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it('displays error in alert if label title is already taken', async () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js
index 7f6770e0bea..5d8ad5ddee5 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js
@@ -9,7 +9,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue';
@@ -143,13 +143,13 @@ describe('DropdownContentsLabelsView', () => {
     expect(findNoResultsMessage().isVisible()).toBe(true);
   });
 
-  it('calls `createFlash` when fetching labels failed', async () => {
+  it('calls `createAlert` when fetching labels failed', async () => {
     createComponent({ queryHandler: jest.fn().mockRejectedValue('Houston, we have a problem!') });
     await makeObserverAppear();
     jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it('emits an `input` event on label click', async () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
index cad401e0013..b58c44645d6 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
@@ -3,7 +3,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import DropdownContents from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue';
@@ -151,7 +151,7 @@ describe('LabelsSelectRoot', () => {
     it('creates flash with error message when query is rejected', async () => {
       createComponent({ queryHandler: errorQueryHandler });
       await waitForPromises();
-      expect(createFlash).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
+      expect(createAlert).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
     });
   });
 
@@ -197,7 +197,7 @@ describe('LabelsSelectRoot', () => {
       findDropdownContents().vm.$emit('setLabels', [label]);
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         captureError: true,
         error: expect.anything(),
         message: 'An error occurred while updating labels.',
diff --git a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
index e020d9a557e..6d319b37b02 100644
--- a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
@@ -22,10 +22,10 @@ jest.mock('~/vue_shared/components/source_viewer/plugins/index');
 Vue.use(VueRouter);
 const router = new VueRouter();
 
-const generateContent = (content, totalLines = 1) => {
+const generateContent = (content, totalLines = 1, delimiter = '\n') => {
   let generatedContent = '';
   for (let i = 0; i < totalLines; i += 1) {
-    generatedContent += `Line: ${i + 1} = ${content}\n`;
+    generatedContent += `Line: ${i + 1} = ${content}${delimiter}`;
   }
   return generatedContent;
 };
@@ -38,7 +38,9 @@ describe('Source Viewer component', () => {
   const mappedLanguage = ROUGE_TO_HLJS_LANGUAGE_MAP[language];
   const chunk1 = generateContent('// Some source code 1', 70);
   const chunk2 = generateContent('// Some source code 2', 70);
-  const content = chunk1 + chunk2;
+  const chunk3 = generateContent('// Some source code 3', 70, '\r\n');
+  const chunk3Result = generateContent('// Some source code 3', 70, '\n');
+  const content = chunk1 + chunk2 + chunk3;
   const path = 'some/path.js';
   const blamePath = 'some/blame/path.js';
   const fileType = 'javascript';
@@ -152,6 +154,19 @@ describe('Source Viewer component', () => {
         startingFrom: 70,
       });
     });
+
+    it('renders the third chunk', async () => {
+      const thirdChunk = findChunks().at(2);
+
+      expect(thirdChunk.props('content')).toContain(chunk3Result.trim());
+
+      expect(chunk3Result).toEqual(chunk3.replace(/\r?\n/g, '\n'));
+
+      expect(thirdChunk.props()).toMatchObject({
+        totalLines: 70,
+        startingFrom: 140,
+      });
+    });
   });
 
   it('emits showBlobInteractionZones on the eventHub when chunk appears', () => {
diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
index e52828deb39..e47fc518b23 100644
--- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
@@ -11,7 +11,7 @@ import {
   I18N_USER_UNFOLLOW,
 } from '~/vue_shared/components/user_popover/constants';
 import axios from '~/lib/utils/axios_utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { followUser, unfollowUser } from '~/api/user_api';
 import { mockTracking } from 'helpers/tracking_helper';
 
@@ -388,7 +388,7 @@ describe('User Popover Component', () => {
         it('shows an error message', async () => {
           await axios.waitForAll();
 
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'An error occurred while trying to follow this user, please try again.',
             error: {},
             captureError: true,
@@ -437,7 +437,7 @@ describe('User Popover Component', () => {
         });
 
         it('shows an error message', () => {
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'An error occurred while trying to unfollow this user, please try again.',
             error: {},
             captureError: true,
diff --git a/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js b/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
index a9651cf8bac..43ff68e30b5 100644
--- a/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
+++ b/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
@@ -14,7 +14,7 @@ import {
   sastDiffSuccessMock,
   secretDetectionDiffSuccessMock,
 } from 'jest/vue_shared/security_reports/mock_data';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import HelpIcon from '~/vue_shared/security_reports/components/help_icon.vue';
 import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
@@ -135,8 +135,8 @@ describe('Security reports app', () => {
       });
     });
 
-    it('calls createFlash correctly', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+    it('calls createAlert correctly', () => {
+      expect(createAlert).toHaveBeenCalledWith({
         message: SecurityReportsApp.i18n.apiError,
         captureError: true,
         error: expect.any(Error),