Fix autocomplete limitation bug

jQuery at.js has a hard limit on how many items can be searched. Before
it executes it's search function, it limits the array size to 1000
items. We have been hitting this bug because we have more than a
thousand users or labels [0][1].

We are planning to replace at.js [2], but in order to fix this bug for
now, we have forked at.js [3] and made adjustments, so that it works for
our usecases.

Performance wise this should have no big impact, as we are rendering a
maximum of 5 results in the most cases anyway. The search on the
javascript side is rather performant.

[0]: https://gitlab.com/gitlab-org/gitlab/issues/204825
[1]: https://gitlab.com/gitlab-org/gitlab/issues/198650
[2]: https://gitlab.com/gitlab-org/gitlab/issues/27240
[3]: https://gitlab.com/gitlab-org/frontend/At.js

app/assets/javascripts/commons/jquery.js

@@ -4,6 +4,6 @@ import 'jquery';
 import 'jquery-ujs';
 import 'vendor/jquery.endless-scroll';
 import 'jquery.caret'; // must be imported before at.js
-import 'at.js';
+import '@gitlab/at.js';
 import 'vendor/jquery.scrollTo';
 import 'jquery.waitforimages';

app/assets/javascripts/gfm_auto_complete.js

 import $ from 'jquery';
-import 'at.js';
+import '@gitlab/at.js';
 import _ from 'underscore';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 import glRegexp from './lib/utils/regexp';

app/assets/javascripts/notes.js

@@ -15,7 +15,7 @@ import { escape, uniqueId } from 'lodash';
 import Cookies from 'js-cookie';
 import Autosize from 'autosize';
 import 'jquery.caret'; // required by at.js
-import 'at.js';
+import '@gitlab/at.js';
 import Vue from 'vue';
 import { GlSkeletonLoading } from '@gitlab/ui';
 import AjaxCache from '~/lib/utils/ajax_cache';

app/assets/stylesheets/application.scss

@@ -11,7 +11,7 @@
 // like a table or typography then make changes in the framework/ directory.
 // If you need to add unique style that should affect only one page - use pages/
 // directory.
-@import "at.js/dist/css/jquery.atwho";
+@import "@gitlab/at.js/dist/css/jquery.atwho";
 @import "dropzone/dist/basic";
 @import "select2/select2";
 

changelogs/unreleased/leipert-fix-user-label-bug.yml

+---
+title: Fix autocomplete limitation bug
+merge_request: 25167
+author:
+type: fixed

config/webpack.vendor.config.js

@@ -29,7 +29,7 @@ module.exports = {
       'vuex',
       'pikaday',
       'vue/dist/vue.esm.js',
-      'at.js',
+      '@gitlab/at.js',
       'jed',
       'mermaid',
       'katex',

package.json

@@ -39,6 +39,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.6.2",
+    "@gitlab/at.js": "^1.5.5",
     "@gitlab/svgs": "^1.96.0",
     "@gitlab/ui": "^9.6.0",
     "@gitlab/visual-review-tools": "1.5.1",
@@ -49,7 +50,6 @@
     "apollo-link": "^1.2.11",
     "apollo-link-batch-http": "^1.2.11",
     "apollo-upload-client": "^10.0.0",
-    "at.js": "^1.5.4",
     "autosize": "^4.0.0",
     "aws-sdk": "^2.526.0",
     "axios": "^0.19.0",

spec/frontend/gfm_auto_complete_spec.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import GfmAutoComplete, { membersBeforeSave } from 'ee_else_ce/gfm_auto_complete';
 
 import 'jquery.caret';
-import 'at.js';
+import '@gitlab/at.js';
 
 import { TEST_HOST } from 'helpers/test_constants';
 import { getJSONFixture } from 'helpers/fixtures';

yarn.lock

@@ -705,6 +705,11 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@gitlab/at.js@^1.5.5":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@gitlab/at.js/-/at.js-1.5.5.tgz#5f6bfe6baaef360daa9b038fa78798d7a6a916b4"
+  integrity sha512-282Dn3SPVsUHVDhMsXgfnv+Rzog0uxecjttxGRQvxh25es1+xvkGQFsvJfkSKJ3X1kHVkSjKf+Tt5Rra+Jhp9g==
+
 "@gitlab/eslint-config@^2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@gitlab/eslint-config/-/eslint-config-2.1.2.tgz#9f4011d3bf15f3e2668a1faa754f0b9804f23f8f"
@@ -1774,11 +1779,6 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
-at.js@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/at.js/-/at.js-1.5.4.tgz#8fc60cc80eadbe4874449b166a818e7ae1d784c1"
-  integrity sha512-G8mgUb/PqShPoH8AyjuxsTGvIr1o716BtQUKDM44C8qN2W615y7KGJ68MlTGamd0J0D/m28emUkzagaHTdrGZw==
-
 atob@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"