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

11 files changed, 97 insertions, 72 deletions

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 e47a7dcfa2a..1e639f91797 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
@@ -5,7 +5,7 @@ exports[`Blob Header Editing rendering matches the snapshot 1`] = `
   class="js-file-title file-title-flex-parent"
 >
   <gl-form-input-stub
-    class="form-control js-snippet-file-name qa-snippet-file-name"
+    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"
diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
index 7382a3a4cf7..2ac6e0d5d24 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
@@ -8,14 +8,15 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
   <file-icon-stub
     aria-hidden="true"
     cssclasses="mr-2"
-    filename="dummy.md"
+    filename="foo/bar/dummy.md"
     size="18"
   />
    
   <strong
-    class="file-title-name qa-file-title-name mr-1 js-blob-header-filepath"
+    class="file-title-name mr-1 js-blob-header-filepath"
+    data-qa-selector="file_title_name"
   >
-    dummy.md
+    foo/bar/dummy.md
   </strong>
    
   <small
@@ -26,8 +27,8 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
    
   <clipboard-button-stub
     cssclass="btn-clipboard btn-transparent lh-100 position-static"
-    gfm="\`dummy.md\`"
-    text="dummy.md"
+    gfm="\`foo/bar/dummy.md\`"
+    text="foo/bar/dummy.md"
     title="Copy file path"
     tooltipplacement="top"
   />
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 2878ad492a4..7d868625956 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-block"
+    class="file-actions d-none d-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 58a9ee761df..6eb5cfb71aa 100644
--- a/spec/frontend/blob/components/blob_content_error_spec.js
+++ b/spec/frontend/blob/components/blob_content_error_spec.js
@@ -1,27 +1,60 @@
 import { shallowMount } from '@vue/test-utils';
 import BlobContentError from '~/blob/components/blob_content_error.vue';
+import { GlSprintf } from '@gitlab/ui';
+
+import { BLOB_RENDER_ERRORS } from '~/blob/components/constants';
 
 describe('Blob Content Error component', () => {
   let wrapper;
-  const viewerError = '<h1 id="error">Foo Error</h1>';
 
-  function createComponent() {
+  function createComponent(props = {}) {
     wrapper = shallowMount(BlobContentError, {
       propsData: {
-        viewerError,
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
       },
     });
   }
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('renders the passed error without transformations', () => {
-    expect(wrapper.html()).toContain(viewerError);
+  describe('collapsed and too large blobs', () => {
+    it.each`
+      error                                   | reason                            | options
+      ${BLOB_RENDER_ERRORS.REASONS.COLLAPSED} | ${'it is larger than 1.00 MiB'}   | ${[BLOB_RENDER_ERRORS.OPTIONS.LOAD.text, BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]}
+      ${BLOB_RENDER_ERRORS.REASONS.TOO_LARGE} | ${'it is larger than 100.00 MiB'} | ${[BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]}
+    `('renders correct reason for $error.id', ({ error, reason, options }) => {
+      createComponent({
+        viewerError: error.id,
+      });
+      expect(wrapper.text()).toContain(reason);
+      options.forEach(option => {
+        expect(wrapper.text()).toContain(option);
+      });
+    });
+  });
+
+  describe('external blob', () => {
+    it.each`
+      storageType         | reason                                                     | options
+      ${'lfs'}            | ${BLOB_RENDER_ERRORS.REASONS.EXTERNAL.text.lfs}            | ${[BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]}
+      ${'build_artifact'} | ${BLOB_RENDER_ERRORS.REASONS.EXTERNAL.text.build_artifact} | ${[BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]}
+      ${'default'}        | ${BLOB_RENDER_ERRORS.REASONS.EXTERNAL.text.default}        | ${[BLOB_RENDER_ERRORS.OPTIONS.DOWNLOAD.text]}
+    `('renders correct reason for $storageType blob', ({ storageType, reason, options }) => {
+      createComponent({
+        viewerError: BLOB_RENDER_ERRORS.REASONS.EXTERNAL.id,
+        blob: {
+          externalStorage: storageType,
+        },
+      });
+      expect(wrapper.text()).toContain(reason);
+      options.forEach(option => {
+        expect(wrapper.text()).toContain(option);
+      });
+    });
   });
 });
diff --git a/spec/frontend/blob/components/blob_content_spec.js b/spec/frontend/blob/components/blob_content_spec.js
index 6a130c9c43d..244ed41869d 100644
--- a/spec/frontend/blob/components/blob_content_spec.js
+++ b/spec/frontend/blob/components/blob_content_spec.js
@@ -2,6 +2,12 @@ import { shallowMount } from '@vue/test-utils';
 import BlobContent from '~/blob/components/blob_content.vue';
 import BlobContentError from '~/blob/components/blob_content_error.vue';
 import {
+  BLOB_RENDER_EVENT_LOAD,
+  BLOB_RENDER_EVENT_SHOW_SOURCE,
+  BLOB_RENDER_ERRORS,
+} from '~/blob/components/constants';
+import {
+  Blob,
   RichViewerMock,
   SimpleViewerMock,
   RichBlobContentMock,
@@ -38,7 +44,7 @@ describe('Blob Content component', () => {
 
     it('renders error if there is any in the viewer', () => {
       const renderError = 'Oops';
-      const viewer = Object.assign({}, SimpleViewerMock, { renderError });
+      const viewer = { ...SimpleViewerMock, renderError };
       createComponent({}, viewer);
       expect(wrapper.contains(GlLoadingIcon)).toBe(false);
       expect(wrapper.contains(BlobContentError)).toBe(true);
@@ -67,4 +73,32 @@ describe('Blob Content component', () => {
       expect(wrapper.find(viewer).html()).toContain(content);
     });
   });
+
+  describe('functionality', () => {
+    describe('render error', () => {
+      const findErrorEl = () => wrapper.find(BlobContentError);
+      const renderError = BLOB_RENDER_ERRORS.REASONS.COLLAPSED.id;
+      const viewer = { ...SimpleViewerMock, renderError };
+
+      beforeEach(() => {
+        createComponent({ blob: Blob }, viewer);
+      });
+
+      it('correctly sets blob on the blob-content-error component', () => {
+        expect(findErrorEl().props('blob')).toEqual(Blob);
+      });
+
+      it(`properly proxies ${BLOB_RENDER_EVENT_LOAD} event`, () => {
+        expect(wrapper.emitted(BLOB_RENDER_EVENT_LOAD)).toBeUndefined();
+        findErrorEl().vm.$emit(BLOB_RENDER_EVENT_LOAD);
+        expect(wrapper.emitted(BLOB_RENDER_EVENT_LOAD)).toBeTruthy();
+      });
+
+      it(`properly proxies ${BLOB_RENDER_EVENT_SHOW_SOURCE} event`, () => {
+        expect(wrapper.emitted(BLOB_RENDER_EVENT_SHOW_SOURCE)).toBeUndefined();
+        findErrorEl().vm.$emit(BLOB_RENDER_EVENT_SHOW_SOURCE);
+        expect(wrapper.emitted(BLOB_RENDER_EVENT_SHOW_SOURCE)).toBeTruthy();
+      });
+    });
+  });
 });
diff --git a/spec/frontend/blob/components/blob_header_filepath_spec.js b/spec/frontend/blob/components/blob_header_filepath_spec.js
index d029ba2a7a4..3a53208f357 100644
--- a/spec/frontend/blob/components/blob_header_filepath_spec.js
+++ b/spec/frontend/blob/components/blob_header_filepath_spec.js
@@ -15,7 +15,7 @@ describe('Blob Header Filepath', () => {
   function createComponent(blobProps = {}, options = {}) {
     wrapper = shallowMount(BlobHeaderFilepath, {
       propsData: {
-        blob: Object.assign({}, MockBlob, blobProps),
+        blob: { ...MockBlob, ...blobProps },
       },
       ...options,
     });
@@ -38,12 +38,12 @@ describe('Blob Header Filepath', () => {
           .find('.js-blob-header-filepath')
           .text()
           .trim(),
-      ).toBe(MockBlob.name);
+      ).toBe(MockBlob.path);
     });
 
     it('does not fail if the name is empty', () => {
-      const emptyName = '';
-      createComponent({ name: emptyName });
+      const emptyPath = '';
+      createComponent({ path: emptyPath });
       expect(wrapper.find('.js-blob-header-filepath').exists()).toBe(false);
     });
 
@@ -84,7 +84,7 @@ describe('Blob Header Filepath', () => {
   describe('functionality', () => {
     it('sets gfm value correctly on the clipboard-button', () => {
       createComponent();
-      expect(wrapper.vm.gfmCopyText).toBe('`dummy.md`');
+      expect(wrapper.vm.gfmCopyText).toBe(`\`${MockBlob.path}\``);
     });
   });
 });
