Merge branch 'psi-dark-mermaid' into 'master'

Fix mermaid diagrams in dark mode

See merge request gitlab-org/gitlab!56183

app/assets/javascripts/behaviors/markdown/render_mermaid.js

 import $ from 'jquery';
 import { once } from 'lodash';
 import { deprecatedCreateFlash as flash } from '~/flash';
+import { darkModeEnabled } from '~/lib/utils/color_utils';
 import { __, sprintf } from '~/locale';
 
 // Renders diagrams and flowcharts from text using Mermaid in any element with the
@@ -27,37 +28,34 @@ let renderedMermaidBlocks = 0;
 
 let mermaidModule = {};
 
+export function initMermaid(mermaid) {
+  let theme = 'neutral';
+
+  if (darkModeEnabled()) {
+    theme = 'dark';
+  }
+
+  mermaid.initialize({
+    // mermaid core options
+    mermaid: {
+      startOnLoad: false,
+    },
+    // mermaidAPI options
+    theme,
+    flowchart: {
+      useMaxWidth: true,
+      htmlLabels: false,
+    },
+    securityLevel: 'strict',
+  });
+
+  return mermaid;
+}
+
 function importMermaidModule() {
   return import(/* webpackChunkName: 'mermaid' */ 'mermaid')
     .then((mermaid) => {
-      let theme = 'neutral';
-      const ideDarkThemes = ['dark', 'solarized-dark', 'monokai'];
-
-      if (
-        ideDarkThemes.includes(window.gon?.user_color_scheme) &&
-        // if on the Web IDE page
-        document.querySelector('.ide')
-      ) {
-        theme = 'dark';
-      }
-
-      mermaid.initialize({
-        // mermaid core options
-        mermaid: {
-          startOnLoad: false,
-        },
-        // mermaidAPI options
-        theme,
-        flowchart: {
-          useMaxWidth: true,
-          htmlLabels: false,
-        },
-        securityLevel: 'strict',
-      });
-
-      mermaidModule = mermaid;
-
-      return mermaid;
+      mermaidModule = initMermaid(mermaid);
     })
     .catch((err) => {
       flash(sprintf(__("Can't load mermaid module: %{err}"), { err }));

app/assets/javascripts/lib/utils/color_utils.js

@@ -43,3 +43,15 @@ export const validateHexColor = (color = '') => {
 
   return /^#([0-9A-F]{3}){1,2}$/i.test(color);
 };
+
+export function darkModeEnabled() {
+  const ideDarkThemes = ['dark', 'solarized-dark', 'monokai'];
+
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  const isWebIde = document.body.dataset.page.startsWith('ide:');
+
+  if (isWebIde) {
+    return ideDarkThemes.includes(window.gon?.user_color_scheme);
+  }
+  return document.body.classList.contains('gl-dark');
+}

changelogs/unreleased/psi-dark-mermaid.yml

+---
+title: Fix mermaid diagrams in dark mode
+merge_request: 56183
+author:
+type: fixed

spec/frontend/behaviors/markdown/render_mermaid_spec.js

+import { initMermaid } from '~/behaviors/markdown/render_mermaid';
+import * as ColorUtils from '~/lib/utils/color_utils';
+
+describe('Render mermaid diagrams for Gitlab Flavoured Markdown', () => {
+  it.each`
+    darkMode | expectedTheme
+    ${false} | ${'neutral'}
+    ${true}  | ${'dark'}
+  `('is $darkMode $expectedTheme', async ({ darkMode, expectedTheme }) => {
+    jest.spyOn(ColorUtils, 'darkModeEnabled').mockImplementation(() => darkMode);
+
+    const mermaid = {
+      initialize: jest.fn(),
+    };
+
+    await initMermaid(mermaid);
+
+    expect(mermaid.initialize).toHaveBeenCalledTimes(1);
+    expect(mermaid.initialize).toHaveBeenCalledWith(
+      expect.objectContaining({
+        theme: expectedTheme,
+      }),
+    );
+  });
+});

spec/frontend/lib/utils/color_utils_spec.js

-import { textColorForBackground, hexToRgb, validateHexColor } from '~/lib/utils/color_utils';
+import {
+  textColorForBackground,
+  hexToRgb,
+  validateHexColor,
+  darkModeEnabled,
+} from '~/lib/utils/color_utils';
 
 describe('Color utils', () => {
   describe('Converting hex code to rgb', () => {
@@ -47,4 +52,24 @@ describe('Color utils', () => {
       expect(validateHexColor(color)).toEqual(output);
     });
   });
+
+  describe('darkModeEnabled', () => {
+    it.each`
+      page                     | bodyClass     | ideTheme           | expected
+      ${'ide:index'}           | ${'gl-dark'}  | ${'monokai-light'} | ${false}
+      ${'ide:index'}           | ${'ui-light'} | ${'monokai'}       | ${true}
+      ${'groups:issues:index'} | ${'ui-light'} | ${'monokai'}       | ${false}
+      ${'groups:issues:index'} | ${'gl-dark'}  | ${'monokai-light'} | ${true}
+    `(
+      'is $expected on $page with $bodyClass body class and $ideTheme IDE theme',
+      async ({ page, bodyClass, ideTheme, expected }) => {
+        document.body.outerHTML = `<body class="${bodyClass}" data-page="${page}"></body>`;
+        window.gon = {
+          user_color_scheme: ideTheme,
+        };
+
+        expect(darkModeEnabled()).toBe(expected);
+      },
+    );
+  });
 });