Skip to content

Replace HTML string with GlAlert in math renderer

Mark Florian requested to merge 455638-replace-button-alert-markup into master

What does this MR do and why?

Replace HTML string with GlAlert in math renderer

This replaces the static markup to recreate an alert with a real GlAlert instance. This fixes incorrect styling of the alert, incorrect positioning of the <copy-code> element, and also simplifies wiring up of events.

Before, the <copy-code> button was displaying over the alert's dismiss button. Now, it correctly displays within the maths code block it's associated with.

Since <copy-code> is absolutely positioned, and its nearest positioned ancestor is the .js-markdown-code element, and the alert was the first child of that element, the <copy-code> button was rendered over the alert instead of the code block below.

Now, the alert is the immediate previous sibling of the .js-markdown-code element, instead of its first child.

Addresses #455642 and #455665.

MR acceptance checklist

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

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
alert_before alert_after_2
alert_before alert_after

How to set up and validate locally

  1. Apply this patch to force the alerts to display when rendering maths: 
    diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js
index b9b68f680b38..c4f5cc74ce7f 100644
--- a/app/assets/javascripts/behaviors/markdown/render_math.js
+++ b/app/assets/javascripts/behaviors/markdown/render_math.js
@@ -11,7 +11,7 @@ import { s__, sprintf } from '~/locale';
 //
 // See app/assets/javascripts/behaviors/markdown/render_gfm.js
 
-const MAX_MATH_CHARS = 1000;
+const MAX_MATH_CHARS = 0;
 const MAX_MACRO_EXPANSIONS = 1000;
 const MAX_USER_SPECIFIED_EMS = 20;
 const MAX_RENDER_TIME_MS = 2000;
  2. Paste the following markdown in a description or comment and click Preview. The math formula should display 
    ```math
\begin{aligned}
   ed &= 1 \mod \phi(N)\\
 \implies ed &= k \phi(N) + 1\\
 \implies k \phi(N) + 1 &= 0 \mod e\\
 \implies k (N + 1 - p - q) + 1 &= 0 \mod e\\
 \implies 2k \left(\frac{N + 1}2 + \frac{-p-q}2\right) + 1 &= 0 \mod e
\end{aligned}
```
  3. Use the file expansion_limit.md to insert into an issue/comment, you should get the error There were too many expansions, consider using multiple math blocks

Related to #455638

Edited by Mark Florian

Merge request reports