1 files changed, 21 insertions, 2 deletions

diff --git a/webapp/components/admin_console/custom_emoji_settings.jsx b/webapp/components/admin_console/custom_emoji_settings.jsx
index 8ab8cde4e..329900888 100644
--- a/webapp/components/admin_console/custom_emoji_settings.jsx
+++ b/webapp/components/admin_console/custom_emoji_settings.jsx
@@ -22,6 +22,7 @@ export default class CustomEmojiSettings extends AdminSettings {
 
     getConfigFromState(config) {
         config.ServiceSettings.EnableCustomEmoji = this.state.enableCustomEmoji;
+        config.ServiceSettings.EnableEmojiPicker = this.state.enableEmojiPicker;
 
         if (global.window.mm_license.IsLicensed === 'true') {
             config.ServiceSettings.RestrictCustomEmojiCreation = this.state.restrictCustomEmojiCreation;
@@ -33,6 +34,7 @@ export default class CustomEmojiSettings extends AdminSettings {
     getStateFromConfig(config) {
         return {
             enableCustomEmoji: config.ServiceSettings.EnableCustomEmoji,
+            enableEmojiPicker: config.ServiceSettings.EnableEmojiPicker,
             restrictCustomEmojiCreation: config.ServiceSettings.RestrictCustomEmojiCreation
         };
     }
@@ -40,8 +42,8 @@ export default class CustomEmojiSettings extends AdminSettings {
     renderTitle() {
         return (
             <FormattedMessage
-                id='admin.customization.customEmoji'
-                defaultMessage='Custom Emoji'
+                id='admin.customization.emoji'
+                defaultMessage='Emoji'
             />
         );
     }
@@ -79,6 +81,23 @@ export default class CustomEmojiSettings extends AdminSettings {
         return (
             <SettingsGroup>
                 <BooleanSetting
+                    id='enableEmojiPicker'
+                    label={
+                        <FormattedMessage
+                            id='admin.customization.enableEmojiPickerTitle'
+                            defaultMessage='Enable Emoji Picker:'
+                        />
+                    }
+                    helpText={
+                        <FormattedMessage
+                            id='admin.customization.enableEmojiPickerDesc'
+                            defaultMessage='The emoji picker allows users to select emoji to add as reactions or use in messages. Enabling the emoji picker with a large number of custom emoji may slow down performance.'
+                        />
+                    }
+                    value={this.state.enableEmojiPicker}
+                    onChange={this.handleChange}
+                />
+                <BooleanSetting
                     id='enableCustomEmoji'
                     label={
                         <FormattedMessage