Automatic merge of gitlab-org/gitlab-ce master

app/assets/javascripts/gfm_auto_complete.js

@@ -478,6 +478,16 @@ class GfmAutoComplete {
         }
         return null;
       },
+      highlighter(li, query) {
+        // override default behaviour to escape dot character
+        // see https://github.com/ichord/At.js/pull/576
+        if (!query) {
+          return li;
+        }
+        const escapedQuery = query.replace(/[.+]/, '\\$&');
+        const regexp = new RegExp(`>\\s*([^<]*?)(${escapedQuery})([^<]*)\\s*<`, 'ig');
+        return li.replace(regexp, (str, $1, $2, $3) => `> ${$1}<strong>${$2}</strong>${$3} <`);
+      },
     };
   }
 

app/assets/javascripts/lib/graphql.js

@@ -3,10 +3,17 @@ import { InMemoryCache } from 'apollo-cache-inmemory';
 import { createUploadLink } from 'apollo-upload-client';
 import csrf from '~/lib/utils/csrf';
 
-export default (resolvers = {}) =>
-  new ApolloClient({
+export default (resolvers = {}, baseUrl = '') => {
+  let uri = `${gon.relative_url_root}/api/graphql`;
+
+  if (baseUrl) {
+    // Prepend baseUrl and ensure that `///` are replaced with `/`
+    uri = `${baseUrl}${uri}`.replace(/\/{3,}/g, '/');
+  }
+
+  return new ApolloClient({
     link: createUploadLink({
-      uri: `${gon.relative_url_root}/api/graphql`,
+      uri,
       headers: {
         [csrf.headerKey]: csrf.token,
       },
@@ -14,3 +21,4 @@ export default (resolvers = {}) =>
     cache: new InMemoryCache(),
     resolvers,
   });
+};

changelogs/unreleased/60552-period-dropdown.yml

+---
+title: Fix autocomplete dropdown for usernames starting with period
+merge_request: 27533
+author: Jan Beckmann
+type: fixed

spec/frontend/gfm_auto_complete_spec.js

@@ -209,6 +209,38 @@ describe('GfmAutoComplete', () => {
     });
   });
 
+  describe('DefaultOptions.highlighter', () => {
+    beforeEach(() => {
+      atwhoInstance = { setting: {} };
+    });
+
+    it('should return li if no query is given', () => {
+      const liTag = '<li></li>';
+
+      const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag);
+
+      expect(highlightedTag).toEqual(liTag);
+    });
+
+    it('should highlight search query in li element', () => {
+      const liTag = '<li><img src="" />string</li>';
+      const query = 's';
+
+      const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag, query);
+
+      expect(highlightedTag).toEqual('<li><img src="" /> <strong>s</strong>tring </li>');
+    });
+
+    it('should highlight search query with special char in li element', () => {
+      const liTag = '<li><img src="" />te.st</li>';
+      const query = '.';
+
+      const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag, query);
+
+      expect(highlightedTag).toEqual('<li><img src="" /> te<strong>.</strong>st </li>');
+    });
+  });
+
   describe('isLoading', () => {
     it('should be true with loading data object item', () => {
       expect(GfmAutoComplete.isLoading({ name: 'loading' })).toBe(true);