Merge branch 'master' into PLT-25

2015-10-23 08:38:15 -07:00
--- a/web/react/components/about_build_modal.jsx
+++ b/web/react/components/about_build_modal.jsx
@@ -14,7 +14,7 @@ export default class AboutBuildModal extends React.Component {
    }

    render() {
-        const config = global.window.config;
+        const config = global.window.mm_config;

        return (
            <Modal
--- a/web/react/components/admin_console/admin_sidebar_header.jsx
+++ b/web/react/components/admin_console/admin_sidebar_header.jsx
@@ -3,6 +3,7 @@

 var AdminNavbarDropdown = require('./admin_navbar_dropdown.jsx');
 var UserStore = require('../../stores/user_store.jsx');
+var Utils = require('../../utils/utils.jsx');

 export default class SidebarHeader extends React.Component {
    constructor(props) {
@@ -36,7 +37,7 @@ export default class SidebarHeader extends React.Component {
            profilePicture = (
                <img
                    className='user__picture'
-                    src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at}
+                    src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at + '&' + Utils.getSessionIndex()}
                />
            );
        }
--- a/web/react/components/admin_console/user_item.jsx
+++ b/web/react/components/admin_console/user_item.jsx
@@ -215,7 +215,7 @@ export default class UserItem extends React.Component {
            <div className='row member-div'>
                <img
                    className='post-profile-img pull-left'
-                    src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
+                    src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`}
                    height='36'
                    width='36'
                />
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -26,7 +26,6 @@ export default class ChannelLoader extends React.Component {
    }
    componentDidMount() {
        /* Initial aysnc loads */
-        AsyncClient.getMe();
        AsyncClient.getPosts(ChannelStore.getCurrentId());
        AsyncClient.getChannels(true, true);
        AsyncClient.getChannelExtraInfo(true);
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -51,7 +51,7 @@ export default class CreatePost extends React.Component {
            submitting: false,
            initialText: draft.messageText,
            windowWidth: Utils.windowWidth(),
-            windowHeigth: Utils.windowHeight()
+            windowHeight: Utils.windowHeight()
        };
    }
    handleResize() {
@@ -71,7 +71,7 @@ export default class CreatePost extends React.Component {
            return;
        }

-        if (prevState.windowWidth !== this.state.windowWidth || prevState.windowHeight !== this.state.windowHeigth) {
+        if (prevState.windowWidth !== this.state.windowWidth || prevState.windowHeight !== this.state.windowHeight) {
            this.resizePostHolder();
            return;
        }
@@ -208,7 +208,7 @@ export default class CreatePost extends React.Component {
        PostStore.storeCurrentDraft(draft);
    }
    resizePostHolder() {
-        const height = this.state.windowHeigth - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50;
+        const height = this.state.windowHeight - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50;
        $('.post-list-holder-by-time').css('height', `${height}px`);
        if (this.state.windowWidth > 960) {
            $('#post_textbox').focus();
--- a/web/react/components/email_verify.jsx
+++ b/web/react/components/email_verify.jsx
@@ -19,10 +19,10 @@ export default class EmailVerify extends React.Component {
        var resend = '';
        var resendConfirm = '';
        if (this.props.isVerified === 'true') {
-            title = global.window.config.SiteName + ' Email Verified';
+            title = global.window.mm_config.SiteName + ' Email Verified';
            body = <p>Your email has been verified! Click <a href={this.props.teamURL + '?email=' + this.props.userEmail}>here</a> to log in.</p>;
        } else {
-            title = global.window.config.SiteName + ': You are almost done';
+            title = global.window.mm_config.SiteName + ': You are almost done';
            body = <p>Please verify your email address. Check your inbox for an email.</p>;
            resend = (
                <button
--- a/web/react/components/file_attachment.jsx
+++ b/web/react/components/file_attachment.jsx
@@ -36,7 +36,7 @@ export default class FileAttachment extends React.Component {

            if (type === 'image') {
                var self = this; // Need this reference since we use the given "this"
-                $('<img/>').attr('src', fileInfo.path + '_thumb.jpg').load(function loadWrapper(path, name) {
+                $('<img/>').attr('src', fileInfo.path + '_thumb.jpg?' + utils.getSessionIndex()).load(function loadWrapper(path, name) {
                    return function loader() {
                        $(this).remove();
                        if (name in self.refs) {
@@ -147,7 +147,7 @@ export default class FileAttachment extends React.Component {
            var re3 = new RegExp('\\)', 'g');
            var url = fileUrl.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');

-            $(imgDiv).css('background-image', 'url(' + url + '_thumb.jpg)');
+            $(imgDiv).css('background-image', 'url(' + url + '_thumb.jpg?' + utils.getSessionIndex() + ')');
        }
    }
    removeBackgroundImage(name) {
--- a/web/react/components/file_preview.jsx
+++ b/web/react/components/file_preview.jsx
@@ -34,7 +34,7 @@ export default class FilePreview extends React.Component {
            if (filename.indexOf('/api/v1/files/get') !== -1) {
                filename = filename.split('/api/v1/files/get')[1];
            }
-            filename = Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename;
+            filename = Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename + '?' + Utils.getSessionIndex();

            if (type === 'image') {
                previews.push(
--- a/web/react/components/file_upload_overlay.jsx
+++ b/web/react/components/file_upload_overlay.jsx
@@ -12,19 +12,21 @@ export default class FileUploadOverlay extends React.Component {

        return (
            <div className={overlayClass}>
-                <div className='overlay__circle'>
-                    <img
-                        className='overlay__files'
-                        src='/static/images/filesOverlay.png'
-                        alt='Files'
-                    />
-                    <span><i className='fa fa-upload'></i>{'Drop a file to upload it.'}</span>
-                    <img
-                        className='overlay__logo'
-                        src='/static/images/logoWhite.png'
-                        width='100'
-                        alt='Logo'
-                    />
+                <div className='overlay__indent'>
+                    <div className='overlay__circle'>
+                        <img
+                            className='overlay__files'
+                            src='/static/images/filesOverlay.png'
+                            alt='Files'
+                        />
+                        <span><i className='fa fa-upload'></i>{'Drop a file to upload it.'}</span>
+                        <img
+                            className='overlay__logo'
+                            src='/static/images/logoWhite.png'
+                            width='100'
+                            alt='Logo'
+                        />
+                    </div>
                </div>
            </div>
        );
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -21,7 +21,7 @@ export default class InviteMemberModal extends React.Component {
            emailErrors: {},
            firstNameErrors: {},
            lastNameErrors: {},
-            emailEnabled: global.window.config.SendEmailNotifications === 'true'
+            emailEnabled: global.window.mm_config.SendEmailNotifications === 'true'
        };
    }

--- a/web/react/components/login.jsx
+++ b/web/react/components/login.jsx
@@ -16,7 +16,7 @@ export default class Login extends React.Component {
    }
    handleSubmit(e) {
        e.preventDefault();
-        let state = {};
+        var state = {};

        const name = this.props.teamName;
        if (!name) {
@@ -49,8 +49,7 @@ export default class Login extends React.Component {
        this.setState(state);

        Client.loginByEmail(name, email, password,
-            function loggedIn(data) {
-                UserStore.setCurrentUser(data);
+            () => {
                UserStore.setLastEmail(email);

                const redirect = Utils.getUrlParameter('redirect');
@@ -60,7 +59,7 @@ export default class Login extends React.Component {
                    window.location.href = '/' + name + '/channels/town-square';
                }
            },
-            function loginFailed(err) {
+            (err) => {
                if (err.message === 'Login failed because email address has not been verified') {
                    window.location.href = '/verify_email?teamname=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email);
                    return;
@@ -68,7 +67,7 @@ export default class Login extends React.Component {
                state.serverError = err.message;
                this.valid = false;
                this.setState(state);
-            }.bind(this)
+            }
        );
    }
    render() {
@@ -95,7 +94,7 @@ export default class Login extends React.Component {
        }

        let loginMessage = [];
-        if (global.window.config.EnableSignUpWithGitLab === 'true') {
+        if (global.window.mm_config.EnableSignUpWithGitLab === 'true') {
            loginMessage.push(
                    <a
                        className='btn btn-custom-login gitlab'
@@ -124,7 +123,7 @@ export default class Login extends React.Component {
        }

        let emailSignup;
-        if (global.window.config.EnableSignUpWithEmail === 'true') {
+        if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
            emailSignup = (
                <div>
                    <div className={'form-group' + errorClass}>
@@ -186,7 +185,7 @@ export default class Login extends React.Component {
            <div className='signup-team__container'>
                <h5 className='margin--less'>Sign in to:</h5>
                <h2 className='signup-team__name'>{teamDisplayName}</h2>
-                <h2 className='signup-team__subdomain'>on {global.window.config.SiteName}</h2>
+                <h2 className='signup-team__subdomain'>on {global.window.mm_config.SiteName}</h2>
                <form onSubmit={this.handleSubmit}>
                    {verifiedBox}
                    <div className={'form-group' + errorClass}>
--- a/web/react/components/member_list_item.jsx
+++ b/web/react/components/member_list_item.jsx
@@ -105,7 +105,7 @@ export default class MemberListItem extends React.Component {
            <div className='row member-div'>
                <img
                    className='post-profile-img pull-left'
-                    src={'/api/v1/users/' + member.id + '/image?time=' + timestamp}
+                    src={'/api/v1/users/' + member.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
                    height='36'
                    width='36'
                />
--- a/web/react/components/member_list_team_item.jsx
+++ b/web/react/components/member_list_team_item.jsx
@@ -169,7 +169,7 @@ export default class MemberListTeamItem extends React.Component {
            <div className='row member-div'>
                <img
                    className='post-profile-img pull-left'
-                    src={`/api/v1/users/${user.id}/image?time=${timestamp}`}
+                    src={`/api/v1/users/${user.id}/image?time=${timestamp}&${Utils.getSessionIndex()}`}
                    height='36'
                    width='36'
                />
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 var UserStore = require('../stores/user_store.jsx');
+const Utils = require('../utils/utils.jsx');

 export default class Mention extends React.Component {
    constructor(props) {
@@ -25,7 +26,7 @@ export default class Mention extends React.Component {
                <span>
                    <img
                        className='mention-img'
-                        src={'/api/v1/users/' + this.props.id + '/image?time=' + timestamp}
+                        src={'/api/v1/users/' + this.props.id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
                    />
                </span>
            );
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -31,7 +31,7 @@ export default class MoreDirectChannels extends React.Component {

    getUsersFromStore() {
        const currentId = UserStore.getCurrentId();
-        const profiles = UserStore.getProfiles();
+        const profiles = UserStore.getActiveOnlyProfiles();
        const users = [];

        for (const id in profiles) {
@@ -178,7 +178,7 @@ export default class MoreDirectChannels extends React.Component {
                        className='profile-img pull-left'
                        width='38'
                        height='38'
-                        src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
+                        src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`}
                    />
                    <div className='more-name'>
                        {user.username}
@@ -209,12 +209,14 @@ export default class MoreDirectChannels extends React.Component {
        }

        let users = this.state.users;
-        if (this.state.filter !== '') {
+        if (this.state.filter) {
+            const filter = this.state.filter.toLowerCase();
+
            users = users.filter((user) => {
-                return user.username.indexOf(this.state.filter) !== -1 ||
-                    user.first_name.indexOf(this.state.filter) !== -1 ||
-                    user.last_name.indexOf(this.state.filter) !== -1 ||
-                    user.nickname.indexOf(this.state.filter) !== -1;
+                return user.username.toLowerCase().indexOf(filter) !== -1 ||
+                    user.first_name.toLowerCase().indexOf(filter) !== -1 ||
+                    user.last_name.toLowerCase().indexOf(filter) !== -1 ||
+                    user.nickname.toLowerCase().indexOf(filter) !== -1;
            });
        }

--- a/web/react/components/navbar_dropdown.jsx
+++ b/web/react/components/navbar_dropdown.jsx
@@ -152,7 +152,7 @@ export default class NavbarDropdown extends React.Component {
            sysAdminLink = (
                <li>
                    <a
-                        href='/admin_console'
+                        href={'/admin_console?' + Utils.getSessionIndex()}
                    >
                        {'System Console'}
                    </a>
@@ -178,7 +178,7 @@ export default class NavbarDropdown extends React.Component {
            });
        }

-        if (global.window.config.EnableTeamCreation === 'true') {
+        if (global.window.mm_config.EnableTeamCreation === 'true') {
            teams.push(
                <li key='newTeam_li'>
                    <a
--- a/web/react/components/password_reset_form.jsx
+++ b/web/react/components/password_reset_form.jsx
@@ -61,7 +61,7 @@ export default class PasswordResetForm extends React.Component {
                <div className='signup-team__container'>
                    <h3>Password Reset</h3>
                    <form onSubmit={this.handlePasswordReset}>
-                        <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.config.SiteName + ' account.'}</p>
+                        <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p>
                        <div className={formClass}>
                            <input
                                type='password'
--- a/web/react/components/post.jsx
+++ b/web/react/components/post.jsx
@@ -120,6 +120,10 @@ export default class Post extends React.Component {
        var parentPost = this.props.parentPost;
        var posts = this.props.posts;

+        if (!post.props) {
+            post.props = {};
+        }
+
        var type = 'Post';
        if (post.root_id && post.root_id.length > 0) {
            type = 'Comment';
@@ -140,7 +144,7 @@ export default class Post extends React.Component {
        }

        var currentUserCss = '';
-        if (UserStore.getCurrentId() === post.user_id) {
+        if (UserStore.getCurrentId() === post.user_id && !post.props.from_webhook) {
            currentUserCss = 'current--user';
        }

@@ -158,8 +162,8 @@ export default class Post extends React.Component {

        var profilePic = null;
        if (!this.props.hideProfilePic) {
-            let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp;
-            if (post.props && post.props.from_webhook && global.window.config.EnablePostIconOverride === 'true') {
+            let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex();
+            if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
                if (post.props.override_icon_url) {
                    src = post.props.override_icon_url;
                }
@@ -200,6 +204,7 @@ export default class Post extends React.Component {
                            posts={posts}
                            handleCommentClick={this.handleCommentClick}
                            retryPost={this.retryPost}
+                            resize={this.props.resize}
                        />
                        <PostInfo
                            ref='info'
@@ -223,5 +228,6 @@ Post.propTypes = {
    sameUser: React.PropTypes.bool,
    sameRoot: React.PropTypes.bool,
    hideProfilePic: React.PropTypes.bool,
-    isLastComment: React.PropTypes.bool
+    isLastComment: React.PropTypes.bool,
+    resize: React.PropTypes.func
 };
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -13,8 +13,12 @@ export default class PostBody extends React.Component {
        super(props);

        this.receivedYoutubeData = false;
+        this.isGifLoading = false;

        this.parseEmojis = this.parseEmojis.bind(this);
+        this.createEmbed = this.createEmbed.bind(this);
+        this.createGifEmbed = this.createGifEmbed.bind(this);
+        this.loadGif = this.loadGif.bind(this);
        this.createYoutubeEmbed = this.createYoutubeEmbed.bind(this);

        const linkData = Utils.extractLinks(this.props.post.message);
@@ -46,6 +50,7 @@ export default class PostBody extends React.Component {

    componentDidUpdate() {
        this.parseEmojis();
+        this.props.resize();
    }

    componentWillReceiveProps(nextProps) {
@@ -53,6 +58,52 @@ export default class PostBody extends React.Component {
        this.setState({links: linkData.links, message: linkData.text});
    }

+    createEmbed(link) {
+        let embed = this.createYoutubeEmbed(link);
+
+        if (embed != null) {
+            return embed;
+        }
+
+        embed = this.createGifEmbed(link);
+
+        return embed;
+    }
+
+    loadGif(src) {
+        if (this.isGifLoading) {
+            return;
+        }
+
+        this.isGifLoading = true;
+
+        const gif = new Image();
+        gif.src = src;
+        gif.onload = (
+            () => {
+                this.setState({gifLoaded: true});
+            }
+        );
+    }
+
+    createGifEmbed(link) {
+        if (link.substring(link.length - 4) !== '.gif') {
+            return null;
+        }
+
+        if (!this.state.gifLoaded) {
+            this.loadGif(link);
+            return null;
+        }
+
+        return (
+            <img
+                className='gif-div'
+                src={link}
+            />
+        );
+    }
+
    handleYoutubeTime(link) {
        const timeRegex = /[\\?&]t=([0-9hms]+)/;

@@ -119,12 +170,12 @@ export default class PostBody extends React.Component {
            this.setState({youtubeTitle: metadata.title});
        }

-        if (global.window.config.GoogleDeveloperKey && !this.receivedYoutubeData) {
+        if (global.window.mm_config.GoogleDeveloperKey && !this.receivedYoutubeData) {
            $.ajax({
                async: true,
                url: 'https://www.googleapis.com/youtube/v3/videos',
                type: 'GET',
-                data: {part: 'snippet', id: youtubeId, key: global.window.config.GoogleDeveloperKey},
+                data: {part: 'snippet', id: youtubeId, key: global.window.mm_config.GoogleDeveloperKey},
                success: success.bind(this)
            });
        }
@@ -247,7 +298,7 @@ export default class PostBody extends React.Component {

        let embed;
        if (filenames.length === 0 && this.state.links) {
-            embed = this.createYoutubeEmbed(this.state.links[0]);
+            embed = this.createEmbed(this.state.links[0]);
        }

        let fileAttachmentHolder = '';
@@ -287,5 +338,6 @@ PostBody.propTypes = {
    post: React.PropTypes.object.isRequired,
    parentPost: React.PropTypes.object,
    retryPost: React.PropTypes.func.isRequired,
-    handleCommentClick: React.PropTypes.func.isRequired
+    handleCommentClick: React.PropTypes.func.isRequired,
+    resize: React.PropTypes.func.isRequired
 };
--- a/web/react/components/post_header.jsx
+++ b/web/react/components/post_header.jsx
@@ -16,7 +16,7 @@ export default class PostHeader extends React.Component {
        let botIndicator;

        if (post.props && post.props.from_webhook) {
-            if (post.props.override_username && global.window.config.EnablePostUsernameOverride === 'true') {
+            if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
                userProfile = (
                    <UserProfile
                        userId={post.user_id}
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -12,7 +12,7 @@ const UserStore = require('../stores/user_store.jsx');
 const SocketStore = require('../stores/socket_store.jsx');
 const PreferenceStore = require('../stores/preference_store.jsx');

-const utils = require('../utils/utils.jsx');
+const Utils = require('../utils/utils.jsx');
 const Client = require('../utils/client.jsx');
 const Constants = require('../utils/constants.jsx');
 const ActionTypes = Constants.ActionTypes;
@@ -40,11 +40,14 @@ export default class PostList extends React.Component {
        this.loadFirstPosts = this.loadFirstPosts.bind(this);
        this.activate = this.activate.bind(this);
        this.deactivate = this.deactivate.bind(this);
-        this.resize = this.resize.bind(this);
+        this.handleResize = this.handleResize.bind(this);
+        this.resizePostList = this.resizePostList.bind(this);
+        this.updateScroll = this.updateScroll.bind(this);

        const state = this.getStateFromStores(props.channelId);
        state.numToDisplay = Constants.POST_CHUNK_SIZE;
        state.isFirstLoadComplete = false;
+        state.windowHeight = Utils.windowHeight();

        this.state = state;
    }
@@ -115,12 +118,7 @@ export default class PostList extends React.Component {

        const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));

-        $(window).resize(() => {
-            this.resize();
-            if (!this.scrolled) {
-                this.scrollToBottom();
-            }
-        });
+        window.addEventListener('resize', this.handleResize);

        postHolder.on('scroll', () => {
            const position = postHolder.scrollTop() + postHolder.height() + 14;
@@ -154,7 +152,7 @@ export default class PostList extends React.Component {
            this.loadFirstPosts(this.props.channelId);
        }

-        this.resize();
+        this.resizePostList();
        this.onChange();
        this.scrollToBottom();
    }
@@ -164,7 +162,9 @@ export default class PostList extends React.Component {
        SocketStore.removeChangeListener(this.onSocketChange);
        PreferenceStore.removeChangeListener(this.onTimeChange);
        $('body').off('click.userpopover');
-        $(window).off('resize');
+
+        window.removeEventListener('resize', this.handleResize);
+
        var postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
        postHolder.off('scroll');
    }
@@ -173,6 +173,13 @@ export default class PostList extends React.Component {
            return;
        }

+        if (prevState.windowHeight !== this.state.windowHeight) {
+            this.resizePostList();
+            if (!this.scrolled) {
+                this.scrollToBottom();
+            }
+        }
+
        $('.post-list__content div .post').removeClass('post--last');
        $('.post-list__content div:last-child .post').addClass('post--last');

@@ -199,10 +206,11 @@ export default class PostList extends React.Component {
            this.scrollToBottom();

        // there's a new post and
-        // it's by the user and not a comment
+        // it's by the user (and not from their webhook) and not a comment
        } else if (isNewPost &&
                    userId === firstPost.user_id &&
-                    !utils.isComment(firstPost)) {
+                    !firstPost.props.from_webhook &&
+                    !Utils.isComment(firstPost)) {
            this.scrollToBottom(true);

        // the user clicked 'load more messages'
@@ -231,10 +239,20 @@ export default class PostList extends React.Component {
            this.deactivate();
        }
    }
-    resize() {
+    updateScroll() {
+        if (!this.scrolled) {
+            this.scrollToBottom();
+        }
+    }
+    handleResize() {
+        this.setState({
+            windowHeight: Utils.windowHeight()
+        });
+    }
+    resizePostList() {
        const postHolder = $(ReactDOM.findDOMNode(this.refs.postlist));
        if ($('#create_post').length > 0) {
-            const height = $(window).height() - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
+            const height = this.state.windowHeight - $('#create_post').height() - $('#error_bar').outerHeight() - 50;
            postHolder.css('height', height + 'px');
        }
    }
@@ -280,7 +298,7 @@ export default class PostList extends React.Component {
    onChange() {
        var newState = this.getStateFromStores(this.props.channelId);

-        if (!utils.areStatesEqual(newState.postList, this.state.postList)) {
+        if (!Utils.areStatesEqual(newState.postList, this.state.postList)) {
            this.setState(newState);
        }
    }
@@ -310,7 +328,7 @@ export default class PostList extends React.Component {
        }
    }
    createDMIntroMessage(channel) {
-        var teammate = utils.getDirectTeammate(channel.id);
+        var teammate = Utils.getDirectTeammate(channel.id);

        if (teammate) {
            var teammateName = teammate.username;
@@ -323,7 +341,7 @@ export default class PostList extends React.Component {
                    <div className='post-profile-img__container channel-intro-img'>
                        <img
                            className='post-profile-img'
-                            src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at}
+                            src={'/api/v1/users/' + teammate.id + '/image?time=' + teammate.update_at + '&' + Utils.getSessionIndex()}
                            height='50'
                            width='50'
                        />
@@ -370,13 +388,13 @@ export default class PostList extends React.Component {
    createDefaultIntroMessage(channel) {
        return (
            <div className='channel-intro'>
-                <h4 className='channel-intro__title'>Beginning of {channel.display_name}</h4>
+                <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
                <p className='channel-intro__content'>
-                    Welcome to {channel.display_name}!
+                    {'Welcome to ' + channel.display_name + '!'}
                    <br/><br/>
-                    This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.
+                    {'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
                    <br/><br/>
-                    To create a new channel or join an existing one, go to the Left Sidebar under “Channels” and click “More…”.
+                    {'To create a new channel or join an existing one, go to the Left Sidebar under “Channels” and click “More…”.'}
                    <br/>
                </p>
            </div>
@@ -385,7 +403,7 @@ export default class PostList extends React.Component {
    createOffTopicIntroMessage(channel) {
        return (
            <div className='channel-intro'>
-                <h4 className='channel-intro__title'>Beginning of {channel.display_name}</h4>
+                <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4>
                <p className='channel-intro__content'>
                    {'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'}
                    <br/>
@@ -399,7 +417,7 @@ export default class PostList extends React.Component {
                    data-title={channel.display_name}
                    data-channelid={channel.id}
                >
-                    <i className='fa fa-pencil'></i>Set a description
+                    <i className='fa fa-pencil'></i>{'Set a description'}
                </a>
                <a
                    className='intro-links'
@@ -407,7 +425,7 @@ export default class PostList extends React.Component {
                    data-toggle='modal'
                    data-target='#channel_invite'
                >
-                    <i className='fa fa-user-plus'></i>Invite others to this channel
+                    <i className='fa fa-user-plus'></i>{'Invite others to this channel'}
                </a>
            </div>
        );
@@ -422,7 +440,7 @@ export default class PostList extends React.Component {

        var members = ChannelStore.getExtraInfo(channel.id).members;
        for (var i = 0; i < members.length; i++) {
-            if (utils.isAdmin(members[i].roles)) {
+            if (Utils.isAdmin(members[i].roles)) {
                return members[i].username;
            }
        }
@@ -443,14 +461,14 @@ export default class PostList extends React.Component {

        var createMessage;
        if (creatorName === '') {
-            createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + utils.displayDate(channel.create_at) + '.';
+            createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + Utils.displayDate(channel.create_at) + '.';
        } else {
-            createMessage = (<span>This is the start of the <strong>{uiName}</strong> {uiType}, created by <strong>{creatorName}</strong> on <strong>{utils.displayDate(channel.create_at)}</strong></span>);
+            createMessage = (<span>This is the start of the <strong>{uiName}</strong> {uiType}, created by <strong>{creatorName}</strong> on <strong>{Utils.displayDate(channel.create_at)}</strong></span>);
        }

        return (
            <div className='channel-intro'>
-                <h4 className='channel-intro__title'>Beginning of {uiName}</h4>
+                <h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4>
                <p className='channel-intro__content'>
                    {createMessage}
                    {memberMessage}
@@ -465,7 +483,7 @@ export default class PostList extends React.Component {
                    data-title={channel.display_name}
                    data-channelid={channel.id}
                >
-                    <i className='fa fa-pencil'></i>Set a description
+                    <i className='fa fa-pencil'></i>{'Set a description'}
                </a>
                <a
                    className='intro-links'
@@ -473,7 +491,7 @@ export default class PostList extends React.Component {
                    data-toggle='modal'
                    data-target='#channel_invite'
                >
-                    <i className='fa fa-user-plus'></i>Invite others to this {uiType}
+                    <i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType}
                </a>
            </div>
        );
@@ -507,7 +525,7 @@ export default class PostList extends React.Component {
            if (prevPost) {
                sameUser = prevPost.user_id === post.user_id && post.create_at - prevPost.create_at <= 1000 * 60 * 5;

-                sameRoot = utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
+                sameRoot = Utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);

                // hide the profile pic if:
                //     the previous post was made by the same user as the current post,
@@ -516,8 +534,8 @@ export default class PostList extends React.Component {
                //     the current post is not from a webhook
                //     and the previous post is not from a webhook
                if ((prevPost.user_id === post.user_id) &&
-                        !utils.isComment(prevPost) &&
-                        !utils.isComment(post) &&
+                        !Utils.isComment(prevPost) &&
+                        !Utils.isComment(post) &&
                        (!post.props || !post.props.from_webhook) &&
                        (!prevPost.props || !prevPost.props.from_webhook)) {
                    hideProfilePic = true;
@@ -526,7 +544,7 @@ export default class PostList extends React.Component {

            // check if it's the last comment in a consecutive string of comments on the same post
            // it is the last comment if it is last post in the channel or the next post has a different root post
-            var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);
+            var isLastComment = Utils.isComment(post) && (i === 0 || posts[order[i - 1]].root_id !== post.root_id);

            var postCtl = (
                <Post
@@ -539,10 +557,11 @@ export default class PostList extends React.Component {
                    posts={posts}
                    hideProfilePic={hideProfilePic}
                    isLastComment={isLastComment}
+                    resize={this.updateScroll}
                />
            );

-            let currentPostDay = utils.getDateForUnixTicks(post.create_at);
+            const currentPostDay = Utils.getDateForUnixTicks(post.create_at);
            if (currentPostDay.toDateString() !== previousPostDay.toDateString()) {
                postCtls.push(
                    <div
@@ -558,9 +577,9 @@ export default class PostList extends React.Component {
            if (post.user_id !== userId && post.create_at > lastViewed && !renderedLastViewed) {
                renderedLastViewed = true;

-                // Temporary fix to solve ie10/11 rendering issue
+                // Temporary fix to solve ie11 rendering issue
                let newSeparatorId = '';
-                if (!utils.isBrowserIE()) {
+                if (!Utils.isBrowserIE()) {
                    newSeparatorId = 'new_message_' + this.props.channelId;
                }
                postCtls.push(
@@ -572,7 +591,7 @@ export default class PostList extends React.Component {
                        <hr
                            className='separator__hr'
                        />
-                        <div className='separator__text'>New Messages</div>
+                        <div className='separator__text'>{'New Messages'}</div>
                    </div>
                );
            }
@@ -638,7 +657,7 @@ export default class PostList extends React.Component {
            order = this.state.postList.order;
        }

-        var moreMessages = <p className='beginning-messages-text'>Beginning of Channel</p>;
+        var moreMessages = <p className='beginning-messages-text'>{'Beginning of Channel'}</p>;
        if (channel != null) {
            if (order.length >= this.state.numToDisplay) {
                moreMessages = (
@@ -648,7 +667,7 @@ export default class PostList extends React.Component {
                        href='#'
                        onClick={this.loadMorePosts}
                    >
-                            Load more messages
+                        {'Load more messages'}
                    </a>
                );
            } else {
--- a/web/react/components/rhs_comment.jsx
+++ b/web/react/components/rhs_comment.jsx
@@ -199,7 +199,7 @@ export default class RhsComment extends React.Component {
                <div className='post-profile-img__container'>
                    <img
                        className='post-profile-img'
-                        src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp}
+                        src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + Utils.getSessionIndex()}
                        height='36'
                        width='36'
                    />
--- a/web/react/components/rhs_root_post.jsx
+++ b/web/react/components/rhs_root_post.jsx
@@ -121,7 +121,7 @@ export default class RhsRootPost extends React.Component {
        let botIndicator;

        if (post.props && post.props.from_webhook) {
-            if (post.props.override_username && global.window.config.EnablePostUsernameOverride === 'true') {
+            if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
                userProfile = (
                    <UserProfile
                        userId={post.user_id}
@@ -134,8 +134,8 @@ export default class RhsRootPost extends React.Component {
            botIndicator = <li className='post-header-col post-header__name bot-indicator'>{'BOT'}</li>;
        }

-        let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp;
-        if (post.props && post.props.from_webhook && global.window.config.EnablePostIconOverride === 'true') {
+        let src = '/api/v1/users/' + post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex();
+        if (post.props && post.props.from_webhook && global.window.mm_config.EnablePostIconOverride === 'true') {
            if (post.props.override_icon_url) {
                src = post.props.override_icon_url;
            }
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -8,6 +8,7 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
+var Popover = ReactBootstrap.Popover;

 export default class SearchBar extends React.Component {
    constructor() {
@@ -16,10 +17,14 @@ export default class SearchBar extends React.Component {

        this.onListenerChange = this.onListenerChange.bind(this);
        this.handleUserInput = this.handleUserInput.bind(this);
+        this.handleUserFocus = this.handleUserFocus.bind(this);
+        this.handleUserBlur = this.handleUserBlur.bind(this);
        this.performSearch = this.performSearch.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

-        this.state = this.getSearchTermStateFromStores();
+        const state = this.getSearchTermStateFromStores();
+        state.focused = false;
+        this.state = state;
    }
    getSearchTermStateFromStores() {
        var term = PostStore.getSearchTerm() || '';
@@ -78,9 +83,14 @@ export default class SearchBar extends React.Component {
    handleMouseInput(e) {
        e.preventDefault();
    }
+    handleUserBlur() {
+        this.setState({focused: false});
+    }
    handleUserFocus(e) {
        e.target.select();
        $('.search-bar__container').addClass('focused');
+
+        this.setState({focused: true});
    }
    performSearch(terms, isMentionSearch) {
        if (terms.length) {
@@ -115,6 +125,12 @@ export default class SearchBar extends React.Component {
        if (this.state.isSearching) {
            isSearching = <span className={'glyphicon glyphicon-refresh glyphicon-refresh-animate'}></span>;
        }
+
+        let helpClass = 'search-help-popover';
+        if (!this.state.searchTerm && this.state.focused) {
+            helpClass += ' visible';
+        }
+
        return (
            <div>
                <div
@@ -142,10 +158,25 @@ export default class SearchBar extends React.Component {
                        placeholder='Search'
                        value={this.state.searchTerm}
                        onFocus={this.handleUserFocus}
+                        onBlur={this.handleUserBlur}
                        onChange={this.handleUserInput}
                        onMouseUp={this.handleMouseInput}
                    />
                    {isSearching}
+                    <Popover
+                        placement='bottom'
+                        className={helpClass}
+                    >
+                        <h4>{'Search Options'}</h4>
+                        <ul>
+                            <li>
+                                <span>{'Use '}</span><b>{'"quotation marks"'}</b><span>{' to search for phrases'}</span>
+                            </li>
+                            <li>
+                                <span>{'Use '}</span><b>{'from:'}</b><span>{' to find posts from specific users and '}</span><b>{'in:'}</b><span>{' to find posts in specific channels'}</span>
+                            </li>
+                        </ul>
+                    </Popover>
                </form>
            </div>
        );
--- a/web/react/components/search_results_item.jsx
+++ b/web/react/components/search_results_item.jsx
@@ -77,7 +77,7 @@ export default class SearchResultsItem extends React.Component {
                <div className='post-profile-img__container'>
                    <img
                        className='post-profile-img'
-                        src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp}
+                        src={'/api/v1/users/' + this.props.post.user_id + '/image?time=' + timestamp + '&' + utils.getSessionIndex()}
                        height='36'
                        width='36'
                    />
--- a/web/react/components/setting_picture.jsx
+++ b/web/react/components/setting_picture.jsx
@@ -79,7 +79,7 @@ export default class SettingPicture extends React.Component {
                >Save</a>
            );
        }
-        var helpText = 'Upload a profile picture in either JPG or PNG format, at least ' + global.window.config.ProfileWidth + 'px in width and ' + global.window.config.ProfileHeight + 'px height.';
+        var helpText = 'Upload a profile picture in either JPG or PNG format, at least ' + global.window.mm_config.ProfileWidth + 'px in width and ' + global.window.mm_config.ProfileHeight + 'px height.';

        var self = this;
        return (
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -183,8 +183,8 @@ export default class Sidebar extends React.Component {
        const channel = ChannelStore.getCurrent();
        if (channel) {
            let currentSiteName = '';
-            if (global.window.config.SiteName != null) {
-                currentSiteName = global.window.config.SiteName;
+            if (global.window.mm_config.SiteName != null) {
+                currentSiteName = global.window.mm_config.SiteName;
            }

            let currentChannelName = channel.display_name;
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -3,6 +3,7 @@

 var NavbarDropdown = require('./navbar_dropdown.jsx');
 var UserStore = require('../stores/user_store.jsx');
+const Utils = require('../utils/utils.jsx');

 export default class SidebarHeader extends React.Component {
    constructor(props) {
@@ -32,7 +33,7 @@ export default class SidebarHeader extends React.Component {
            profilePicture = (
                <img
                    className='user__picture'
-                    src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at}
+                    src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at + '&' + Utils.getSessionIndex()}
                />
            );
        }
@@ -61,7 +62,7 @@ export default class SidebarHeader extends React.Component {
 }

 SidebarHeader.defaultProps = {
-    teamDisplayName: global.window.config.SiteName,
+    teamDisplayName: global.window.mm_config.SiteName,
    teamType: ''
 };
 SidebarHeader.propTypes = {
--- a/web/react/components/sidebar_right_menu.jsx
+++ b/web/react/components/sidebar_right_menu.jsx
@@ -84,7 +84,7 @@ export default class SidebarRightMenu extends React.Component {
            consoleLink = (
                <li>
                    <a
-                        href='/admin_console'
+                        href={'/admin_console?' + utils.getSessionIndex()}
                    >
                    <i className='glyphicon glyphicon-wrench'></i>System Console</a>
                </li>
@@ -92,8 +92,8 @@ export default class SidebarRightMenu extends React.Component {
        }

        var siteName = '';
-        if (global.window.config.SiteName != null) {
-            siteName = global.window.config.SiteName;
+        if (global.window.mm_config.SiteName != null) {
+            siteName = global.window.mm_config.SiteName;
        }
        var teamDisplayName = siteName;
        if (this.props.teamDisplayName) {
--- a/web/react/components/signup_team.jsx
+++ b/web/react/components/signup_team.jsx
@@ -14,19 +14,19 @@ export default class TeamSignUp extends React.Component {

        var count = 0;

-        if (global.window.config.EnableSignUpWithEmail === 'true') {
+        if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
            count = count + 1;
        }

-        if (global.window.config.EnableSignUpWithGitLab === 'true') {
+        if (global.window.mm_config.EnableSignUpWithGitLab === 'true') {
            count = count + 1;
        }

        if (count > 1) {
            this.state = {page: 'choose'};
-        } else if (global.window.config.EnableSignUpWithEmail === 'true') {
+        } else if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
            this.state = {page: 'email'};
-        } else if (global.window.config.EnableSignUpWithGitLab === 'true') {
+        } else if (global.window.mm_config.EnableSignUpWithGitLab === 'true') {
            this.state = {page: 'gitlab'};
        }
    }
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -82,30 +82,29 @@ export default class SignupUserComplete extends React.Component {
        });

        client.createUser(user, this.props.data, this.props.hash,
-            function createUserSuccess() {
+            () => {
                client.track('signup', 'signup_user_02_complete');

                client.loginByEmail(this.props.teamName, user.email, user.password,
-                    function emailLoginSuccess(data) {
+                    () => {
                        UserStore.setLastEmail(user.email);
-                        UserStore.setCurrentUser(data);
                        if (this.props.hash > 0) {
                            BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: 'finished'}));
                        }
                        window.location.href = '/' + this.props.teamName + '/channels/town-square';
-                    }.bind(this),
-                    function emailLoginFailure(err) {
+                    },
+                    (err) => {
                        if (err.message === 'Login failed because email address has not been verified') {
                            window.location.href = '/verify_email?email=' + encodeURIComponent(user.email) + '&teamname=' + encodeURIComponent(this.props.teamName);
                        } else {
                            this.setState({serverError: err.message});
                        }
-                    }.bind(this)
+                    }
                );
-            }.bind(this),
-            function createUserFailure(err) {
+            },
+            (err) => {
                this.setState({serverError: err.message});
-            }.bind(this)
+            }
        );
    }
    render() {
@@ -149,7 +148,7 @@ export default class SignupUserComplete extends React.Component {
        // set up the email entry and hide it if an email was provided
        var yourEmailIs = '';
        if (this.state.user.email) {
-            yourEmailIs = <span>Your email address is <strong>{this.state.user.email}</strong>. You'll use this address to sign in to {global.window.config.SiteName}.</span>;
+            yourEmailIs = <span>Your email address is <strong>{this.state.user.email}</strong>. You'll use this address to sign in to {global.window.mm_config.SiteName}.</span>;
        }

        var emailContainerStyle = 'margin--extra';
@@ -177,7 +176,7 @@ export default class SignupUserComplete extends React.Component {
        );

        var signupMessage = [];
-        if (global.window.config.EnableSignUpWithGitLab === 'true') {
+        if (global.window.mm_config.EnableSignUpWithGitLab === 'true') {
            signupMessage.push(
                    <a
                        className='btn btn-custom-login gitlab'
@@ -190,7 +189,7 @@ export default class SignupUserComplete extends React.Component {
        }

        var emailSignup;
-        if (global.window.config.EnableSignUpWithEmail === 'true') {
+        if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
            emailSignup = (
                <div>
                    <div className='inner__content'>
@@ -259,7 +258,7 @@ export default class SignupUserComplete extends React.Component {
                    />
                    <h5 className='margin--less'>Welcome to:</h5>
                    <h2 className='signup-team__name'>{this.props.teamDisplayName}</h2>
-                    <h2 className='signup-team__subdomain'>on {global.window.config.SiteName}</h2>
+                    <h2 className='signup-team__subdomain'>on {global.window.mm_config.SiteName}</h2>
                    <h4 className='color--light'>Let's create your account</h4>
                    {signupMessage}
                    {emailSignup}
--- a/web/react/components/team_signup_choose_auth.jsx
+++ b/web/react/components/team_signup_choose_auth.jsx
@@ -8,7 +8,7 @@ export default class ChooseAuthPage extends React.Component {
    }
    render() {
        var buttons = [];
-        if (global.window.config.EnableSignUpWithGitLab === 'true') {
+        if (global.window.mm_config.EnableSignUpWithGitLab === 'true') {
            buttons.push(
                    <a
                        className='btn btn-custom-login gitlab btn-full'
@@ -26,7 +26,7 @@ export default class ChooseAuthPage extends React.Component {
            );
        }

-        if (global.window.config.EnableSignUpWithEmail === 'true') {
+        if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
            buttons.push(
                    <a
                        className='btn btn-custom-login email btn-full'
--- a/web/react/components/team_signup_password_page.jsx
+++ b/web/react/components/team_signup_password_page.jsx
@@ -36,15 +36,14 @@ export default class TeamSignupPasswordPage extends React.Component {
        delete teamSignup.wizard;

        Client.createTeamFromSignup(teamSignup,
-            function success() {
+            () => {
                Client.track('signup', 'signup_team_08_complete');

                var props = this.props;

                Client.loginByEmail(teamSignup.team.name, teamSignup.team.email, teamSignup.user.password,
-                    function loginSuccess(data) {
+                    () => {
                        UserStore.setLastEmail(teamSignup.team.email);
-                        UserStore.setCurrentUser(data);
                        if (this.props.hash > 0) {
                            BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: 'finished'}));
                        }
@@ -54,21 +53,21 @@ export default class TeamSignupPasswordPage extends React.Component {
                        props.updateParent(props.state, true);

                        window.location.href = '/' + teamSignup.team.name + '/channels/town-square';
-                    }.bind(this),
-                    function loginFail(err) {
+                    },
+                    (err) => {
                        if (err.message === 'Login failed because email address has not been verified') {
                            window.location.href = '/verify_email?email=' + encodeURIComponent(teamSignup.team.email) + '&teamname=' + encodeURIComponent(teamSignup.team.name);
                        } else {
                            this.setState({serverError: err.message});
                            $('#finish-button').button('reset');
                        }
-                    }.bind(this)
+                    }
                );
-            }.bind(this),
-            function error(err) {
+            },
+            (err) => {
                this.setState({serverError: err.message});
                $('#finish-button').button('reset');
-            }.bind(this)
+            }
        );
    }
    render() {
@@ -129,7 +128,7 @@ export default class TeamSignupPasswordPage extends React.Component {
                            Finish
                        </button>
                    </div>
-                    <p>By proceeding to create your account and use {global.window.config.SiteName}, you agree to our <a href='/static/help/terms.html'>Terms of Service</a> and <a href='/static/help/privacy.html'>Privacy Policy</a>. If you do not agree, you cannot use {global.window.config.SiteName}.</p>
+                    <p>By proceeding to create your account and use {global.window.mm_config.SiteName}, you agree to our <a href='/static/help/terms.html'>Terms of Service</a> and <a href='/static/help/privacy.html'>Privacy Policy</a>. If you do not agree, you cannot use {global.window.mm_config.SiteName}.</p>
                    <div className='margin--extra'>
                        <a
                            href='#'
--- a/web/react/components/team_signup_send_invites_page.jsx
+++ b/web/react/components/team_signup_send_invites_page.jsx
@@ -13,7 +13,7 @@ export default class TeamSignupSendInvitesPage extends React.Component {
        this.submitSkip = this.submitSkip.bind(this);
        this.keySubmit = this.keySubmit.bind(this);
        this.state = {
-            emailEnabled: global.window.config.SendEmailNotifications === 'true'
+            emailEnabled: global.window.mm_config.SendEmailNotifications === 'true'
        };

        if (!this.state.emailEnabled) {
--- a/web/react/components/team_signup_url_page.jsx
+++ b/web/react/components/team_signup_url_page.jsx
@@ -40,7 +40,7 @@ export default class TeamSignupUrlPage extends React.Component {
            return;
        }

-        if (global.window.config.RestrictTeamNames === 'true') {
+        if (global.window.mm_config.RestrictTeamNames === 'true') {
            for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) {
                if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) {
                    this.setState({nameError: 'URL is taken or contains a reserved word'});
--- a/web/react/components/team_signup_username_page.jsx
+++ b/web/react/components/team_signup_username_page.jsx
@@ -15,7 +15,7 @@ export default class TeamSignupUsernamePage extends React.Component {
    }
    submitBack(e) {
        e.preventDefault();
-        if (global.window.config.SendEmailNotifications === 'true') {
+        if (global.window.mm_config.SendEmailNotifications === 'true') {
            this.props.state.wizard = 'send_invites';
        } else {
            this.props.state.wizard = 'team_url';
--- a/web/react/components/team_signup_welcome_page.jsx
+++ b/web/react/components/team_signup_welcome_page.jsx
@@ -110,7 +110,7 @@ export default class TeamSignupWelcomePage extends React.Component {
                        src='/static/images/logo.png'
                    />
                    <h3 className='sub-heading'>Welcome to:</h3>
-                    <h1 className='margin--top-none'>{global.window.config.SiteName}</h1>
+                    <h1 className='margin--top-none'>{global.window.mm_config.SiteName}</h1>
                </p>
                <p className='margin--less'>Let's set up your new team</p>
                <p>
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -67,13 +67,14 @@ export default class UserProfile extends React.Component {
        dataContent.push(
            <img
                className='user-popover__image'
-                src={'/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at}
+                src={'/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '&' + Utils.getSessionIndex()}
                height='128'
                width='128'
                key='user-popover-image'
            />
        );
-        if (!global.window.config.ShowEmailAddress === 'true') {
+
+        if (!global.window.mm_config.ShowEmailAddress === 'true') {
            dataContent.push(
                <div
                    className='text-nowrap'
--- a/web/react/components/user_settings/manage_incoming_hooks.jsx
+++ b/web/react/components/user_settings/manage_incoming_hooks.jsx
@@ -96,7 +96,14 @@ export default class ManageIncomingHooks extends React.Component {
        const options = [];
        channels.forEach((channel) => {
            if (channel.type !== Constants.DM_CHANNEL) {
-                options.push(<option value={channel.id}>{channel.name}</option>);
+                options.push(
+                    <option
+                        key={'incoming-hook' + channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
            }
        });

@@ -108,26 +115,31 @@ export default class ManageIncomingHooks extends React.Component {
        const hooks = [];
        this.state.hooks.forEach((hook) => {
            const c = ChannelStore.get(hook.channel_id);
-            hooks.push(
-                <div className='font--small'>
-                    <div className='padding-top x2 divider-light'></div>
-                    <div className='padding-top x2'>
-                        <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
+            if (c) {
+                hooks.push(
+                    <div
+                        key={hook.id}
+                        className='font--small'
+                    >
+                        <div className='padding-top x2 divider-light'></div>
+                        <div className='padding-top x2'>
+                            <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
+                        </div>
+                        <div className='padding-top'>
+                            <strong>{'Channel: '}</strong>{c.display_name}
+                        </div>
+                        <div className='padding-top'>
+                            <a
+                                className={'text-danger'}
+                                href='#'
+                                onClick={this.removeHook.bind(this, hook.id)}
+                            >
+                                {'Remove'}
+                            </a>
+                        </div>
                    </div>
-                    <div className='padding-top'>
-                        <strong>{'Channel: '}</strong>{c.name}
-                    </div>
-                    <div className='padding-top'>
-                        <a
-                            className={'text-danger'}
-                            href='#'
-                            onClick={this.removeHook.bind(this, hook.id)}
-                        >
-                            {'Remove'}
-                        </a>
-                    </div>
-                </div>
-            );
+                );
+            }
        });

        let displayHooks;
--- a/web/react/components/user_settings/manage_outgoing_hooks.jsx
+++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx
@@ -128,21 +128,42 @@ export default class ManageOutgoingHooks extends React.Component {
        }

        const channels = ChannelStore.getAll();
-        const options = [<option value=''>{'--- Select a channel ---'}</option>];
+        const options = [];
+        options.push(
+            <option
+                key='select-channel'
+                value=''
+            >
+                {'--- Select a channel ---'}
+            </option>
+        );
+
        channels.forEach((channel) => {
            if (channel.type === Constants.OPEN_CHANNEL) {
-                options.push(<option value={channel.id}>{channel.name}</option>);
+                options.push(
+                    <option
+                        key={'outgoing-hook' + channel.id}
+                        value={channel.id}
+                    >
+                        {channel.display_name}
+                    </option>
+                );
            }
        });

        const hooks = [];
        this.state.hooks.forEach((hook) => {
            const c = ChannelStore.get(hook.channel_id);
+
+            if (!c && hook.channel_id && hook.channel_id.length !== 0) {
+                return;
+            }
+
            let channelDiv;
            if (c) {
                channelDiv = (
                    <div className='padding-top'>
-                        <strong>{'Channel: '}</strong>{c.name}
+                        <strong>{'Channel: '}</strong>{c.display_name}
                    </div>
                );
            }
@@ -157,7 +178,10 @@ export default class ManageOutgoingHooks extends React.Component {
            }

            hooks.push(
-                <div className='font--small'>
+                <div
+                    key={hook.id}
+                    className='font--small'
+                >
                    <div className='padding-top x2 divider-light'></div>
                    <div className='padding-top x2'>
                        <strong>{'URLs: '}</strong><span className='word-break--all'>{hook.callback_urls.join(', ')}</span>
--- a/web/react/components/user_settings/user_settings_general.jsx
+++ b/web/react/components/user_settings/user_settings_general.jsx
@@ -122,7 +122,7 @@ export default class UserSettingsGeneralTab extends React.Component {
            () => {
                this.updateSection('');
                AsyncClient.getMe();
-                const verificationEnabled = global.window.config.SendEmailNotifications === 'true' && global.window.config.RequireEmailVerification === 'true' && emailUpdated;
+                const verificationEnabled = global.window.mm_config.SendEmailNotifications === 'true' && global.window.mm_config.RequireEmailVerification === 'true' && emailUpdated;

                if (verificationEnabled) {
                    ErrorStore.storeLastError({message: 'Check your email at ' + user.email + ' to verify the address.'});
@@ -451,8 +451,8 @@ export default class UserSettingsGeneralTab extends React.Component {
        }
        var emailSection;
        if (this.props.activeSection === 'email') {
-            const emailEnabled = global.window.config.SendEmailNotifications === 'true';
-            const emailVerificationEnabled = global.window.config.RequireEmailVerification === 'true';
+            const emailEnabled = global.window.mm_config.SendEmailNotifications === 'true';
+            const emailVerificationEnabled = global.window.mm_config.RequireEmailVerification === 'true';
            let helpText = 'Email is used for notifications, and requires verification if changed.';

            if (!emailEnabled) {
@@ -542,7 +542,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                <SettingPicture
                    title='Profile Picture'
                    submit={this.submitPicture}
-                    src={'/api/v1/users/' + user.id + '/image?time=' + user.last_picture_update}
+                    src={'/api/v1/users/' + user.id + '/image?time=' + user.last_picture_update + '&' + utils.getSessionIndex()}
                    server_error={serverError}
                    client_error={clientError}
                    updateSection={function clearSection(e) {
--- a/web/react/components/user_settings/user_settings_integrations.jsx
+++ b/web/react/components/user_settings/user_settings_integrations.jsx
@@ -34,10 +34,10 @@ export default class UserSettingsIntegrationsTab extends React.Component {
        let outgoingHooksSection;
        var inputs = [];

-        if (global.window.config.EnableIncomingWebhooks === 'true') {
+        if (global.window.mm_config.EnableIncomingWebhooks === 'true') {
            if (this.props.activeSection === 'incoming-hooks') {
                inputs.push(
-                    <ManageIncomingHooks />
+                    <ManageIncomingHooks key='incoming-hook-ui' />
                );

                incomingHooksSection = (
@@ -65,10 +65,10 @@ export default class UserSettingsIntegrationsTab extends React.Component {
            }
        }

-        if (global.window.config.EnableOutgoingWebhooks === 'true') {
+        if (global.window.mm_config.EnableOutgoingWebhooks === 'true') {
            if (this.props.activeSection === 'outgoing-hooks') {
                inputs.push(
-                    <ManageOutgoingHooks />
+                    <ManageOutgoingHooks key='outgoing-hook-ui' />
                );

                outgoingHooksSection = (
--- a/web/react/components/user_settings/user_settings_modal.jsx
+++ b/web/react/components/user_settings/user_settings_modal.jsx
@@ -35,10 +35,11 @@ export default class UserSettingsModal extends React.Component {
        tabs.push({name: 'security', uiName: 'Security', icon: 'glyphicon glyphicon-lock'});
        tabs.push({name: 'notifications', uiName: 'Notifications', icon: 'glyphicon glyphicon-exclamation-sign'});
        tabs.push({name: 'appearance', uiName: 'Appearance', icon: 'glyphicon glyphicon-wrench'});
-        if (global.window.config.EnableOAuthServiceProvider === 'true') {
+        if (global.window.mm_config.EnableOAuthServiceProvider === 'true') {
            tabs.push({name: 'developer', uiName: 'Developer', icon: 'glyphicon glyphicon-th'});
        }
-        if (global.window.config.EnableIncomingWebhooks === 'true' || global.window.config.EnableOutgoingWebhooks === 'true') {
+
+        if (global.window.mm_config.EnableIncomingWebhooks === 'true' || global.window.mm_config.EnableOutgoingWebhooks === 'true') {
            tabs.push({name: 'integrations', uiName: 'Integrations', icon: 'glyphicon glyphicon-transfer'});
        }
        tabs.push({name: 'display', uiName: 'Display', icon: 'glyphicon glyphicon-eye-open'});
--- a/web/react/components/user_settings/user_settings_notifications.jsx
+++ b/web/react/components/user_settings/user_settings_notifications.jsx
@@ -413,7 +413,7 @@ export default class NotificationsTab extends React.Component {
                        </label>
                        <br/>
                    </div>
-                    <div><br/>{'Email notifications are sent for mentions and direct messages after you’ve been offline for more than 60 seconds or away from ' + global.window.config.SiteName + ' for more than 5 minutes.'}</div>
+                    <div><br/>{'Email notifications are sent for mentions and direct messages after you’ve been offline for more than 60 seconds or away from ' + global.window.mm_config.SiteName + ' for more than 5 minutes.'}</div>
                </div>
            );

--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -197,7 +197,7 @@ export default class ViewImageModal extends React.Component {
            }
            fileInfo.path = Utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path;

-            return fileInfo.path + '_preview.jpg';
+            return fileInfo.path + '_preview.jpg' + '?' + Utils.getSessionIndex();
        }

        // only images have proper previews, so just use a placeholder icon for non-images
@@ -306,7 +306,7 @@ export default class ViewImageModal extends React.Component {
                        width={width}
                        height={height}
                    >
-                        <source src={Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename} />
+                        <source src={Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename + '?' + Utils.getSessionIndex()} />
                    </video>
                );
            } else {
--- a/web/react/components/view_image_popover_bar.jsx
+++ b/web/react/components/view_image_popover_bar.jsx
@@ -7,7 +7,7 @@ export default class ViewImagePopoverBar extends React.Component {
    }
    render() {
        var publicLink = '';
-        if (global.window.config.EnablePublicLink === 'true') {
+        if (global.window.mm_config.EnablePublicLink === 'true') {
            publicLink = (
                <div>
                    <a