by

What if I was able to mention a user everywhere in Tuleap?

This is the purpose of a new Tuleap feature: easily reference a user, everywhere in Tuleap by simply typing @username (the username is of course autocompleted).

We choose the keyword “@” because is a well known pattern used by Twitter, Facebook, Github…

There’s a library for that: At.js

On the front-end side, we had three technical questions to answer:

  • how to get hold of the position of the keyboard cursor in a textarea or in a text input?
  • how to autocomplete the username via an interactive popup?
  • will we be able to autocomplete names in a CKEditor?

Fortunately, there’s a library for all this: At.js. At.js manages the username popup both in basic text input/textareas and in CKEditor/TinyMCE editors. It also handles text autocompletion. This library also depends on Caret.js which handles the cursor position.

So at this point, At.js answers all the technical questions.

Enhance our REST API

What about the back-end? We needed to be able to search for any of the users present in the Tuleap database. Given that Tuleap now comes with a nice REST API, why not enhance it?

We thus added a route: /users?query=username. This route returns a list of users where their username or their realname corresponds to the query parameter.

Final result

Here is the final result:

Tuleap mention

What’s next?

At this point, this feature is just a helper to autocomplete usernames. What we plan to do is:

  • LDAP user autocomplete
  • Disable this feature on identified fields (search field, tracker name field…)
  • Emojis :heart:
  • Notifications: each time a user is mentioned, this user receives a notification.
  • Predefined user list: display a list of users that are in the context of the current page when the user only types “@” (project members, users in the artifact’s followups…)

Like this feature? Want to contribute?

Tweet this article or add a comment in the corresponding User Story (you need to be logged in). The more you share, the more likely this feature will be enhanced!

Do you want to help us writing code and improve this killer feature? This is how to contribute: Tuleap developper guide

Don’t hesitate to leave a comment or talk about this article on Tuleap Devel.