Add latest changes from gitlab-org/gitlab@master

3 files changed, 40 insertions, 2 deletions

diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js
index b5c4c81b9d8..62d687e848b 100644
--- a/app/assets/javascripts/repository/components/blob_viewers/index.js
+++ b/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];
 };
diff --git a/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue
index 3eefcd64b13..803a357df52 100644
--- a/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue
@@ -1,16 +1,50 @@
 <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>{{ $options.i18n.tooLargeDescription }}</p>
+
+      <gl-button icon="download" category="secondary" variant="confirm" :href="url" download>{{
+        $options.i18n.tooLargeButtonText
+      }}</gl-button>
+    </div>
+  </div>
 </template>
diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js
index b4363c51165..cdc4818e493 100644
--- a/app/assets/javascripts/repository/constants.js
+++ b/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;