Bug 2064523 - Bump mermaid from 10.9.8 to 12.2.0

.github/dependabot.yml

@@ -22,7 +22,7 @@ updates:
       # Dependabot does not respect the caret ranges in package.json -- for a
       # major release it rewrites `^3.7.1` to `^4.0.0`. Major bumps of these
       # libraries need hand testing against the client, so suppress them here
-      # and do them as deliberate, standalone bugs: jquery 4.x, mermaid 11.x,
+      # and do them as deliberate, standalone bugs: jquery 4.x, mermaid 13.x,
       # devbridge-autocomplete 2.x. Security updates are unaffected --
       # `update-types` only gates version updates.
       - dependency-name: "jquery"

Bugzilla/Util.pm

@@ -1073,7 +1073,9 @@ sub is_fake_recipient_address {
   return 0;
 }
 
-# We need to escape ([ and ]) characters for the mermaid summaries
+# Escape characters in bug summaries that mermaid would otherwise interpret:
+# ( ) [ ] " break the node syntax, < > allow HTML injection, and $ would let
+# a $$...$$ summary be rendered as math by KaTeX.
 sub mermaid_quote {
   my $text = shift;
   $text =~ s/[(]/#40;/g;
@@ -1083,6 +1085,7 @@ sub mermaid_quote {
   $text =~ s/"/#34;/g;
   $text =~ s/</#60;/g;
   $text =~ s/>/#62;/g;
+  $text =~ s/\$/#36;/g;
   return $text;
 }
 

Dockerfile

@@ -2,7 +2,7 @@
 # from the versions pinned in package-lock.json. These files are not committed
 # to the repository; this stage is their only source. Node lives only here, so
 # the runtime image stays Node-free.
-FROM node:20-slim AS assets
+FROM node:22-slim AS assets
 
 WORKDIR /build
 COPY package.json package-lock.json ./

README.rst

@@ -339,7 +339,7 @@ only in that stage, so the runtime image stays Node-free.
 This means a Dependabot pull request that bumps a library is complete on its own — there is nothing
 to regenerate and commit, and CI tests the upgraded library as-is. Because a library's stylesheet is
 generated from the same package as its script, the two cannot drift apart, so review upgrades for
-visual changes as well as behavioural ones. Treat major bumps (jquery 4.x, mermaid 11.x,
+visual changes as well as behavioural ones. Treat major bumps (jquery 4.x, mermaid 13.x,
 devbridge-autocomplete 2.x) as manual, tested reviews.
 
 To add a new library:

package.json

@@ -8,15 +8,15 @@
   "scripts": {
     "build": "node scripts/build-frontend.mjs"
   },
-  "//": "The generated files are not committed; the Docker assets stage builds them from this lockfile. Dependabot proposes upgrades and CI tests them with no regeneration step needed; treat majors (jquery 4.x, mermaid 11.x, devbridge 2.x) as manual, tested reviews. A bump now moves a library's stylesheet along with its script, so review upgrades for visual changes too. bpopup is not published to npm and remains vendored under js/jquery/plugins/bPopup/.",
+  "//": "The generated files are not committed; the Docker assets stage builds them from this lockfile. Dependabot proposes upgrades and CI tests them with no regeneration step needed; treat majors (jquery 4.x, mermaid 13.x, devbridge 2.x) as manual, tested reviews. A bump now moves a library's stylesheet along with its script, so review upgrades for visual changes too. bpopup is not published to npm and remains vendored under js/jquery/plugins/bPopup/.",
   "dependencies": {
     "blueimp-md5": "2.19.0",
     "devbridge-autocomplete": "2.0.1",
     "jquery": "3.7.1",
     "jquery-contextmenu": "2.10.2",
     "jquery-datetimepicker": "2.5.21",
     "jquery-ui-dist": "1.13.3",
-    "mermaid": "10.9.8",
+    "mermaid": "12.2.0",
     "prismjs": "1.30.0"
   }
 }

t/007util.t

@@ -15,7 +15,7 @@ use warnings;
 
 use lib qw(. lib local/lib/perl5 t);
 use Support::Files;
-use Test::More tests => 57;
+use Test::More tests => 58;
 use DateTime;
 
 BEGIN {
@@ -169,8 +169,9 @@ $past = $now->clone->subtract(months => 1);
 like(time_ago($past), qr/^(1 month|(2[89]|3[01]) days) ago$/, 'time_ago(DateTime 1 month ago) is reasonable');
 
 # mermaid_quote():
-is(mermaid_quote('foo(bar)'),    'foo#40;bar#41;', 'mermaid_quote: parens');
-is(mermaid_quote('foo[bar]'),    'foo#91;bar#93;', 'mermaid_quote: brackets');
-is(mermaid_quote('foo"bar"'),    'foo#34;bar#34;', 'mermaid_quote: double quotes');
-is(mermaid_quote('<script>'),    '#60;script#62;', 'mermaid_quote: angle brackets (html injection)');
-is(mermaid_quote('no specials'), 'no specials',    'mermaid_quote: passthrough');
+is(mermaid_quote('foo(bar)'),    'foo#40;bar#41;',    'mermaid_quote: parens');
+is(mermaid_quote('foo[bar]'),    'foo#91;bar#93;',    'mermaid_quote: brackets');
+is(mermaid_quote('foo"bar"'),    'foo#34;bar#34;',    'mermaid_quote: double quotes');
+is(mermaid_quote('<script>'),    '#60;script#62;',    'mermaid_quote: angle brackets (html injection)');
+is(mermaid_quote('$$x$$'),       '#36;#36;x#36;#36;', 'mermaid_quote: dollar signs (katex math)');
+is(mermaid_quote('no specials'), 'no specials',       'mermaid_quote: passthrough');

template/en/default/bug/dependency-graph.html.tmpl

@@ -89,6 +89,11 @@
   <script [% script_nonce FILTER none %]>
     mermaid.initialize({
       startOnLoad: false,
+      // Keep the Mermaid 10 appearance; 12 defaults to ELK, redux-color, neo
+      layout: 'dagre',
+      theme: 'default',
+      look: 'classic',
+      flowchart: { wrappingWidth: 200 },
       maxTextSize: [% graph_size FILTER json %] + 1000,
       maxEdges: [% graph_edges FILTER json %] + 100
     });