1 files changed, 30 insertions, 20 deletions
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index 2200754cbef..d1883299bd9 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -1,51 +1,61 @@
 <script>
-import Store from '../stores/repo_store';
+/* global LineHighlighter */
+import { mapGetters } from 'vuex';
 
 export default {
-  data: () => Store,
-  mounted() {
-    this.highlightFile();
-  },
   computed: {
-    html() {
-      return this.activeFile.html;
+    ...mapGetters([
+      'activeFile',
+    ]),
+    renderErrorTooLarge() {
+      return this.activeFile.renderError === 'too_large';
     },
   },
-
   methods: {
     highlightFile() {
       $(this.$el).find('.file-content').syntaxHighlight();
     },
   },
-
-  watch: {
-    html() {
-      this.$nextTick(() => {
-        this.highlightFile();
-      });
-    },
+  mounted() {
+    this.highlightFile();
+    this.lineHighlighter = new LineHighlighter({
+      fileHolderSelector: '.blob-viewer-container',
+      scrollFileHolder: true,
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.highlightFile();
+    });
   },
 };
 </script>
 
 <template>
-<div>
+<div class="blob-viewer-container">
   <div
-    v-if="!activeFile.render_error"
+    v-if="!activeFile.renderError"
     v-html="activeFile.html">
   </div>
   <div
-    v-else-if="activeFile.tooLarge"
+    v-else-if="activeFile.tempFile"
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed for this temporary file.
+    </p>
+  </div>
+  <div
+    v-else-if="renderErrorTooLarge"
     class="vertical-center render-error">
     <p class="text-center">
-      The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.
+      The source could not be displayed because it is too large. You can <a :href="activeFile.rawPath" download>download</a> it instead.
     </p>
   </div>
   <div
     v-else
     class="vertical-center render-error">
     <p class="text-center">
-      The source could not be displayed because a rendering error occured. You can <a :href="activeFile.raw_path">download</a> it instead.
+      The source could not be displayed because a rendering error occurred. You can <a :href="activeFile.rawPath" download>download</a> it instead.
     </p>
   </div>
 </div>