Project

General

Profile

Actions

Feature #31989

closed

Inline issue auto complete (#) in fields with text-formatting enabled

Added by Marius BĂLTEANU almost 5 years ago. Updated over 4 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:

Description

The attached patch adds support for inline issue auto complete in fields with text-formatting enabled:

As library, I propose tribute.js which is lightweight and has no dependencies.


Files


Related issues

Related to Redmine - Feature #13919: Mention user on issues and wiki pages using @user with autocompleteClosedMarius BĂLTEANU

Actions
Related to Redmine - Feature #5840: Live lookup of the existing issues based on the keywords entered in the title for new issueNew2010-07-08

Actions
Related to Redmine - Patch #31994: Allow issue auto complete to return 10 issues when there is not search term providedClosedGo MAEDA

Actions
Related to Redmine - Feature #31908: Do not load all projects in project jump boxNew

Actions
Related to Redmine - Feature #32052: Auto-complete issues #id in search formClosedGo MAEDA

Actions
Related to Redmine - Defect #32450: Attempts to get "tribute.min.js.map" by Chrome DevTool causes RoutingError.ClosedGo MAEDA

Actions
Related to Redmine - Defect #33183: Unable to edit user or group that has custom fields with text formatting enabledClosedGo MAEDA

Actions
Related to Redmine - Feature #33352: Enable inline issue autocomplete in issue id query filter fieldsNew

Actions
Related to Redmine - Defect #33846: Inline issue auto complete doesn't sanitize HTML tagsClosedGo MAEDA

Actions
Related to Redmine - Feature #33820: Auto complete wiki page linksClosedGo MAEDA

Actions
Related to Redmine - Feature #33425: Auto complete wiki macrosNew

Actions
Has duplicate Redmine - Feature #4325: Quick Issue ReferenceClosed2009-12-03

Actions
Has duplicate Redmine - Feature #1461: Issues linking by a combo box or similarClosed2008-06-16

Actions
Actions #1

Updated by Go MAEDA almost 5 years ago

  • Related to Feature #13919: Mention user on issues and wiki pages using @user with autocomplete added
Actions #2

Updated by Go MAEDA almost 5 years ago

  • Related to Feature #5840: Live lookup of the existing issues based on the keywords entered in the title for new issue added
Actions #3

Updated by Go MAEDA almost 5 years ago

Thank you for posting the nice patch.

The feature is interesting, but I think many users don't find the feature because they don't type other than digits after '#' sign.

I am not sure it is OK to add tribute.js to implement the hidden trick. But I think it is OK to add if tribute.js is used for other features such as #13919 as well.

Actions #4

Updated by Marius BĂLTEANU almost 5 years ago

Go MAEDA wrote:

Thank you for posting the nice patch.

Thanks for reviewing the patch.

The feature is interesting, but I think many users don't find the feature because they don't type other than digits after '#' sign.

That is a problem because we force the users to remember the ID of the issue which could be quite a big number for some instances (in my case, last issue id is 170787). When I'm creating or reading an issue, I'll remember the subject (or at least some keywords from the subject) and not the ID. In most of the cases, when I want to reference an issue, I open a new tab, I search for the issue and then I copy the ID (it requires multiple clicks/steps). I'm sure that users will find this feature very useful and also, they still can use the existing behaviour.

I am not sure it is OK to add tribute.js to implement the hidden trick. But I think it is OK to add if tribute.js is used for other features such as #13919 as well.

I won't call it hidden trick, it's very common now days to have an inline auto complete to help you find references (all major platforms have GitHub, GitLab, Jira, Twitter, Facebook, etc). And yes, I'm already working on adding support for user auto completes (this was the initial use case I had in mind, but needs a little bit more work and I preferred to post for issues in order to get some feedback).

Actions #5

Updated by Go MAEDA almost 5 years ago

  • Target version set to Candidate for next major release

Marius BALTEANU wrote:

I won't call it hidden trick, it's very common now days to have an inline auto complete to help you find references (all major platforms have GitHub, GitLab, Jira, Twitter, Facebook, etc)

Oh, I didn't know that GitHub has '#' + keyword auto-complete feature! I have just confirmed that GitHub has the same feature as this patch. I withdraw the words "hidden trick".

I think there is no problem to add a new JS library only for this patch if users can easily find this feature.

Actions #6

Updated by Go MAEDA almost 5 years ago

In order to let users know this feature, I think it would be even better if some issues are displayed just after typing '#', as GitHub does.

Actions #7

Updated by Marius BĂLTEANU almost 5 years ago

Go MAEDA wrote:

In order to let users know this feature, I think it would be even better if some issues are displayed just after typing '#', as GitHub does.

Yes, totally agree, it is in progress as well, sorry for not saying all the features that I've in plan from the begging.

Actions #8

Updated by Mizuki ISHIKAWA almost 5 years ago

+1

I think this feature is great!!!
If the tribute.js library is introduced, it seems that it can be used for many improvements such as autocomplete of mentions.

Actions #9

Updated by Go MAEDA almost 5 years ago

  • Related to Patch #31994: Allow issue auto complete to return 10 issues when there is not search term provided added
Actions #10

Updated by Bernhard Rohloff almost 5 years ago

+1 Very nice improvement. This could also lead to improvements for the project jump box like the one requested in #31908.

Actions #11

Updated by Bernhard Rohloff almost 5 years ago

  • Related to Feature #31908: Do not load all projects in project jump box added
Actions #12

Updated by Go MAEDA almost 5 years ago

  • Target version changed from Candidate for next major release to 4.1.0

Go MAEDA wrote:

In order to let users know this feature, I think it would be even better if some issues are displayed just after typing '#', as GitHub does.

We can use this feature by committing #31994. Great!

Actions #13

Updated by Marius BĂLTEANU almost 5 years ago

Attached an updated patch that implements issue and user auto complete in text-formatting fields. My initial patch for issue is not 100% fully functional because it doesn't send the project_id param to the auto complete endpoint. In order to fix this, is require to have a method to pass the auto_complete_issues_path(:project_id => <id>) (or other auto complete endpoints) to JavaScript and the method chosen by me was to set those endpoints in textarea field as data attributes. This is way the patch touch multiple views. Another option is to pass those variables through wikitoolbar_for, but then the feature will depend on JSToolbar.

Any feedback on the proposed solution is welcome.

Screenshots:

Actions #14

Updated by Go MAEDA almost 5 years ago

  • How about getting the project identifier from the body["class"] element (<body class="theme-Default project-ecookbook has-main-menu ...)? We don't have to avoid updating multiple views?
  • I think user user auto-complete should be implemented along with #13919 because it is a typical UI of user mentioning feature. Users may misunderstand that they can mention users by using user user auto-complete if user user auto-complete is implemented
Actions #15

Updated by Marius BĂLTEANU almost 5 years ago

Go MAEDA wrote:

  • How about getting the project identifier from the body["class"] element (<body class="theme-Default project-ecookbook has-main-menu ...)? We don't have to avoid updating multiple views?

I wish to be so easy, but it isn't. The project can change inside the form, you can take as example a project with subprojects where the user can change the project from the dropdown or the global view. Of course, we can do some kind of magic from JS to look for the project first inside the form (if exists) and then in body class or in a global JS variable, but it is no an elegant solution from my point of view and it wasn't used in any other implementation (observeAutocompleteField or preview tab). We can do in the future some refactorization to avoid touching all the views, but it is another story.

  • I think user user auto-complete should be implemented along with #13919 because it is a typical UI of user mentioning feature. Users may misunderstand that they can mention users by using user user auto-complete if user user auto-complete is implemented

Indeed, it'll be very nice to deliver the features together, but not a must because User First Name User Last Name syntax is already available and #13919 was proposed without an auto-complete feature. IMHO, the confusion exists and in the worst case, users report more comments or defects on this topic. Anyway, your call on this, I can split again the patches, just let me know. Regarding #13919, I have in plan to review the technical solution, but I'm not sure if I can do it this week.

In the meantime, I've slightly updated the patch in order to call inlineAutoComplete when user focuses a field with attribute [data-auto-complete=true]. In this way, it is no longer required to call inlineAutoComplete after new elements are added in the page dynamically through Ajax.

Actions #16

Updated by Go MAEDA almost 5 years ago

I think it is better to add requireLeadingSpace: true in order to prevent the auto-complete menu from being displayed while typing the second "#" in "#123#note-4" or "@" in "".

diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 9579ee1f2..9d874b5ed 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -1050,6 +1050,7 @@ function inlineAutoComplete(element) {
           },
           lookup: 'label',
           fillAttr: 'label',
+          requireLeadingSpace: true,
           selectTemplate: function (issue) {
             return '#' + issue.original.id;
           }
@@ -1067,6 +1068,7 @@ function inlineAutoComplete(element) {
           menuItemTemplate: function (user) {
             return user.original.name;
           },
+          requireLeadingSpace: true,
           selectTemplate: function (user) {
             return '@' + user.original.login;
           }
Actions #17

Updated by Go MAEDA almost 5 years ago

I am hesitating to commit the patch because auto-complete feature for users was added. If the patch had not had the auto-complete for users, I had committed the patch without any hesitation.

As I wrote in #31989#note-14, I am afraid that the feature looks as if users can send mentions because the UI is a typical interface to send mentions in other apps.

Marius, I think the feature is great. But, IMHO, it is a bit early to deliver. Could you separate the feature from the patch? It is ideal if we can deliver the feature together with #13919.

Actions #18

Updated by Mizuki ISHIKAWA almost 5 years ago

Go MAEDA wrote:

It is ideal if we can deliver the feature together with #13919.

I agree with this opinion.
I also associate mention feature from user user format as Go MAEDA says.

Actions #19

Updated by Marius BĂLTEANU almost 5 years ago

I've removed the user autocomplete feature from the patch.

Go MAEDA wrote:

I think it is better to add requireLeadingSpace: true in order to prevent the auto-complete menu from being displayed while typing the second "#" in "#123#note-4" or "@" in "".

Agree, added to the patch.

Actions #20

Updated by Go MAEDA almost 5 years ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA

Committed the patch. Thank you for contributing such a great enhancement!

Actions #21

Updated by Go MAEDA almost 5 years ago

  • Related to Feature #32052: Auto-complete issues #id in search form added
Actions #22

Updated by Go MAEDA over 4 years ago

  • Related to Defect #32450: Attempts to get "tribute.min.js.map" by Chrome DevTool causes RoutingError. added
Actions #23

Updated by Jean-Philippe Lang over 4 years ago

  • Tracker changed from Patch to Feature
Actions #24

Updated by Go MAEDA over 4 years ago

Actions #25

Updated by Go MAEDA about 4 years ago

  • Related to Defect #33183: Unable to edit user or group that has custom fields with text formatting enabled added
Actions #26

Updated by Mischa The Evil about 4 years ago

  • Related to Feature #33352: Enable inline issue autocomplete in issue id query filter fields added
Actions #27

Updated by Marius BĂLTEANU over 3 years ago

  • Related to Defect #33846: Inline issue auto complete doesn't sanitize HTML tags added
Actions #28

Updated by Marius BĂLTEANU over 3 years ago

Actions #29

Updated by Marius BĂLTEANU over 3 years ago

Actions #30

Updated by Go MAEDA almost 2 years ago

  • Has duplicate Feature #1461: Issues linking by a combo box or similar added
Actions

Also available in: Atom PDF