Add latest changes from gitlab-org/gitlab@master

2 files changed, 89 insertions, 78 deletions

diff --git a/app/assets/javascripts/blob/notebook/index.js b/app/assets/javascripts/blob/notebook/index.js
index 35634d63e4a..a8c94b6263e 100644
--- a/app/assets/javascripts/blob/notebook/index.js
+++ b/app/assets/javascripts/blob/notebook/index.js
@@ -1,87 +1,17 @@
-/* eslint-disable no-new */
 import Vue from 'vue';
-import axios from '../../lib/utils/axios_utils';
-import notebookLab from '../../notebook/index.vue';
+import NotebookViewer from './notebook_viewer.vue';
 
 export default () => {
   const el = document.getElementById('js-notebook-viewer');
 
-  new Vue({
+  return new Vue({
     el,
-    components: {
-      notebookLab,
+    render(createElement) {
+      return createElement(NotebookViewer, {
+        props: {
+          endpoint: el.dataset.endpoint,
+        },
+      });
     },
-    data() {
-      return {
-        error: false,
-        loadError: false,
-        loading: true,
-        json: {},
-      };
-    },
-    mounted() {
-      if (gon.katex_css_url) {
-        const katexStyles = document.createElement('link');
-        katexStyles.setAttribute('rel', 'stylesheet');
-        katexStyles.setAttribute('href', gon.katex_css_url);
-        document.head.appendChild(katexStyles);
-      }
-
-      if (gon.katex_js_url) {
-        const katexScript = document.createElement('script');
-        katexScript.addEventListener('load', () => {
-          this.loadFile();
-        });
-        katexScript.setAttribute('src', gon.katex_js_url);
-        document.head.appendChild(katexScript);
-      } else {
-        this.loadFile();
-      }
-    },
-    methods: {
-      loadFile() {
-        axios
-          .get(el.dataset.endpoint)
-          .then(res => res.data)
-          .then(data => {
-            this.json = data;
-            this.loading = false;
-          })
-          .catch(e => {
-            if (e.status !== 200) {
-              this.loadError = true;
-            }
-
-            this.error = true;
-          });
-      },
-    },
-    template: `
-      <div class="container-fluid md prepend-top-default append-bottom-default">
-        <div
-          class="text-center loading"
-          v-if="loading && !error">
-          <i
-            class="fa fa-spinner fa-spin"
-            aria-hidden="true"
-            aria-label="iPython notebook loading">
-          </i>
-        </div>
-        <notebook-lab
-          v-if="!loading && !error"
-          :notebook="json"
-          code-css-class="code white" />
-        <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 parsing the file.
-          </span>
-        </p>
-      </div>
-    `,
   });
 };
diff --git a/app/assets/javascripts/blob/notebook/notebook_viewer.vue b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
new file mode 100644
index 00000000000..401fe9beb62
--- /dev/null
+++ b/app/assets/javascripts/blob/notebook/notebook_viewer.vue
@@ -0,0 +1,81 @@
+<script>
+import axios from '~/lib/utils/axios_utils';
+import notebookLab from '~/notebook/index.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    notebookLab,
+    GlLoadingIcon,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      error: false,
+      loadError: false,
+      loading: true,
+      json: {},
+    };
+  },
+  mounted() {
+    if (gon.katex_css_url) {
+      const katexStyles = document.createElement('link');
+      katexStyles.setAttribute('rel', 'stylesheet');
+      katexStyles.setAttribute('href', gon.katex_css_url);
+      document.head.appendChild(katexStyles);
+    }
+
+    if (gon.katex_js_url) {
+      const katexScript = document.createElement('script');
+      katexScript.addEventListener('load', () => {
+        this.loadFile();
+      });
+      katexScript.setAttribute('src', gon.katex_js_url);
+      document.head.appendChild(katexScript);
+    } else {
+      this.loadFile();
+    }
+  },
+  methods: {
+    loadFile() {
+      axios
+        .get(this.endpoint)
+        .then(res => res.data)
+        .then(data => {
+          this.json = data;
+          this.loading = false;
+        })
+        .catch(e => {
+          if (e.status !== 200) {
+            this.loadError = true;
+          }
+          this.error = true;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="js-notebook-viewer-mounted 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>
+    <notebook-lab v-if="!loading && !error" :notebook="json" code-css-class="code white" />
+    <p v-if="error" class="text-center">
+      <span v-if="loadError" ref="loadErrorMessage">{{
+        __('An error occurred while loading the file. Please try again later.')
+      }}</span>
+      <span v-else ref="parsingErrorMessage">{{
+        __('An error occurred while parsing the file.')
+      }}</span>
+    </p>
+  </div>
+</template>