Skip to content

Fixes race condition for GFM rendering on issuable description

What does this MR do and why?

Solves #432967 (closed)

Sometimes mermaid diagrams are not getting rendered on issuable (reproduced with incidents). Based on this comment it's due to a race condition:

it seems like it's a race condition. We try to render mermaid before the description is rendered to DOM, which fails. Fortunately, the fix is as easy as adding a nextTick in the right place, so it would be a one-line fix.

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
image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Add an incident and add a mermaid diagram to the description. You can use the following as an example and add it inside a mermaid codeblock:
    gantt
        title A Gantt Diagram
        dateFormat  YYYY-MM-DD
        section Section
        A task           :a1, 2014-01-01, 30d
        Another task     :after a1  , 20d
        section Another
        Task in sec      :2014-01-12  , 12d
        another task      : 24d
  2. Because it's a race condition it might or might not render properly. With these changes, it should always render.
Edited by Marc Saleiko

Merge request reports