Ensure the correct download link is used

Ensures the correct download link is used for external storage

app/assets/javascripts/repository/components/blob_viewers/download_viewer.vue

@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       fileName: this.blob.name,
-      filePath: this.blob.rawPath,
+      filePath: this.blob.externalStorageUrl || this.blob.rawPath,
       fileSize: this.blob.rawSize || 0,
     };
   },

app/assets/javascripts/repository/components/blob_viewers/lfs_viewer.vue

@@ -21,7 +21,7 @@ export default {
   data() {
     return {
       fileName: this.blob.name,
-      filePath: this.blob.rawPath,
+      filePath: this.blob.externalStorageUrl || this.blob.rawPath,
     };
   },
 };

app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue

@@ -18,7 +18,7 @@ export default {
   },
   data() {
     return {
-      url: this.blob.rawPath,
+      url: this.blob.externalStorageUrl || this.blob.rawPath,
       fileSize: this.blob.rawSize,
       totalPages: 0,
     };

spec/frontend/repository/components/blob_viewers/download_viewer_spec.js

@@ -23,6 +23,8 @@ describe('Text Viewer', () => {
     });
   };
 
+  const findLink = () => wrapper.findComponent(GlLink);
+
   it('renders download human readable file size text', () => {
     createComponent();
 
@@ -42,7 +44,7 @@ describe('Text Viewer', () => {
     createComponent();
     const { rawPath, name } = DEFAULT_BLOB_DATA;
 
-    expect(wrapper.findComponent(GlLink).attributes()).toMatchObject({
+    expect(findLink().attributes()).toMatchObject({
       rel: 'nofollow',
       target: '_blank',
       href: rawPath,
@@ -50,6 +52,13 @@ describe('Text Viewer', () => {
     });
   });
 
+  it('renders the correct link href when stored externally', () => {
+    const externalStorageUrl = 'https://cdn.test.com/project/some/file.js?token=1234';
+    createComponent({ externalStorageUrl });
+
+    expect(findLink().attributes('href')).toBe(externalStorageUrl);
+  });
+
   it('renders download icon', () => {
     createComponent();
 

spec/frontend/repository/components/blob_viewers/lfs_viewer_spec.js

@@ -10,9 +10,9 @@ describe('LFS Viewer', () => {
     rawPath: '/some/file/path',
   };
 
-  const createComponent = () => {
+  const createComponent = (blobData = {}) => {
     wrapper = shallowMount(LfsViewer, {
-      propsData: { blob: { ...DEFAULT_BLOB_DATA } },
+      propsData: { blob: { ...DEFAULT_BLOB_DATA, ...blobData } },
       stubs: { GlSprintf },
     });
   };
@@ -38,4 +38,11 @@ describe('LFS Viewer', () => {
       download: name,
     });
   });
+
+  it('renders the correct link href when stored externally', () => {
+    const externalStorageUrl = 'https://cdn.test.com/project/some/file.js?token=1234';
+    createComponent({ externalStorageUrl });
+
+    expect(findLink().attributes('href')).toBe(externalStorageUrl);
+  });
 });

spec/frontend/repository/components/blob_viewers/pdf_viewer_spec.js

 import { GlButton } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import Component from '~/repository/components/blob_viewers/pdf_viewer.vue';
 import PdfViewer from '~/blob/pdf/pdf_viewer.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -8,9 +9,9 @@ describe('PDF Viewer', () => {
 
   const DEFAULT_BLOB_DATA = { rawPath: 'some/pdf_blob.pdf' };
 
-  const createComponent = (rawSize = 999) => {
+  const createComponent = (rawSize = 999, externalStorageUrl) => {
     wrapper = shallowMountExtended(Component, {
-      propsData: { blob: { ...DEFAULT_BLOB_DATA, rawSize } },
+      propsData: { blob: { ...DEFAULT_BLOB_DATA, rawSize, externalStorageUrl } },
     });
   };
 
@@ -45,10 +46,14 @@ describe('PDF Viewer', () => {
   });
 
   describe('Too many pages', () => {
-    beforeEach(() => {
-      createComponent();
-      findPDFViewer().vm.$emit('pdflabload', 100);
-    });
+    const loadComponent = (externalStorageUrl) => {
+      const rawSize = 999;
+      const totalPages = 100;
+      createComponent(rawSize, externalStorageUrl);
+      findPDFViewer().vm.$emit('pdflabload', totalPages);
+    };
+
+    beforeEach(() => loadComponent());
 
     it('does not a PDF Viewer component', () => {
       expect(findPDFViewer().exists()).toBe(false);
@@ -56,6 +61,15 @@ describe('PDF Viewer', () => {
 
     it('renders a download button', () => {
       expect(findDownLoadButton().exists()).toBe(true);
+      expect(findDownLoadButton().attributes('href')).toBe(DEFAULT_BLOB_DATA.rawPath);
+    });
+
+    it('renders the correct href when stored externally', async () => {
+      const externalStorageUrl = 'https://cdn.test.com/project/some/file.js?token=1234';
+      loadComponent(externalStorageUrl);
+      await nextTick();
+
+      expect(findDownLoadButton().attributes('href')).toBe(externalStorageUrl);
     });
   });
 });