Skip to content

Improve autocomplete results in rich text editor

Himanshu Kapoor requested to merge 420344-unassign-fix into master

What does this MR do and why?

Add a new autocomplete helper to improve autocomplete experience in the rich text editor. This includes searching and sorting improvements and highlighting of search string for all autocomplete elements.

Issues fixed:

Screenshots or screen recordings

Common changes in all autocomplete list items:

  1. There is now a min-width and max-width for plain text editor dropdown in accordance with the new dropdown styles defined in Pajamas.
  2. As with the plain text editor dropdown, the first element is autoselected in rich text editor dropdown only if there is a search string. So pressing Enter or Space automatically selects the item.
  3. Plain text editor dropdown doesn't allow having separate focus and hover styles, so I defaulted to using focus styles for hover as well. I think this is an acceptable compromise for the time being.
  4. The number of dropdown items match between both the editors. The updated limits are:
    1. Users: 10
    2. Labels: 20
    3. Quick actions: 100 (show all)
    4. Everything else: 5
  5. Search strings are now highlighted in bold in both editor dropdowns. Previously they were only highlighted in the plain text editor dropdown.
Case Plain text editor (before) Rich text editor (before) Plain text editor (after) Rich text editor (after)
User

image.png

image.png

image.png

image.png

Notes:

  1. The sorting order is still different between both editors. But the sorting logic of the new editor is better. Old order: If username or name starts with search string: show first, else don't order. New order: Sort based on index of search string in both username or name.
  2. We can address this in a follow up as the current implementation is still a big improvement.
  3. Rich text editor dropdown style now matches plain text editor and no longer uses gl-avatar-labeled.
Issue

image.png

image.png

image.png

image.png

Notes:

  1. Sorting order matches both editors.
  2. Text color of issue number in rich text editor dropdown now matches plain text editor dropdown.
Epic

image.png

image.png

image.png

image.png

Notes:

  1. Sorting order matches both editors.
  2. Text color of epic number in rich text editor dropdown now matches plain text editor dropdown.
Merge Request

image.png

image.png

image.png

image.png

Notes:

  1. Sorting order matches both editors.
  2. Text color of merge request number in rich text editor dropdown now matches plain text editor dropdown.
Snippet

image.png

image.png

image.png

image.png

Notes:

  1. Sorting order matches both editors.
  2. Text color of snippet number in rich text editor dropdown now matches plain text editor dropdown.
Label

image.png

image.png

image.png

image.png

Notes:

  1. Sorting order matches both editors.
Milestone

image.png

image.png

image.png

image.png

Notes:

  1. Sorting order matches both editors. Now milestones are sorted by due date. Expired milestones are pushed to the bottom and milestones without a due date are put right above expired milestones.
  2. Expired milestones have (expired) mentioned in parentheses.
Vulnerability

image.png

image.png

image.png

image.png

Notes:

  1. Sorting order matches both editors.
Command

image.png

image.png

image.png

image.png

Notes:

  1. Plain text editor dropdown has been updated to match the new styles. Previously it used float elements and now that has been fixed to display elements in two lines since we also defined a max-width.
  2. Sorting order matches both editors.
Emoji

image.png

image.png

image.png

image.png

Notes:

  1. Sorting order matches both editors.
  2. In rich text editor, emoji results showed both name and description. Now both editors show either name or description based on what is being searched. Emojis also have aliases, and when you search for an alias for example :+1:, both editors would now show aliases instead of name/description. Further discussion happening in #423178 (comment 1640883571).
Custom Emoji

image.png

(Not supported)

image.png

image.png

image.png

Notes:

  1. In rich text editor, custom emoji was previously not supported. It could not be displayed in the suggestions dropdown and would throw an error when trying to insert it by selecting the custom emoji from the menu.

Improvements to suggestions in rich text editor after some commands are inserted

Command Before After

/assign, /assign_reviewer

(Shows all users except assigned)

image.png

image.png

/unassign, /unassign_reviewer

(Shows only assigned users)

image.png

image.png

/reassign, /reassign_reviewer, /cc

(Shows all users)

image.png

image.png

/label

(Shows all labels except assigned)

image.png

image.png

/unlabel

(Shows only assigned labels)

image.png

image.png

/relabel

(Shows all labels)

image.png

image.png

How to set up and validate locally

  1. Go to an issue.
  2. In the comment box at the bottom, try various autocomplete items as described in screenshots above in both plain text and rich text editors.
  3. To test custom emoji, see:
    1. https://docs.gitlab.com/ee/api/graphql/custom_emoji.html
    2. https://docs.gitlab.com/ee/user/emoji_reactions.html#custom-emoji

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 #420344 (closed)

Edited by Himanshu Kapoor

Merge request reports