Add latest changes from gitlab-org/gitlab@master

7 files changed, 160 insertions, 24 deletions

diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js
index daa11802cc5..e942f59e7d8 100644
--- a/app/assets/javascripts/repository/components/blob_viewers/index.js
+++ b/app/assets/javascripts/repository/components/blob_viewers/index.js
@@ -3,7 +3,7 @@ const viewers = {
   image: () => import('./image_viewer.vue'),
   video: () => import('./video_viewer.vue'),
   empty: () => import('./empty_viewer.vue'),
-  text: () => import('~/vue_shared/components/source_viewer.vue'),
+  text: () => import('~/vue_shared/components/source_viewer/source_viewer.vue'),
   pdf: () => import('./pdf_viewer.vue'),
   lfs: () => import('./lfs_viewer.vue'),
 };
diff --git a/app/assets/javascripts/repository/queries/blob_info.query.graphql b/app/assets/javascripts/repository/queries/blob_info.query.graphql
index aeba84d481d..91b5ff9ccf1 100644
--- a/app/assets/javascripts/repository/queries/blob_info.query.graphql
+++ b/app/assets/javascripts/repository/queries/blob_info.query.graphql
@@ -20,6 +20,7 @@ query getBlobInfo($projectPath: ID!, $filePath: String!, $ref: String!) {
           rawSize
           rawTextBlob
           fileType
+          language
           path
           editBlobPath
           ideEditPath
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/constants.js b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
new file mode 100644
index 00000000000..9efe0147c37
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/constants.js
@@ -0,0 +1,111 @@
+// Language map from Rouge::Lexer to highlight.js
+// Rouge::Lexer - We use it on the BE to determine the language of a source file (https://github.com/rouge-ruby/rouge/blob/master/docs/Languages.md).
+// Highlight.js - We use it on the FE to highlight the syntax of a source file (https://github.com/highlightjs/highlight.js/tree/main/src/languages).
+export const ROUGE_TO_HLJS_LANGUAGE_MAP = {
+  bsl: '1c',
+  actionscript: 'actionscript',
+  ada: 'ada',
+  apache: 'apache',
+  applescript: 'applescript',
+  armasm: 'armasm',
+  awk: 'awk',
+  c: 'c',
+  ceylon: 'ceylon',
+  clean: 'clean',
+  clojure: 'clojure',
+  cmake: 'cmake',
+  coffeescript: 'coffeescript',
+  coq: 'coq',
+  cpp: 'cpp',
+  crystal: 'crystal',
+  csharp: 'csharp',
+  css: 'css',
+  d: 'd',
+  dart: 'dart',
+  pascal: 'delphi',
+  diff: 'diff',
+  jinja: 'django',
+  docker: 'dockerfile',
+  batchfile: 'dos',
+  elixir: 'elixir',
+  elm: 'elm',
+  erb: 'erb',
+  erlang: 'erlang',
+  fortran: 'fortran',
+  fsharp: 'fsharp',
+  gherkin: 'gherkin',
+  glsl: 'glsl',
+  go: 'go',
+  gradle: 'gradle',
+  groovy: 'groovy',
+  haml: 'haml',
+  handlebars: 'handlebars',
+  haskell: 'haskell',
+  haxe: 'haxe',
+  http: 'http',
+  hylang: 'hy',
+  ini: 'ini',
+  isbl: 'isbl',
+  java: 'java',
+  javascript: 'javascript',
+  json: 'json',
+  julia: 'julia',
+  kotlin: 'kotlin',
+  lasso: 'lasso',
+  tex: 'latex',
+  common_lisp: 'lisp',
+  livescript: 'livescript',
+  llvm: 'llvm',
+  hlsl: 'lsl',
+  lua: 'lua',
+  make: 'makefile',
+  markdown: 'markdown',
+  mathematica: 'mathematica',
+  matlab: 'matlab',
+  moonscript: 'moonscript',
+  nginx: 'nginx',
+  nim: 'nim',
+  nix: 'nix',
+  objective_c: 'objectivec',
+  ocaml: 'ocaml',
+  perl: 'perl',
+  php: 'php',
+  plaintext: 'plaintext',
+  pony: 'pony',
+  powershell: 'powershell',
+  prolog: 'prolog',
+  properties: 'properties',
+  protobuf: 'protobuf',
+  puppet: 'puppet',
+  python: 'python',
+  q: 'q',
+  qml: 'qml',
+  r: 'r',
+  reasonml: 'reasonml',
+  ruby: 'ruby',
+  rust: 'rust',
+  sas: 'sas',
+  scala: 'scala',
+  scheme: 'scheme',
+  scss: 'scss',
+  shell: 'shell',
+  smalltalk: 'smalltalk',
+  sml: 'sml',
+  sqf: 'sqf',
+  sql: 'sql',
+  stan: 'stan',
+  stata: 'stata',
+  swift: 'swift',
+  tap: 'tap',
+  tcl: 'tcl',
+  twig: 'twig',
+  typescript: 'typescript',
+  vala: 'vala',
+  vb: 'vbnet',
+  verilog: 'verilog',
+  vhdl: 'vhdl',
+  viml: 'vim',
+  xml: 'xml',
+  xquery: 'xquery',
+  yaml: 'yaml',
+};
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
index f6580a716ee..5aae1812de3 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
@@ -1,14 +1,16 @@
 <script>
-import { GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlSafeHtmlDirective, GlLoadingIcon } from '@gitlab/ui';
 import LineNumbers from '~/vue_shared/components/line_numbers.vue';
 import { sanitize } from '~/lib/dompurify';
+import { ROUGE_TO_HLJS_LANGUAGE_MAP } from './constants';
+import { wrapLines } from './utils';
 
 const LINE_SELECT_CLASS_NAME = 'hll';
-const PLAIN_TEXT_LANGUAGE = 'plaintext';
 
 export default {
   components: {
     LineNumbers,
+    GlLoadingIcon,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -18,17 +20,12 @@ export default {
       type: Object,
       required: true,
     },
-    autoDetect: {
-      type: Boolean,
-      required: false,
-      default: true, // We'll eventually disable autoDetect and pass the language explicitly to reduce the footprint (https://gitlab.com/gitlab-org/gitlab/-/issues/348145)
-    },
   },
   data() {
     return {
       languageDefinition: null,
       content: this.blob.rawTextBlob,
-      language: this.blob.language || PLAIN_TEXT_LANGUAGE,
+      language: ROUGE_TO_HLJS_LANGUAGE_MAP[this.blob.language],
       hljs: null,
     };
   },
@@ -40,14 +37,14 @@ export default {
       let highlightedContent;
 
       if (this.hljs) {
-        if (this.autoDetect) {
+        if (!this.language) {
           highlightedContent = this.hljs.highlightAuto(this.content).value;
         } else if (this.languageDefinition) {
           highlightedContent = this.hljs.highlight(this.content, { language: this.language }).value;
         }
       }
 
-      return this.wrapLines(highlightedContent);
+      return wrapLines(highlightedContent);
     },
   },
   watch: {
@@ -61,14 +58,14 @@ export default {
   async mounted() {
     this.hljs = await this.loadHighlightJS();
 
-    if (!this.autoDetect) {
+    if (this.language) {
       this.languageDefinition = await this.loadLanguage();
     }
   },
   methods: {
     loadHighlightJS() {
-      // With auto-detect enabled we load all common languages else we load only the core (smallest footprint)
-      return this.autoDetect ? import('highlight.js/lib/common') : import('highlight.js/lib/core');
+      // If no language can be mapped to highlight.js we load all common languages else we load only the core (smallest footprint)
+      return !this.language ? import('highlight.js/lib/common') : import('highlight.js/lib/core');
     },
     async loadLanguage() {
       let languageDefinition;
@@ -82,15 +79,6 @@ export default {
 
       return languageDefinition;
     },
-    wrapLines(content) {
-      return (
-        content &&
-        content
-          .split('\n')
-          .map((line, i) => `<span id="LC${i + 1}" class="line">${line}</span>`)
-          .join('\r\n')
-      );
-    },
     selectLine() {
       const hash = sanitize(this.$route.hash);
       const lineToSelect = hash && this.$el.querySelector(hash);
@@ -113,7 +101,9 @@ export default {
 };
 </script>
 <template>
+  <gl-loading-icon v-if="!highlightedContent" size="sm" class="gl-my-5" />
   <div
+    v-else
     class="file-content code js-syntax-highlight blob-content gl-display-flex"
     :class="$options.userColorScheme"
     data-type="simple"
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/utils.js b/app/assets/javascripts/vue_shared/components/source_viewer/utils.js
new file mode 100644
index 00000000000..e64e564bf61
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/utils.js
@@ -0,0 +1,26 @@
+export const wrapLines = (content) => {
+  return (
+    content &&
+    content
+      .split('\n')
+      .map((line, i) => {
+        let formattedLine;
+        const idAttribute = `id="LC${i + 1}"`;
+
+        if (line.includes('<span class="hljs') && !line.includes('</span>')) {
+          /**
+           * In some cases highlight.js will wrap multiple lines in a span, in these cases we want to append the line number to the existing span
+           *
+           * example (before):  <span class="hljs-code">```bash
+           * example (after):   <span id="LC67" class="hljs-code">```bash
+           */
+          formattedLine = line.replace(/(?=class="hljs)/, `${idAttribute} `);
+        } else {
+          formattedLine = `<span ${idAttribute} class="line">${line}</span>`;
+        }
+
+        return formattedLine;
+      })
+      .join('\n')
+  );
+};
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9cf435af726..2f3db25f53b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -720,7 +720,7 @@ $calendar-activity-colors: (
   #7fa8c9,
   #527ba0,
   #254e77,
-);
+) !default;
 
 /*
 * Commit Page
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 1265d27d5f6..b8c9e913beb 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -259,3 +259,11 @@ $line-removed-dark: $red-200;
 
 $well-expand-item: $gray-200;
 $well-inner-border: $gray-200;
+
+$calendar-activity-colors: (
+  #303030,
+  #333861,
+  #4a5593,
+  #6172c5,
+  #788ff7
+);