Display download button for large PDFs

Display a large button when PDF is too large to display

app/assets/javascripts/blob/pdf/pdf_viewer.vue

@@ -38,7 +38,13 @@ export default {
     <div v-if="loading && !error" class="text-center loading">
       <gl-loading-icon class="mt-5" size="lg" />
     </div>
-    <pdf-lab v-if="!loadError" :pdf="pdf" @pdflabload="onLoad" @pdflaberror="onError" />
+    <pdf-lab
+      v-if="!loadError"
+      :pdf="pdf"
+      @pdflabload="onLoad"
+      @pdflaberror="onError"
+      v-on="$listeners"
+    />
     <p v-if="error" class="text-center">
       <span v-if="loadError" ref="loadError">
         {{ __('An error occurred while loading the file. Please try again later.') }}

app/assets/javascripts/pdf/index.vue

@@ -45,7 +45,7 @@ export default {
         .promise.then(this.renderPages)
         .then((pages) => {
           this.pages = pages;
-          this.$emit('pdflabload');
+          this.$emit('pdflabload', pages.length);
         })
         .catch((error) => {
           this.$emit('pdflaberror', error);

app/assets/javascripts/repository/components/blob_viewers/index.js

@@ -40,6 +40,7 @@ export const viewerProps = (type, blob) => {
     },
     pdf: {
       url: blob.rawPath,
+      fileSize: blob.rawSize,
     },
   }[type];
 };

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

 <script>
+import { GlButton } from '@gitlab/ui';
 import PdfViewer from '~/blob/pdf/pdf_viewer.vue';
+import { __ } from '~/locale';
+import { PDF_MAX_FILE_SIZE, PDF_MAX_PAGE_LIMIT } from '../../constants';
 
 export default {
-  components: { PdfViewer },
+  components: { GlButton, PdfViewer },
+  i18n: {
+    tooLargeDescription: __('This PDF is too large to display, please download to view.'),
+    tooLargeButtonText: __('Download PDF'),
+  },
   props: {
     url: {
       type: String,
       required: true,
     },
+    fileSize: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return { totalPages: 0 };
+  },
+  computed: {
+    tooLargeToDisplay() {
+      return this.fileSize > PDF_MAX_FILE_SIZE || this.totalPages > PDF_MAX_PAGE_LIMIT;
+    },
+  },
+  methods: {
+    handleOnLoad(totalPages) {
+      this.totalPages = totalPages;
+    },
   },
 };
 </script>
 <template>
-  <pdf-viewer :pdf="url" />
+  <div>
+    <pdf-viewer v-if="!tooLargeToDisplay" :pdf="url" @pdflabload="handleOnLoad" />
+
+    <div v-else class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-p-5">
+      <p data-testid="download-help-text">{{ $options.i18n.tooLargeDescription }}</p>
+
+      <gl-button
+        icon="download"
+        category="secondary"
+        variant="confirm"
+        :href="url"
+        :aria-label="$options.i18n.tooLargeButtonText"
+        :title="$options.i18n.tooLargeButtonText"
+        download
+        >{{ $options.i18n.tooLargeButtonText }}</gl-button
+      >
+    </div>
+  </div>
 </template>

app/assets/javascripts/repository/constants.js

@@ -20,3 +20,6 @@ export const COMMIT_MESSAGE_BODY_MAX_LENGTH = 72;
 export const LIMITED_CONTAINER_WIDTH_CLASS = 'limit-container-width';
 
 export const I18N_COMMIT_DATA_FETCH_ERROR = __('An error occurred while fetching commit data.');
+
+export const PDF_MAX_FILE_SIZE = 10000000; // 10 MB
+export const PDF_MAX_PAGE_LIMIT = 50;

locale/gitlab.pot

@@ -12515,6 +12515,9 @@ msgstr ""
 msgid "Download CSV"
 msgstr ""
 
+msgid "Download PDF"
+msgstr ""
+
 msgid "Download artifacts"
 msgstr ""
 
@@ -35549,6 +35552,9 @@ msgstr ""
 msgid "This GitLab instance is undergoing maintenance and is operating in read-only mode."
 msgstr ""
 
+msgid "This PDF is too large to display, please download to view."
+msgstr ""
+
 msgid "This Project is currently archived and read-only. Please unarchive the project first if you want to resume Pull mirroring"
 msgstr ""
 

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

 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import Component from '~/repository/components/blob_viewers/pdf_viewer.vue';
 import PdfViewer from '~/blob/pdf/pdf_viewer.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 describe('PDF Viewer', () => {
   let wrapper;
 
-  const propsData = { url: 'some/pdf_blob.pdf' };
+  const defaultPropsData = { url: 'some/pdf_blob.pdf' };
 
-  const createComponent = () => {
-    wrapper = shallowMount(Component, { propsData });
+  const createComponent = (fileSize = 999) => {
+    wrapper = extendedWrapper(
+      shallowMount(Component, { propsData: { ...defaultPropsData, fileSize } }),
+    );
   };
 
   const findPDFViewer = () => wrapper.findComponent(PdfViewer);
+  const findHelpText = () => wrapper.findByTestId('download-help-text');
+  const findDownLoadButton = () => wrapper.findComponent(GlButton);
 
   it('renders a PDF Viewer component', () => {
     createComponent();
 
     expect(findPDFViewer().exists()).toBe(true);
-    expect(findPDFViewer().props('pdf')).toBe(propsData.url);
+    expect(findPDFViewer().props('pdf')).toBe(defaultPropsData.url);
+  });
+
+  describe('Too large', () => {
+    beforeEach(() => createComponent(20000000));
+
+    it('does not a PDF Viewer component', () => {
+      expect(findPDFViewer().exists()).toBe(false);
+    });
+
+    it('renders help text', () => {
+      expect(findHelpText().text()).toBe(
+        'This PDF is too large to display, please download to view.',
+      );
+    });
+
+    it('renders a download button', () => {
+      expect(findDownLoadButton().exists()).toBe(true);
+      expect(findDownLoadButton().text()).toBe('Download PDF');
+      expect(findDownLoadButton().props('icon')).toBe('download');
+    });
+  });
+
+  describe('Too many pages', () => {
+    beforeEach(() => {
+      createComponent();
+      findPDFViewer().vm.$emit('pdflabload', 100);
+    });
+
+    it('does not a PDF Viewer component', () => {
+      expect(findPDFViewer().exists()).toBe(false);
+    });
+
+    it('renders a download button', () => {
+      expect(findDownLoadButton().exists()).toBe(true);
+    });
   });
 });