From 958df2e65f289ff0f61c9ea8058d483f5ae1d731 Mon Sep 17 00:00:00 2001
From: Eric Shyong <eric.shyong@gmail.com>
Date: Thu, 15 Aug 2019 01:43:23 -0700
Subject: [PATCH] [MM-14018] Ignore leading/trailing colon in emoji picker
 search (#2974)

* [MM-14018] Ignore leading/trailing colon in emoji picker search

* Respond to feedback

* fix failing test on ESlint
---
 app/components/emoji_picker/emoji_picker.js   | 25 +++++++++++--------
 .../emoji_picker/emoji_picker.test.js         | 23 +++++++++++++++++
 2 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 app/components/emoji_picker/emoji_picker.test.js

diff --git a/app/components/emoji_picker/emoji_picker.js b/app/components/emoji_picker/emoji_picker.js
index 66663cef5..c5fc3a2fb 100644
--- a/app/components/emoji_picker/emoji_picker.js
+++ b/app/components/emoji_picker/emoji_picker.js
@@ -35,6 +35,10 @@ const SECTION_MARGIN = 15;
 const SECTION_HEADER_HEIGHT = 28;
 const EMOJIS_PER_PAGE = 200;
 
+export function filterEmojiSearchInput(searchText) {
+    return searchText.toLowerCase().replace(/^:|:$/g, '');
+}
+
 export default class EmojiPicker extends PureComponent {
     static propTypes = {
         customEmojisEnabled: PropTypes.bool.isRequired,
@@ -160,24 +164,25 @@ export default class EmojiPicker extends PureComponent {
         });
     };
 
-    changeSearchTerm = (text) => {
+    changeSearchTerm = (rawText) => {
+        const searchTerm = filterEmojiSearchInput(rawText);
         const nextState = {
-            searchTerm: text,
+            searchTerm: rawText,
         };
-
-        if (!text) {
-            nextState.currentSectionIndex = 0;
-        }
-
         this.setState(nextState);
 
+        if (!searchTerm) {
+            nextState.currentSectionIndex = 0;
+            return;
+        }
+
         clearTimeout(this.searchTermTimeout);
-        const timeout = text ? 100 : 0;
+        const timeout = searchTerm ? 100 : 0;
         this.searchTermTimeout = setTimeout(async () => {
             if (isMinimumServerVersion(this.props.serverVersion, 4, 7)) {
-                await this.props.actions.searchCustomEmojis(text);
+                await this.props.actions.searchCustomEmojis(searchTerm);
             }
-            const filteredEmojis = this.searchEmojis(text);
+            const filteredEmojis = this.searchEmojis(searchTerm);
             this.setState({
                 filteredEmojis,
             });
diff --git a/app/components/emoji_picker/emoji_picker.test.js b/app/components/emoji_picker/emoji_picker.test.js
new file mode 100644
index 000000000..9d8f995f9
--- /dev/null
+++ b/app/components/emoji_picker/emoji_picker.test.js
@@ -0,0 +1,23 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {filterEmojiSearchInput} from './emoji_picker.js';
+
+describe('components/emoji_picker/EmojiPicker', () => {
+    const testCases = [
+        {input: 'smile', output: 'smile'},
+        {input: 'SMILE', output: 'smile'},
+        {input: ':smile', output: 'smile'},
+        {input: ':SMILE', output: 'smile'},
+        {input: 'smile:', output: 'smile'},
+        {input: 'SMILE:', output: 'smile'},
+        {input: ':smile:', output: 'smile'},
+        {input: ':SMILE:', output: 'smile'},
+    ];
+
+    testCases.forEach((testCase) => {
+        test(`'${testCase.input}' should return '${testCase.output}'`, () => {
+            expect(filterEmojiSearchInput(testCase.input)).toEqual(testCase.output);
+        });
+    });
+});