[PLT-6969] System console setting for the emoji picker (#6809)

* system console setting for the emoji picker

* remove state.emojiPickerEnable

* update url to /admin_console/customization/emoji

8 files changed, 32 insertions, 24 deletions

diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index d64d5edee..1dbbff2f2 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -551,11 +551,11 @@ export default class AdminSidebar extends React.Component {
                             >
                                 {customBranding}
                                 <AdminSidebarSection
-                                    name='custom_emoji'
+                                    name='emoji'
                                     title={
                                         <FormattedMessage
-                                            id='admin.sidebar.customEmoji'
-                                            defaultMessage='Custom Emoji'
+                                            id='admin.sidebar.emoji'
+                                            defaultMessage='Emoji'
                                         />
 
                                     }
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
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index 1a2bbeeae..1ea87663b 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -76,8 +76,7 @@ export default class CreateComment extends React.Component {
             ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
             showPostDeletedModal: false,
             enableAddButton,
-            showEmojiPicker: false,
-            emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
+            showEmojiPicker: false
         };
 
         this.lastBlurAt = 0;
@@ -126,8 +125,7 @@ export default class CreateComment extends React.Component {
 
     onPreferenceChange() {
         this.setState({
-            ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
-            emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
+            ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter')
         });
     }
 
@@ -609,7 +607,7 @@ export default class CreateComment extends React.Component {
                                 value={this.state.message}
                                 onBlur={this.handleBlur}
                                 createMessage={Utils.localizeMessage('create_comment.addComment', 'Add a comment...')}
-                                emojiEnabled={this.state.emojiPickerEnabled}
+                                emojiEnabled={window.mm_config.EnableEmojiPicker === 'true'}
                                 initialText=''
                                 channelId={this.props.channelId}
                                 id='reply_textbox'
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index 4a2cf5302..c07030543 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -96,7 +96,6 @@ export default class CreatePost extends React.Component {
             showPostDeletedModal: false,
             enableSendButton: false,
             showEmojiPicker: false,
-            emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW),
             showConfirmModal: false,
             totalMembers: members
         };
@@ -488,8 +487,7 @@ export default class CreatePost extends React.Component {
         this.setState({
             showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER,
             ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
-            fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
-            emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)
+            fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN
         });
     }
 
@@ -761,7 +759,7 @@ export default class CreatePost extends React.Component {
                                 handlePostError={this.handlePostError}
                                 value={this.state.message}
                                 onBlur={this.handleBlur}
-                                emojiEnabled={this.state.emojiPickerEnabled}
+                                emojiEnabled={window.mm_config.EnableEmojiPicker === 'true'}
                                 createMessage={Utils.localizeMessage('create_post.write', 'Write a message...')}
                                 channelId={this.state.channelId}
                                 id='post_textbox'
diff --git a/webapp/components/post_view/post_info/post_info.jsx b/webapp/components/post_view/post_info/post_info.jsx
index f2c2423f6..d64d1aca6 100644
--- a/webapp/components/post_view/post_info/post_info.jsx
+++ b/webapp/components/post_view/post_info/post_info.jsx
@@ -151,7 +151,7 @@ export default class PostInfo extends React.PureComponent {
                 />
             );
 
-            if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+            if (window.mm_config.EnableEmojiPicker === 'true') {
                 react = (
                     <span>
                         <EmojiPickerOverlay
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 8fcf3edf8..202be9748 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -326,7 +326,7 @@ export default class RhsComment extends React.Component {
 
         let react;
 
-        if (!isEphemeral && !post.failed && !isSystemMessage && Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+        if (!isEphemeral && !post.failed && !isSystemMessage && window.mm_config.EnableEmojiPicker === 'true') {
             react = (
                 <span>
                     <EmojiPickerOverlay
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 48512d591..352de0c67 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -219,7 +219,7 @@ export default class RhsRootPost extends React.Component {
 
         let react;
 
-        if (!isEphemeral && !post.failed && !isSystemMessage && Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
+        if (!isEphemeral && !post.failed && !isSystemMessage && window.mm_config.EnableEmojiPicker === 'true') {
             react = (
                 <span>
                     <EmojiPickerOverlay
diff --git a/webapp/components/user_settings/user_settings_advanced.jsx b/webapp/components/user_settings/user_settings_advanced.jsx
index cc5824589..0565310d5 100644
--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -350,13 +350,6 @@ export default class AdvancedSettingsDisplay extends React.Component {
                     defaultMessage='Enable the ability to make and receive one-on-one WebRTC calls'
                 />
             );
-        case 'EMOJI_PICKER_PREVIEW':
-            return (
-                <FormattedMessage
-                    id='user.settings.advance.emojipicker'
-                    defaultMessage='Enable emoji picker for reactions and message input box'
-                />
-            );
         default:
             return null;
         }