Skip to content

Fix: Markdown Editor Reflects Changes in Autocomplete Data Sources

  • Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA

What does this MR do and why?

Previously, the markdown editor did not reflect changes in the autocompleteDataSources props. This was because autocompleteDataSources were historically expected to remain constant and never update. However, this expectation has changed with the introduction of work items.

In the video below, the autocompleteDataSources is changed through altering the selection in the type dropdown. However, the change wasn't reflected previously, and as a result, the payload work_item_type_id remained constant when fetching requests upon typing autocomplete triggers.

After the fix, the payload work_item_type_id is updated whenever the selection in the type dropdown is changed.

Implementation Details

This MR touches several files related to the markdown editor. The markdown editor has two modes: rich text editing and plain text editing.

Plain Text Editing Mode:
The plain text editing mode uses the app/assets/javascripts/vue_shared/components/markdown/field.vue component. This component depends on the app/assets/javascripts/gl_form.js component, which uses the GfmAutocomplete class.

Rich Text Editing Mode:
The rich text editing mode uses the app/assets/javascripts/content_editor/services/content_editor.js component, which uses the AutocompleteHelper class.

Both the GfmAutocomplete and AutocompleteHelper classes are responsible for autocompletion tasks. I have added functions to update the data sources in both classes.

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

Before After
Screen_Recording_2024-07-26_at_01.58.26 Screen_Recording_2024-07-29_at_05.25.34

How to set up and validate locally

  1. Enable the feature flag work_items_alpha.
  2. Visit the new work item page in any project http://127.0.0.1:3000/flightjs/Flight/-/work_items/new.
  3. Open Developer Tools in your browser and select the network tab.
  4. The markdown editor won't be rendered until you choose a work item. Choose any work item from the type dropdown.
  5. Once the markdown editor is rendered, type any autocomplete triggers (@, /, #, etc.).
  6. Note the value from the work_item_type_id payload sent in the request.
  7. Change the work item type from the dropdown menu.
  8. Retype the same or a different trigger
  9. Observe that a new request is sent and verify that the work_item_type_id value has been updated according to the selected work item type.
  10. Repeat steps 5-9 to test other markdown editor types (rich text editing or plain text editing).

Related to #468874 (closed)

Edited by Altair Rostam

Merge request reports

Loading