5 files changed, 24 insertions, 33 deletions
diff --git a/app/assets/javascripts/blob/3d_viewer/index.js b/app/assets/javascripts/blob/3d_viewer/index.js
index d4efe409fef..2831c37838b 100644
--- a/app/assets/javascripts/blob/3d_viewer/index.js
+++ b/app/assets/javascripts/blob/3d_viewer/index.js
@@ -1,11 +1,8 @@
-import OrbitControlsClass from 'three-orbit-controls';
-import STLLoaderClass from 'three-stl-loader';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
 import * as THREE from 'three/build/three.module';
 import MeshObject from './mesh_object';
 
-const STLLoader = STLLoaderClass(THREE);
-const OrbitControls = OrbitControlsClass(THREE);
-
 export default class Renderer {
   constructor(container) {
     this.renderWrapper = this.render.bind(this);
diff --git a/app/assets/javascripts/blob/3d_viewer/mesh_object.js b/app/assets/javascripts/blob/3d_viewer/mesh_object.js
index c55a9ca8926..5322dc00e86 100644
--- a/app/assets/javascripts/blob/3d_viewer/mesh_object.js
+++ b/app/assets/javascripts/blob/3d_viewer/mesh_object.js
@@ -22,7 +22,7 @@ export default class MeshObject extends Mesh {
     if (this.geometry.boundingSphere.radius > 4) {
       const scale = 4 / this.geometry.boundingSphere.radius;
 
-      this.geometry.applyMatrix(new Matrix4().makeScale(scale, scale, scale));
+      this.geometry.applyMatrix4(new Matrix4().makeScale(scale, scale, scale));
       this.geometry.computeBoundingSphere();
 
       this.position.x = -this.geometry.boundingSphere.center.x;
diff --git a/app/assets/javascripts/blob/notebook/notebook_viewer.vue b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
index d2a841c88f1..dc1a9cb865a 100644
--- a/app/assets/javascripts/blob/notebook/notebook_viewer.vue
+++ b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
@@ -1,11 +1,11 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
-import notebookLab from '~/notebook/index.vue';
+import NotebookLab from '~/notebook/index.vue';
 
 export default {
   components: {
-    notebookLab,
+    NotebookLab,
     GlLoadingIcon,
   },
   props: {
@@ -66,7 +66,7 @@ export default {
     <div v-if="loading && !error" class="text-center loading">
       <gl-loading-icon class="mt-5" size="lg" />
     </div>
-    <notebook-lab v-if="!loading && !error" :notebook="json" code-css-class="code white" />
+    <notebook-lab v-if="!loading && !error" :notebook="json" />
     <p v-if="error" class="text-center">
       <span v-if="loadError" ref="loadErrorMessage">{{
         __('An error occurred while loading the file. Please try again later.')
diff --git a/app/assets/javascripts/blob/sketch/index.js b/app/assets/javascripts/blob/sketch/index.js
index a92161bbc1b..bb29224cda2 100644
--- a/app/assets/javascripts/blob/sketch/index.js
+++ b/app/assets/javascripts/blob/sketch/index.js
@@ -1,5 +1,5 @@
 import JSZip from 'jszip';
-import JSZipUtils from 'jszip-utils';
+import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 
 export default class SketchLoader {
@@ -7,35 +7,28 @@ export default class SketchLoader {
     this.container = container;
     this.loadingIcon = this.container.querySelector('.js-loading-icon');
 
-    this.load();
+    this.load().catch(() => {
+      this.error();
+    });
   }
 
-  load() {
-    return this.getZipFile()
-      .then((data) => JSZip.loadAsync(data))
-      .then((asyncResult) => asyncResult.files['previews/preview.png'].async('uint8array'))
-      .then((content) => {
-        const url = window.URL || window.webkitURL;
-        const blob = new Blob([new Uint8Array(content)], {
-          type: 'image/png',
-        });
-        const previewUrl = url.createObjectURL(blob);
+  async load() {
+    const zipContents = await this.getZipContents();
+    const previewContents = await zipContents.files['previews/preview.png'].async('uint8array');
+
+    const blob = new Blob([previewContents], {
+      type: 'image/png',
+    });
 
-        this.render(previewUrl);
-      })
-      .catch(this.error.bind(this));
+    this.render(window.URL.createObjectURL(blob));
   }
 
-  getZipFile() {
-    return new Promise((resolve, reject) => {
-      JSZipUtils.getBinaryContent(this.container.dataset.endpoint, (err, data) => {
-        if (err) {
-          reject(err);
-        } else {
-          resolve(data);
-        }
-      });
+  async getZipContents() {
+    const { data } = await axios.get(this.container.dataset.endpoint, {
+      responseType: 'arraybuffer',
     });
+
+    return JSZip.loadAsync(data);
   }
 
   render(previewUrl) {
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index a0d4f7ef4f2..5ca3f131d99 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -45,6 +45,7 @@ const loadViewer = (viewerParam) => {
   viewer.dataset.loading = 'true';
 
   return axios.get(url).then(({ data }) => {
+    // eslint-disable-next-line no-unsanitized/property
     viewer.innerHTML = data.html;
 
     window.requestIdleCallback(() => {