Add latest changes from gitlab-org/gitlab@master

2 files changed, 36 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
index 0d78530d878..5ba0ea68d80 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
@@ -112,6 +112,12 @@ export const ROUGE_TO_HLJS_LANGUAGE_MAP = {
   yaml: 'yaml',
 };
 
+export const EVENT_ACTION = 'view_source';
+
+export const EVENT_LABEL_VIEWER = 'source_viewer';
+
+export const EVENT_LABEL_FALLBACK = 'legacy_fallback';
+
 export const LINES_PER_CHUNK = 70;
 
 export const BIDI_CHARS = [
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
index f819a9e5be2..b5c66365836 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
@@ -3,7 +3,14 @@ import { GlSafeHtmlDirective, GlLoadingIcon } from '@gitlab/ui';
 import LineHighlighter from '~/blob/line_highlighter';
 import eventHub from '~/notes/event_hub';
 import languageLoader from '~/content_editor/services/highlight_js_language_loader';
-import { ROUGE_TO_HLJS_LANGUAGE_MAP, LINES_PER_CHUNK } from './constants';
+import Tracking from '~/tracking';
+import {
+  EVENT_ACTION,
+  EVENT_LABEL_VIEWER,
+  EVENT_LABEL_FALLBACK,
+  ROUGE_TO_HLJS_LANGUAGE_MAP,
+  LINES_PER_CHUNK,
+} from './constants';
 import Chunk from './components/chunk.vue';
 import { registerPlugins } from './plugins/index';
 
@@ -23,6 +30,7 @@ export default {
   directives: {
     SafeHtml: GlSafeHtmlDirective,
   },
+  mixins: [Tracking.mixin()],
   props: {
     blob: {
       type: Object,
@@ -49,8 +57,22 @@ export default {
     lineNumbers() {
       return this.splitContent.length;
     },
+    unsupportedLanguage() {
+      const supportedLanguages = Object.keys(languageLoader);
+      return (
+        !supportedLanguages.includes(this.language) &&
+        !supportedLanguages.includes(this.blob.language)
+      );
+    },
   },
   async created() {
+    this.trackEvent(EVENT_LABEL_VIEWER);
+
+    if (this.unsupportedLanguage) {
+      this.handleUnsupportedLanguage();
+      return;
+    }
+
     this.generateFirstChunk();
     this.hljs = await this.loadHighlightJS();
 
@@ -70,6 +92,13 @@ export default {
     });
   },
   methods: {
+    trackEvent(label) {
+      this.track(EVENT_ACTION, { label, property: this.blob.language });
+    },
+    handleUnsupportedLanguage() {
+      this.trackEvent(EVENT_LABEL_FALLBACK);
+      this.$emit('error');
+    },
     generateFirstChunk() {
       const lines = this.splitContent.splice(0, LINES_PER_CHUNK);
       this.firstChunk = this.createChunk(lines);