Move PDFLab into GitLab

.gitignore

@@ -45,6 +45,7 @@ eslint-report.html
 /public/uploads.*
 /public/uploads/
 /shared/artifacts/
+/spec/javascripts/fixtures/blob/pdf/
 /rails_best_practices_output.html
 /tags
 /tmp/*

app/assets/javascripts/blob/pdf/index.js

 /* eslint-disable no-new */
 import Vue from 'vue';
-import PDFLab from 'vendor/pdflab';
-import workerSrc from 'vendor/pdf.worker';
-
-Vue.use(PDFLab, {
-  workerSrc,
-});
+import pdfLab from '../../pdf/index.vue';
 
 export default () => {
   const el = document.getElementById('js-pdf-viewer');
@@ -20,6 +15,9 @@ export default () => {
         pdf: el.dataset.endpoint,
       };
     },
+    components: {
+      pdfLab,
+    },
     methods: {
       onLoad() {
         this.loading = false;

app/assets/javascripts/pdf/index.vue

+<template>
+  <div class="pdf-viewer" v-if="hasPDF">
+    <page v-for="(page, index) in pages"
+      :key="index"
+      :v-if="!loading"
+      :page="page"
+      :number="index + 1" />
+  </div>
+</template>
+
+<script>
+  import pdfjsLib from 'pdfjs-dist';
+  import workerSrc from 'vendor/pdf.worker';
+
+  import page from './page/index.vue';
+
+  export default {
+    props: {
+      pdf: {
+        type: [String, Uint8Array],
+        required: true,
+      },
+    },
+    data() {
+      return {
+        loading: false,
+        pages: [],
+      };
+    },
+    components: { page },
+    watch: { pdf: 'load' },
+    computed: {
+      document() {
+        return typeof this.pdf === 'string' ? this.pdf : { data: this.pdf };
+      },
+      hasPDF() {
+        return this.pdf && this.pdf.length > 0;
+      },
+    },
+    methods: {
+      load() {
+        this.pages = [];
+        return pdfjsLib.getDocument(this.document)
+          .then(this.renderPages)
+          .then(() => this.$emit('pdflabload'))
+          .catch(error => this.$emit('pdflaberror', error))
+          .then(() => { this.loading = false; });
+      },
+      renderPages(pdf) {
+        const pagePromises = [];
+        this.loading = true;
+        for (let num = 1; num <= pdf.numPages; num += 1) {
+          pagePromises.push(
+            pdf.getPage(num).then(p => this.pages.push(p)),
+          );
+        }
+        return Promise.all(pagePromises);
+      },
+    },
+    mounted() {
+      pdfjsLib.PDFJS.workerSrc = workerSrc;
+      if (this.hasPDF) this.load();
+    },
+  };
+</script>
+
+<style>
+  .pdf-viewer {
+    background: url('./assets/img/bg.gif');
+    display: flex;
+    flex-flow: column nowrap;
+  }
+</style>

app/assets/javascripts/pdf/page/index.vue

+<template>
+  <canvas
+    class="pdf-page"
+    ref="canvas"
+    :data-page="number" />
+</template>
+
+<script>
+  export default {
+    props: {
+      page: {
+        type: Object,
+        required: true,
+      },
+      number: {
+        type: Number,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        scale: 4,
+        rendering: false,
+      };
+    },
+    computed: {
+      viewport() {
+        return this.page.getViewport(this.scale);
+      },
+      context() {
+        return this.$refs.canvas.getContext('2d');
+      },
+      renderContext() {
+        return {
+          canvasContext: this.context,
+          viewport: this.viewport,
+        };
+      },
+    },
+    mounted() {
+      this.$refs.canvas.height = this.viewport.height;
+      this.$refs.canvas.width = this.viewport.width;
+      this.rendering = true;
+      this.page.render(this.renderContext)
+        .then(() => { this.rendering = false; })
+        .catch(error => this.$emit('pdflaberror', error));
+    },
+  };
+</script>
+
+<style>
+.pdf-page {
+  margin: 8px auto 0 auto;
+  border-top: 1px #ddd solid;
+  border-bottom: 1px #ddd solid;
+  width: 100%;
+}
+
+.pdf-page:first-child {
+  margin-top: 0px;
+  border-top: 0px;
+}
+
+.pdf-page:last-child {
+  margin-bottom: 0px;
+  border-bottom: 0px;
+}
+</style>

config/webpack.config.js

@@ -77,6 +77,11 @@ var config = {
         test: /\.svg$/,
         loader: 'raw-loader',
       },
+      {
+        test: /\.gif$/,
+        loader: 'url-loader',
+        query: { mimetype: 'image/gif' },
+      },
       {
         test: /\.(worker\.js|pdf)$/,
         exclude: /node_modules/,

package.json

@@ -34,6 +34,7 @@
     "jszip-utils": "^0.0.2",
     "marked": "^0.3.6",
     "mousetrap": "^1.4.6",
+    "pdfjs-dist": "^1.8.252",
     "pikaday": "^1.5.1",
     "prismjs": "^1.6.0",
     "raphael": "^2.2.7",
@@ -46,6 +47,7 @@
     "three-stl-loader": "^1.0.4",
     "timeago.js": "^2.0.5",
     "underscore": "^1.8.3",
+    "url-loader": "^0.5.8",
     "visibilityjs": "^1.2.4",
     "vue": "^2.2.6",
     "vue-loader": "^11.3.4",

spec/features/projects/commit/cherry_pick_spec.rb

@@ -74,8 +74,10 @@ describe 'Cherry-pick Commits' do
 
       wait_for_ajax
 
-      page.within('#modal-cherry-pick-commit .dropdown-menu .dropdown-content') do
-        click_link 'feature'
+      page.within('#modal-cherry-pick-commit .dropdown-menu') do
+        find('.dropdown-input input').set('feature')
+        wait_for_ajax
+        click_link "feature"
       end
 
       page.within('#modal-cherry-pick-commit') do

spec/features/projects/environments/environment_spec.rb

@@ -200,7 +200,7 @@ feature 'Environment', :feature do
     end
 
     scenario 'user deletes the branch with running environment' do
-      visit namespace_project_branches_path(project.namespace, project)
+      visit namespace_project_branches_path(project.namespace, project, search: 'feature')
 
       remove_branch_with_hooks(project, user, 'feature') do
         page.within('.js-branch-feature') { find('a.btn-remove').click }

spec/features/projects/merge_request_button_spec.rb

@@ -85,8 +85,8 @@ feature 'Merge Request button', feature: true do
   context 'on branches page' do
     it_behaves_like 'Merge request button only shown when allowed' do
       let(:label) { 'Merge request' }
-      let(:url) { namespace_project_branches_path(project.namespace, project) }
-      let(:fork_url) { namespace_project_branches_path(forked_project.namespace, forked_project) }
+      let(:url) { namespace_project_branches_path(project.namespace, project, search: 'feature') }
+      let(:fork_url) { namespace_project_branches_path(forked_project.namespace, forked_project, search: 'feature') }
     end
   end
 

spec/javascripts/blob/pdf/index_spec.js

+/* eslint-disable import/no-unresolved */
+
 import renderPDF from '~/blob/pdf';
-import testPDF from './test.pdf';
+import testPDF from '../../fixtures/blob/pdf/test.pdf';
 
 describe('PDF renderer', () => {
   let viewer;
@@ -59,7 +61,7 @@ describe('PDF renderer', () => {
 
   describe('error getting file', () => {
     beforeEach((done) => {
-      viewer.dataset.endpoint = 'invalid/endpoint';
+      viewer.dataset.endpoint = 'invalid/path/to/file.pdf';
       app = renderPDF();
 
       checkLoaded(done);

spec/javascripts/fixtures/pdf.rb

+require 'spec_helper'
+
+describe 'PDF file', '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, namespace: namespace, path: 'pdf-project') }
+
+  before(:all) do
+    clean_frontend_fixtures('blob/pdf/')
+  end
+
+  it 'blob/pdf/test.pdf' do |example|
+    blob = project.repository.blob_at('e774ebd33', 'files/pdf/test.pdf')
+
+    store_frontend_fixture(blob.data.force_encoding("utf-8"), example.description)
+  end
+end

spec/javascripts/pdf/index_spec.js

+/* eslint-disable import/no-unresolved */
+
+import Vue from 'vue';
+import { PDFJS } from 'pdfjs-dist';
+import workerSrc from 'vendor/pdf.worker';
+
+import PDFLab from '~/pdf/index.vue';
+import pdf from '../fixtures/blob/pdf/test.pdf';
+
+PDFJS.workerSrc = workerSrc;
+const Component = Vue.extend(PDFLab);
+
+describe('PDF component', () => {
+  let vm;
+
+  const checkLoaded = (done) => {
+    if (vm.loading) {
+      setTimeout(() => {
+        checkLoaded(done);
+      }, 100);
+    } else {
+      done();
+    }
+  };
+
+  describe('without PDF data', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          pdf: '',
+        },
+      });
+
+      vm.$mount();
+
+      checkLoaded(done);
+    });
+
+    it('does not render', () => {
+      expect(vm.$el.tagName).toBeUndefined();
+    });
+  });
+
+  describe('with PDF data', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          pdf,
+        },
+      });
+
+      vm.$mount();
+
+      checkLoaded(done);
+    });
+
+    it('renders pdf component', () => {
+      expect(vm.$el.tagName).toBeDefined();
+    });
+  });
+});

