Add latest changes from gitlab-org/gitlab@master

2 files changed, 56 insertions, 47 deletions

diff --git a/app/assets/javascripts/blob/pdf/index.js b/app/assets/javascripts/blob/pdf/index.js
index 19778d07983..218987585b4 100644
--- a/app/assets/javascripts/blob/pdf/index.js
+++ b/app/assets/javascripts/blob/pdf/index.js
@@ -1,57 +1,17 @@
 import Vue from 'vue';
-import pdfLab from '../../pdf/index.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
+import PdfViewer from './pdf_viewer.vue';
 
 export default () => {
   const el = document.getElementById('js-pdf-viewer');
 
   return new Vue({
     el,
-    components: {
-      pdfLab,
-      GlLoadingIcon,
+    render(createElement) {
+      return createElement(PdfViewer, {
+        props: {
+          pdf: el.dataset.endpoint,
+        },
+      });
     },
-    data() {
-      return {
-        error: false,
-        loadError: false,
-        loading: true,
-        pdf: el.dataset.endpoint,
-      };
-    },
-    methods: {
-      onLoad() {
-        this.loading = false;
-      },
-      onError(error) {
-        this.loading = false;
-        this.loadError = true;
-        this.error = error;
-      },
-    },
-    template: `
-      <div class="js-pdf-viewer container-fluid md prepend-top-default append-bottom-default">
-        <div
-          class="text-center loading"
-          v-if="loading && !error">
-          <gl-loading-icon class="mt-5" size="lg"/>
-        </div>
-        <pdf-lab
-          v-if="!loadError"
-          :pdf="pdf"
-          @pdflabload="onLoad"
-          @pdflaberror="onError" />
-        <p
-          class="text-center"
-          v-if="error">
-          <span v-if="loadError">
-            An error occurred while loading the file. Please try again later.
-          </span>
-          <span v-else>
-            An error occurred while decoding the file.
-          </span>
-        </p>
-      </div>
-    `,
   });
 };
diff --git a/app/assets/javascripts/blob/pdf/pdf_viewer.vue b/app/assets/javascripts/blob/pdf/pdf_viewer.vue
new file mode 100644
index 00000000000..5eaddfc099a
--- /dev/null
+++ b/app/assets/javascripts/blob/pdf/pdf_viewer.vue
@@ -0,0 +1,49 @@
+<script>
+import PdfLab from '../../pdf/index.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    PdfLab,
+    GlLoadingIcon,
+  },
+  props: {
+    pdf: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      error: false,
+      loadError: false,
+      loading: true,
+    };
+  },
+  methods: {
+    onLoad() {
+      this.loading = false;
+    },
+    onError(error) {
+      this.loading = false;
+      this.loadError = true;
+      this.error = error;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="js-pdf-viewer container-fluid md prepend-top-default append-bottom-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" />
+    <p v-if="error" class="text-center">
+      <span v-if="loadError" ref="loadError">
+        {{ __('An error occurred while loading the file. Please try again later.') }}
+      </span>
+      <span v-else>{{ __('An error occurred while decoding the file.') }}</span>
+    </p>
+  </div>
+</template>