[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

11 files changed, 37 insertions, 32 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;
         }
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 37f636bab..81d91c188 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -216,9 +216,11 @@
   "admin.customization.appDownloadLinkDesc": "Add a link to a download page for the Mattermost apps. When a link is present, an option to \"Download Mattermost Apps\" will be added in the Main Menu so users can find the download page. Leave this field blank to hide the option from the Main Menu.",
   "admin.customization.appDownloadLinkTitle": "Mattermost Apps Download Page Link:",
   "admin.customization.customBrand": "Custom Branding",
-  "admin.customization.customEmoji": "Custom Emoji",
+  "admin.customization.emoji": "Emoji",
   "admin.customization.enableCustomEmojiDesc": "Enable users to create custom emoji for use in messages. When enabled, Custom Emoji settings can be accessed by switching to a team and clicking the three dots above the channel sidebar, and selecting \"Custom Emoji\".",
   "admin.customization.enableCustomEmojiTitle": "Enable Custom Emoji:",
+  "admin.customization.enableEmojiPickerDesc": "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.",
+  "admin.customization.enableEmojiPickerTitle": "Enable Emoji Picker:",
   "admin.customization.enableLinkPreviewsDesc": "Enable users to display a preview of website content below the message, if available. When true, website previews can be enabled from Account Settings > Advanced > Preview pre-release features.",
   "admin.customization.enableLinkPreviewsTitle": "Enable Link Previews:",
   "admin.customization.iosAppDownloadLinkDesc": "Add a link to download the iOS app. Users who access the site on a mobile web browser will be prompted with a page giving them the option to download the app. Leave this field blank to prevent the page from appearing.",
@@ -763,7 +765,7 @@
   "admin.sidebar.configuration": "Configuration",
   "admin.sidebar.connections": "Connections",
   "admin.sidebar.customBrand": "Custom Branding",
-  "admin.sidebar.customEmoji": "Custom Emoji",
+  "admin.sidebar.emoji": "Emoji",
   "admin.sidebar.customIntegrations": "Custom Integrations",
   "admin.sidebar.customization": "Customization",
   "admin.sidebar.database": "Database",
@@ -2152,7 +2154,6 @@
   "upload_overlay.info": "Drop a file to upload it.",
   "user.settings.advance.embed_preview": "For the first web link in a message, display a preview of website content below the message, if available",
   "user.settings.advance.embed_toggle": "Show toggle for all embed previews",
-  "user.settings.advance.emojipicker": "Enable emoji picker for reactions and message input box",
   "user.settings.advance.enabledFeatures": "{count, number} {count, plural, one {Feature} other {Features}} Enabled",
   "user.settings.advance.formattingDesc": "If enabled, posts will be formatted to create links, show emoji, style the text, and add line breaks. By default, this setting is enabled. Changing this setting requires the page to be refreshed.",
   "user.settings.advance.formattingTitle": "Enable Post Formatting",
diff --git a/webapp/routes/route_admin_console.jsx b/webapp/routes/route_admin_console.jsx
index 06fb2ac30..b0b6ebf62 100644
--- a/webapp/routes/route_admin_console.jsx
+++ b/webapp/routes/route_admin_console.jsx
@@ -173,7 +173,7 @@ export default (
                 component={CustomBrandSettings}
             />
             <Route
-                path='custom_emoji'
+                path='emoji'
                 component={CustomEmojiSettings}
             />
             <Route
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 6b77be789..467aaf390 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -891,10 +891,6 @@ export const Constants = {
         WEBRTC_PREVIEW: {
             label: 'webrtc_preview',
             description: 'Enable WebRTC one on one calls'
-        },
-        EMOJI_PICKER_PREVIEW: {
-            label: 'emojipicker',
-            description: 'Enable emoji picker'
         }
     },
     OVERLAY_TIME_DELAY_SMALL: 100,