spec/javascripts/pdf/page_spec.js

+/* eslint-disable import/no-unresolved */
+
+import Vue from 'vue';
+import pdfjsLib from 'pdfjs-dist';
+import workerSrc from 'vendor/pdf.worker';
+
+import PageComponent from '~/pdf/page/index.vue';
+import testPDF from '../fixtures/blob/pdf/test.pdf';
+
+const Component = Vue.extend(PageComponent);
+
+describe('Page component', () => {
+  let vm;
+  let testPage;
+  pdfjsLib.PDFJS.workerSrc = workerSrc;
+
+  const checkRendered = (done) => {
+    if (vm.rendering) {
+      setTimeout(() => {
+        checkRendered(done);
+      }, 100);
+    } else {
+      done();
+    }
+  };
+
+  beforeEach((done) => {
+    pdfjsLib.getDocument(testPDF)
+      .then(pdf => pdf.getPage(1))
+      .then((page) => {
+        testPage = page;
+        done();
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  });
+
+  describe('render', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          page: testPage,
+          number: 1,
+        },
+      });
+
+      vm.$mount();
+
+      checkRendered(done);
+    });
+
+    it('renders first page', () => {
+      expect(vm.$el.tagName).toBeDefined();
+    });
+  });
+});

spec/support/test_env.rb