diff --git a/spec/frontend/blob/components/blob_header_spec.js b/spec/frontend/blob/components/blob_header_spec.js
index d410ef10fc9..0e7d2f6516a 100644
--- a/spec/frontend/blob/components/blob_header_spec.js
+++ b/spec/frontend/blob/components/blob_header_spec.js
@@ -13,7 +13,7 @@ describe('Blob Header Default Actions', () => {
     const method = shouldMount ? mount : shallowMount;
     wrapper = method.call(this, BlobHeader, {
       propsData: {
-        blob: Object.assign({}, Blob, blobProps),
+        blob: { ...Blob, ...blobProps },
         ...propsData,
       },
       ...options,
diff --git a/spec/frontend/blob/components/mock_data.js b/spec/frontend/blob/components/mock_data.js
index bfcca14324f..0f7193846ff 100644
--- a/spec/frontend/blob/components/mock_data.js
+++ b/spec/frontend/blob/components/mock_data.js
@@ -21,7 +21,7 @@ export const RichViewerMock = {
 export const Blob = {
   binary: false,
   name: 'dummy.md',
-  path: 'dummy.md',
+  path: 'foo/bar/dummy.md',
   rawPath: '/flightjs/flight/snippets/51/raw',
   size: 75,
   simpleViewer: {
diff --git a/spec/frontend/blob/pipeline_tour_success_modal_spec.js b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
index 99940225652..6d4e5e46cb8 100644
--- a/spec/frontend/blob/pipeline_tour_success_modal_spec.js
+++ b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
@@ -12,8 +12,8 @@ describe('PipelineTourSuccessModal', () => {
 
   beforeEach(() => {
     document.body.dataset.page = 'projects:blob:show';
-
     trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
+
     wrapper = shallowMount(pipelineTourSuccess, {
       propsData: modalProps,
       stubs: {
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 fb0964a3f32..3c03e6f04ab 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
@@ -69,8 +69,10 @@ describe('Suggest gitlab-ci.yml Popover', () => {
     let trackingSpy;
 
     beforeEach(() => {
+      document.body.dataset.page = 'projects:blob:new';
+      trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
+
       createWrapper(commitTrackLabel);
-      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
     });
 
     afterEach(() => {
@@ -83,10 +85,6 @@ describe('Suggest gitlab-ci.yml Popover', () => {
       const expectedLabel = 'suggest_commit_first_project_gitlab_ci_yml';
       const expectedProperty = 'owner';
 
-      document.body.dataset.page = 'projects:blob:new';
-
-      wrapper.vm.trackOnShow();
-
       expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
         label: expectedLabel,
         property: expectedProperty,
@@ -99,6 +97,7 @@ describe('Suggest gitlab-ci.yml Popover', () => {
       const expectedProperty = 'owner';
       const expectedValue = '10';
       const dismissButton = wrapper.find(GlDeprecatedButton);
+      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 39a73aae444..119ed2dfe7a 100644
--- a/spec/frontend/blob/utils_spec.js
+++ b/spec/frontend/blob/utils_spec.js
@@ -8,11 +8,6 @@ jest.mock('~/editor/editor_lite', () => {
   });
 });
 
-const mockCreateAceInstance = jest.fn();
-global.ace = {
-  edit: mockCreateAceInstance,
-};
-
 describe('Blob utilities', () => {
   beforeEach(() => {
     Editor.mockClear();
@@ -29,21 +24,6 @@ describe('Blob utilities', () => {
     });
 
     describe('Monaco editor', () => {
-      let origProp;
-
-      beforeEach(() => {
-        origProp = window.gon;
-        window.gon = {
-          features: {
-            monacoSnippets: true,
-          },
-        };
-      });
-
-      afterEach(() => {
-        window.gon = origProp;
-      });
-
       it('initializes the Editor Lite', () => {
         utils.initEditorLite({ el: editorEl });
         expect(Editor).toHaveBeenCalled();
@@ -69,27 +49,5 @@ describe('Blob utilities', () => {
         ]);
       });
     });
-    describe('ACE editor', () => {
-      let origProp;
-
-      beforeEach(() => {
-        origProp = window.gon;
-        window.gon = {
-          features: {
-            monacoSnippets: false,
-          },
-        };
-      });
-
-      afterEach(() => {
-        window.gon = origProp;
-      });
-
-      it('does not initialize the Editor Lite', () => {
-        utils.initEditorLite({ el: editorEl });
-        expect(Editor).not.toHaveBeenCalled();
-        expect(mockCreateAceInstance).toHaveBeenCalledWith(editorEl);
-      });
-    });
   });
 });