From 1605fa5102e7d5d76a02456130097d3ab82c2a2b Mon Sep 17 00:00:00 2001
From: David Meza <dmeza@users.noreply.github.com>
Date: Tue, 5 Sep 2017 19:28:46 -0500
Subject: Configs for themes in `Display Settings`:  hide themes options,  hide
 custom themes, specific list of themes (#7173)

* Add configuration to enable or disable choosing themes in Display Settings. Only for Licensed servers.

* Add configuration to enable or disable choosing custom themes in Display Settings. Only for Licensed servers.

* Add configuration to enable or disable a specific list of themes to choose in Display Settings. Only for Licensed servers.

* Added config value and logic for "DefaultTheme"

* Fix problem with undefined values when the server is not licensed
---
 .../user_settings/premade_theme_chooser.jsx        |   7 +
 .../user_settings/user_settings_display.jsx        |  19 ++-
 .../user_settings/user_settings_theme.jsx          | 157 +++++++++++----------
 3 files changed, 101 insertions(+), 82 deletions(-)

(limited to 'webapp/components/user_settings')

diff --git a/webapp/components/user_settings/premade_theme_chooser.jsx b/webapp/components/user_settings/premade_theme_chooser.jsx
index 653628595..1bb2c6be9 100644
--- a/webapp/components/user_settings/premade_theme_chooser.jsx
+++ b/webapp/components/user_settings/premade_theme_chooser.jsx
@@ -18,8 +18,15 @@ export default class PremadeThemeChooser extends React.Component {
         const theme = this.props.theme;
 
         const premadeThemes = [];
+        const allowedThemes = global.mm_config.AllowedThemes ? global.mm_config.AllowedThemes.split(',') : [];
+        const hasAllowedThemes = allowedThemes.length > 1 || (allowedThemes[0] && allowedThemes[0].trim().length > 0);
+
         for (const k in Constants.THEMES) {
             if (Constants.THEMES.hasOwnProperty(k)) {
+                if (hasAllowedThemes && allowedThemes.indexOf(k) < 0) {
+                    continue;
+                }
+
                 const premadeTheme = $.extend(true, {}, Constants.THEMES[k]);
 
                 let activeClass = '';
diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx
index 74a939994..f10b29900 100644
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -595,6 +595,18 @@ export default class UserSettingsDisplay extends React.Component {
             );
         }
 
+        let themeSection;
+        if (global.mm_config.EnableThemeSelection !== 'false') {
+            themeSection = (
+                <ThemeSetting
+                    selected={this.props.activeSection === 'theme'}
+                    updateSection={this.updateSection}
+                    setRequireConfirm={this.props.setRequireConfirm}
+                    setEnforceFocus={this.props.setEnforceFocus}
+                />
+            );
+        }
+
         return (
             <div>
                 <div className='modal-header'>
@@ -632,12 +644,7 @@ export default class UserSettingsDisplay extends React.Component {
                         />
                     </h3>
                     <div className='divider-dark first'/>
-                    <ThemeSetting
-                        selected={this.props.activeSection === 'theme'}
-                        updateSection={this.updateSection}
-                        setRequireConfirm={this.props.setRequireConfirm}
-                        setEnforceFocus={this.props.setEnforceFocus}
-                    />
+                    {themeSection}
                     <div className='divider-dark'/>
                     {clockSection}
                     <div className='divider-dark'/>
diff --git a/webapp/components/user_settings/user_settings_theme.jsx b/webapp/components/user_settings/user_settings_theme.jsx
index 4f39cffa9..871e3ccae 100644
--- a/webapp/components/user_settings/user_settings_theme.jsx
+++ b/webapp/components/user_settings/user_settings_theme.jsx
@@ -180,10 +180,11 @@ export default class ThemeSetting extends React.Component {
         }
 
         const displayCustom = this.state.type === 'custom';
+        const allowCustomThemes = global.mm_config.AllowCustomThemes !== 'false';
 
         let custom;
         let premade;
-        if (displayCustom) {
+        if (displayCustom && allowCustomThemes) {
             custom = (
                 <div key='customThemeChooser'>
                     <CustomThemeChooser
@@ -208,87 +209,91 @@ export default class ThemeSetting extends React.Component {
         if (this.props.selected) {
             const inputs = [];
 
-            inputs.push(
-                <div
-                    className='radio'
-                    key='premadeThemeColorLabel'
-                >
-                    <label>
-                        <input
-                            id='standardThemes'
-                            type='radio'
-                            name='theme'
-                            checked={!displayCustom}
-                            onChange={this.updateType.bind(this, 'premade')}
-                        />
-                        <FormattedMessage
-                            id='user.settings.display.theme.themeColors'
-                            defaultMessage='Theme Colors'
-                        />
-                    </label>
-                    <br/>
-                </div>
-            );
+            if (allowCustomThemes) {
+                inputs.push(
+                    <div
+                        className='radio'
+                        key='premadeThemeColorLabel'
+                    >
+                        <label>
+                            <input
+                                id='standardThemes'
+                                type='radio'
+                                name='theme'
+                                checked={!displayCustom}
+                                onChange={this.updateType.bind(this, 'premade')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.display.theme.themeColors'
+                                defaultMessage='Theme Colors'
+                            />
+                        </label>
+                        <br/>
+                    </div>
+                );
+            }
 
             inputs.push(premade);
 
-            inputs.push(
-                <div
-                    className='radio'
-                    key='customThemeColorLabel'
-                >
-                    <label>
-                        <input
-                            id='customThemes'
-                            type='radio'
-                            name='theme'
-                            checked={displayCustom}
-                            onChange={this.updateType.bind(this, 'custom')}
-                        />
-                        <FormattedMessage
-                            id='user.settings.display.theme.customTheme'
-                            defaultMessage='Custom Theme'
-                        />
-                    </label>
-                </div>
-            );
-
-            inputs.push(custom);
-
-            inputs.push(
-                <div key='otherThemes'>
-                    <br/>
-                    <a
-                        id='otherThemes'
-                        href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples'
-                        target='_blank'
-                        rel='noopener noreferrer'
+            if (allowCustomThemes) {
+                inputs.push(
+                    <div
+                        className='radio'
+                        key='customThemeColorLabel'
                     >
-                        <FormattedMessage
-                            id='user.settings.display.theme.otherThemes'
-                            defaultMessage='See other themes'
-                        />
-                    </a>
-                </div>
-            );
+                        <label>
+                            <input
+                                id='customThemes'
+                                type='radio'
+                                name='theme'
+                                checked={displayCustom}
+                                onChange={this.updateType.bind(this, 'custom')}
+                            />
+                            <FormattedMessage
+                                id='user.settings.display.theme.customTheme'
+                                defaultMessage='Custom Theme'
+                            />
+                        </label>
+                    </div>
+                );
 
-            inputs.push(
-                <div
-                    key='importSlackThemeButton'
-                    className='padding-top'
-                >
-                    <a
-                        id='slackImportTheme'
-                        className='theme'
-                        onClick={this.handleImportModal}
+                inputs.push(custom);
+
+                inputs.push(
+                    <div key='otherThemes'>
+                        <br/>
+                        <a
+                            id='otherThemes'
+                            href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples'
+                            target='_blank'
+                            rel='noopener noreferrer'
+                        >
+                            <FormattedMessage
+                                id='user.settings.display.theme.otherThemes'
+                                defaultMessage='See other themes'
+                            />
+                        </a>
+                    </div>
+                );
+
+                inputs.push(
+                    <div
+                        key='importSlackThemeButton'
+                        className='padding-top'
                     >
-                        <FormattedMessage
-                            id='user.settings.display.theme.import'
-                            defaultMessage='Import theme colors from Slack'
-                        />
-                    </a>
-                </div>
-            );
+                        <a
+                            id='slackImportTheme'
+                            className='theme'
+                            onClick={this.handleImportModal}
+                        >
+                            <FormattedMessage
+                                id='user.settings.display.theme.import'
+                                defaultMessage='Import theme colors from Slack'
+                            />
+                        </a>
+                    </div>
+                );
+            }
 
             let allTeamsCheckbox = null;
             if (this.state.showAllTeamsCheckbox) {
-- 
cgit v1.2.3-1-g7c22