Skip to content

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:

1. GlForm, field.vue, markdown_editor.vue

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};

image

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.

2. work_item_description.vue

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

  1. 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)
  1. Make sure that the autocompletion works in the WI modal view.

Screen_Recording_2023-02-01_at_16.35.47

  1. 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.

Related to #382160 (closed)

Edited by euko

Merge request reports