Support quick action autocompletion and preview for work items
What does this MR do and why?
This MR updates various frontend components to support:
- autocompleting quick action commands depending on work item type when updating a work item's description.
- previewing the applied quick actions when updating a work item's description
Concretely these components are updated:
GlForm
, field.vue
, markdown_editor.vue
1. Let's start building some background context. When you visit a URL like https://gitlab.com/gitlab-org/gitlab/-/issues/382160
, the backend embeds a set of autocompletion paths into the global JS object gl.gfmAutocomplete.dataSources
.
- datasources = autocomplete_data_sources(object, noteable_type)
- if object
= javascript_tag do
:plain
gl = window.gl || {};
gl.GfmAutoComplete = gl.GfmAutoComplete || {};
gl.GfmAutoComplete.dataSources = #{datasources.to_json};
GlForm
currently initializes the GfmAutoComplete
class with gl.GfmAutoComplete.dataSources
if it's defined. It creates a problem for work items because we are building a new UI for work item based on client-side navigation. When you click on a related work item in the issue view, gl.GfmAutoComplete.dataSources
is no longer accurate.
In this MR, we are updating GlForm
(and its wrapper components) so they accept a custom data source to override gl.GfmAutoComplete.dataSources
.
work_item_description.vue
2. We add a computed property that computes a set of autocompletion paths to be passed down to markdown_editor.vue
/field.vue
(eventually down to GlForm
and GfmAutoComplete
.)
Also we need to update the preview markdown path to include the iid of a work item.
Screenshots or screen recordings
Autocompleting/applying the quick actions in the description of a Task
Screen_Recording_2023-02-01_at_16.30.27
Autocompleting/applying the quick actions in the description of an Objective
Screen_Recording_2023-02-01_at_16.32.16
How to set up and validate locally
-
Make sure to test with and without the feature flag
:work_items_mvc
because different description components are used depending on the FF.
Feature.enable(:work_items_mvc)
Feature.disable(:work_items_mvc)
- Make sure that the autocompletion works in the WI modal view.
Screen_Recording_2023-02-01_at_16.35.47
- Check that the autocompleted commands are different depending on the type.
Objective
, for instance, does NOT support the start/due date widget and the autocompleted commands for it should not show /due
.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #382160 (closed)