Fix react warnings and part of backstage (#4706)

2025-02-25 18:55:24 -06:00 · 2016-12-05 10:19:12 -03:00
parent 05783664cd
commit 145876681f
46 changed files with 142 additions and 149 deletions
--- a/webapp/components/access_history_modal.jsx
+++ b/webapp/components/access_history_modal.jsx
@@ -57,15 +57,15 @@ export default class AccessHistoryModal extends React.Component {
    }

    onAuditChange() {
-        var newState = this.getStateFromStoresForAudits();
+        const newState = this.getStateFromStoresForAudits();
        if (!Utils.areObjectsEqual(newState.audits, this.state.audits)) {
            this.setState(newState);
        }
    }

    render() {
-        var content;
-        if (this.state.audits.loading) {
+        let content;
+        if (this.state.audits.length === 0) {
            content = (<LoadingScreen/>);
        } else {
            content = (
--- a/webapp/components/admin_console/admin_sidebar_section.jsx
+++ b/webapp/components/admin_console/admin_sidebar_section.jsx
@@ -79,8 +79,6 @@ export default class AdminSidebarSection extends React.Component {
            sidebarItem = (
                <div
                    className={`${className}-title`}
-                    activeClassName={`${className}-title ${className}-title--active`}
-                    onlyActiveOnIndex={this.props.onlyActiveOnIndex}
                >
                    <span className={`${className}-title__text`}>
                        {this.props.title}
--- a/webapp/components/admin_console/file_upload_setting.jsx
+++ b/webapp/components/admin_console/file_upload_setting.jsx
@@ -51,7 +51,6 @@ export default class FileUploadSetting extends Setting {
            if (error) {
                Utils.clearFileInput(this.refs.fileInput);
            }
-            this.setState({fileSelected: false, fileName: null, serverError: error});
        });
    }

@@ -61,7 +60,7 @@ export default class FileUploadSetting extends Setting {
            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
        }

-        var btnClass = 'btn';
+        let btnClass = 'btn';
        if (this.state.fileSelected) {
            btnClass = 'btn btn-primary';
        }
--- a/webapp/components/admin_console/team_users.jsx
+++ b/webapp/components/admin_console/team_users.jsx
@@ -191,6 +191,7 @@ export default class UserList extends React.Component {
                        const service = (user.auth_service === Constants.LDAP_SERVICE || user.auth_service === Constants.SAML_SERVICE) ? user.auth_service.toUpperCase() : Utils.toTitleCase(user.auth_service);
                        info.push(
                            <FormattedHTMLMessage
+                                key='admin.user_item.authServiceNotEmail'
                                id='admin.user_item.authServiceNotEmail'
                                defaultMessage='<strong>Sign-in Method:</strong> {service}'
                                values={{
@@ -201,6 +202,7 @@ export default class UserList extends React.Component {
                    } else {
                        info.push(
                            <FormattedHTMLMessage
+                                key='admin.user_item.authServiceEmail'
                                id='admin.user_item.authServiceEmail'
                                defaultMessage='<strong>Sign-in Method:</strong> Email'
                            />
@@ -212,6 +214,7 @@ export default class UserList extends React.Component {
                        if (user.mfa_active) {
                            info.push(
                                <FormattedHTMLMessage
+                                    key='admin.user_item.mfaYes'
                                    id='admin.user_item.mfaYes'
                                    defaultMessage='<strong>MFA</strong>: Yes'
                                />
@@ -219,6 +222,7 @@ export default class UserList extends React.Component {
                        } else {
                            info.push(
                                <FormattedHTMLMessage
+                                    key='admin.user_item.mfaNo'
                                    id='admin.user_item.mfaNo'
                                    defaultMessage='<strong>MFA</strong>: No'
                                />
--- a/webapp/components/admin_console/text_setting.jsx
+++ b/webapp/components/admin_console/text_setting.jsx
@@ -18,7 +18,7 @@ export default class TextSetting extends React.Component {
                React.PropTypes.number
            ]).isRequired,
            maxLength: React.PropTypes.number,
-            onChange: React.PropTypes.func.isRequired,
+            onChange: React.PropTypes.func,
            disabled: React.PropTypes.bool,
            type: React.PropTypes.oneOf([
                'input',
--- a/webapp/components/analytics/doughnut_chart.jsx
+++ b/webapp/components/analytics/doughnut_chart.jsx
@@ -83,6 +83,6 @@ DoughnutChart.propTypes = {
    title: React.PropTypes.node,
    width: React.PropTypes.string,
    height: React.PropTypes.string,
-    data: React.PropTypes.array,
+    data: React.PropTypes.object,
    options: React.PropTypes.object
 };
--- a/webapp/components/backstage/backstage_controller.jsx
+++ b/webapp/components/backstage/backstage_controller.jsx
@@ -4,6 +4,7 @@
 import React from 'react';

 import TeamStore from 'stores/team_store.jsx';
+import UserStore from 'stores/user_store.jsx';

 import BackstageSidebar from './components/backstage_sidebar.jsx';
 import BackstageNavbar from './components/backstage_navbar.jsx';
@@ -13,8 +14,7 @@ export default class BackstageController extends React.Component {
    static get propTypes() {
        return {
            children: React.PropTypes.node.isRequired,
-            params: React.PropTypes.object.isRequired,
-            user: React.PropTypes.object.isRequired
+            params: React.PropTypes.object.isRequired
        };
    }

@@ -24,6 +24,7 @@ export default class BackstageController extends React.Component {
        this.onTeamChange = this.onTeamChange.bind(this);

        this.state = {
+            user: UserStore.getCurrentUser(),
            team: props.params.team ? TeamStore.getByName(props.params.team) : TeamStore.getCurrent()
        };
    }
@@ -50,7 +51,7 @@ export default class BackstageController extends React.Component {
                <div className='backstage-body'>
                    <BackstageSidebar
                        team={this.state.team}
-                        user={this.props.user}
+                        user={this.state.user}
                    />
                    {
                        React.Children.map(this.props.children, (child) => {
@@ -60,7 +61,7 @@ export default class BackstageController extends React.Component {

                            return React.cloneElement(child, {
                                team: this.state.team,
-                                user: this.props.user
+                                user: this.state.user
                            });
                        })
                    }
--- a/webapp/components/backstage/components/backstage_section.jsx
+++ b/webapp/components/backstage/components/backstage_section.jsx
@@ -65,7 +65,6 @@ export default class BackstageSection extends React.Component {
                <Link
                    className={`${className}-title`}
                    activeClassName={`${className}-title--active`}
-                    onClick={this.handleClick}
                    to={link}
                >
                    <span className={`${className}-title__text`}>
--- a/webapp/components/channel_invite_button.jsx
+++ b/webapp/components/channel_invite_button.jsx
@@ -40,10 +40,6 @@ export default class ChannelInviteButton extends React.Component {
            this.props.channel.id,
            this.props.user.id,
            () => {
-                this.setState({
-                    addingUser: false
-                });
-
                this.props.onInviteError(null);
            },
            (err) => {
--- a/webapp/components/channel_invite_modal.jsx
+++ b/webapp/components/channel_invite_modal.jsx
@@ -123,12 +123,12 @@ export default class ChannelInviteModal extends React.Component {
    }

    render() {
-        var inviteError = null;
+        let inviteError = null;
        if (this.state.inviteError) {
            inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>);
        }

-        var content;
+        let content;
        if (this.state.loading) {
            content = (<LoadingScreen/>);
        } else {
--- a/webapp/components/emoji/components/add_emoji.jsx
+++ b/webapp/components/emoji/components/add_emoji.jsx
@@ -14,13 +14,13 @@ import SpinnerButton from 'components/spinner_button.jsx';

 export default class AddEmoji extends React.Component {
    static propTypes = {
-        team: React.PropTypes.object.isRequired,
-        user: React.PropTypes.object.isRequired
-    }
+        team: React.PropTypes.object,
+        user: React.PropTypes.object
+    };

    static contextTypes = {
        router: React.PropTypes.object.isRequired
-    }
+    };

    constructor(props) {
        super(props);
--- a/webapp/components/emoji/components/emoji_list.jsx
+++ b/webapp/components/emoji/components/emoji_list.jsx
@@ -19,8 +19,8 @@ import {FormattedMessage} from 'react-intl';
 export default class EmojiList extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired,
-            user: React.propTypes.object.isRequired
+            team: React.PropTypes.object,
+            user: React.PropTypes.object
        };
    }

@@ -95,11 +95,21 @@ export default class EmojiList extends React.Component {
        const emojis = [];
        if (this.state.loading) {
            emojis.push(
-                <LoadingScreen key='loading'/>
+                <tr
+                    key='loading'
+                    className='backstage-list__item backstage-list__empty'
+                >
+                    <td colSpan='4'>
+                        <LoadingScreen key='loading'/>
+                    </td>
+                </tr>
            );
-        } else if (this.state.emojis.length === 0) {
+        } else if (this.state.emojis.size === 0) {
            emojis.push(
-                <tr className='backstage-list__item backstage-list__empty'>
+                <tr
+                    key='empty'
+                    className='backstage-list__item backstage-list__empty'
+                >
                    <td colSpan='4'>
                        <FormattedMessage
                            id='emoji_list.empty'
@@ -180,33 +190,37 @@ export default class EmojiList extends React.Component {
                </span>
                <div className='backstage-list'>
                    <table className='emoji-list__table'>
-                        <tr className='backstage-list__item emoji-list__table-header'>
-                            <th className='emoji-list__name'>
-                                <FormattedMessage
-                                    id='emoji_list.name'
-                                    defaultMessage='Name'
-                                />
-                            </th>
-                            <th className='emoji-list__image'>
-                                <FormattedMessage
-                                    id='emoji_list.image'
-                                    defaultMessage='Image'
-                                />
-                            </th>
-                            <th className='emoji-list__creator'>
-                                <FormattedMessage
-                                    id='emoji_list.creator'
-                                    defaultMessage='Creator'
-                                />
-                            </th>
-                            <th className='emoji-list_actions'>
-                                <FormattedMessage
-                                    id='emoji_list.actions'
-                                    defaultMessage='Actions'
-                                />
-                            </th>
-                        </tr>
-                        {emojis}
+                        <thead>
+                            <tr className='backstage-list__item emoji-list__table-header'>
+                                <th className='emoji-list__name'>
+                                    <FormattedMessage
+                                        id='emoji_list.name'
+                                        defaultMessage='Name'
+                                    />
+                                </th>
+                                <th className='emoji-list__image'>
+                                    <FormattedMessage
+                                        id='emoji_list.image'
+                                        defaultMessage='Image'
+                                    />
+                                </th>
+                                <th className='emoji-list__creator'>
+                                    <FormattedMessage
+                                        id='emoji_list.creator'
+                                        defaultMessage='Creator'
+                                    />
+                                </th>
+                                <th className='emoji-list_actions'>
+                                    <FormattedMessage
+                                        id='emoji_list.actions'
+                                        defaultMessage='Actions'
+                                    />
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {emojis}
+                        </tbody>
                    </table>
                </div>
            </div>
--- a/webapp/components/form_error.jsx
+++ b/webapp/components/form_error.jsx
@@ -9,7 +9,7 @@ export default class FormError extends React.Component {
        return {
            type: React.PropTypes.node,
            error: React.PropTypes.node,
-            margin: React.PropTypes.node,
+            margin: React.PropTypes.bool,
            errors: React.PropTypes.arrayOf(React.PropTypes.node)
        };
    }
--- a/webapp/components/get_link_modal.jsx
+++ b/webapp/components/get_link_modal.jsx
@@ -90,10 +90,11 @@ export default class GetLinkModal extends React.Component {
                className='form-control no-resize min-height'
                ref='textarea'
                value={this.props.link}
+                readOnly={true}
            />
        );

-        var copyLinkConfirm = null;
+        let copyLinkConfirm = null;
        if (this.state.copiedLink) {
            copyLinkConfirm = (
                <p className='alert alert-success alert--confirm'>
--- a/webapp/components/header_footer_template.jsx
+++ b/webapp/components/header_footer_template.jsx
@@ -21,6 +21,7 @@ export default class NotLoggedIn extends React.Component {
        if (global.window.mm_config.HelpLink) {
            content.push(
                <a
+                    key='help_link'
                    id='help_link'
                    className='pull-right footer-link'
                    target='_blank'
@@ -35,6 +36,7 @@ export default class NotLoggedIn extends React.Component {
        if (global.window.mm_config.TermsOfServiceLink) {
            content.push(
                <a
+                    key='terms_link'
                    id='terms_link'
                    className='pull-right footer-link'
                    target='_blank'
@@ -49,6 +51,7 @@ export default class NotLoggedIn extends React.Component {
        if (global.window.mm_config.PrivacyPolicyLink) {
            content.push(
                <a
+                    key='privacy_link'
                    id='privacy_link'
                    className='pull-right footer-link'
                    target='_blank'
@@ -63,6 +66,7 @@ export default class NotLoggedIn extends React.Component {
        if (global.window.mm_config.AboutLink) {
            content.push(
                <a
+                    key='about_link'
                    id='about_link'
                    className='pull-right footer-link'
                    target='_blank'
--- a/webapp/components/integrations/components/add_command.jsx
+++ b/webapp/components/integrations/components/add_command.jsx
@@ -19,7 +19,7 @@ const REQUEST_GET = 'G';
 export default class AddCommand extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired
+            team: React.PropTypes.object
        };
    }

@@ -513,7 +513,7 @@ export default class AddCommand extends React.Component {
                                    className='form-control'
                                    value={this.state.username}
                                    onChange={this.updateUsername}
-                                    placholder={Utils.localizeMessage('add_command.username.placeholder', 'Username')}
+                                    placeholder={Utils.localizeMessage('add_command.username.placeholder', 'Username')}
                                />
                                <div className='form__help'>
                                    <FormattedMessage
--- a/webapp/components/integrations/components/add_incoming_webhook.jsx
+++ b/webapp/components/integrations/components/add_incoming_webhook.jsx
@@ -15,7 +15,7 @@ import SpinnerButton from 'components/spinner_button.jsx';
 export default class AddIncomingWebhook extends React.Component {
    static get propTypes() {
        return {
-            team: React.PropTypes.object.isRequired
+            team: React.PropTypes.object
        };
    }

--- a/webapp/components/integrations/components/add_oauth_app.jsx
+++ b/webapp/components/integrations/components/add_oauth_app.jsx
@@ -14,7 +14,7 @@ import SpinnerButton from 'components/spinner_button.jsx';
 export default class AddOAuthApp extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired
+            team: React.PropTypes.object
        };
    }

--- a/webapp/components/integrations/components/add_outgoing_webhook.jsx
+++ b/webapp/components/integrations/components/add_outgoing_webhook.jsx
@@ -4,6 +4,7 @@
 import React from 'react';

 import * as AsyncClient from 'utils/async_client.jsx';
+import {localizeMessage} from 'utils/utils.jsx';

 import BackstageHeader from 'components/backstage/components/backstage_header.jsx';
 import ChannelSelect from 'components/channel_select.jsx';
@@ -15,7 +16,7 @@ import SpinnerButton from 'components/spinner_button.jsx';
 export default class AddOutgoingWebhook extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired
+            team: React.PropTypes.object
        };
    }

@@ -368,18 +369,12 @@ export default class AddOutgoingWebhook extends React.Component {
                                    <option
                                        value='0'
                                    >
-                                        <FormattedMessage
-                                            id='add_outgoing_webhook.triggerWordsTriggerWhenFullWord'
-                                            defaultMessage='First word matches a trigger word exactly'
-                                        />
+                                        {localizeMessage('add_outgoing_webhook.triggerWordsTriggerWhenFullWord', 'First word matches a trigger word exactly')}
                                    </option>
                                    <option
                                        value='1'
                                    >
-                                        <FormattedMessage
-                                            id='add_outgoing_webhook.triggerWordsTriggerWhenStartsWith'
-                                            defaultMessage='First word starts with a trigger word'
-                                        />
+                                        {localizeMessage('add_outgoing_webhook.triggerWordsTriggerWhenStartsWith', 'First word starts with a trigger word')}
                                    </option>
                                </select>
                                <div className='form__help'>
--- a/webapp/components/integrations/components/commands_container.jsx
+++ b/webapp/components/integrations/components/commands_container.jsx
@@ -2,7 +2,6 @@
 // See License.txt for license information.

 import IntegrationStore from 'stores/integration_store.jsx';
-import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';

 import {loadTeamCommands} from 'actions/integration_actions.jsx';
@@ -12,8 +11,8 @@ import React from 'react';
 export default class CommandsContainer extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired,
-            children: React.propTypes.node.isRequired
+            team: React.PropTypes.object,
+            children: React.PropTypes.node
        };
    }

@@ -23,10 +22,10 @@ export default class CommandsContainer extends React.Component {
        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
        this.handleUserChange = this.handleUserChange.bind(this);

-        const teamId = TeamStore.getCurrentId();
+        const teamId = this.props.team ? this.props.team.id : '';

        this.state = {
-            commands: IntegrationStore.getCommands(teamId),
+            commands: IntegrationStore.getCommands(teamId) || [],
            loading: !IntegrationStore.hasReceivedCommands(teamId),
            users: UserStore.getProfiles()
        };
@@ -47,7 +46,7 @@ export default class CommandsContainer extends React.Component {
    }

    handleIntegrationChange() {
-        const teamId = TeamStore.getCurrentId();
+        const teamId = this.props.team.id;

        this.setState({
            commands: IntegrationStore.getCommands(teamId),
--- a/webapp/components/integrations/components/confirm_integration.jsx
+++ b/webapp/components/integrations/components/confirm_integration.jsx
@@ -15,7 +15,7 @@ import Constants from 'utils/constants.jsx';
 export default class ConfirmIntegration extends React.Component {
    static get propTypes() {
        return {
-            team: React.PropTypes.object.isRequired,
+            team: React.PropTypes.object,
            location: React.PropTypes.object,
            loading: React.PropTypes.bool
        };
@@ -159,7 +159,7 @@ export default class ConfirmIntegration extends React.Component {

                helpText = [];
                helpText.push(
-                    <p>
+                    <p key='add_oauth_app.doneHelp'>
                        <FormattedHTMLMessage
                            id='add_oauth_app.doneHelp'
                            defaultMessage='Your OAuth 2.0 application has been set up. Please use the following Client ID and Client Secret when requesting authorization for your application (see <a href="https://docs.mattermost.com/developer/oauth-2-0-applications.html">documentation</a> for further details).'
@@ -167,7 +167,7 @@ export default class ConfirmIntegration extends React.Component {
                    </p>
                );
                helpText.push(
-                    <p>
+                    <p key='add_oauth_app.clientId'>
                        <FormattedHTMLMessage
                            id='add_oauth_app.clientId'
                            defaultMessage='<b>Client ID:</b> {id}'
@@ -186,7 +186,7 @@ export default class ConfirmIntegration extends React.Component {
                );

                helpText.push(
-                    <p>
+                    <p key='add_oauth_app.doneUrlHelp'>
                        <FormattedHTMLMessage
                            id='add_oauth_app.doneUrlHelp'
                            defaultMessage='The following are your authorized redirect URL(s).'
--- a/webapp/components/integrations/components/edit_command.jsx
+++ b/webapp/components/integrations/components/edit_command.jsx
@@ -23,7 +23,7 @@ const REQUEST_GET = 'G';
 export default class EditCommand extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired,
+            team: React.PropTypes.object,
            location: React.PropTypes.object
        };
    }
@@ -624,7 +624,7 @@ export default class EditCommand extends React.Component {
                                    className='form-control'
                                    value={this.state.username}
                                    onChange={this.updateUsername}
-                                    placholder={Utils.localizeMessage('add_command.username.placeholder', 'Username')}
+                                    placeholder={Utils.localizeMessage('add_command.username.placeholder', 'Username')}
                                />
                                <div className='form__help'>
                                    <FormattedMessage
--- a/webapp/components/integrations/components/installed_command.jsx
+++ b/webapp/components/integrations/components/installed_command.jsx
@@ -2,11 +2,13 @@
 // See License.txt for license information.

 import React from 'react';
+import {Link} from 'react-router';
 import {FormattedMessage} from 'react-intl';

 export default class InstalledCommand extends React.Component {
    static get propTypes() {
        return {
+            team: React.PropTypes.object.isRequired,
            command: React.PropTypes.object.isRequired,
            onRegenToken: React.PropTypes.func.isRequired,
            onDelete: React.PropTypes.func.isRequired,
@@ -129,14 +131,14 @@ export default class InstalledCommand extends React.Component {
                        />
                    </a>
                    {' - '}
-                    <a
-                        href={'edit?id=' + command.id}
+                    <Link
+                        to={`/${this.props.team.name}/integrations/commands/edit?id=${command.id}`}
                    >
                        <FormattedMessage
                            id='installed_integrations.edit'
                            defaultMessage='Edit'
                        />
-                    </a>
+                    </Link>
                    {' - '}
                    <a
                        href='#'
--- a/webapp/components/integrations/components/installed_commands.jsx
+++ b/webapp/components/integrations/components/installed_commands.jsx
@@ -13,10 +13,10 @@ import {FormattedMessage} from 'react-intl';
 export default class InstalledCommands extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired,
-            users: React.propTypes.object.isRequired,
-            commands: React.propTypes.array.isRequired,
-            loading: React.propTypes.bool.isRequired
+            team: React.PropTypes.object,
+            users: React.PropTypes.object,
+            commands: React.PropTypes.array,
+            loading: React.PropTypes.bool
        };
    }

@@ -40,6 +40,7 @@ export default class InstalledCommands extends React.Component {
            return (
                <InstalledCommand
                    key={command.id}
+                    team={this.props.team}
                    command={command}
                    onRegenToken={this.regenCommandToken}
                    onDelete={this.deleteCommand}
--- a/webapp/components/integrations/components/installed_incoming_webhooks.jsx
+++ b/webapp/components/integrations/components/installed_incoming_webhooks.jsx
@@ -19,7 +19,7 @@ import {FormattedMessage} from 'react-intl';
 export default class InstalledIncomingWebhooks extends React.Component {
    static get propTypes() {
        return {
-            team: React.PropTypes.object.isRequired
+            team: React.PropTypes.object
        };
    }

--- a/webapp/components/integrations/components/installed_oauth_apps.jsx
+++ b/webapp/components/integrations/components/installed_oauth_apps.jsx
@@ -15,7 +15,7 @@ import InstalledOAuthApp from './installed_oauth_app.jsx';
 export default class InstalledOAuthApps extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired
+            team: React.PropTypes.object
        };
    }

--- a/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
+++ b/webapp/components/integrations/components/installed_outgoing_webhooks.jsx
@@ -19,7 +19,7 @@ import {FormattedMessage} from 'react-intl';
 export default class InstalledOutgoingWebhooks extends React.Component {
    static get propTypes() {
        return {
-            team: React.propTypes.object.isRequired
+            team: React.PropTypes.object
        };
    }

--- a/webapp/components/integrations/components/integrations.jsx
+++ b/webapp/components/integrations/components/integrations.jsx
@@ -16,8 +16,8 @@ import * as Utils from 'utils/utils.jsx';
 export default class Integrations extends React.Component {
    static get propTypes() {
        return {
-            team: React.PropTypes.object.isRequired,
-            user: React.PropTypes.object.isRequired
+            team: React.PropTypes.object,
+            user: React.PropTypes.object
        };
    }

--- a/webapp/components/login/login_controller.jsx
+++ b/webapp/components/login/login_controller.jsx
@@ -461,17 +461,6 @@ export default class LoginController extends React.Component {
            );
        }

-        if (gitlabSigninEnabled || samlSigninEnabled || office365SigninEnabled || googleSigninEnabled || gitlabSigninEnabled) {
-            loginControls.push(
-                <h5 key='oauthHeader'>
-                    <FormattedMessage
-                        id='login.signInWith'
-                        defaultMessage='Sign in with:'
-                    />
-                </h5>
-            );
-        }
-
        if (gitlabSigninEnabled) {
            loginControls.push(
                <a
--- a/webapp/components/more_direct_channels.jsx
+++ b/webapp/components/more_direct_channels.jsx
@@ -12,6 +12,7 @@ import TeamStore from 'stores/team_store.jsx';

 import * as AsyncClient from 'utils/async_client.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
+import {localizeMessage} from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';

 import React from 'react';
@@ -196,16 +197,10 @@ export default class MoreDirectChannels extends React.Component {
                        onChange={this.toggleList}
                    >
                        <option value='any'>
-                            <FormattedMessage
-                                id='filtered_user_list.any_team'
-                                defaultMessage='All Users'
-                            />
+                            {localizeMessage('filtered_user_list.any_team', 'All Users')}
                        </option>
                        <option value='team'>
-                            <FormattedMessage
-                                id='filtered_user_list.team_only'
-                                defaultMessage='Members of this Team'
-                            />
+                            {localizeMessage('filtered_user_list.team_only', 'Members of this Team')}
                        </option>
                    </select>
                    <span
--- a/webapp/components/rhs_dropdown.jsx
+++ b/webapp/components/rhs_dropdown.jsx
@@ -18,11 +18,7 @@ export default class RhsDropdown extends React.Component {
        };
    }

-    toggleDropdown(e) {
-        if (e) {
-            e.preventDefault();
-        }
-
+    toggleDropdown() {
        const showDropdown = !this.state.showDropdown;
        if (Agent.isMobile() || Agent.isMobileApp()) {
            const scroll = document.querySelector('.scrollbar--view');
@@ -39,8 +35,9 @@ export default class RhsDropdown extends React.Component {
    render() {
        return (
            <Dropdown
+                id='rhs_dropdown'
                open={this.state.showDropdown}
-                onClose={this.toggleDropdown}
+                onToggle={this.toggleDropdown}
            >
                <a
                    href='#'
--- a/webapp/components/rhs_header_post.jsx
+++ b/webapp/components/rhs_header_post.jsx
@@ -190,6 +190,6 @@ RhsHeaderPost.propTypes = {
    isWebrtc: React.PropTypes.bool,
    fromSearch: React.PropTypes.string,
    fromFlaggedPosts: React.PropTypes.bool,
-    toggleSize: React.PropTypes.function,
-    shrink: React.PropTypes.function
+    toggleSize: React.PropTypes.func,
+    shrink: React.PropTypes.func
 };
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -374,6 +374,6 @@ RhsThread.propTypes = {
    isMentionSearch: React.PropTypes.bool,
    currentUser: React.PropTypes.object.isRequired,
    useMilitaryTime: React.PropTypes.bool.isRequired,
-    toggleSize: React.PropTypes.function,
-    shrink: React.PropTypes.function
+    toggleSize: React.PropTypes.func,
+    shrink: React.PropTypes.func
 };
--- a/webapp/components/search_results.jsx
+++ b/webapp/components/search_results.jsx
@@ -271,7 +271,7 @@ export default class SearchResults extends React.Component {
 SearchResults.propTypes = {
    isMentionSearch: React.PropTypes.bool,
    useMilitaryTime: React.PropTypes.bool.isRequired,
-    toggleSize: React.PropTypes.function,
-    shrink: React.PropTypes.function,
+    toggleSize: React.PropTypes.func,
+    shrink: React.PropTypes.func,
    isFlaggedPosts: React.PropTypes.bool
 };
--- a/webapp/components/search_results_header.jsx
+++ b/webapp/components/search_results_header.jsx
@@ -129,7 +129,7 @@ export default class SearchResultsHeader extends React.Component {

 SearchResultsHeader.propTypes = {
    isMentionSearch: React.PropTypes.bool,
-    toggleSize: React.PropTypes.function,
-    shrink: React.PropTypes.function,
+    toggleSize: React.PropTypes.func,
+    shrink: React.PropTypes.func,
    isFlaggedPosts: React.PropTypes.bool
 };
--- a/webapp/components/search_results_item.jsx
+++ b/webapp/components/search_results_item.jsx
@@ -301,6 +301,6 @@ SearchResultsItem.propTypes = {
    isFlaggedSearch: React.PropTypes.bool,
    term: React.PropTypes.string,
    useMilitaryTime: React.PropTypes.bool.isRequired,
-    shrink: React.PropTypes.function,
+    shrink: React.PropTypes.func,
    isFlagged: React.PropTypes.bool
 };
--- a/webapp/components/sidebar_header_dropdown.jsx
+++ b/webapp/components/sidebar_header_dropdown.jsx
@@ -322,7 +322,7 @@ export default class SidebarHeaderDropdown extends React.Component {
            );
        }

-        var teams = [];
+        const teams = [];

        if (config.EnableTeamCreation === 'true') {
            teams.push(
--- a/webapp/components/user_settings/user_settings_modal.jsx
+++ b/webapp/components/user_settings/user_settings_modal.jsx
@@ -77,16 +77,24 @@ class UserSettingsModal extends React.Component {
        };

        this.requireConfirm = false;
+        this.mounted = false;
    }

    onUserChanged() {
-        this.setState({currentUser: UserStore.getCurrentUser()});
+        if (this.mounted) {
+            this.setState({currentUser: UserStore.getCurrentUser()});
+        }
    }

    componentDidMount() {
+        this.mounted = true;
        UserStore.addChangeListener(this.onUserChanged);
    }

+    componentWillUnmount() {
+        this.mounted = false;
+    }
+
    componentDidUpdate() {
        UserStore.removeChangeListener(this.onUserChanged);
        if (!Utils.isMobile()) {
--- a/webapp/components/webrtc/components/webrtc_header.jsx
+++ b/webapp/components/webrtc/components/webrtc_header.jsx
@@ -96,5 +96,5 @@ export default class WebrtcHeader extends React.Component {
 WebrtcHeader.propTypes = {
    username: React.PropTypes.string.isRequired,
    onClose: React.PropTypes.func.isRequired,
-    toggleSize: React.PropTypes.function
+    toggleSize: React.PropTypes.func
 };
--- a/webapp/components/webrtc/webrtc_controller.jsx
+++ b/webapp/components/webrtc/webrtc_controller.jsx
@@ -1218,5 +1218,5 @@ WebrtcController.propTypes = {
    userId: React.PropTypes.string.isRequired,
    isCaller: React.PropTypes.bool.isRequired,
    expanded: React.PropTypes.bool.isRequired,
-    toggleSize: React.PropTypes.function
-};
+    toggleSize: React.PropTypes.func
+};