Skip to content

Resolve "Update preview when selecting a new template"

What does this MR do?

Updates the markdown preview in the Issue and Merge Request description editors when the user changes the description's template using the "Choose a template" dropdown.

Implementation approach

I've tried to maintain a minimal footprint in the source code for this bug fix. The first reason behind this is that I noticed two implementations of the markdown-editor component used in the issue and merge request pages: One implemented in Vue and another using jQuery. I assumed that pages using the jQuery implementation will eventually transition to Vue's hence it's not worth making significant changes. The other reason is to avoid creating a MR with too many changes.

I added a content property to the markdown-editor component in order to refresh the markdown preview when the editor's content changes. This is not the approach I prefer but it is the least dramatic change I could think of that didn't require to change the component's data-flow design. Currently, this component picks the content it renders from the DOM and is aware of the content embedded in its slot placeholder which is not a good practice.

Testing approach

I implemented two feature tests to catch the regressions. Even though GitLab encourages to avoid adding new feature tests as much as possible, I found too complex — for my experience with the source code — to test the interaction between the template selector and the markdown preview editor because some of these components are too tied to the DOM. If I get some mentorship about how to write an integration test, I would do it.

I also wrote some unit tests for the changes I made in the template selector and markdown-editor components.

What are the relevant issue numbers?

Fixes #21656 (moved)

Does this MR meet the acceptance criteria?

Edited by Enrique Alcántara

Merge request reports