Ship Mermaid 11 behind a gitlab_com_derisk feature flag

What does this MR do and why?

Adds Mermaid 11 support behind a gitlab_com_derisk feature flag; see Update mermaid to version 11.0.0.0+ (#491514).

Here we:

  • Pull in Mermaid 11 as mermaid-v11.
  • Refactor the core of the Mermaid sandbox, app/assets/javascripts/lib/mermaid.js, to expose a function that accepts the mermaid module as an argument, rather than importing it itself. We don't change any of the implementation itself.
  • Add mermaid_v10 and mermaid_v11 entrypoints which actually import their respective Mermaid versions and the sandbox core, and pass the former into the latter.
  • Rename v10-specific filenames, URLs and constant names to call out that they're v10-specific and parallel the v11-specific ones, so it's always clear which are version specific vs. non-specific.
  • Add a feature flag and push it to the frontend on a per-project/group basis.
  • Fix an issue causing Vite to crash loop, due to a semi-broken import of a dependency upgrade required by Mermaid 11 (cytoscape 3.33.1); see the commit message and added comment in vite.config.js for details. Note https://github.com/cytoscape/cytoscape.js/blob/v3.33.1/package.json#L57-L59.
  • Fix webpack 4 compatibility with Mermaid 11 and its transitive dependencies (babel-loader rule for packages that need it, resolve aliases for packages with an exports in their package.json without a main fallback)

There is no change to our security posture, except that from the Mermaid 11 upgrade itself. We sandbox and force CSP on Mermaid (27d33bd2) to mitigate exactly concerns here: we have no new concerns specific to Mermaid 11.

References

Screenshots or screen recordings

Using the following payload:

### Renders in both versions

```mermaid
graph LR; A-->B
```

### Only renders in v11

```mermaid
packet
title UDP Packet
+16: "Source Port"
+16: "Destination Port"
32-47: "Length"
48-63: "Checksum"
64-95: "Data (variable length)"
```
Before After
image image

How to set up and validate locally

  1. Check out the branch; ensure you yarn and gdk restart. You may even wish to bin/rails vite:clobber.
  2. Use the payload above in a Markdown text surface, such as a work item or MR description.
  3. You should see the "Before" variant from above.
  4. Enable the feature for the project your work item or description is in:
    > Feature.enable(:use_mermaid_v11, Project.find_by_name('bweh'))
  5. Refresh; you might need to empty cache and refresh, and you might need to refresh a couple times, due to the magic of feature flags.
  6. You should see the "After" variant from above.
  7. Qué bonita.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Asherah Connor

Merge request reports

Loading