PLT-3145 Custom Emojis (#3381)

* Reorganized Backstage code to use a view controller and separated it from integrations code

* Renamed InstalledIntegrations component to BackstageList

* Added EmojiList page

* Added AddEmoji page

* Added custom emoji to autocomplete and text formatter

* Moved system emoji to EmojiStore

* Stopped trying to get emoji before logging in

* Rerender posts when emojis change

* Fixed submit handler on backstage pages to properly support enter

* Removed debugging code

* Updated javascript driver

* Fixed unit tests

* Fixed backstage routes

* Added clientside validation to prevent users from creating an emoji with the same name as a system one

* Fixed AddEmoji page to properly redirect when an emoji is created successfully

* Fixed updating emoji list when an emoji is deleted

* Added type prop to BackstageList to properly support using a table for the list

* Added help text to EmojiList

* Fixed backstage on smaller screen sizes

* Disable custom emoji by default

* Improved restrictions on creating emojis

* Fixed non-admin users seeing the option to delete each other's emojis

* Fixing gofmt

* Fixed emoji unit tests

* Fixed trying to get emoji from the server when it's disabled

1 files changed, 10 insertions, 11 deletions

diff --git a/webapp/components/suggestion/emoticon_provider.jsx b/webapp/components/suggestion/emoticon_provider.jsx
index 7a45c5b4e..af8cac070 100644
--- a/webapp/components/suggestion/emoticon_provider.jsx
+++ b/webapp/components/suggestion/emoticon_provider.jsx
@@ -3,6 +3,7 @@
 
 import React from 'react';
 
+import EmojiStore from 'stores/emoji_store.jsx';
 import * as Emoticons from 'utils/emoticons.jsx';
 import SuggestionStore from 'stores/suggestion_store.jsx';
 
@@ -29,7 +30,7 @@ class EmoticonSuggestion extends Suggestion {
                     <img
                         alt={text}
                         className='emoticon-suggestion__image'
-                        src={emoticon.path}
+                        src={EmojiStore.getEmojiImageUrl(emoticon)}
                         title={text}
                     />
                 </div>
@@ -53,21 +54,19 @@ export default class EmoticonProvider {
 
             const matched = [];
 
-            const emoticons = Emoticons.getEmoticonsByName();
-
             // check for text emoticons
             for (const emoticon of Object.keys(Emoticons.emoticonPatterns)) {
                 if (Emoticons.emoticonPatterns[emoticon].test(text)) {
-                    SuggestionStore.addSuggestion(suggestionId, text, emoticons.get(emoticon), EmoticonSuggestion, text);
+                    SuggestionStore.addSuggestion(suggestionId, text, EmojiStore.get(emoticon), EmoticonSuggestion, text);
 
                     hasSuggestions = true;
                 }
             }
 
-            // checked for named emoji
-            for (const [name, emoticon] of emoticons) {
+            // check for named emoji
+            for (const [name, emoji] of EmojiStore.getEmojis()) {
                 if (name.indexOf(partialName) !== -1) {
-                    matched.push(emoticon);
+                    matched.push(emoji);
 
                     if (matched.length >= MAX_EMOTICON_SUGGESTIONS) {
                         break;
@@ -77,11 +76,11 @@ export default class EmoticonProvider {
 
             // sort the emoticons so that emoticons starting with the entered text come first
             matched.sort((a, b) => {
-                const aPrefix = a.alias.startsWith(partialName);
-                const bPrefix = b.alias.startsWith(partialName);
+                const aPrefix = a.name.startsWith(partialName);
+                const bPrefix = b.name.startsWith(partialName);
 
                 if (aPrefix === bPrefix) {
-                    return a.alias.localeCompare(b.alias);
+                    return a.name.localeCompare(b.name);
                 } else if (aPrefix) {
                     return -1;
                 }
@@ -89,7 +88,7 @@ export default class EmoticonProvider {
                 return 1;
             });
 
-            const terms = matched.map((emoticon) => ':' + emoticon.alias + ':');
+            const terms = matched.map((emoticon) => ':' + emoticon.name + ':');
 
             if (terms.length > 0) {
                 SuggestionStore.addSuggestions(suggestionId, terms, matched, EmoticonSuggestion, text);