Remove mm_config and mm_license global state from webapp, phase 2 (PR m…

…attermost#2) (mattermost#863)

* MM-9635: expunge global mm_config from switch channel provider

* MM-9635: expunge global mm_config from the root components, except for globally exporting it

* MM-9635: fix incorrectly required customDescriptionText in email signup component

* MM-9635: expunge global mm_config from various action files

* MM-9635: deduplicate config/license code loading

This preserves semantics, except for allowing a `loadCurrentLocale` even if config hasn't
loaded, since this is safe.

actions/diagnostics_actions.jsx

@@ -1,6 +1,9 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+
+import store from 'stores/redux_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
 const SUPPORTS_CLEAR_MARKS = isSupported([performance.clearMarks]);
@@ -118,5 +121,7 @@ function isSupported(checks) {
 }
 
 function isDevMode() {
- return global.mm_config.EnableDeveloper === 'true';
-}
+ const config = getConfig(store.getState());
+
+ return config.EnableDeveloper === 'true';
+}

actions/global_actions.jsx

@@ -13,6 +13,7 @@ import {
 import {getPostThread} from 'mattermost-redux/actions/posts';
 import {removeUserFromTeam} from 'mattermost-redux/actions/teams';
 import {Client4} from 'mattermost-redux/client';
+import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
 
 import {browserHistory} from 'utils/browser_history';
 import {loadChannelsForCurrentUser} from 'actions/channel_actions.jsx';
@@ -392,7 +393,8 @@ export function loadCurrentLocale() {
 }
 
 export function loadDefaultLocale() {
- let locale = global.window.mm_config.DefaultClientLocale;
+ const config = getConfig(getState());
+ let locale = config.DefaultClientLocale;
 
  if (!I18n.getLanguageInfo(locale)) {
  locale = 'en';
@@ -406,14 +408,16 @@ export function emitLocalUserTypingEvent(channelId, parentId) {
  const t = Date.now();
  const membersInChannel = ChannelStore.getStats(channelId).member_count;
 
- if (global.mm_license.IsLicensed === 'true' && global.mm_config.ExperimentalTownSquareIsReadOnly === 'true') {
+ const license = getLicense(getState());
+ const config = getConfig(getState());
+ if (license.IsLicensed === 'true' && config.ExperimentalTownSquareIsReadOnly === 'true') {
  const channel = ChannelStore.getChannelById(channelId);
  if (channel && ChannelStore.isDefault(channel)) {
  return;
  }
  }
 
- if (((t - lastTimeTypingSent) > global.window.mm_config.TimeBetweenUserTypingUpdatesMilliseconds) && membersInChannel < global.window.mm_config.MaxNotificationsPerChannel && global.window.mm_config.EnableUserTypingMessages === 'true') {
+ if (((t - lastTimeTypingSent) > config.TimeBetweenUserTypingUpdatesMilliseconds) && membersInChannel < config.MaxNotificationsPerChannel && config.EnableUserTypingMessages === 'true') {
  WebSocketClient.userTyping(channelId, parentId);
  lastTimeTypingSent = t;
  }

actions/notification_actions.jsx

@@ -1,13 +1,16 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+
 import ChannelStore from 'stores/channel_store.jsx';
 import NotificationStore from 'stores/notification_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import Constants, {NotificationLevels, UserStatuses} from 'utils/constants.jsx';
 import {isSystemMessage} from 'utils/post_utils.jsx';
 import {isMacApp, isMobileApp, isWindowsApp} from 'utils/user_agent.jsx';
 import * as Utils from 'utils/utils.jsx';
+import store from 'stores/redux_store.jsx';
 
 export function sendDesktopNotification(post, msgProps) {
  if ((UserStore.getCurrentId() === post.user_id && post.props.from_webhook !== 'true')) {
@@ -44,8 +47,9 @@ export function sendDesktopNotification(post, msgProps) {
  return;
  }
 
+ const config = getConfig(store.getState());
  let username = Utils.localizeMessage('channel_loader.someone', 'Someone');
- if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
+ if (post.props.override_username && config.EnablePostUsernameOverride === 'true') {
  username = post.props.override_username;
  } else if (msgProps.sender_name) {
  username = msgProps.sender_name;

actions/user_actions.jsx

@@ -10,6 +10,7 @@ import {Client4} from 'mattermost-redux/client';
 import {Preferences as PreferencesRedux} from 'mattermost-redux/constants';
 import {getBool} from 'mattermost-redux/selectors/entities/preferences';
 import * as Selectors from 'mattermost-redux/selectors/entities/users';
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
 import {browserHistory} from 'utils/browser_history';
 import {getChannelMembersForUserIds} from 'actions/channel_actions.jsx';
@@ -28,41 +29,45 @@ const getState = store.getState;
 
 export async function loadMe() {
  await UserActions.loadMe()(dispatch, getState);
-
- if (window.mm_config) {
- loadCurrentLocale();
- }
+ loadCurrentLocale();
 }
 
 export async function loadMeAndConfig(callback) {
  const {data: config} = await getClientConfig()(store.dispatch, store.getState);
 
  global.window.mm_config = config;
 
- if (global.window && global.window.analytics) {
- global.window.analytics.identify(global.window.mm_config.DiagnosticId, {}, {
- context: {
- ip: '0.0.0.0',
- },
- page: {
- path: '',
- referrer: '',
- search: '',
- title: '',
- url: '',
- },
- anonymousId: '00000000000000000000000000',
- });
+ const promises = [];
+
+ if (document.cookie.indexOf('MMUSERID=') > -1) {
+ if (global.window && global.window.analytics) {
+ global.window.analytics.identify(config.DiagnosticId, {}, {
+ context: {
+ ip: '0.0.0.0',
+ },
+ page: {
+ path: '',
+ referrer: '',
+ search: '',
+ title: '',
+ url: '',
+ },
+ anonymousId: '00000000000000000000000000',
+ });
+ }
+
+ promises.push(loadMe());
  }
 
- Promise.all([
- loadMe(),
+ promises.push(
  getLicenseConfig()(store.dispatch, store.getState).then(
  ({data: license}) => {
  global.window.mm_license = license;
  }
- ),
- ]).then(callback);
+ )
+ );
+
+ Promise.all(promises).then(callback);
 }
 
 export async function switchFromLdapToEmail(email, password, token, ldapPassword, success, error) {
@@ -490,7 +495,9 @@ export async function deactivateMfa(success, error) {
 }
 
 export async function checkMfa(loginId, success, error) {
- if (global.window.mm_config.EnableMultifactorAuthentication !== 'true') {
+ const config = getConfig(getState());
+
+ if (config.EnableMultifactorAuthentication !== 'true') {
  success(false);
  return;
  }

actions/websocket_actions.jsx

@@ -12,6 +12,7 @@ import {getMe} from 'mattermost-redux/actions/users';
 import {Client4} from 'mattermost-redux/client';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 import {getMyTeams} from 'mattermost-redux/selectors/entities/teams';
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
 import {browserHistory} from 'utils/browser_history';
 import {loadChannelsForCurrentUser} from 'actions/channel_actions.jsx';
@@ -45,8 +46,11 @@ export function initialize() {
  return;
  }
 
+ const config = getConfig(getState());
  let connUrl = '';
- if (global.window.mm_config.WebsocketURL === '') {
+ if (config.WebsocketURL) {
+ connUrl = config.WebsocketURL;
+ } else {
  connUrl = getSiteURL();
 
  // replace the protocol with a websocket one
@@ -59,13 +63,11 @@ export function initialize() {
  // append a port number if one isn't already specified
  if (!(/:\d+$/).test(connUrl)) {
  if (connUrl.startsWith('wss:')) {
- connUrl += ':' + global.window.mm_config.WebsocketSecurePort;
+ connUrl += ':' + config.WebsocketSecurePort;
  } else {
- connUrl += ':' + global.window.mm_config.WebsocketPort;
+ connUrl += ':' + config.WebsocketPort;
  }
  }
- } else {
- connUrl = global.window.mm_config.WebsocketURL;
  }
 
  connUrl += Client4.getUrlVersion() + '/websocket';

components/root/index.js

@@ -0,0 +1,18 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+
+import Root from './root.jsx';
+
+function mapStateToProps(state) {
+ const config = getConfig(state);
+
+ return {
+ diagnosticsEnabled: config.DiagnosticsEnabled === 'true',
+ noAccounts: config.NoAccounts === 'true',
+ };
+}
+
+export default connect(mapStateToProps)(Root);

components/root.jsx → components/root/root.jsx

@@ -9,7 +9,7 @@ import React from 'react';
 import {IntlProvider} from 'react-intl';
 import FastClick from 'fastclick';
 import {Route, Switch, Redirect} from 'react-router-dom';
-import {getClientConfig, getLicenseConfig, setUrl} from 'mattermost-redux/actions/general';
+import {setUrl} from 'mattermost-redux/actions/general';
 import {setSystemEmojis} from 'mattermost-redux/actions/emojis';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {Client4} from 'mattermost-redux/client';
@@ -83,11 +83,14 @@ const LoggedInRoute = ({component: Component, ...rest}) => (
 );
 
 export default class Root extends React.Component {
+ static propTypes = {
+ diagnosticsEnabled: PropTypes.bool,
+ noAccounts: PropTypes.bool,
+ children: PropTypes.object,
+ }
+
  constructor(props) {
  super(props);
- this.localizationChanged = this.localizationChanged.bind(this);
- this.redirectIfNecessary = this.redirectIfNecessary.bind(this);
- this.onConfigLoaded = this.onConfigLoaded.bind(this);
 
  // Redux
  setUrl(window.location.origin);
@@ -141,11 +144,11 @@ export default class Root extends React.Component {
  };
  }
 
- onConfigLoaded() {
+ onConfigLoaded = () => {
  const segmentKey = Constants.DIAGNOSTICS_SEGMENT_KEY;
 
  /*eslint-disable */
- if (segmentKey != null && segmentKey !== '' && window.mm_config.DiagnosticsEnabled === 'true') {
+ if (segmentKey != null && segmentKey !== '' && this.props.diagnosticsEnabled) {
  !function(){var analytics=global.window.analytics=global.window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http:https://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.0.1";
  analytics.load(segmentKey);
 
@@ -200,16 +203,16 @@ export default class Root extends React.Component {
  }
  }
 
- localizationChanged() {
+ localizationChanged = () => {
  const locale = LocalizationStore.getLocale();
 
  Client4.setAcceptLanguage(locale);
  this.setState({locale, translations: LocalizationStore.getTranslations()});
  }
 
- redirectIfNecessary(props) {
+ redirectIfNecessary = (props) => {
  if (props.location.pathname === '/') {
- if (global.mm_config.NoAccounts === 'true') {
+ if (this.props.noAccounts) {
  this.props.history.push('/signup_user_complete');
  } else if (UserStore.getCurrentUser()) {
  GlobalActions.redirectUserToDefaultTeam();
@@ -222,24 +225,7 @@ export default class Root extends React.Component {
  }
 
  componentDidMount() {
- // Load config
- if (document.cookie.indexOf('MMUSERID=') > -1) {
- loadMeAndConfig(this.onConfigLoaded);
- } else {
- getClientConfig()(store.dispatch, store.getState).then(
- ({data: config}) => {
- global.window.mm_config = config;
-
- getLicenseConfig()(store.dispatch, store.getState).then(
- ({data: license}) => {
- global.window.mm_license = license;
- this.onConfigLoaded();
- }
- );
- }
- );
- }
-
+ loadMeAndConfig(this.onConfigLoaded);
  trackLoadTime();
  }
 
@@ -342,10 +328,3 @@ export default class Root extends React.Component {
  );
  }
 }
-
-Root.defaultProps = {
-};
-
-Root.propTypes = {
- children: PropTypes.object,
-};

components/signup/signup_email/signup_email.jsx

@@ -29,7 +29,7 @@ export default class SignupEmail extends React.Component {
  privacyPolicyLink: PropTypes.string,
  customBrand: PropTypes.bool.isRequired,
  enableCustomBrand: PropTypes.bool.isRequired,
- customDescriptionText: PropTypes.string.isRequired,
+ customDescriptionText: PropTypes.string,
  };
  }
 

i18n/i18n.jsx

@@ -44,6 +44,7 @@ import ptLocaleData from 'react-intl/locale-data/pt';
 import trLocaleData from 'react-intl/locale-data/tr';
 import ruLocaleData from 'react-intl/locale-data/ru';
 import zhLocaleData from 'react-intl/locale-data/zh';
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
 import store from 'stores/redux_store.jsx';
 
@@ -140,7 +141,7 @@ export function getAllLanguages() {
 }
 
 export function getLanguages() {
- const config = store.getState().entities.general.config;
+ const config = getConfig(store.getState());
  if (!config.AvailableLocales) {
  return getAllLanguages();
  }

root.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 import {Router, Route} from 'react-router-dom';
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
 // Import our styles
 import 'bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css';
@@ -14,7 +15,7 @@ import 'katex/dist/katex.min.css';
 import {browserHistory} from 'utils/browser_history';
 import {makeAsyncComponent} from 'components/async_load';
 import store from 'stores/redux_store.jsx';
-import loadRoot from 'bundle-loader?lazy!components/root.jsx';
+import loadRoot from 'bundle-loader?lazy!components/root';
 
 const Root = makeAsyncComponent(loadRoot);
 
@@ -31,7 +32,9 @@ function preRenderSetup(callwhendone) {
  req.setRequestHeader('Content-Type', 'application/json');
  req.send(JSON.stringify(l));
 
- if (window.mm_config && window.mm_config.EnableDeveloper === 'true') {
+ const state = store.getState();
+ const config = getConfig(state);
+ if (config.EnableDeveloper === 'true') {
  window.ErrorStore.storeLastError({type: 'developer', message: 'DEVELOPER MODE: A JavaScript error has occurred. Please use the JavaScript console to capture and report the error (row: ' + line + ' col: ' + column + ').'});
  window.ErrorStore.emitChange();
  }