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
- Enable the feature flag
work_items_alpha
. - Visit the new work item page in any project
http://127.0.0.1:3000/flightjs/Flight/-/work_items/new
. - Open Developer Tools in your browser and select the network tab.
- The markdown editor won't be rendered until you choose a work item. Choose any work item from the type dropdown.
- Once the markdown editor is rendered, type any autocomplete triggers (@, /, #, etc.).
- Note the value from the
work_item_type_id
payload sent in the request. - Change the work item type from the dropdown menu.
- Retype the same or a different trigger
- 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. - Repeat steps 5-9 to test other markdown editor types (rich text editing or plain text editing).
Related to #468874 (closed)