[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
2017-07-06 08:48:34 +08:00
--- a/app/diagnostics.go
+++ b/app/diagnostics.go
@@ -165,6 +165,7 @@ func trackConfig() {
 		"enable_post_icon_override":                     utils.Cfg.ServiceSettings.EnablePostIconOverride,
 		"enable_apiv3":                                  *utils.Cfg.ServiceSettings.EnableAPIv3,
 		"enable_custom_emoji":                           *utils.Cfg.ServiceSettings.EnableCustomEmoji,
+		"enable_emoji_picker":                           *utils.Cfg.ServiceSettings.EnableEmojiPicker,
 		"restrict_custom_emoji_creation":                *utils.Cfg.ServiceSettings.RestrictCustomEmojiCreation,
 		"enable_testing":                                utils.Cfg.ServiceSettings.EnableTesting,
 		"enable_developer":                              *utils.Cfg.ServiceSettings.EnableDeveloper,
--- a/config/config.json
+++ b/config/config.json
@@ -38,6 +38,7 @@
        "WebsocketPort": 80,
        "WebserverMode": "gzip",
        "EnableCustomEmoji": false,
+        "EnableEmojiPicker": false,
        "RestrictCustomEmojiCreation": "all",
        "RestrictPostDelete": "all",
        "AllowEditPost": "always",
--- a/model/config.go
+++ b/model/config.go
@@ -159,6 +159,7 @@ type ServiceSettings struct {
 	WebsocketPort                            *int
 	WebserverMode                            *string
 	EnableCustomEmoji                        *bool
+	EnableEmojiPicker                        *bool
 	RestrictCustomEmojiCreation              *string
 	RestrictPostDelete                       *string
 	AllowEditPost                            *string
@@ -1032,7 +1033,12 @@ func (o *Config) SetDefaults() {

 	if o.ServiceSettings.EnableCustomEmoji == nil {
 		o.ServiceSettings.EnableCustomEmoji = new(bool)
-		*o.ServiceSettings.EnableCustomEmoji = true
+		*o.ServiceSettings.EnableCustomEmoji = false
+	}
+
+	if o.ServiceSettings.EnableEmojiPicker == nil {
+		o.ServiceSettings.EnableEmojiPicker = new(bool)
+		*o.ServiceSettings.EnableEmojiPicker = false
 	}

 	if o.ServiceSettings.RestrictCustomEmojiCreation == nil {
--- a/utils/config.go
+++ b/utils/config.go
@@ -462,6 +462,7 @@ func getClientConfig(c *model.Config) map[string]string {
 	props["SQLDriverName"] = c.SqlSettings.DriverName

 	props["EnableCustomEmoji"] = strconv.FormatBool(*c.ServiceSettings.EnableCustomEmoji)
+	props["EnableEmojiPicker"] = strconv.FormatBool(*c.ServiceSettings.EnableEmojiPicker)
 	props["RestrictCustomEmojiCreation"] = *c.ServiceSettings.RestrictCustomEmojiCreation
 	props["MaxFileSize"] = strconv.FormatInt(*c.FileSettings.MaxFileSize, 10)

--- 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'
                                        />

                                    }
--- 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'
            />
        );
    }
@@ -78,6 +80,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={
--- 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'
--- 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'
--- 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
--- 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
--- 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
--- 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;
        }
--- 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",
--- 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
--- 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,