Add latest changes from gitlab-org/gitlab@13-3-stable-ee

16 files changed, 132 insertions, 79 deletions

diff --git a/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap
index 0409b118222..72761c18b3d 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap
@@ -4,11 +4,15 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = `
 <div
   class="file-content code"
 >
-  <pre
+  <div
     data-editor-loading=""
     id="editor"
   >
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </pre>
+    <pre
+      class="editor-loading-content"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </pre>
+  </div>
 </div>
 `;
diff --git a/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap
index 1e639f91797..a5690844053 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_edit_header_spec.js.snap
@@ -4,13 +4,18 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = `
 <div
   class="js-file-title file-title-flex-parent"
 >
-  <gl-form-input-stub
-    class="form-control js-snippet-file-name"
-    id="snippet_file_name"
-    name="snippet_file_name"
-    placeholder="Give your file a name to add code highlighting, e.g. example.rb for Ruby"
-    type="text"
-    value="foo.md"
-  />
+  <div
+    class="gl-display-flex gl-align-items-center gl-w-full"
+  >
+    <gl-form-input-stub
+      class="form-control js-snippet-file-name"
+      name="snippet_file_name"
+      placeholder="Give your file a name to add code highlighting, e.g. example.rb for Ruby"
+      type="text"
+      value="foo.md"
+    />
+     
+    <!---->
+  </div>
 </div>
 `;
diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap
index 7d868625956..b54efb93bc9 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap
@@ -9,7 +9,7 @@ exports[`Blob Header Default Actions rendering matches the snapshot 1`] = `
   />
    
   <div
-    class="file-actions d-none d-sm-flex"
+    class="gl-display-none gl-display-sm-flex"
   >
     <viewer-switcher-stub
       value="simple"
diff --git a/spec/frontend/blob/components/blob_content_error_spec.js b/spec/frontend/blob/components/blob_content_error_spec.js
index 508b1ed7e68..0c6d269ad05 100644
--- a/spec/frontend/blob/components/blob_content_error_spec.js
+++ b/spec/frontend/blob/components/blob_content_error_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import BlobContentError from '~/blob/components/blob_content_error.vue';
 import { GlSprintf } from '@gitlab/ui';
+import BlobContentError from '~/blob/components/blob_content_error.vue';
 
 import { BLOB_RENDER_ERRORS } from '~/blob/components/constants';
 
diff --git a/spec/frontend/blob/components/blob_content_spec.js b/spec/frontend/blob/components/blob_content_spec.js
index 244ed41869d..9232a709194 100644
--- a/spec/frontend/blob/components/blob_content_spec.js
+++ b/spec/frontend/blob/components/blob_content_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import BlobContent from '~/blob/components/blob_content.vue';
 import BlobContentError from '~/blob/components/blob_content_error.vue';
 import {
@@ -13,7 +14,6 @@ import {
   RichBlobContentMock,
   SimpleBlobContentMock,
 } from './mock_data';
-import { GlLoadingIcon } from '@gitlab/ui';
 import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
 
 describe('Blob Content component', () => {
diff --git a/spec/frontend/blob/components/blob_edit_content_spec.js b/spec/frontend/blob/components/blob_edit_content_spec.js
index 971ef72521d..3cc210e972c 100644
--- a/spec/frontend/blob/components/blob_edit_content_spec.js
+++ b/spec/frontend/blob/components/blob_edit_content_spec.js
@@ -1,28 +1,31 @@
 import { shallowMount } from '@vue/test-utils';
-import BlobEditContent from '~/blob/components/blob_edit_content.vue';
-import { initEditorLite } from '~/blob/utils';
 import { nextTick } from 'vue';
+import BlobEditContent from '~/blob/components/blob_edit_content.vue';
+import * as utils from '~/blob/utils';
+import Editor from '~/editor/editor_lite';
 
-jest.mock('~/blob/utils', () => ({
-  initEditorLite: jest.fn(),
-}));
+jest.mock('~/editor/editor_lite');
 
 describe('Blob Header Editing', () => {
   let wrapper;
   const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
   const fileName = 'lorem.txt';
+  const fileGlobalId = 'snippet_777';
 
   function createComponent(props = {}) {
     wrapper = shallowMount(BlobEditContent, {
       propsData: {
         value,
         fileName,
+        fileGlobalId,
         ...props,
       },
     });
   }
 
   beforeEach(() => {
+    jest.spyOn(utils, 'initEditorLite');
+
     createComponent();
   });
 
@@ -30,6 +33,15 @@ describe('Blob Header Editing', () => {
     wrapper.destroy();
   });
 
+  const triggerChangeContent = val => {
+    jest.spyOn(Editor.prototype, 'getValue').mockReturnValue(val);
+    const [cb] = Editor.prototype.onChangeContent.mock.calls[0];
+
+    cb();
+
+    jest.runOnlyPendingTimers();
+  };
+
   describe('rendering', () => {
     it('matches the snapshot', () => {
       expect(wrapper.element).toMatchSnapshot();
@@ -51,18 +63,15 @@ describe('Blob Header Editing', () => {
 
     it('initialises Editor Lite', () => {
       const el = wrapper.find({ ref: 'editor' }).element;
-      expect(initEditorLite).toHaveBeenCalledWith({
+      expect(utils.initEditorLite).toHaveBeenCalledWith({
         el,
         blobPath: fileName,
+        blobGlobalId: fileGlobalId,
         blobContent: value,
       });
     });
 
     it('reacts to the changes in fileName', () => {
-      wrapper.vm.editor = {
-        updateModelLanguage: jest.fn(),
-      };
-
       const newFileName = 'ipsum.txt';
 
       wrapper.setProps({
@@ -70,21 +79,20 @@ describe('Blob Header Editing', () => {
       });
 
       return nextTick().then(() => {
-        expect(wrapper.vm.editor.updateModelLanguage).toHaveBeenCalledWith(newFileName);
+        expect(Editor.prototype.updateModelLanguage).toHaveBeenCalledWith(newFileName);
       });
     });
 
+    it('registers callback with editor onChangeContent', () => {
+      expect(Editor.prototype.onChangeContent).toHaveBeenCalledWith(expect.any(Function));
+    });
+
     it('emits input event when the blob content is changed', () => {
-      const editorEl = wrapper.find({ ref: 'editor' });
-      wrapper.vm.editor = {
-        getValue: jest.fn().mockReturnValue(value),
-      };
+      expect(wrapper.emitted().input).toBeUndefined();
 
-      editorEl.trigger('keyup');
+      triggerChangeContent(value);
 
-      return nextTick().then(() => {
-        expect(wrapper.emitted().input[0]).toEqual([value]);
-      });
+      expect(wrapper.emitted().input).toEqual([[value]]);
     });
   });
 });
diff --git a/spec/frontend/blob/components/blob_edit_header_spec.js b/spec/frontend/blob/components/blob_edit_header_spec.js
index db7d7d7d48d..c71595a79cf 100644
--- a/spec/frontend/blob/components/blob_edit_header_spec.js
+++ b/spec/frontend/blob/components/blob_edit_header_spec.js
@@ -1,18 +1,21 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlFormInput, GlButton } from '@gitlab/ui';
 import BlobEditHeader from '~/blob/components/blob_edit_header.vue';
-import { GlFormInput } from '@gitlab/ui';
 
 describe('Blob Header Editing', () => {
   let wrapper;
   const value = 'foo.md';
 
-  function createComponent() {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(BlobEditHeader, {
       propsData: {
         value,
+        ...props,
       },
     });
-  }
+  };
+  const findDeleteButton = () =>
+    wrapper.findAll(GlButton).wrappers.find(x => x.text() === 'Delete file');
 
   beforeEach(() => {
     createComponent();
@@ -30,6 +33,10 @@ describe('Blob Header Editing', () => {
     it('contains a form input field', () => {
       expect(wrapper.contains(GlFormInput)).toBe(true);
     });
+
+    it('does not show delete button', () => {
+      expect(findDeleteButton()).toBeUndefined();
+    });
   });
 
   describe('functionality', () => {
@@ -47,4 +54,35 @@ describe('Blob Header Editing', () => {
       });
     });
   });
+
+  describe.each`
+    props                                     | expectedDisabled
+    ${{ showDelete: true }}                   | ${false}
+    ${{ showDelete: true, canDelete: false }} | ${true}
+  `('with $props', ({ props, expectedDisabled }) => {
+    beforeEach(() => {
+      createComponent(props);
+    });
+
+    it(`shows delete button (disabled=${expectedDisabled})`, () => {
+      const deleteButton = findDeleteButton();
+
+      expect(deleteButton.exists()).toBe(true);
+      expect(deleteButton.props('disabled')).toBe(expectedDisabled);
+    });
+  });
+
+  describe('with delete button', () => {
+    beforeEach(() => {
+      createComponent({ showDelete: true, canDelete: true });
+    });
+
+    it('emits delete when clicked', () => {
+      expect(wrapper.emitted().delete).toBeUndefined();
+
+      findDeleteButton().vm.$emit('click');
+
+      expect(wrapper.emitted().delete).toEqual([[]]);
+    });
+  });
 });
diff --git a/spec/frontend/blob/components/blob_embeddable_spec.js b/spec/frontend/blob/components/blob_embeddable_spec.js
index b2fe71f1401..1f6790013ca 100644
--- a/spec/frontend/blob/components/blob_embeddable_spec.js
+++ b/spec/frontend/blob/components/blob_embeddable_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import { GlFormInputGroup } from '@gitlab/ui';
+import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 
 describe('Blob Embeddable', () => {
   let wrapper;
diff --git a/spec/frontend/blob/components/blob_header_default_actions_spec.js b/spec/frontend/blob/components/blob_header_default_actions_spec.js
index 529e7cc85f5..590e36b16af 100644
--- a/spec/frontend/blob/components/blob_header_default_actions_spec.js
+++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import BlobHeaderActions from '~/blob/components/blob_header_default_actions.vue';
 import {
   BTN_COPY_CONTENTS_TITLE,
@@ -6,7 +7,6 @@ import {
   BTN_RAW_TITLE,
   RICH_BLOB_VIEWER,
 } from '~/blob/components/constants';
-import { GlButtonGroup, GlDeprecatedButton } from '@gitlab/ui';
 import { Blob } from './mock_data';
 
 describe('Blob Header Default Actions', () => {
@@ -26,7 +26,7 @@ describe('Blob Header Default Actions', () => {
   beforeEach(() => {
     createComponent();
     btnGroup = wrapper.find(GlButtonGroup);
-    buttons = wrapper.findAll(GlDeprecatedButton);
+    buttons = wrapper.findAll(GlButton);
   });
 
   afterEach(() => {
@@ -61,7 +61,7 @@ describe('Blob Header Default Actions', () => {
       createComponent({
         activeViewer: RICH_BLOB_VIEWER,
       });
-      buttons = wrapper.findAll(GlDeprecatedButton);
+      buttons = wrapper.findAll(GlButton);
 
       expect(buttons.at(0).attributes('disabled')).toBeTruthy();
     });
diff --git a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
index f1a7ac8b21a..cf1101bc22c 100644
--- a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
+++ b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import BlobHeaderViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue';
 import {
   RICH_BLOB_VIEWER,
@@ -6,7 +7,6 @@ import {
   SIMPLE_BLOB_VIEWER,
   SIMPLE_BLOB_VIEWER_TITLE,
 } from '~/blob/components/constants';
-import { GlButtonGroup, GlButton } from '@gitlab/ui';
 
 describe('Blob Header Viewer Switcher', () => {
   let wrapper;
diff --git a/spec/frontend/blob/components/mock_data.js b/spec/frontend/blob/components/mock_data.js
index 58aa1dc6dc9..8cfcec2693c 100644
--- a/spec/frontend/blob/components/mock_data.js
+++ b/spec/frontend/blob/components/mock_data.js
@@ -47,10 +47,12 @@ export const BinaryBlob = {
 };
 
 export const RichBlobContentMock = {
+  path: 'foo.md',
   richData: '<h1>Rich</h1>',
 };
 
 export const SimpleBlobContentMock = {
+  path: 'foo.js',
   plainData: 'Plain',
 };
 
diff --git a/spec/frontend/blob/notebook/notebook_viever_spec.js b/spec/frontend/blob/notebook/notebook_viever_spec.js
index 535d2bd544a..f6a926a5ecb 100644
--- a/spec/frontend/blob/notebook/notebook_viever_spec.js
+++ b/spec/frontend/blob/notebook/notebook_viever_spec.js
@@ -1,10 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import component from '~/blob/notebook/notebook_viewer.vue';
 import NotebookLab from '~/notebook/index.vue';
-import waitForPromises from 'helpers/wait_for_promises';
 
 describe('iPython notebook renderer', () => {
   let wrapper;
diff --git a/spec/frontend/blob/pipeline_tour_success_modal_spec.js b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
index 6d4e5e46cb8..9998cd7f91c 100644
--- a/spec/frontend/blob/pipeline_tour_success_modal_spec.js
+++ b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
@@ -1,8 +1,8 @@
-import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue';
 import { shallowMount } from '@vue/test-utils';
 import Cookies from 'js-cookie';
-import { GlSprintf, GlModal } from '@gitlab/ui';
+import { GlSprintf, GlModal, GlLink } from '@gitlab/ui';
 import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
+import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue';
 import modalProps from './pipeline_tour_success_mock_data';
 
 describe('PipelineTourSuccessModal', () => {
@@ -18,6 +18,7 @@ describe('PipelineTourSuccessModal', () => {
       propsData: modalProps,
       stubs: {
         GlModal,
+        GlSprintf,
       },
     });
 
@@ -37,6 +38,10 @@ describe('PipelineTourSuccessModal', () => {
     expect(sprintf.exists()).toBe(true);
   });
 
+  it('renders the link for codeQualityLink', () => {
+    expect(wrapper.find(GlLink).attributes('href')).toBe(wrapper.vm.$options.codeQualityLink);
+  });
+
   it('calls to remove cookie', () => {
     wrapper.vm.disableModalFromRenderingAgain();
 
diff --git a/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js b/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
index 3c03e6f04ab..4714d34dbec 100644
--- a/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
+++ b/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
 import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
+import { GlButton } from '@gitlab/ui';
+import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
 import * as utils from '~/lib/utils/common_utils';
-import { GlDeprecatedButton } from '@gitlab/ui';
 
 jest.mock('~/lib/utils/common_utils', () => ({
   ...jest.requireActual('~/lib/utils/common_utils'),
@@ -96,7 +96,7 @@ describe('Suggest gitlab-ci.yml Popover', () => {
       const expectedAction = 'click_button';
       const expectedProperty = 'owner';
       const expectedValue = '10';
-      const dismissButton = wrapper.find(GlDeprecatedButton);
+      const dismissButton = wrapper.find(GlButton);
       trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
 
       triggerEvent(dismissButton.element);
diff --git a/spec/frontend/blob/utils_spec.js b/spec/frontend/blob/utils_spec.js
index 119ed2dfe7a..ab9e325e963 100644
--- a/spec/frontend/blob/utils_spec.js
+++ b/spec/frontend/blob/utils_spec.js
@@ -1,53 +1,44 @@
 import Editor from '~/editor/editor_lite';
 import * as utils from '~/blob/utils';
 
-const mockCreateMonacoInstance = jest.fn();
-jest.mock('~/editor/editor_lite', () => {
-  return jest.fn().mockImplementation(() => {
-    return { createInstance: mockCreateMonacoInstance };
-  });
-});
+jest.mock('~/editor/editor_lite');
 
 describe('Blob utilities', () => {
-  beforeEach(() => {
-    Editor.mockClear();
-  });
-
   describe('initEditorLite', () => {
     let editorEl;
     const blobPath = 'foo.txt';
     const blobContent = 'Foo bar';
+    const blobGlobalId = 'snippet_777';
 
     beforeEach(() => {
-      setFixtures('<div id="editor"></div>');
-      editorEl = document.getElementById('editor');
+      editorEl = document.createElement('div');
     });
 
     describe('Monaco editor', () => {
       it('initializes the Editor Lite', () => {
         utils.initEditorLite({ el: editorEl });
-        expect(Editor).toHaveBeenCalled();
+        expect(Editor).toHaveBeenCalledWith({
+          scrollbar: {
+            alwaysConsumeMouseWheel: false,
+          },
+        });
       });
 
-      it('creates the instance with the passed parameters', () => {
-        utils.initEditorLite({ el: editorEl });
-        expect(mockCreateMonacoInstance.mock.calls[0]).toEqual([
-          {
+      it.each([[{}], [{ blobPath, blobContent, blobGlobalId }]])(
+        'creates the instance with the passed parameters %s',
+        extraParams => {
+          const params = {
             el: editorEl,
-            blobPath: undefined,
-            blobContent: undefined,
-          },
-        ]);
+            ...extraParams,
+          };
 
-        utils.initEditorLite({ el: editorEl, blobPath, blobContent });
-        expect(mockCreateMonacoInstance.mock.calls[1]).toEqual([
-          {
-            el: editorEl,
-            blobPath,
-            blobContent,
-          },
-        ]);
-      });
+          expect(Editor.prototype.createInstance).not.toHaveBeenCalled();
+
+          utils.initEditorLite(params);
+
+          expect(Editor.prototype.createInstance).toHaveBeenCalledWith(params);
+        },
+      );
     });
   });
 });
diff --git a/spec/frontend/blob/viewer/index_spec.js b/spec/frontend/blob/viewer/index_spec.js
index 7239f59c6fa..97ac42a10bf 100644
--- a/spec/frontend/blob/viewer/index_spec.js
+++ b/spec/frontend/blob/viewer/index_spec.js
@@ -24,11 +24,11 @@ describe('Blob viewer', () => {
 
     blob = new BlobViewer();
 
-    mock.onGet('http://test.host/snippets/1.json?viewer=rich').reply(200, {
+    mock.onGet('http://test.host/-/snippets/1.json?viewer=rich').reply(200, {
       html: '<div>testing</div>',
     });
 
-    mock.onGet('http://test.host/snippets/1.json?viewer=simple').reply(200, {
+    mock.onGet('http://test.host/-/snippets/1.json?viewer=simple').reply(200, {
       html: '<div>testing</div>',
     });