Fallback to highlighting HAML with Rouge

Fallback to highlighting with rouge until the issue is fixed upstream

Changelog: fixed

app/assets/javascripts/vue_shared/components/source_viewer/constants.js

@@ -141,6 +141,9 @@ export const BIDI_CHARS_CLASS_LIST = 'unicode-bidi has-tooltip';
 
 export const BIDI_CHAR_TOOLTIP = 'Potentially unwanted character detected: Unicode BiDi Control';
 
-// We fallback to highlighting these languages with Rouge, see the following issue for more detail:
-// https://gitlab.com/gitlab-org/gitlab/-/issues/384375#note_1212752013
-export const LEGACY_FALLBACKS = ['python'];
+/**
+ * We fallback to highlighting these languages with Rouge, see the following issues for more detail:
+ * Python: https://gitlab.com/gitlab-org/gitlab/-/issues/384375#note_1212752013
+ * HAML: https://github.com/highlightjs/highlight.js/issues/3783
+ * */
+export const LEGACY_FALLBACKS = ['python', 'haml'];

spec/frontend/vue_shared/components/source_viewer/source_viewer_deprecated_spec.js

@@ -11,6 +11,7 @@ import {
   EVENT_LABEL_FALLBACK,
   ROUGE_TO_HLJS_LANGUAGE_MAP,
   LINES_PER_CHUNK,
+  LEGACY_FALLBACKS,
 } from '~/vue_shared/components/source_viewer/constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import LineHighlighter from '~/blob/line_highlighter';
@@ -89,14 +90,16 @@ describe('Source Viewer component', () => {
   });
 
   describe('legacy fallbacks', () => {
-    it('tracks a fallback event and emits an error when viewing python files', () => {
-      const fallbackLanguage = 'python';
-      const eventData = { label: EVENT_LABEL_FALLBACK, property: fallbackLanguage };
-      createComponent({ language: fallbackLanguage });
-
-      expect(Tracking.event).toHaveBeenCalledWith(undefined, EVENT_ACTION, eventData);
-      expect(wrapper.emitted('error')).toHaveLength(1);
-    });
+    it.each(LEGACY_FALLBACKS)(
+      'tracks a fallback event and emits an error when viewing %s files',
+      (fallbackLanguage) => {
+        const eventData = { label: EVENT_LABEL_FALLBACK, property: fallbackLanguage };
+        createComponent({ language: fallbackLanguage });
+
+        expect(Tracking.event).toHaveBeenCalledWith(undefined, EVENT_ACTION, eventData);
+        expect(wrapper.emitted('error')).toHaveLength(1);
+      },
+    );
   });
 
   describe('highlight.js', () => {