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

4 files changed, 107 insertions, 82 deletions

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) {
diff --git a/webapp/stores/preference_store.jsx b/webapp/stores/preference_store.jsx
index f3476d9ea..cd8ae68be 100644
--- a/webapp/stores/preference_store.jsx
+++ b/webapp/stores/preference_store.jsx
@@ -141,6 +141,12 @@ class PreferenceStore extends EventEmitter {
             return this.getObject(Constants.Preferences.CATEGORY_THEME, '');
         }
 
+        for (const k in Constants.THEMES) {
+            if (Constants.THEMES.hasOwnProperty(k) && k === global.mm_config.DefaultTheme) {
+                return Constants.THEMES[k];
+            }
+        }
+
         return Constants.THEMES.default;
     }