@@ -39,7 +39,8 @@ module TestEnv
     'wip'                                => 'b9238ee',
     'csv'                                => '3dd0896',
     'v1.1.0'                             => 'b83d6e3',
-    'add-ipython-files'                  => '6d85bb69'
+    'add-ipython-files'                  => '6d85bb69',
+    'add-pdf-file'                       => 'e774ebd3'
   }.freeze
 
   # gitlab-test-fork is a fork of gitlab-fork, but we don't necessarily

yarn.lock

@@ -3638,7 +3638,7 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
   dependencies:
     mime-db "~1.26.0"
 
-mime@1.3.4, mime@^1.3.4:
+mime@1.3.4, mime@1.3.x, mime@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
@@ -3710,6 +3710,10 @@ nested-error-stacks@^1.0.0:
   dependencies:
     inherits "~2.0.1"
 
+node-ensure@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/node-ensure/-/node-ensure-0.0.0.tgz#ecae764150de99861ec5c810fd5d096b183932a7"
+
 node-libs-browser@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-1.1.1.tgz#2a38243abedd7dffcd07a97c9aca5668975a6fea"
@@ -4102,6 +4106,13 @@ pbkdf2@^3.0.3:
   dependencies:
     create-hmac "^1.1.2"
 
+pdfjs-dist@^1.8.252:
+  version "1.8.252"
+  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-1.8.252.tgz#2477245695341f7fe096824dacf327bc324c0f52"
+  dependencies:
+    node-ensure "^0.0.0"
+    worker-loader "^0.8.0"
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -5538,6 +5549,13 @@ update-notifier@0.5.0:
     semver-diff "^2.0.0"
     string-length "^1.0.0"
 
+url-loader@^0.5.8:
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.8.tgz#b9183b1801e0f847718673673040bc9dc1c715c5"
+  dependencies:
+    loader-utils "^1.0.2"
+    mime "1.3.x"
+
 url-parse@1.0.x:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
@@ -5821,6 +5839,12 @@ wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
 
+worker-loader@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-0.8.0.tgz#13582960dcd7d700dc829d3fd252a7561696167e"
+  dependencies:
+    loader-utils "^1.0.2"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"