Merge branch 'sh-add-mermaid-html-labels' into 'master'

Enable HTML labels in Mermaid

See merge request gitlab-org/gitlab!63101

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

@@ -46,7 +46,7 @@ export function initMermaid(mermaid) {
     theme,
     flowchart: {
       useMaxWidth: true,
-      htmlLabels: false,
+      htmlLabels: true,
     },
     securityLevel: 'strict',
   });

spec/features/markdown/mermaid_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'Mermaid rendering', :js do
+  let_it_be(:project) { create(:project, :public) }
+
   it 'renders Mermaid diagrams correctly' do
     description = <<~MERMAID
       ```mermaid
@@ -14,7 +16,6 @@ RSpec.describe 'Mermaid rendering', :js do
       ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -36,7 +37,6 @@ RSpec.describe 'Mermaid rendering', :js do
       ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -44,10 +44,33 @@ RSpec.describe 'Mermaid rendering', :js do
     wait_for_requests
     wait_for_mermaid
 
-    expected = '<text style=""><tspan xml:space="preserve" dy="1em" x="1">Line 1</tspan><tspan xml:space="preserve" dy="1em" x="1">Line 2</tspan></text>'
+    # From https://github.com/mermaid-js/mermaid/blob/d3f8f03a7d03a052e1fe0251d5a6d8d1f48d67ee/src/dagre-wrapper/createLabel.js#L79-L82
+    expected = %(<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Line 1<br>Line 2</div>)
     expect(page.html.scan(expected).count).to be(4)
   end
 
+  it 'does not allow XSS in HTML labels' do
+    description = <<~MERMAID
+      ```mermaid
+      graph LR;
+        A-->CLICK_HERE_AND_GET_BONUS;
+        click A alert "aaa"
+        click CLICK_HERE_AND_GET_BONUS "javascript:alert%28%64%6f%63%75%6d%65%6e%74%2e%64%6f%6d%61%69%6e%29" "Here is the XSS"
+      ```
+    MERMAID
+
+    issue = create(:issue, project: project, description: description)
+
+    visit project_issue_path(project, issue)
+
+    wait_for_requests
+    wait_for_mermaid
+
+    # From https://github.com/mermaid-js/mermaid/blob/d3f8f03a7d03a052e1fe0251d5a6d8d1f48d67ee/src/dagre-wrapper/createLabel.js#L79-L82
+    expected = %(<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">CLICK_HERE_AND_GET_BONUS</div>)
+    expect(page.html).to include(expected)
+  end
+
   it 'renders only 2 Mermaid blocks and', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/234081' do
     description = <<~MERMAID
     ```mermaid
@@ -64,7 +87,6 @@ RSpec.describe 'Mermaid rendering', :js do
     ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -94,7 +116,6 @@ RSpec.describe 'Mermaid rendering', :js do
       </details>
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -108,7 +129,37 @@ RSpec.describe 'Mermaid rendering', :js do
 
       expect(svg[:style]).to match(/max-width/)
       expect(svg[:width].to_i).to eq(100)
-      expect(svg[:height].to_i).to be_within(5).of(220)
+      expect(svg[:height].to_i).to be_within(5).of(236)
+    end
+  end
+
+  it 'renders V2 state diagrams' do
+    description = <<~MERMAID
+    ```mermaid
+    stateDiagram-v2
+    [*] --> Idle
+    Idle --> Active : CONTINUE
+    state Active {
+        [*] --> Run
+        Run--> Stop: CONTINUE
+        Stop--> Run: CONTINUE
+
+        Run: Run
+        Run: entry/start
+        Run: check
+    }
+    ```
+    MERMAID
+
+    issue = create(:issue, project: project, description: description)
+
+    visit project_issue_path(project, issue)
+
+    wait_for_requests
+    wait_for_mermaid
+
+    page.within('.description') do
+      expect(page).to have_selector('svg')
     end
   end
 
@@ -123,7 +174,6 @@ RSpec.describe 'Mermaid rendering', :js do
       ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -144,7 +194,6 @@ RSpec.describe 'Mermaid rendering', :js do
     ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -183,8 +232,6 @@ RSpec.describe 'Mermaid rendering', :js do
 
     description *= 51
 
-    project = create(:project, :public)
-
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)