Updating client dependencies. Switching to yarn. (#6433)

* Updating client dependancies. Switching to using yarn.

* Updating React

* Moving pure components to using function syntax (performance gains with newer react version)

* Updating client dependancies.

* Ignore .yarninstall

* Enabling pre-lockfile because it's the entire point of using yarn.

* Removing old webpack config

* Moving to new prop-types

* Fixing ESLint Errors

* Updating jest snapshots.

* Cleaning up package.json

webapp/Makefile

@@ -2,37 +2,37 @@
 
 BUILD_SERVER_DIR = ..
 
-check-style: .npminstall
+check-style: .yarninstall
 	@echo Checking for style guide compliance
 
-	npm run check
+	yarn run check
 
-test: .npminstall
+test: .yarninstall
 	cd $(BUILD_SERVER_DIR) && $(MAKE) internal-test-web-client
 
-.npminstall: package.json
-	@echo Getting dependencies using npm
+.yarninstall: package.json
+	@echo Getting dependencies using yarn
 
-	npm install
+	yarn install --pure-lockfile
 
 	touch $@
 
-build: .npminstall
+build: .yarninstall
 	@echo Building mattermost Webapp
 
 	rm -rf dist
 
-	npm run build
+	yarn run build
 
-run: .npminstall
+run: .yarninstall
 	@echo Running mattermost Webapp for development
 
-	npm run run &
+	yarn run run &
 
-run-fullmap: .npminstall
+run-fullmap: .yarninstall
 	@echo FULL SOURCE MAP Running mattermost Webapp for development FULL SOURCE MAP
 
-	npm run run-fullmap &
+	yarn run run-fullmap &
 
 stop:
 	@echo Stopping changes watching
@@ -51,4 +51,4 @@ clean:
 
 	rm -rf dist
 	rm -rf node_modules
-	rm -f .npminstall
+	rm -f .yarninstall

webapp/components/about_build_modal.jsx

@@ -5,6 +5,8 @@ import {Modal} from 'react-bootstrap';
 
 import {FormattedMessage} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import Constants from 'utils/constants.jsx';
 
@@ -198,6 +200,6 @@ AboutBuildModal.defaultProps = {
 };
 
 AboutBuildModal.propTypes = {
-    show: React.PropTypes.bool.isRequired,
-    onModalDismissed: React.PropTypes.func.isRequired
+    show: PropTypes.bool.isRequired,
+    onModalDismissed: PropTypes.func.isRequired
 };

webapp/components/access_history_modal/access_history_modal.jsx

@@ -9,6 +9,7 @@ import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import {Modal} from 'react-bootstrap';
@@ -16,9 +17,9 @@ import {FormattedMessage} from 'react-intl';
 
 export default class AccessHistoryModal extends React.Component {
     static propTypes = {
-        onHide: React.PropTypes.func.isRequired,
-        actions: React.PropTypes.shape({
-            getUserAudits: React.PropTypes.func.isRequired
+        onHide: PropTypes.func.isRequired,
+        actions: PropTypes.shape({
+            getUserAudits: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/activity_log_modal/activity_log_modal.jsx

@@ -8,16 +8,17 @@ import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage, FormattedTime, FormattedDate} from 'react-intl';
 
 export default class ActivityLogModal extends React.Component {
     static propTypes = {
-        onHide: React.PropTypes.func.isRequired,
-        actions: React.PropTypes.shape({
-            getSessions: React.PropTypes.func.isRequired,
-            revokeSession: React.PropTypes.func.isRequired
+        onHide: PropTypes.func.isRequired,
+        actions: PropTypes.shape({
+            getSessions: PropTypes.func.isRequired,
+            revokeSession: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/add_users_to_team/add_users_to_team.jsx

@@ -14,6 +14,8 @@ import Constants from 'utils/constants.jsx';
 import {displayUsernameForUser} from 'utils/utils.jsx';
 import Client from 'client/web_client.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
@@ -27,9 +29,9 @@ const MAX_SELECTABLE_VALUES = 20;
 
 export default class AddUsersToTeam extends React.Component {
     static propTypes = {
-        onModalDismissed: React.PropTypes.func,
-        actions: React.PropTypes.shape({
-            getProfilesNotInTeam: React.PropTypes.func.isRequired
+        onModalDismissed: PropTypes.func,
+        actions: PropTypes.shape({
+            getProfilesNotInTeam: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/admin_console/admin_console.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -13,7 +15,7 @@ import AdminSidebar from './admin_sidebar.jsx';
 export default class AdminConsole extends React.Component {
     static get propTypes() {
         return {
-            children: React.PropTypes.node.isRequired
+            children: PropTypes.node.isRequired
         };
     }
 

webapp/components/admin_console/admin_settings.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -13,7 +15,7 @@ import {saveConfig} from 'actions/admin_actions.jsx';
 export default class AdminSettings extends React.Component {
     static get propTypes() {
         return {
-            config: React.PropTypes.object
+            config: PropTypes.object
         };
     }
 

webapp/components/admin_console/admin_sidebar.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -14,7 +15,7 @@ import AdminSidebarSection from './admin_sidebar_section.jsx';
 export default class AdminSidebar extends React.Component {
     static get contextTypes() {
         return {
-            router: React.PropTypes.object.isRequired
+            router: PropTypes.object.isRequired
         };
     }
 

webapp/components/admin_console/admin_sidebar_category.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -8,13 +10,13 @@ import {Link} from 'react-router/es6';
 export default class AdminSidebarCategory extends React.Component {
     static get propTypes() {
         return {
-            name: React.PropTypes.string,
-            title: React.PropTypes.node.isRequired,
-            icon: React.PropTypes.string.isRequired,
-            sectionClass: React.PropTypes.string,
-            parentLink: React.PropTypes.string,
-            children: React.PropTypes.node,
-            action: React.PropTypes.node
+            name: PropTypes.string,
+            title: PropTypes.node.isRequired,
+            icon: PropTypes.string.isRequired,
+            sectionClass: PropTypes.string,
+            parentLink: PropTypes.string,
+            children: PropTypes.node,
+            action: PropTypes.node
         };
     }
 
@@ -26,7 +28,7 @@ export default class AdminSidebarCategory extends React.Component {
 
     static get contextTypes() {
         return {
-            router: React.PropTypes.object.isRequired
+            router: PropTypes.object.isRequired
         };
     }
 

webapp/components/admin_console/admin_sidebar_section.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -9,14 +11,14 @@ import * as Utils from 'utils/utils.jsx';
 export default class AdminSidebarSection extends React.Component {
     static get propTypes() {
         return {
-            name: React.PropTypes.string.isRequired,
-            title: React.PropTypes.node.isRequired,
-            type: React.PropTypes.string,
-            parentLink: React.PropTypes.string,
-            subsection: React.PropTypes.bool,
-            children: React.PropTypes.arrayOf(React.PropTypes.element),
-            action: React.PropTypes.node,
-            onlyActiveOnIndex: React.PropTypes.bool
+            name: PropTypes.string.isRequired,
+            title: PropTypes.node.isRequired,
+            type: PropTypes.string,
+            parentLink: PropTypes.string,
+            subsection: PropTypes.bool,
+            children: PropTypes.arrayOf(PropTypes.element),
+            action: PropTypes.node,
+            onlyActiveOnIndex: PropTypes.bool
         };
     }
 

webapp/components/admin_console/banner.jsx

@@ -1,40 +1,40 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-export default class Banner extends React.Component {
-    render() {
-        let title = (
-            <FormattedMessage
-                id='admin.banner.heading'
-                defaultMessage='Note:'
-            />
-        );
+export default function Banner(props) {
+    let title = (
+        <FormattedMessage
+            id='admin.banner.heading'
+            defaultMessage='Note:'
+        />
+    );
 
-        if (this.props.title) {
-            title = this.props.title;
-        }
-
-        return (
-            <div className='banner'>
-                <div className='banner__content'>
-                    <h4 className='banner__heading'>
-                        {title}
-                    </h4>
-                    <p>
-                        {this.props.description}
-                    </p>
-                </div>
-            </div>
-        );
+    if (props.title) {
+        title = props.title;
     }
+
+    return (
+        <div className='banner'>
+            <div className='banner__content'>
+                <h4 className='banner__heading'>
+                    {title}
+                </h4>
+                <p>
+                    {props.description}
+                </p>
+            </div>
+        </div>
+    );
 }
 
 Banner.defaultProps = {
 };
 Banner.propTypes = {
-    title: React.PropTypes.node,
-    description: React.PropTypes.node.isRequired
+    title: PropTypes.node,
+    description: PropTypes.node.isRequired
 };

webapp/components/admin_console/boolean_setting.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -85,13 +87,13 @@ BooleanSetting.defaultProps = {
 };
 
 BooleanSetting.propTypes = {
-    id: React.PropTypes.string.isRequired,
-    label: React.PropTypes.node.isRequired,
-    value: React.PropTypes.bool.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    trueText: React.PropTypes.node,
-    falseText: React.PropTypes.node,
-    disabled: React.PropTypes.bool.isRequired,
-    disabledText: React.PropTypes.node,
-    helpText: React.PropTypes.node.isRequired
+    id: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+    value: PropTypes.bool.isRequired,
+    onChange: PropTypes.func.isRequired,
+    trueText: PropTypes.node,
+    falseText: PropTypes.node,
+    disabled: PropTypes.bool.isRequired,
+    disabledText: PropTypes.node,
+    helpText: PropTypes.node.isRequired
 };

webapp/components/admin_console/brand_image_setting.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -15,7 +16,7 @@ import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
 export default class BrandImageSetting extends React.Component {
     static get propTypes() {
         return {
-            disabled: React.PropTypes.bool.isRequired
+            disabled: PropTypes.bool.isRequired
         };
     }
 

webapp/components/admin_console/cluster_table.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -11,8 +13,8 @@ import statusRed from 'images/status_red.png';
 
 export default class ClusterTable extends React.Component {
     static propTypes = {
-        clusterInfos: React.PropTypes.array.isRequired,
-        reload: React.PropTypes.func.isRequired
+        clusterInfos: PropTypes.array.isRequired,
+        reload: PropTypes.func.isRequired
     }
 
     render() {

webapp/components/admin_console/connection_security_dropdown_setting.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -114,101 +116,95 @@ const CONNECTION_SECURITY_HELP_TEXT_WEBSERVER = (
     </table>
 );
 
-export class ConnectionSecurityDropdownSettingEmail extends React.Component { //eslint-disable-line react/no-multi-comp
-    render() {
-        return (
-            <DropdownSetting
-                id='connectionSecurity'
-                values={[
-                    {value: '', text: Utils.localizeMessage('admin.connectionSecurityNone', 'None')},
-                    {value: 'PLAIN', text: Utils.localizeMessage('admin.connectionSecurityPlain')},
-                    {value: 'TLS', text: Utils.localizeMessage('admin.connectionSecurityTls', 'TLS (Recommended)')},
-                    {value: 'STARTTLS', text: Utils.localizeMessage('admin.connectionSecurityStart')}
-                ]}
-                label={
-                    <FormattedMessage
-                        id='admin.connectionSecurityTitle'
-                        defaultMessage='Connection Security:'
-                    />
-                }
-                value={this.props.value}
-                onChange={this.props.onChange}
-                disabled={this.props.disabled}
-                helpText={CONNECTION_SECURITY_HELP_TEXT_EMAIL}
-            />
-        );
-    }
+export function ConnectionSecurityDropdownSettingEmail(props) {
+    return (
+        <DropdownSetting
+            id='connectionSecurity'
+            values={[
+                {value: '', text: Utils.localizeMessage('admin.connectionSecurityNone', 'None')},
+                {value: 'PLAIN', text: Utils.localizeMessage('admin.connectionSecurityPlain')},
+                {value: 'TLS', text: Utils.localizeMessage('admin.connectionSecurityTls', 'TLS (Recommended)')},
+                {value: 'STARTTLS', text: Utils.localizeMessage('admin.connectionSecurityStart')}
+            ]}
+            label={
+                <FormattedMessage
+                    id='admin.connectionSecurityTitle'
+                    defaultMessage='Connection Security:'
+                />
+            }
+            value={props.value}
+            onChange={props.onChange}
+            disabled={props.disabled}
+            helpText={CONNECTION_SECURITY_HELP_TEXT_EMAIL}
+        />
+    );
 }
 ConnectionSecurityDropdownSettingEmail.defaultProps = {
 };
 
 ConnectionSecurityDropdownSettingEmail.propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool.isRequired
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool.isRequired
 };
 
-export class ConnectionSecurityDropdownSettingLdap extends React.Component { //eslint-disable-line react/no-multi-comp
-    render() {
-        return (
-            <DropdownSetting
-                id='connectionSecurity'
-                values={[
-                    {value: '', text: Utils.localizeMessage('admin.connectionSecurityNone', 'None')},
-                    {value: 'TLS', text: Utils.localizeMessage('admin.connectionSecurityTls', 'TLS (Recommended)')},
-                    {value: 'STARTTLS', text: Utils.localizeMessage('admin.connectionSecurityStart')}
-                ]}
-                label={
-                    <FormattedMessage
-                        id='admin.connectionSecurityTitle'
-                        defaultMessage='Connection Security:'
-                    />
-                }
-                value={this.props.value}
-                onChange={this.props.onChange}
-                disabled={this.props.disabled}
-                helpText={CONNECTION_SECURITY_HELP_TEXT_LDAP}
-            />
-        );
-    }
+export function ConnectionSecurityDropdownSettingLdap(props) {
+    return (
+        <DropdownSetting
+            id='connectionSecurity'
+            values={[
+                {value: '', text: Utils.localizeMessage('admin.connectionSecurityNone', 'None')},
+                {value: 'TLS', text: Utils.localizeMessage('admin.connectionSecurityTls', 'TLS (Recommended)')},
+                {value: 'STARTTLS', text: Utils.localizeMessage('admin.connectionSecurityStart')}
+            ]}
+            label={
+                <FormattedMessage
+                    id='admin.connectionSecurityTitle'
+                    defaultMessage='Connection Security:'
+                />
+            }
+            value={props.value}
+            onChange={props.onChange}
+            disabled={props.disabled}
+            helpText={CONNECTION_SECURITY_HELP_TEXT_LDAP}
+        />
+    );
 }
 ConnectionSecurityDropdownSettingLdap.defaultProps = {
 };
 
 ConnectionSecurityDropdownSettingLdap.propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool.isRequired
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool.isRequired
 };
 
-export class ConnectionSecurityDropdownSettingWebserver extends React.Component { //eslint-disable-line react/no-multi-comp
-    render() {
-        return (
-            <DropdownSetting
-                id='connectionSecurity'
-                values={[
-                    {value: '', text: Utils.localizeMessage('admin.connectionSecurityNone', 'None')},
-                    {value: 'TLS', text: Utils.localizeMessage('admin.connectionSecurityTls', 'TLS (Recommended)')}
-                ]}
-                label={
-                    <FormattedMessage
-                        id='admin.connectionSecurityTitle'
-                        defaultMessage='Connection Security:'
-                    />
-                }
-                value={this.props.value}
-                onChange={this.props.onChange}
-                disabled={this.props.disabled}
-                helpText={CONNECTION_SECURITY_HELP_TEXT_WEBSERVER}
-            />
-        );
-    }
+export function ConnectionSecurityDropdownSettingWebserver(props) {
+    return (
+        <DropdownSetting
+            id='connectionSecurity'
+            values={[
+                {value: '', text: Utils.localizeMessage('admin.connectionSecurityNone', 'None')},
+                {value: 'TLS', text: Utils.localizeMessage('admin.connectionSecurityTls', 'TLS (Recommended)')}
+            ]}
+            label={
+                <FormattedMessage
+                    id='admin.connectionSecurityTitle'
+                    defaultMessage='Connection Security:'
+                />
+            }
+            value={props.value}
+            onChange={props.onChange}
+            disabled={props.disabled}
+            helpText={CONNECTION_SECURITY_HELP_TEXT_WEBSERVER}
+        />
+    );
 }
 ConnectionSecurityDropdownSettingWebserver.defaultProps = {
 };
 
 ConnectionSecurityDropdownSettingWebserver.propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool.isRequired
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool.isRequired
 };

webapp/components/admin_console/dropdown_setting.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -54,11 +56,11 @@ DropdownSetting.defaultProps = {
 };
 
 DropdownSetting.propTypes = {
-    id: React.PropTypes.string.isRequired,
-    values: React.PropTypes.array.isRequired,
-    label: React.PropTypes.node.isRequired,
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool,
-    helpText: React.PropTypes.node
+    id: PropTypes.string.isRequired,
+    values: PropTypes.array.isRequired,
+    label: PropTypes.node.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    helpText: PropTypes.node
 };

webapp/components/admin_console/email_connection_test.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -12,9 +14,9 @@ import {testEmail} from 'actions/admin_actions.jsx';
 export default class EmailConnectionTestButton extends React.Component {
     static get propTypes() {
         return {
-            config: React.PropTypes.object.isRequired,
-            getConfigFromState: React.PropTypes.func.isRequired,
-            disabled: React.PropTypes.bool.isRequired
+            config: PropTypes.object.isRequired,
+            getConfigFromState: PropTypes.func.isRequired,
+            disabled: PropTypes.bool.isRequired
         };
     }
 

webapp/components/admin_console/file_upload_setting.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -12,14 +13,14 @@ import * as Utils from 'utils/utils.jsx';
 export default class FileUploadSetting extends Setting {
     static get propTypes() {
         return {
-            id: React.PropTypes.string.isRequired,
-            label: React.PropTypes.node.isRequired,
-            helpText: React.PropTypes.node,
-            uploadingText: React.PropTypes.node,
-            onSubmit: React.PropTypes.func.isRequired,
-            disabled: React.PropTypes.bool,
-            fileType: React.PropTypes.string.isRequired,
-            error: React.PropTypes.string
+            id: PropTypes.string.isRequired,
+            label: PropTypes.node.isRequired,
+            helpText: PropTypes.node,
+            uploadingText: PropTypes.node,
+            onSubmit: PropTypes.func.isRequired,
+            disabled: PropTypes.bool,
+            fileType: PropTypes.string.isRequired,
+            error: PropTypes.string
         };
     }
 

webapp/components/admin_console/generated_setting.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -10,15 +12,15 @@ import {FormattedMessage} from 'react-intl';
 export default class GeneratedSetting extends React.Component {
     static get propTypes() {
         return {
-            id: React.PropTypes.string.isRequired,
-            label: React.PropTypes.node.isRequired,
-            placeholder: React.PropTypes.string,
-            value: React.PropTypes.string.isRequired,
-            onChange: React.PropTypes.func.isRequired,
-            disabled: React.PropTypes.bool.isRequired,
-            disabledText: React.PropTypes.node,
-            helpText: React.PropTypes.node.isRequired,
-            regenerateText: React.PropTypes.node
+            id: PropTypes.string.isRequired,
+            label: PropTypes.node.isRequired,
+            placeholder: PropTypes.string,
+            value: PropTypes.string.isRequired,
+            onChange: PropTypes.func.isRequired,
+            disabled: PropTypes.bool.isRequired,
+            disabledText: PropTypes.node,
+            helpText: PropTypes.node.isRequired,
+            regenerateText: PropTypes.node
         };
     }
 

webapp/components/admin_console/ldap_test_button.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -12,9 +14,9 @@ import {ldapTest} from 'actions/admin_actions.jsx';
 export default class LdapTestButton extends React.Component {
     static get propTypes() {
         return {
-            disabled: React.PropTypes.bool,
-            submitFunction: React.PropTypes.func,
-            saveNeeded: React.PropTypes.bool
+            disabled: PropTypes.bool,
+            submitFunction: PropTypes.func,
+            saveNeeded: PropTypes.bool
         };
     }
     constructor(props) {

webapp/components/admin_console/license_settings.jsx

@@ -21,6 +21,8 @@ const holders = defineMessages({
     }
 });
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 class LicenseSettings extends React.Component {
@@ -278,7 +280,7 @@ class LicenseSettings extends React.Component {
 
 LicenseSettings.propTypes = {
     intl: intlShape.isRequired,
-    config: React.PropTypes.object
+    config: PropTypes.object
 };
 
 export default injectIntl(LicenseSettings);

webapp/components/admin_console/manage_teams_modal/manage_teams_dropdown.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -11,11 +13,11 @@ import * as Utils from 'utils/utils.jsx';
 
 export default class ManageTeamsDropdown extends React.Component {
     static propTypes = {
-        user: React.PropTypes.object.isRequired,
-        teamMember: React.PropTypes.object.isRequired,
-        onError: React.PropTypes.func.isRequired,
-        onMemberChange: React.PropTypes.func.isRequired,
-        onMemberRemove: React.PropTypes.func.isRequired
+        user: PropTypes.object.isRequired,
+        teamMember: PropTypes.object.isRequired,
+        onError: PropTypes.func.isRequired,
+        onMemberChange: PropTypes.func.isRequired,
+        onMemberRemove: PropTypes.func.isRequired
     };
 
     constructor(props) {

webapp/components/admin_console/manage_teams_modal/manage_teams_modal.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -19,9 +21,9 @@ import RemoveFromTeamButton from './remove_from_team_button.jsx';
 
 export default class ManageTeamsModal extends React.Component {
     static propTypes = {
-        onModalDismissed: React.PropTypes.func.isRequired,
-        show: React.PropTypes.bool.isRequired,
-        user: React.PropTypes.object
+        onModalDismissed: PropTypes.func.isRequired,
+        show: PropTypes.bool.isRequired,
+        user: PropTypes.object
     };
 
     constructor(props) {

webapp/components/admin_console/manage_teams_modal/remove_from_team_button.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -8,10 +10,10 @@ import {removeUserFromTeam} from 'actions/team_actions.jsx';
 
 export default class RemoveFromTeamButton extends React.PureComponent {
     static propTypes = {
-        onError: React.PropTypes.func.isRequired,
-        onMemberRemove: React.PropTypes.func.isRequired,
-        team: React.PropTypes.object.isRequired,
-        user: React.PropTypes.object.isRequired
+        onError: PropTypes.func.isRequired,
+        onMemberRemove: PropTypes.func.isRequired,
+        team: PropTypes.object.isRequired,
+        user: PropTypes.object.isRequired
     };
 
     constructor(props) {

webapp/components/admin_console/multiselect_settings.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 import React from 'react';
@@ -65,15 +67,15 @@ MultiSelectSetting.defaultProps = {
 };
 
 MultiSelectSetting.propTypes = {
-    id: React.PropTypes.string.isRequired,
-    values: React.PropTypes.array.isRequired,
-    label: React.PropTypes.node.isRequired,
-    selected: React.PropTypes.array.isRequired,
-    mustBePresent: React.PropTypes.string,
-    onChange: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool,
-    helpText: React.PropTypes.node,
-    noResultText: React.PropTypes.node,
-    errorText: React.PropTypes.node,
-    notPresent: React.PropTypes.node
+    id: PropTypes.string.isRequired,
+    values: PropTypes.array.isRequired,
+    label: PropTypes.node.isRequired,
+    selected: PropTypes.array.isRequired,
+    mustBePresent: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    helpText: PropTypes.node,
+    noResultText: PropTypes.node,
+    errorText: PropTypes.node,
+    notPresent: PropTypes.node
 };

webapp/components/admin_console/post_edit_setting.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -88,12 +90,12 @@ PostEditSetting.defaultProps = {
 };
 
 PostEditSetting.propTypes = {
-    id: React.PropTypes.string.isRequired,
-    timeLimitId: React.PropTypes.string.isRequired,
-    label: React.PropTypes.node.isRequired,
-    value: React.PropTypes.string.isRequired,
-    timeLimitValue: React.PropTypes.number.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool,
-    helpText: React.PropTypes.node
+    id: PropTypes.string.isRequired,
+    timeLimitId: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+    value: PropTypes.string.isRequired,
+    timeLimitValue: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    helpText: PropTypes.node
 };

webapp/components/admin_console/radio_setting.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -53,11 +55,11 @@ RadioSetting.defaultProps = {
 };
 
 RadioSetting.propTypes = {
-    id: React.PropTypes.string.isRequired,
-    values: React.PropTypes.array.isRequired,
-    label: React.PropTypes.node.isRequired,
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool,
-    helpText: React.PropTypes.node
+    id: PropTypes.string.isRequired,
+    values: PropTypes.array.isRequired,
+    label: PropTypes.node.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    helpText: PropTypes.node
 };

webapp/components/admin_console/remove_file_setting.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import Setting from './setting.jsx';
@@ -9,14 +10,14 @@ import Setting from './setting.jsx';
 export default class RemoveFileSetting extends Setting {
     static get propTypes() {
         return {
-            id: React.PropTypes.string.isRequired,
-            label: React.PropTypes.node.isRequired,
-            helpText: React.PropTypes.node,
-            removeButtonText: React.PropTypes.node.isRequired,
-            removingText: React.PropTypes.node,
-            fileName: React.PropTypes.string.isRequired,
-            onSubmit: React.PropTypes.func.isRequired,
-            disabled: React.PropTypes.bool
+            id: PropTypes.string.isRequired,
+            label: PropTypes.node.isRequired,
+            helpText: PropTypes.node,
+            removeButtonText: PropTypes.node.isRequired,
+            removingText: PropTypes.node,
+            fileName: PropTypes.string.isRequired,
+            onSubmit: PropTypes.func.isRequired,
+            disabled: PropTypes.bool
         };
     }
 

webapp/components/admin_console/reset_password_modal.jsx

@@ -8,14 +8,16 @@ import {FormattedMessage} from 'react-intl';
 
 import {adminResetPassword} from 'actions/admin_actions.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class ResetPasswordModal extends React.Component {
     static propTypes = {
-        user: React.PropTypes.object,
-        show: React.PropTypes.bool.isRequired,
-        onModalSubmit: React.PropTypes.func,
-        onModalDismissed: React.PropTypes.func
+        user: PropTypes.object,
+        show: PropTypes.bool.isRequired,
+        onModalSubmit: PropTypes.func,
+        onModalDismissed: PropTypes.func
     };
 
     static defaultProps = {

webapp/components/admin_console/save_button.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -8,8 +10,8 @@ import {FormattedMessage} from 'react-intl';
 export default class SaveButton extends React.Component {
     static get propTypes() {
         return {
-            saving: React.PropTypes.bool.isRequired,
-            disabled: React.PropTypes.bool
+            saving: PropTypes.bool.isRequired,
+            disabled: PropTypes.bool
         };
     }
 

webapp/components/admin_console/setting.jsx

@@ -1,34 +1,34 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
 import React from 'react';
 
-export default class Setting extends React.Component {
-    render() {
-        return (
-            <div className='form-group'>
-                <label
-                    className='control-label col-sm-4'
-                    htmlFor={this.props.inputId}
-                >
-                    {this.props.label}
-                </label>
-                <div className='col-sm-8'>
-                    {this.props.children}
-                    <div className='help-text'>
-                        {this.props.helpText}
-                    </div>
+export default function Setting(props) {
+    return (
+        <div className='form-group'>
+            <label
+                className='control-label col-sm-4'
+                htmlFor={props.inputId}
+            >
+                {props.label}
+            </label>
+            <div className='col-sm-8'>
+                {props.children}
+                <div className='help-text'>
+                    {props.helpText}
                 </div>
             </div>
-        );
-    }
+        </div>
+    );
 }
 Setting.defaultProps = {
 };
 
 Setting.propTypes = {
-    inputId: React.PropTypes.string,
-    label: React.PropTypes.node.isRequired,
-    children: React.PropTypes.node.isRequired,
-    helpText: React.PropTypes.node
+    inputId: PropTypes.string,
+    label: PropTypes.node.isRequired,
+    children: PropTypes.node.isRequired,
+    helpText: PropTypes.node
 };

webapp/components/admin_console/settings_group.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -6,9 +8,9 @@ import React from 'react';
 export default class SettingsGroup extends React.Component {
     static get propTypes() {
         return {
-            show: React.PropTypes.bool.isRequired,
-            header: React.PropTypes.node,
-            children: React.PropTypes.node
+            show: PropTypes.bool.isRequired,
+            header: PropTypes.node,
+            children: PropTypes.node
         };
     }
 

webapp/components/admin_console/sync_now_button.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -12,7 +14,7 @@ import {ldapSyncNow} from 'actions/admin_actions.jsx';
 export default class SyncNowButton extends React.Component {
     static get propTypes() {
         return {
-            disabled: React.PropTypes.bool
+            disabled: PropTypes.bool
         };
     }
     constructor(props) {

webapp/components/admin_console/system_users/system_users.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -34,10 +36,10 @@ const USERS_PER_PAGE = 50;
 
 export default class SystemUsers extends React.Component {
     static propTypes = {
-        actions: React.PropTypes.shape({
-            getTeams: React.PropTypes.func.isRequired,
-            getTeamStats: React.PropTypes.func.isRequired,
-            getUser: React.PropTypes.func.isRequired
+        actions: PropTypes.shape({
+            getTeams: PropTypes.func.isRequired,
+            getTeamStats: PropTypes.func.isRequired,
+            getUser: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/admin_console/system_users/system_users_dropdown.jsx

@@ -13,13 +13,15 @@ import {adminResetMfa} from 'actions/admin_actions.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class SystemUsersDropdown extends React.Component {
     static propTypes = {
-        user: React.PropTypes.object.isRequired,
-        doPasswordReset: React.PropTypes.func.isRequired,
-        doManageTeams: React.PropTypes.func.isRequired
+        user: PropTypes.object.isRequired,
+        doPasswordReset: PropTypes.func.isRequired,
+        doManageTeams: PropTypes.func.isRequired
     };
 
     constructor(props) {

webapp/components/admin_console/system_users/system_users_list.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -16,17 +18,17 @@ import SystemUsersDropdown from './system_users_dropdown.jsx';
 
 export default class SystemUsersList extends React.Component {
     static propTypes = {
-        users: React.PropTypes.arrayOf(React.PropTypes.object),
-        usersPerPage: React.PropTypes.number,
-        total: React.PropTypes.number,
-        nextPage: React.PropTypes.func,
-        search: React.PropTypes.func.isRequired,
-        focusOnMount: React.PropTypes.bool,
-        renderFilterRow: React.PropTypes.func,
+        users: PropTypes.arrayOf(PropTypes.object),
+        usersPerPage: PropTypes.number,
+        total: PropTypes.number,
+        nextPage: PropTypes.func,
+        search: PropTypes.func.isRequired,
+        focusOnMount: PropTypes.bool,
+        renderFilterRow: PropTypes.func,
 
-        teamId: React.PropTypes.string.isRequired,
-        term: React.PropTypes.string.isRequired,
-        onTermChange: React.PropTypes.func.isRequired
+        teamId: PropTypes.string.isRequired,
+        term: PropTypes.string.isRequired,
+        onTermChange: PropTypes.func.isRequired
     };
 
     constructor(props) {

webapp/components/admin_console/text_setting.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -9,18 +11,18 @@ import Constants from 'utils/constants.jsx';
 export default class TextSetting extends React.Component {
     static get propTypes() {
         return {
-            id: React.PropTypes.string.isRequired,
-            label: React.PropTypes.node.isRequired,
-            placeholder: React.PropTypes.string,
-            helpText: React.PropTypes.node,
-            value: React.PropTypes.oneOfType([
-                React.PropTypes.string,
-                React.PropTypes.number
+            id: PropTypes.string.isRequired,
+            label: PropTypes.node.isRequired,
+            placeholder: PropTypes.string,
+            helpText: PropTypes.node,
+            value: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number
             ]).isRequired,
-            maxLength: React.PropTypes.number,
-            onChange: React.PropTypes.func,
-            disabled: React.PropTypes.bool,
-            type: React.PropTypes.oneOf([
+            maxLength: PropTypes.number,
+            onChange: PropTypes.func,
+            disabled: PropTypes.bool,
+            type: PropTypes.oneOf([
                 'input',
                 'textarea'
             ])

webapp/components/admin_console/webserver_mode_dropdown_setting.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -67,35 +69,33 @@ const WEBSERVER_MODE_HELP_TEXT = (
     </div>
 );
 
-export default class WebserverModeDropdownSetting extends React.Component {
-    render() {
-        return (
-            <DropdownSetting
-                id='webserverMode'
-                values={[
-                    {value: 'gzip', text: Utils.localizeMessage('admin.webserverModeGzip', 'gzip')},
-                    {value: 'uncompressed', text: Utils.localizeMessage('admin.webserverModeUncompressed', 'Uncompressed')},
-                    {value: 'disabled', text: Utils.localizeMessage('admin.webserverModeDisabled', 'Disabled')}
-                ]}
-                label={
-                    <FormattedMessage
-                        id='admin.webserverModeTitle'
-                        defaultMessage='Webserver Mode:'
-                    />
-                }
-                value={this.props.value}
-                onChange={this.props.onChange}
-                disabled={this.props.disabled}
-                helpText={WEBSERVER_MODE_HELP_TEXT}
-            />
-        );
-    }
+export default function WebserverModeDropdownSetting(props) {
+    return (
+        <DropdownSetting
+            id='webserverMode'
+            values={[
+                {value: 'gzip', text: Utils.localizeMessage('admin.webserverModeGzip', 'gzip')},
+                {value: 'uncompressed', text: Utils.localizeMessage('admin.webserverModeUncompressed', 'Uncompressed')},
+                {value: 'disabled', text: Utils.localizeMessage('admin.webserverModeDisabled', 'Disabled')}
+            ]}
+            label={
+                <FormattedMessage
+                    id='admin.webserverModeTitle'
+                    defaultMessage='Webserver Mode:'
+                />
+            }
+            value={props.value}
+            onChange={props.onChange}
+            disabled={props.disabled}
+            helpText={WEBSERVER_MODE_HELP_TEXT}
+        />
+    );
 }
 WebserverModeDropdownSetting.defaultProps = {
 };
 
 WebserverModeDropdownSetting.propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    disabled: React.PropTypes.bool.isRequired
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool.isRequired
 };

webapp/components/analytics/doughnut_chart.jsx

@@ -5,6 +5,8 @@ import {FormattedMessage} from 'react-intl';
 
 import * as Utils from 'utils/utils.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Chart from 'chart.js';
@@ -80,9 +82,9 @@ export default class DoughnutChart extends React.Component {
 }
 
 DoughnutChart.propTypes = {
-    title: React.PropTypes.node,
-    width: React.PropTypes.string,
-    height: React.PropTypes.string,
-    data: React.PropTypes.object,
-    options: React.PropTypes.object
+    title: PropTypes.node,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    data: PropTypes.object,
+    options: PropTypes.object
 };

webapp/components/analytics/line_chart.jsx

@@ -5,6 +5,8 @@ import {FormattedMessage} from 'react-intl';
 
 import * as Utils from 'utils/utils.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Chart from 'chart.js';
@@ -110,10 +112,10 @@ export default class LineChart extends React.Component {
 }
 
 LineChart.propTypes = {
-    title: React.PropTypes.node.isRequired,
-    width: React.PropTypes.string.isRequired,
-    height: React.PropTypes.string.isRequired,
-    data: React.PropTypes.object,
-    options: React.PropTypes.object
+    title: PropTypes.node.isRequired,
+    width: PropTypes.string.isRequired,
+    height: PropTypes.string.isRequired,
+    data: PropTypes.object,
+    options: PropTypes.object
 };
 

webapp/components/analytics/statistic_count.jsx

@@ -3,33 +3,33 @@
 
 import {FormattedMessage} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
-export default class StatisticCount extends React.Component {
-    render() {
-        const loading = (
-            <FormattedMessage
-                id='analytics.chart.loading'
-                defaultMessage='Loading...'
-            />
-        );
+export default function StatisticCount(props) {
+    const loading = (
+        <FormattedMessage
+            id='analytics.chart.loading'
+            defaultMessage='Loading...'
+        />
+    );
 
-        return (
-            <div className='col-md-3 col-sm-6'>
-                <div className='total-count'>
-                    <div className='title'>
-                        {this.props.title}
-                        <i className={'fa ' + this.props.icon}/>
-                    </div>
-                    <div className='content'>{this.props.count == null ? loading : this.props.count}</div>
+    return (
+        <div className='col-md-3 col-sm-6'>
+            <div className='total-count'>
+                <div className='title'>
+                    {props.title}
+                    <i className={'fa ' + props.icon}/>
                 </div>
+                <div className='content'>{props.count == null ? loading : props.count}</div>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 StatisticCount.propTypes = {
-    title: React.PropTypes.node.isRequired,
-    icon: React.PropTypes.string.isRequired,
-    count: React.PropTypes.number
+    title: PropTypes.node.isRequired,
+    icon: PropTypes.string.isRequired,
+    count: PropTypes.number
 };

webapp/components/analytics/table_chart.jsx

@@ -5,57 +5,57 @@ import Constants from 'utils/constants.jsx';
 
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
-export default class TableChart extends React.Component {
-    render() {
-        return (
-            <div className='col-sm-6'>
-                <div className='total-count recent-active-users'>
-                    <div className='title'>
-                        {this.props.title}
-                    </div>
-                    <div className='content'>
-                        <table>
-                            <tbody>
-                                {
-                                    this.props.data.map((item) => {
-                                        const tooltip = (
-                                            <Tooltip id={'tip-table-entry-' + item.name}>
-                                                {item.tip}
-                                            </Tooltip>
-                                        );
+export default function TableChart(props) {
+    return (
+        <div className='col-sm-6'>
+            <div className='total-count recent-active-users'>
+                <div className='title'>
+                    {props.title}
+                </div>
+                <div className='content'>
+                    <table>
+                        <tbody>
+                            {
+                                props.data.map((item) => {
+                                    const tooltip = (
+                                        <Tooltip id={'tip-table-entry-' + item.name}>
+                                            {item.tip}
+                                        </Tooltip>
+                                    );
 
-                                        return (
-                                            <tr key={'table-entry-' + item.name}>
-                                                <td>
-                                                    <OverlayTrigger
-                                                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                                                        placement='top'
-                                                        overlay={tooltip}
-                                                    >
-                                                        <time>
-                                                            {item.name}
-                                                        </time>
-                                                    </OverlayTrigger>
-                                                </td>
-                                                <td>
-                                                    {item.value}
-                                                </td>
-                                            </tr>
-                                        );
-                                    })
-                                }
-                            </tbody>
-                        </table>
-                    </div>
+                                    return (
+                                        <tr key={'table-entry-' + item.name}>
+                                            <td>
+                                                <OverlayTrigger
+                                                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                                                    placement='top'
+                                                    overlay={tooltip}
+                                                >
+                                                    <time>
+                                                        {item.name}
+                                                    </time>
+                                                </OverlayTrigger>
+                                            </td>
+                                            <td>
+                                                {item.value}
+                                            </td>
+                                        </tr>
+                                    );
+                                })
+                            }
+                        </tbody>
+                    </table>
                 </div>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 TableChart.propTypes = {
-    title: React.PropTypes.node,
-    data: React.PropTypes.array
+    title: PropTypes.node,
+    data: PropTypes.array
 };

webapp/components/analytics/team_analytics/team_analytics.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -24,8 +26,8 @@ const LAST_ANALYTICS_TEAM = 'last_analytics_team';
 
 export default class TeamAnalytics extends React.Component {
     static propTypes = {
-        actions: React.PropTypes.shape({
-            getTeams: React.PropTypes.func.isRequired
+        actions: PropTypes.shape({
+            getTeams: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/audio_video_preview.jsx

@@ -7,6 +7,8 @@ import Constants from 'utils/constants.jsx';
 import FileInfoPreview from './file_info_preview.jsx';
 import * as Utils from 'utils/utils.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class AudioVideoPreview extends React.Component {
@@ -109,6 +111,6 @@ export default class AudioVideoPreview extends React.Component {
 }
 
 AudioVideoPreview.propTypes = {
-    fileInfo: React.PropTypes.object.isRequired,
-    fileUrl: React.PropTypes.string.isRequired
+    fileInfo: PropTypes.object.isRequired,
+    fileUrl: PropTypes.string.isRequired
 };

webapp/components/audit_table.jsx

@@ -206,129 +206,129 @@ const holders = defineMessages({
     }
 });
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
-class AuditTable extends React.Component {
-    render() {
-        var accessList = [];
+function AuditTable(props) {
+    var accessList = [];
 
-        const {formatMessage} = this.props.intl;
-        for (var i = 0; i < this.props.audits.length; i++) {
-            const audit = this.props.audits[i];
-            const auditInfo = formatAuditInfo(audit, formatMessage);
+    const {formatMessage} = props.intl;
+    for (var i = 0; i < props.audits.length; i++) {
+        const audit = props.audits[i];
+        const auditInfo = formatAuditInfo(audit, formatMessage);
 
-            let uContent;
-            if (this.props.showUserId) {
-                var profile = UserStore.getProfile(auditInfo.userId);
-                if (profile) {
-                    uContent = <td className='word-break--all'>{profile.email}</td>;
-                } else {
-                    uContent = <td className='word-break--all'>{auditInfo.userId}</td>;
-                }
+        let uContent;
+        if (props.showUserId) {
+            var profile = UserStore.getProfile(auditInfo.userId);
+            if (profile) {
+                uContent = <td className='word-break--all'>{profile.email}</td>;
+            } else {
+                uContent = <td className='word-break--all'>{auditInfo.userId}</td>;
             }
-
-            let iContent;
-            if (this.props.showIp) {
-                iContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.ip}</td>;
-            }
-
-            let sContent;
-            if (this.props.showSession) {
-                sContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.sessionId}</td>;
-            }
-
-            const descStyle = {};
-            if (auditInfo.desc.toLowerCase().indexOf('fail') !== -1) {
-                descStyle.color = 'red';
-            }
-
-            accessList[i] = (
-                <tr key={audit.id}>
-                    <td className='whitespace--nowrap word-break--all'>{auditInfo.timestamp}</td>
-                    {uContent}
-                    <td
-                        className='word-break--all'
-                        style={descStyle}
-                    >
-                        {auditInfo.desc}
-                    </td>
-                    {iContent}
-                    {sContent}
-                </tr>
-            );
         }
 
-        let userIdContent;
-        if (this.props.showUserId) {
-            userIdContent = (
-                <th>
-                    <FormattedMessage
-                        id='audit_table.userId'
-                        defaultMessage='User ID'
-                    />
-                </th>
-            );
+        let iContent;
+        if (props.showIp) {
+            iContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.ip}</td>;
         }
 
-        let ipContent;
-        if (this.props.showIp) {
-            ipContent = (
-                <th>
-                    <FormattedMessage
-                        id='audit_table.ip'
-                        defaultMessage='IP Address'
-                    />
-                </th>
-            );
+        let sContent;
+        if (props.showSession) {
+            sContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.sessionId}</td>;
         }
 
-        let sessionContent;
-        if (this.props.showSession) {
-            sessionContent = (
-                <th>
-                    <FormattedMessage
-                        id='audit_table.session'
-                        defaultMessage='Session ID'
-                    />
-                </th>
-            );
+        const descStyle = {};
+        if (auditInfo.desc.toLowerCase().indexOf('fail') !== -1) {
+            descStyle.color = 'red';
         }
 
-        return (
-            <table className='table'>
-                <thead>
-                    <tr>
-                        <th>
-                            <FormattedMessage
-                                id='audit_table.timestamp'
-                                defaultMessage='Timestamp'
-                            />
-                        </th>
-                        {userIdContent}
-                        <th>
-                            <FormattedMessage
-                                id='audit_table.action'
-                                defaultMessage='Action'
-                            />
-                        </th>
-                        {ipContent}
-                        {sessionContent}
-                    </tr>
-                </thead>
-                <tbody>
-                    {accessList}
-                </tbody>
-            </table>
+        accessList[i] = (
+            <tr key={audit.id}>
+                <td className='whitespace--nowrap word-break--all'>{auditInfo.timestamp}</td>
+                {uContent}
+                <td
+                    className='word-break--all'
+                    style={descStyle}
+                >
+                    {auditInfo.desc}
+                </td>
+                {iContent}
+                {sContent}
+            </tr>
         );
     }
+
+    let userIdContent;
+    if (props.showUserId) {
+        userIdContent = (
+            <th>
+                <FormattedMessage
+                    id='audit_table.userId'
+                    defaultMessage='User ID'
+                />
+            </th>
+        );
+    }
+
+    let ipContent;
+    if (props.showIp) {
+        ipContent = (
+            <th>
+                <FormattedMessage
+                    id='audit_table.ip'
+                    defaultMessage='IP Address'
+                />
+            </th>
+        );
+    }
+
+    let sessionContent;
+    if (props.showSession) {
+        sessionContent = (
+            <th>
+                <FormattedMessage
+                    id='audit_table.session'
+                    defaultMessage='Session ID'
+                />
+            </th>
+        );
+    }
+
+    return (
+        <table className='table'>
+            <thead>
+                <tr>
+                    <th>
+                        <FormattedMessage
+                            id='audit_table.timestamp'
+                            defaultMessage='Timestamp'
+                        />
+                    </th>
+                    {userIdContent}
+                    <th>
+                        <FormattedMessage
+                            id='audit_table.action'
+                            defaultMessage='Action'
+                        />
+                    </th>
+                    {ipContent}
+                    {sessionContent}
+                </tr>
+            </thead>
+            <tbody>
+                {accessList}
+            </tbody>
+        </table>
+    );
 }
 
 AuditTable.propTypes = {
     intl: intlShape.isRequired,
-    audits: React.PropTypes.array.isRequired,
-    showUserId: React.PropTypes.bool,
-    showIp: React.PropTypes.bool,
-    showSession: React.PropTypes.bool
+    audits: PropTypes.array.isRequired,
+    showUserId: PropTypes.bool,
+    showIp: PropTypes.bool,
+    showSession: PropTypes.bool
 };
 
 export default injectIntl(AuditTable);

webapp/components/authorize.jsx

@@ -4,6 +4,7 @@
 import FormError from 'components/form_error.jsx';
 
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import icon50 from 'images/icon50x50.png';
@@ -13,8 +14,8 @@ import {getOAuthAppInfo, allowOAuth2} from 'actions/admin_actions.jsx';
 export default class Authorize extends React.Component {
     static get propTypes() {
         return {
-            location: React.PropTypes.object.isRequired,
-            params: React.PropTypes.object.isRequired
+            location: PropTypes.object.isRequired,
+            params: PropTypes.object.isRequired
         };
     }
 

webapp/components/autosize_textarea.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -5,9 +7,9 @@ import React from 'react';
 
 export default class AutosizeTextarea extends React.Component {
     static propTypes = {
-        value: React.PropTypes.string,
-        placeholder: React.PropTypes.string,
-        onHeightChange: React.PropTypes.func
+        value: PropTypes.string,
+        placeholder: PropTypes.string,
+        onHeightChange: PropTypes.func
     }
 
     constructor(props) {

webapp/components/backstage/backstage_controller.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -13,8 +15,8 @@ import ErrorBar from 'components/error_bar.jsx';
 export default class BackstageController extends React.Component {
     static get propTypes() {
         return {
-            user: React.PropTypes.object,
-            children: React.PropTypes.node.isRequired
+            user: PropTypes.object,
+            children: PropTypes.node.isRequired
         };
     }
 

webapp/components/backstage/components/backstage_category.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -8,11 +10,11 @@ import {Link} from 'react-router/es6';
 export default class BackstageCategory extends React.Component {
     static get propTypes() {
         return {
-            name: React.PropTypes.string.isRequired,
-            title: React.PropTypes.node.isRequired,
-            icon: React.PropTypes.string.isRequired,
-            parentLink: React.PropTypes.string,
-            children: React.PropTypes.arrayOf(React.PropTypes.element)
+            name: PropTypes.string.isRequired,
+            title: PropTypes.node.isRequired,
+            icon: PropTypes.string.isRequired,
+            parentLink: PropTypes.string,
+            children: PropTypes.arrayOf(PropTypes.element)
         };
     }
 
@@ -25,7 +27,7 @@ export default class BackstageCategory extends React.Component {
 
     static get contextTypes() {
         return {
-            router: React.PropTypes.object.isRequired
+            router: PropTypes.object.isRequired
         };
     }
 

webapp/components/backstage/components/backstage_header.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -6,7 +8,7 @@ import React from 'react';
 export default class BackstageHeader extends React.Component {
     static get propTypes() {
         return {
-            children: React.PropTypes.node
+            children: PropTypes.node
         };
     }
 

webapp/components/backstage/components/backstage_list.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -10,14 +12,14 @@ import LoadingScreen from 'components/loading_screen.jsx';
 
 export default class BackstageList extends React.Component {
     static propTypes = {
-        children: React.PropTypes.node,
-        header: React.PropTypes.node.isRequired,
-        addLink: React.PropTypes.string,
-        addText: React.PropTypes.node,
-        emptyText: React.PropTypes.node,
-        helpText: React.PropTypes.node,
-        loading: React.PropTypes.bool.isRequired,
-        searchPlaceholder: React.PropTypes.string
+        children: PropTypes.node,
+        header: PropTypes.node.isRequired,
+        addLink: PropTypes.string,
+        addText: PropTypes.node,
+        emptyText: PropTypes.node,
+        helpText: PropTypes.node,
+        loading: PropTypes.bool.isRequired,
+        searchPlaceholder: PropTypes.string
     }
 
     static defaultProps = {

webapp/components/backstage/components/backstage_navbar.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -9,7 +11,7 @@ import {Link} from 'react-router/es6';
 export default class BackstageNavbar extends React.Component {
     static get propTypes() {
         return {
-            team: React.PropTypes.object.isRequired
+            team: PropTypes.object.isRequired
         };
     }
 

webapp/components/backstage/components/backstage_section.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -8,11 +10,11 @@ import {Link} from 'react-router/es6';
 export default class BackstageSection extends React.Component {
     static get propTypes() {
         return {
-            name: React.PropTypes.string.isRequired,
-            title: React.PropTypes.node.isRequired,
-            parentLink: React.PropTypes.string,
-            subsection: React.PropTypes.bool,
-            children: React.PropTypes.arrayOf(React.PropTypes.element)
+            name: PropTypes.string.isRequired,
+            title: PropTypes.node.isRequired,
+            parentLink: PropTypes.string,
+            subsection: PropTypes.bool,
+            children: PropTypes.arrayOf(PropTypes.element)
         };
     }
 
@@ -26,7 +28,7 @@ export default class BackstageSection extends React.Component {
 
     static get contextTypes() {
         return {
-            router: React.PropTypes.object.isRequired
+            router: PropTypes.object.isRequired
         };
     }
 

webapp/components/backstage/components/backstage_sidebar.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -13,8 +15,8 @@ import {FormattedMessage} from 'react-intl';
 export default class BackstageSidebar extends React.Component {
     static get propTypes() {
         return {
-            team: React.PropTypes.object.isRequired,
-            user: React.PropTypes.object.isRequired
+            team: PropTypes.object.isRequired,
+            user: PropTypes.object.isRequired
         };
     }
 

webapp/components/change_url_modal.jsx

@@ -9,6 +9,8 @@ import * as URL from 'utils/url.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class ChangeUrlModal extends React.Component {
@@ -234,12 +236,12 @@ ChangeUrlModal.defaultProps = {
 };
 
 ChangeUrlModal.propTypes = {
-    show: React.PropTypes.bool.isRequired,
-    title: React.PropTypes.node,
-    submitButtonText: React.PropTypes.node,
-    currentURL: React.PropTypes.string,
-    serverError: React.PropTypes.node,
-    onModalSubmit: React.PropTypes.func.isRequired,
-    onModalExited: React.PropTypes.func,
-    onModalDismissed: React.PropTypes.func.isRequired
+    show: PropTypes.bool.isRequired,
+    title: PropTypes.node,
+    submitButtonText: PropTypes.node,
+    currentURL: PropTypes.string,
+    serverError: PropTypes.node,
+    onModalSubmit: PropTypes.func.isRequired,
+    onModalExited: PropTypes.func,
+    onModalDismissed: PropTypes.func.isRequired
 };

webapp/components/channel_header.jsx

@@ -37,6 +37,8 @@ import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 
 import {Constants, Preferences, UserStatuses, ActionTypes} from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Tooltip, OverlayTrigger, Popover} from 'react-bootstrap';
@@ -948,5 +950,5 @@ export default class ChannelHeader extends React.Component {
 }
 
 ChannelHeader.propTypes = {
-    channelId: React.PropTypes.string.isRequired
+    channelId: PropTypes.string.isRequired
 };

webapp/components/channel_info_modal.jsx

@@ -9,6 +9,8 @@ import {Modal} from 'react-bootstrap';
 import TeamStore from 'stores/team_store.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class ChannelInfoModal extends React.Component {
@@ -137,6 +139,6 @@ export default class ChannelInfoModal extends React.Component {
 }
 
 ChannelInfoModal.propTypes = {
-    onHide: React.PropTypes.func.isRequired,
-    channel: React.PropTypes.object.isRequired
+    onHide: PropTypes.func.isRequired,
+    channel: PropTypes.object.isRequired
 };

webapp/components/channel_invite_button.jsx

@@ -5,15 +5,17 @@ import SpinnerButton from 'components/spinner_button.jsx';
 
 import {addUserToChannel} from 'actions/channel_actions.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 export default class ChannelInviteButton extends React.Component {
     static get propTypes() {
         return {
-            user: React.PropTypes.object.isRequired,
-            channel: React.PropTypes.object.isRequired,
-            onInviteError: React.PropTypes.func.isRequired
+            user: PropTypes.object.isRequired,
+            channel: PropTypes.object.isRequired,
+            onInviteError: PropTypes.func.isRequired
         };
     }
 

webapp/components/channel_invite_modal/channel_invite_modal.jsx

@@ -14,6 +14,8 @@ import {searchUsers} from 'actions/user_actions.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 import Constants from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
@@ -25,11 +27,11 @@ const USERS_PER_PAGE = 50;
 
 export default class ChannelInviteModal extends React.Component {
     static propTypes = {
-        onHide: React.PropTypes.func.isRequired,
-        channel: React.PropTypes.object.isRequired,
-        actions: React.PropTypes.shape({
-            getProfilesNotInChannel: React.PropTypes.func.isRequired,
-            getTeamStats: React.PropTypes.func.isRequired
+        onHide: PropTypes.func.isRequired,
+        channel: PropTypes.object.isRequired,
+        actions: PropTypes.shape({
+            getProfilesNotInChannel: PropTypes.func.isRequired,
+            getTeamStats: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/channel_members_dropdown/channel_members_dropdown.jsx

@@ -11,17 +11,19 @@ import * as Utils from 'utils/utils.jsx';
 import {canManageMembers} from 'utils/channel_utils.jsx';
 import {Constants} from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 export default class ChannelMembersDropdown extends React.Component {
     static propTypes = {
-        channel: React.PropTypes.object.isRequired,
-        user: React.PropTypes.object.isRequired,
-        teamMember: React.PropTypes.object.isRequired,
-        channelMember: React.PropTypes.object.isRequired,
-        actions: React.PropTypes.shape({
-            getChannelStats: React.PropTypes.func.isRequired
+        channel: PropTypes.object.isRequired,
+        user: PropTypes.object.isRequired,
+        teamMember: PropTypes.object.isRequired,
+        channelMember: PropTypes.object.isRequired,
+        actions: PropTypes.shape({
+            getChannelStats: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/channel_members_modal.jsx

@@ -10,6 +10,8 @@ import ChannelStore from 'stores/channel_store.jsx';
 import {canManageMembers} from 'utils/channel_utils.jsx';
 import {Constants} from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
@@ -87,7 +89,7 @@ export default class ChannelMembersModal extends React.Component {
 }
 
 ChannelMembersModal.propTypes = {
-    onModalDismissed: React.PropTypes.func.isRequired,
-    showInviteModal: React.PropTypes.func.isRequired,
-    channel: React.PropTypes.object.isRequired
+    onModalDismissed: PropTypes.func.isRequired,
+    showInviteModal: PropTypes.func.isRequired,
+    channel: PropTypes.object.isRequired
 };

webapp/components/channel_notifications_modal.jsx

@@ -5,6 +5,7 @@ import SettingItemMin from 'components/setting_item_min.jsx';
 import SettingItemMax from 'components/setting_item_max.jsx';
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
@@ -643,8 +644,8 @@ export default class ChannelNotificationsModal extends React.Component {
 }
 
 ChannelNotificationsModal.propTypes = {
-    onHide: React.PropTypes.func.isRequired,
-    channel: React.PropTypes.object.isRequired,
-    channelMember: React.PropTypes.object.isRequired,
-    currentUser: React.PropTypes.object.isRequired
+    onHide: PropTypes.func.isRequired,
+    channel: PropTypes.object.isRequired,
+    channelMember: PropTypes.object.isRequired,
+    currentUser: PropTypes.object.isRequired
 };

webapp/components/channel_select.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -11,11 +13,11 @@ import {sortChannelsByDisplayName} from 'utils/channel_utils.jsx';
 export default class ChannelSelect extends React.Component {
     static get propTypes() {
         return {
-            onChange: React.PropTypes.func,
-            value: React.PropTypes.string,
-            selectOpen: React.PropTypes.bool.isRequired,
-            selectPrivate: React.PropTypes.bool.isRequired,
-            selectDm: React.PropTypes.bool.isRequired
+            onChange: PropTypes.func,
+            value: PropTypes.string,
+            selectOpen: PropTypes.bool.isRequired,
+            selectPrivate: PropTypes.bool.isRequired,
+            selectDm: PropTypes.bool.isRequired
         };
     }
 

webapp/components/channel_switch_modal.jsx

@@ -16,6 +16,8 @@ import UserStore from 'stores/user_store.jsx';
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import $ from 'jquery';
 
@@ -206,7 +208,7 @@ export default class SwitchChannelModal extends React.Component {
 }
 
 SwitchChannelModal.propTypes = {
-    show: React.PropTypes.bool.isRequired,
-    onHide: React.PropTypes.func.isRequired
+    show: PropTypes.bool.isRequired,
+    onHide: PropTypes.func.isRequired
 };
 

webapp/components/channel_view.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import * as UserAgent from 'utils/user_agent.jsx';
@@ -91,5 +92,5 @@ ChannelView.defaultProps = {
 };
 
 ChannelView.propTypes = {
-    params: React.PropTypes.object.isRequired
+    params: PropTypes.object.isRequired
 };

webapp/components/claim/claim_controller.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -54,6 +56,6 @@ export default class ClaimController extends React.Component {
 ClaimController.defaultProps = {
 };
 ClaimController.propTypes = {
-    location: React.PropTypes.object.isRequired,
-    children: React.PropTypes.node
+    location: PropTypes.object.isRequired,
+    children: PropTypes.node
 };

webapp/components/claim/components/email_to_ldap.jsx

@@ -8,6 +8,8 @@ import * as Utils from 'utils/utils.jsx';
 import {checkMfa} from 'actions/user_actions.jsx';
 import {emailToLdap} from 'actions/admin_actions.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -253,5 +255,5 @@ export default class EmailToLDAP extends React.Component {
 EmailToLDAP.defaultProps = {
 };
 EmailToLDAP.propTypes = {
-    email: React.PropTypes.string
+    email: PropTypes.string
 };

webapp/components/claim/components/email_to_oauth.jsx

@@ -9,6 +9,8 @@ import Constants from 'utils/constants.jsx';
 import {checkMfa} from 'actions/user_actions.jsx';
 import {emailToOAuth} from 'actions/admin_actions.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
@@ -171,6 +173,6 @@ export default class EmailToOAuth extends React.Component {
 EmailToOAuth.defaultProps = {
 };
 EmailToOAuth.propTypes = {
-    newType: React.PropTypes.string,
-    email: React.PropTypes.string
+    newType: PropTypes.string,
+    email: PropTypes.string
 };

webapp/components/claim/components/ldap_to_email.jsx

@@ -7,6 +7,8 @@ import * as Utils from 'utils/utils.jsx';
 
 import {checkMfa, switchFromLdapToEmail} from 'actions/user_actions.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -240,5 +242,5 @@ export default class LDAPToEmail extends React.Component {
 LDAPToEmail.defaultProps = {
 };
 LDAPToEmail.propTypes = {
-    email: React.PropTypes.string
+    email: PropTypes.string
 };

webapp/components/claim/components/oauth_to_email.jsx

@@ -4,6 +4,8 @@
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
@@ -139,6 +141,6 @@ export default class OAuthToEmail extends React.Component {
 OAuthToEmail.defaultProps = {
 };
 OAuthToEmail.propTypes = {
-    currentType: React.PropTypes.string,
-    email: React.PropTypes.string
+    currentType: PropTypes.string,
+    email: PropTypes.string
 };

webapp/components/code_preview.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import * as SyntaxHighlighting from 'utils/syntax_highlighting.jsx';
@@ -136,6 +137,6 @@ export default class CodePreview extends React.Component {
 }
 
 CodePreview.propTypes = {
-    fileInfo: React.PropTypes.object.isRequired,
-    fileUrl: React.PropTypes.string.isRequired
+    fileInfo: PropTypes.object.isRequired,
+    fileUrl: PropTypes.string.isRequired
 };

webapp/components/common/comment_icon.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -41,11 +43,11 @@ export default function CommentIcon(props) {
 }
 
 CommentIcon.propTypes = {
-    idPrefix: React.PropTypes.string.isRequired,
-    idCount: React.PropTypes.number,
-    handleCommentClick: React.PropTypes.func.isRequired,
-    searchStyle: React.PropTypes.string,
-    commentCount: React.PropTypes.number
+    idPrefix: PropTypes.string.isRequired,
+    idCount: PropTypes.number,
+    handleCommentClick: PropTypes.func.isRequired,
+    searchStyle: PropTypes.string,
+    commentCount: PropTypes.number
 };
 
 CommentIcon.defaultProps = {

webapp/components/common/post_flag_icon.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -72,11 +74,11 @@ export default function PostFlagIcon(props) {
 }
 
 PostFlagIcon.propTypes = {
-    idPrefix: React.PropTypes.string.isRequired,
-    idCount: React.PropTypes.number,
-    postId: React.PropTypes.string.isRequired,
-    isFlagged: React.PropTypes.bool.isRequired,
-    isEphemeral: React.PropTypes.bool
+    idPrefix: PropTypes.string.isRequired,
+    idCount: PropTypes.number,
+    postId: PropTypes.string.isRequired,
+    isFlagged: PropTypes.bool.isRequired,
+    isEphemeral: PropTypes.bool
 };
 
 PostFlagIcon.defaultProps = {

webapp/components/confirm_modal.jsx

@@ -4,6 +4,8 @@
 import {FormattedMessage} from 'react-intl';
 import {Modal} from 'react-bootstrap';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class ConfirmModal extends React.Component {
@@ -71,11 +73,11 @@ ConfirmModal.defaultProps = {
     confirmButton: ''
 };
 ConfirmModal.propTypes = {
-    show: React.PropTypes.bool.isRequired,
-    title: React.PropTypes.node,
-    message: React.PropTypes.node,
-    confirmButtonClass: React.PropTypes.string,
-    confirmButton: React.PropTypes.node,
-    onConfirm: React.PropTypes.func.isRequired,
-    onCancel: React.PropTypes.func.isRequired
+    show: PropTypes.bool.isRequired,
+    title: PropTypes.node,
+    message: PropTypes.node,
+    confirmButtonClass: PropTypes.string,
+    confirmButton: PropTypes.node,
+    onConfirm: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired
 };

webapp/components/create_comment.jsx

@@ -30,6 +30,7 @@ const ActionTypes = Constants.ActionTypes;
 const KeyCodes = Constants.KeyCodes;
 
 import {REACTION_PATTERN, EMOJI_PATTERN} from './create_post.jsx';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 export default class CreateComment extends React.Component {
@@ -659,7 +660,7 @@ export default class CreateComment extends React.Component {
 }
 
 CreateComment.propTypes = {
-    channelId: React.PropTypes.string.isRequired,
-    rootId: React.PropTypes.string.isRequired,
-    latestPostId: React.PropTypes.string
+    channelId: PropTypes.string.isRequired,
+    rootId: PropTypes.string.isRequired,
+    latestPostId: PropTypes.string
 };

webapp/components/create_team/components/display_name.jsx

@@ -8,6 +8,8 @@ import {cleanUpUrlable} from 'utils/url.jsx';
 
 import logoImage from 'images/logo.png';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
@@ -124,6 +126,6 @@ export default class TeamSignupDisplayNamePage extends React.Component {
 }
 
 TeamSignupDisplayNamePage.propTypes = {
-    state: React.PropTypes.object,
-    updateParent: React.PropTypes.func
+    state: PropTypes.object,
+    updateParent: PropTypes.func
 };

webapp/components/create_team/components/team_url.jsx

@@ -8,6 +8,8 @@ import * as URL from 'utils/url.jsx';
 
 import logoImage from 'images/logo.png';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {Button, Tooltip, OverlayTrigger} from 'react-bootstrap';
@@ -242,6 +244,6 @@ export default class TeamUrl extends React.Component {
 }
 
 TeamUrl.propTypes = {
-    state: React.PropTypes.object,
-    updateParent: React.PropTypes.func
+    state: PropTypes.object,
+    updateParent: PropTypes.func
 };

webapp/components/create_team/create_team_controller.jsx

@@ -8,6 +8,8 @@ import TeamStore from 'stores/team_store.jsx';
 import {FormattedMessage} from 'react-intl';
 import {browserHistory, Link} from 'react-router/es6';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class CreateTeamController extends React.Component {
@@ -90,5 +92,5 @@ export default class CreateTeamController extends React.Component {
 }
 
 CreateTeamController.propTypes = {
-    children: React.PropTypes.node
+    children: PropTypes.node
 };

webapp/components/delete_channel_modal.jsx

@@ -8,6 +8,8 @@ import {FormattedMessage} from 'react-intl';
 
 import {browserHistory} from 'react-router/es6';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 import {deleteChannel} from 'actions/channel_actions.jsx';
@@ -99,6 +101,6 @@ export default class DeleteChannelModal extends React.Component {
 }
 
 DeleteChannelModal.propTypes = {
-    onHide: React.PropTypes.func.isRequired,
-    channel: React.PropTypes.object.isRequired
+    onHide: PropTypes.func.isRequired,
+    channel: PropTypes.object.isRequired
 };

webapp/components/delete_modal_trigger.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import ConfirmModal from './confirm_modal.jsx';
@@ -67,5 +68,5 @@ export default class DeleteModalTrigger extends React.Component {
 }
 
 DeleteModalTrigger.propTypes = {
-    onDelete: React.PropTypes.func.isRequired
+    onDelete: PropTypes.func.isRequired
 };

webapp/components/do_verify_email.jsx

@@ -8,6 +8,8 @@ import {browserHistory, Link} from 'react-router/es6';
 
 import {verifyEmail} from 'actions/user_actions.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class DoVerifyEmail extends React.Component {
@@ -75,5 +77,5 @@ export default class DoVerifyEmail extends React.Component {
 DoVerifyEmail.defaultProps = {
 };
 DoVerifyEmail.propTypes = {
-    location: React.PropTypes.object.isRequired
+    location: PropTypes.object.isRequired
 };

webapp/components/edit_channel_header_modal.jsx

@@ -23,6 +23,8 @@ const holders = defineMessages({
     }
 });
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 class EditChannelHeaderModal extends React.Component {
@@ -221,8 +223,8 @@ class EditChannelHeaderModal extends React.Component {
 
 EditChannelHeaderModal.propTypes = {
     intl: intlShape.isRequired,
-    onHide: React.PropTypes.func.isRequired,
-    channel: React.PropTypes.object.isRequired
+    onHide: PropTypes.func.isRequired,
+    channel: PropTypes.object.isRequired
 };
 
 export default injectIntl(EditChannelHeaderModal);

webapp/components/edit_channel_purpose_modal.jsx

@@ -6,6 +6,8 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
@@ -181,6 +183,6 @@ export default class EditChannelPurposeModal extends React.Component {
 }
 
 EditChannelPurposeModal.propTypes = {
-    channel: React.PropTypes.object,
-    onModalDismissed: React.PropTypes.func.isRequired
+    channel: PropTypes.object,
+    onModalDismissed: PropTypes.func.isRequired
 };

webapp/components/emoji/components/add_emoji.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -14,12 +16,12 @@ import SpinnerButton from 'components/spinner_button.jsx';
 
 export default class AddEmoji extends React.Component {
     static propTypes = {
-        team: React.PropTypes.object,
-        user: React.PropTypes.object
+        team: PropTypes.object,
+        user: PropTypes.object
     };
 
     static contextTypes = {
-        router: React.PropTypes.object.isRequired
+        router: PropTypes.object.isRequired
     };
 
     constructor(props) {

webapp/components/emoji/components/delete_emoji_modal.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -45,5 +46,5 @@ export default class DeleteEmoji extends DeleteModalTrigger {
 }
 
 DeleteEmoji.propTypes = {
-    onDelete: React.PropTypes.func.isRequired
+    onDelete: PropTypes.func.isRequired
 };

webapp/components/emoji/components/emoji_list.jsx

@@ -12,6 +12,8 @@ import {loadEmoji} from 'actions/emoji_actions.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {Link} from 'react-router';
 import {FormattedMessage} from 'react-intl';
@@ -19,8 +21,8 @@ import {FormattedMessage} from 'react-intl';
 export default class EmojiList extends React.Component {
     static get propTypes() {
         return {
-            team: React.PropTypes.object,
-            user: React.PropTypes.object
+            team: PropTypes.object,
+            user: PropTypes.object
         };
     }
 

webapp/components/emoji/components/emoji_list_item.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -13,10 +15,10 @@ import {FormattedMessage} from 'react-intl';
 export default class EmojiListItem extends React.Component {
     static get propTypes() {
         return {
-            emoji: React.PropTypes.object.isRequired,
-            onDelete: React.PropTypes.func.isRequired,
-            filter: React.PropTypes.string,
-            creator: React.PropTypes.object.isRequired
+            emoji: PropTypes.object.isRequired,
+            onDelete: PropTypes.func.isRequired,
+            filter: PropTypes.string,
+            creator: PropTypes.object.isRequired
         };
     }
 

webapp/components/emoji_picker/components/emoji_picker_category.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -5,10 +7,10 @@ import React from 'react';
 
 export default class EmojiPickerCategory extends React.Component {
     static propTypes = {
-        category: React.PropTypes.string.isRequired,
-        icon: React.PropTypes.node.isRequired,
-        onCategoryClick: React.PropTypes.func.isRequired,
-        selected: React.PropTypes.bool.isRequired
+        category: PropTypes.string.isRequired,
+        icon: PropTypes.node.isRequired,
+        onCategoryClick: PropTypes.func.isRequired,
+        selected: PropTypes.bool.isRequired
     }
 
     constructor(props) {

webapp/components/emoji_picker/components/emoji_picker_item.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -7,12 +9,12 @@ import EmojiStore from 'stores/emoji_store.jsx';
 
 export default class EmojiPickerItem extends React.Component {
     static propTypes = {
-        emoji: React.PropTypes.object.isRequired,
-        onItemOver: React.PropTypes.func.isRequired,
-        onItemOut: React.PropTypes.func.isRequired,
-        onItemClick: React.PropTypes.func.isRequired,
-        onItemUnmount: React.PropTypes.func.isRequired,
-        category: React.PropTypes.string.isRequired
+        emoji: PropTypes.object.isRequired,
+        onItemOver: PropTypes.func.isRequired,
+        onItemOut: PropTypes.func.isRequired,
+        onItemClick: PropTypes.func.isRequired,
+        onItemUnmount: PropTypes.func.isRequired,
+        category: PropTypes.string.isRequired
     }
 
     constructor(props) {

webapp/components/emoji_picker/components/emoji_picker_preview.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -9,7 +11,7 @@ import {FormattedMessage} from 'react-intl';
 
 export default class EmojiPickerPreview extends React.Component {
     static propTypes = {
-        emoji: React.PropTypes.object
+        emoji: PropTypes.object
     }
 
     render() {

webapp/components/emoji_picker/emoji_picker.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -30,11 +32,11 @@ const CATEGORIES = [
 
 class EmojiPicker extends React.Component {
     static propTypes = {
-        customEmojis: React.PropTypes.object,
-        onEmojiClick: React.PropTypes.func.isRequired,
-        pickerLocation: React.PropTypes.string.isRequired,
-        emojiOffset: React.PropTypes.number,
-        outsideClick: React.PropTypes.func
+        customEmojis: PropTypes.object,
+        onEmojiClick: PropTypes.func.isRequired,
+        pickerLocation: PropTypes.string.isRequired,
+        emojiOffset: PropTypes.number,
+        outsideClick: PropTypes.func
     }
 
     constructor(props) {

webapp/components/emoji_picker/emoji_picker_container.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -9,7 +11,7 @@ import EmojiPicker from './emoji_picker.jsx';
 
 export default class EmojiPickerContainer extends React.Component {
     static propTypes = {
-        onEmojiClick: React.PropTypes.func.isRequred
+        onEmojiClick: PropTypes.func.isRequred
     }
 
     constructor(props) {

webapp/components/error_page.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router/es6';
@@ -12,7 +13,7 @@ import * as Utils from 'utils/utils.jsx';
 
 export default class ErrorPage extends React.Component {
     static propTypes = {
-        location: React.PropTypes.object.isRequired
+        location: PropTypes.object.isRequired
     };
 
     constructor(props) {

webapp/components/file_attachment.jsx

@@ -7,6 +7,8 @@ import * as Utils from 'utils/utils.jsx';
 
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class FileAttachment extends React.Component {
@@ -172,13 +174,13 @@ export default class FileAttachment extends React.Component {
 }
 
 FileAttachment.propTypes = {
-    fileInfo: React.PropTypes.object.isRequired,
+    fileInfo: PropTypes.object.isRequired,
 
     // the index of this attachment preview in the parent FileAttachmentList
-    index: React.PropTypes.number.isRequired,
+    index: PropTypes.number.isRequired,
 
     // handler for when the thumbnail is clicked passed the index above
-    handleImageClick: React.PropTypes.func,
+    handleImageClick: PropTypes.func,
 
-    compactDisplay: React.PropTypes.bool
+    compactDisplay: PropTypes.bool
 };

webapp/components/file_attachment_list.jsx

@@ -5,6 +5,8 @@ import ViewImageModal from './view_image.jsx';
 import FileAttachment from './file_attachment.jsx';
 import Constants from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class FileAttachmentList extends React.Component {
@@ -65,7 +67,7 @@ export default class FileAttachmentList extends React.Component {
 }
 
 FileAttachmentList.propTypes = {
-    fileCount: React.PropTypes.number.isRequired,
-    fileInfos: React.PropTypes.arrayOf(React.PropTypes.object),
-    compactDisplay: React.PropTypes.bool
+    fileCount: PropTypes.number.isRequired,
+    fileInfos: PropTypes.arrayOf(PropTypes.object),
+    compactDisplay: PropTypes.bool
 };

webapp/components/file_attachment_list_container.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -10,8 +12,8 @@ import FileAttachmentList from './file_attachment_list.jsx';
 
 export default class FileAttachmentListContainer extends React.Component {
     static propTypes = {
-        post: React.PropTypes.object.isRequired,
-        compactDisplay: React.PropTypes.bool.isRequired
+        post: PropTypes.object.isRequired,
+        compactDisplay: PropTypes.bool.isRequired
     }
 
     constructor(props) {

webapp/components/file_info_preview.jsx

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
@@ -54,6 +56,6 @@ export default class FileInfoPreview extends React.Component {
 }
 
 FileInfoPreview.propTypes = {
-    fileInfo: React.PropTypes.object.isRequired,
-    fileUrl: React.PropTypes.string.isRequired
+    fileInfo: PropTypes.object.isRequired,
+    fileUrl: PropTypes.string.isRequired
 };

webapp/components/file_preview.jsx

@@ -5,6 +5,8 @@ import FileStore from 'stores/file_store.jsx';
 import ReactDOM from 'react-dom';
 import * as Utils from 'utils/utils.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 import loadingGif from 'images/load.gif';
@@ -99,7 +101,7 @@ FilePreview.defaultProps = {
     uploadsInProgress: []
 };
 FilePreview.propTypes = {
-    onRemove: React.PropTypes.func.isRequired,
-    fileInfos: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-    uploadsInProgress: React.PropTypes.array
+    onRemove: PropTypes.func.isRequired,
+    fileInfos: PropTypes.arrayOf(PropTypes.object).isRequired,
+    uploadsInProgress: PropTypes.array
 };

webapp/components/file_upload.jsx

@@ -33,6 +33,8 @@ const holders = defineMessages({
     }
 });
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 const OverlayTimeout = 500;
@@ -422,19 +424,19 @@ class FileUpload extends React.Component {
 
 FileUpload.propTypes = {
     intl: intlShape.isRequired,
-    onUploadError: React.PropTypes.func,
-    getFileCount: React.PropTypes.func,
-    getTarget: React.PropTypes.func.isRequired,
-    onClick: React.PropTypes.func,
-    onFileUpload: React.PropTypes.func,
-    onUploadStart: React.PropTypes.func,
-    onFileUploadChange: React.PropTypes.func,
-    onTextDrop: React.PropTypes.func,
-    channelId: React.PropTypes.string,
-    postType: React.PropTypes.string,
-    onEmojiClick: React.PropTypes.func,
-    navBarName: React.PropTypes.string,
-    emojiEnabled: React.PropTypes.bool
+    onUploadError: PropTypes.func,
+    getFileCount: PropTypes.func,
+    getTarget: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
+    onFileUpload: PropTypes.func,
+    onUploadStart: PropTypes.func,
+    onFileUploadChange: PropTypes.func,
+    onTextDrop: PropTypes.func,
+    channelId: PropTypes.string,
+    postType: PropTypes.string,
+    onEmojiClick: PropTypes.func,
+    navBarName: PropTypes.string,
+    emojiEnabled: PropTypes.bool
 };
 
 export default injectIntl(FileUpload, {withRef: true});

webapp/components/file_upload_overlay.jsx

@@ -3,48 +3,48 @@
 
 import {FormattedMessage} from 'react-intl';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 import fileOverlayImage from 'images/filesOverlay.png';
 import overlayLogoImage from 'images/logoWhite.png';
 
-export default class FileUploadOverlay extends React.Component {
-    render() {
-        var overlayClass = 'file-overlay hidden';
-        if (this.props.overlayType === 'right') {
-            overlayClass += ' right-file-overlay';
-        } else if (this.props.overlayType === 'center') {
-            overlayClass += ' center-file-overlay';
-        }
+export default function FileUploadOverlay(props) {
+    var overlayClass = 'file-overlay hidden';
+    if (props.overlayType === 'right') {
+        overlayClass += ' right-file-overlay';
+    } else if (props.overlayType === 'center') {
+        overlayClass += ' center-file-overlay';
+    }
 
-        return (
-            <div className={overlayClass}>
-                <div className='overlay__indent'>
-                    <div className='overlay__circle'>
-                        <img
-                            className='overlay__files'
-                            src={fileOverlayImage}
-                            alt='Files'
+    return (
+        <div className={overlayClass}>
+            <div className='overlay__indent'>
+                <div className='overlay__circle'>
+                    <img
+                        className='overlay__files'
+                        src={fileOverlayImage}
+                        alt='Files'
+                    />
+                    <span><i className='fa fa-upload'/>
+                        <FormattedMessage
+                            id='upload_overlay.info'
+                            defaultMessage='Drop a file to upload it.'
                         />
-                        <span><i className='fa fa-upload'/>
-                            <FormattedMessage
-                                id='upload_overlay.info'
-                                defaultMessage='Drop a file to upload it.'
-                            />
-                        </span>
-                        <img
-                            className='overlay__logo'
-                            src={overlayLogoImage}
-                            width='100'
-                            alt='Logo'
-                        />
-                    </div>
+                    </span>
+                    <img
+                        className='overlay__logo'
+                        src={overlayLogoImage}
+                        width='100'
+                        alt='Logo'
+                    />
                 </div>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
 FileUploadOverlay.propTypes = {
-    overlayType: React.PropTypes.string
+    overlayType: PropTypes.string
 };