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

33 files changed, 347 insertions, 297 deletions

diff --git a/webapp/components/admin_console/admin_console.jsx b/webapp/components/admin_console/admin_console.jsx
index d00293f04..80d9bfed9 100644
--- a/webapp/components/admin_console/admin_console.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/admin_settings.jsx b/webapp/components/admin_console/admin_settings.jsx
index b21a84c05..180e6e5b9 100644
--- a/webapp/components/admin_console/admin_settings.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index a2f2b75c0..05924d02f 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/admin_sidebar_category.jsx b/webapp/components/admin_console/admin_sidebar_category.jsx
index 97e2f7d5d..5db68e876 100644
--- a/webapp/components/admin_console/admin_sidebar_category.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/admin_sidebar_section.jsx b/webapp/components/admin_console/admin_sidebar_section.jsx
index 53720ef98..e0f327da0 100644
--- a/webapp/components/admin_console/admin_sidebar_section.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/banner.jsx b/webapp/components/admin_console/banner.jsx
index 964d070bc..452af92e1 100644
--- a/webapp/components/admin_console/banner.jsx
+++ b/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;
-        }
+    if (props.title) {
+        title = props.title;
+    }
 
-        return (
-            <div className='banner'>
-                <div className='banner__content'>
-                    <h4 className='banner__heading'>
-                        {title}
-                    </h4>
-                    <p>
-                        {this.props.description}
-                    </p>
-                </div>
+    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
 };
diff --git a/webapp/components/admin_console/boolean_setting.jsx b/webapp/components/admin_console/boolean_setting.jsx
index aaceab7f3..45c23c869 100644
--- a/webapp/components/admin_console/boolean_setting.jsx
+++ b/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
 };
diff --git a/webapp/components/admin_console/brand_image_setting.jsx b/webapp/components/admin_console/brand_image_setting.jsx
index 4ceac1b91..eae5ad922 100644
--- a/webapp/components/admin_console/brand_image_setting.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/cluster_table.jsx b/webapp/components/admin_console/cluster_table.jsx
index b291387ea..542b1691d 100644
--- a/webapp/components/admin_console/cluster_table.jsx
+++ b/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() {
diff --git a/webapp/components/admin_console/connection_security_dropdown_setting.jsx b/webapp/components/admin_console/connection_security_dropdown_setting.jsx
index 09cee0853..3a8e5f7fe 100644
--- a/webapp/components/admin_console/connection_security_dropdown_setting.jsx
+++ b/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
 };
diff --git a/webapp/components/admin_console/dropdown_setting.jsx b/webapp/components/admin_console/dropdown_setting.jsx
index a3741a629..05179a4b9 100644
--- a/webapp/components/admin_console/dropdown_setting.jsx
+++ b/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
 };
diff --git a/webapp/components/admin_console/email_connection_test.jsx b/webapp/components/admin_console/email_connection_test.jsx
index e8c3ed316..17edbf23e 100644
--- a/webapp/components/admin_console/email_connection_test.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/file_upload_setting.jsx b/webapp/components/admin_console/file_upload_setting.jsx
index 735853ff5..c2bc9869e 100644
--- a/webapp/components/admin_console/file_upload_setting.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/generated_setting.jsx b/webapp/components/admin_console/generated_setting.jsx
index 9103d1804..b6a495f93 100644
--- a/webapp/components/admin_console/generated_setting.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/ldap_test_button.jsx b/webapp/components/admin_console/ldap_test_button.jsx
index 2a3559d25..e785d0f78 100644
--- a/webapp/components/admin_console/ldap_test_button.jsx
+++ b/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) {
diff --git a/webapp/components/admin_console/license_settings.jsx b/webapp/components/admin_console/license_settings.jsx
index 844dd0569..f04a0c351 100644
--- a/webapp/components/admin_console/license_settings.jsx
+++ b/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);
diff --git a/webapp/components/admin_console/manage_teams_modal/manage_teams_dropdown.jsx b/webapp/components/admin_console/manage_teams_modal/manage_teams_dropdown.jsx
index e9ddf621c..e58a2c43d 100644
--- a/webapp/components/admin_console/manage_teams_modal/manage_teams_dropdown.jsx
+++ b/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) {
diff --git a/webapp/components/admin_console/manage_teams_modal/manage_teams_modal.jsx b/webapp/components/admin_console/manage_teams_modal/manage_teams_modal.jsx
index 0c30203b4..9012c27e5 100644
--- a/webapp/components/admin_console/manage_teams_modal/manage_teams_modal.jsx
+++ b/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) {
diff --git a/webapp/components/admin_console/manage_teams_modal/remove_from_team_button.jsx b/webapp/components/admin_console/manage_teams_modal/remove_from_team_button.jsx
index d95a816f2..28e9fde8f 100644
--- a/webapp/components/admin_console/manage_teams_modal/remove_from_team_button.jsx
+++ b/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) {
diff --git a/webapp/components/admin_console/multiselect_settings.jsx b/webapp/components/admin_console/multiselect_settings.jsx
index c73eb6a79..8ae8e1349 100644
--- a/webapp/components/admin_console/multiselect_settings.jsx
+++ b/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
 };
diff --git a/webapp/components/admin_console/post_edit_setting.jsx b/webapp/components/admin_console/post_edit_setting.jsx
index 9480409fd..08fafc14b 100644
--- a/webapp/components/admin_console/post_edit_setting.jsx
+++ b/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
 };
diff --git a/webapp/components/admin_console/radio_setting.jsx b/webapp/components/admin_console/radio_setting.jsx
index 100fab983..7a6c2e459 100644
--- a/webapp/components/admin_console/radio_setting.jsx
+++ b/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
 };
diff --git a/webapp/components/admin_console/remove_file_setting.jsx b/webapp/components/admin_console/remove_file_setting.jsx
index 4590b7ff6..ff453d9fc 100644
--- a/webapp/components/admin_console/remove_file_setting.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/reset_password_modal.jsx b/webapp/components/admin_console/reset_password_modal.jsx
index 02bb00ab8..0a38adda1 100644
--- a/webapp/components/admin_console/reset_password_modal.jsx
+++ b/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 = {
diff --git a/webapp/components/admin_console/save_button.jsx b/webapp/components/admin_console/save_button.jsx
index 18ad43854..4d2b562da 100644
--- a/webapp/components/admin_console/save_button.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/setting.jsx b/webapp/components/admin_console/setting.jsx
index 1db5a76b7..591e8b551 100644
--- a/webapp/components/admin_console/setting.jsx
+++ b/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
 };
diff --git a/webapp/components/admin_console/settings_group.jsx b/webapp/components/admin_console/settings_group.jsx
index 0de8130de..79f8dac97 100644
--- a/webapp/components/admin_console/settings_group.jsx
+++ b/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
         };
     }
 
diff --git a/webapp/components/admin_console/sync_now_button.jsx b/webapp/components/admin_console/sync_now_button.jsx
index 6c0c10f62..b2a5a001d 100644
--- a/webapp/components/admin_console/sync_now_button.jsx
+++ b/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) {
diff --git a/webapp/components/admin_console/system_users/system_users.jsx b/webapp/components/admin_console/system_users/system_users.jsx
index d8c52c807..ae6ebef86 100644
--- a/webapp/components/admin_console/system_users/system_users.jsx
+++ b/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
     }
 
diff --git a/webapp/components/admin_console/system_users/system_users_dropdown.jsx b/webapp/components/admin_console/system_users/system_users_dropdown.jsx
index 15761564e..159e133e5 100644
--- a/webapp/components/admin_console/system_users/system_users_dropdown.jsx
+++ b/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) {
diff --git a/webapp/components/admin_console/system_users/system_users_list.jsx b/webapp/components/admin_console/system_users/system_users_list.jsx
index 89953b4c8..c567fd43c 100644
--- a/webapp/components/admin_console/system_users/system_users_list.jsx
+++ b/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,
-
-        teamId: React.PropTypes.string.isRequired,
-        term: React.PropTypes.string.isRequired,
-        onTermChange: React.PropTypes.func.isRequired
+        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: PropTypes.string.isRequired,
+        term: PropTypes.string.isRequired,
+        onTermChange: PropTypes.func.isRequired
     };
 
     constructor(props) {
diff --git a/webapp/components/admin_console/text_setting.jsx b/webapp/components/admin_console/text_setting.jsx
index dfdd8a303..879e352a4 100644
--- a/webapp/components/admin_console/text_setting.jsx
+++ b/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'
             ])
diff --git a/webapp/components/admin_console/webserver_mode_dropdown_setting.jsx b/webapp/components/admin_console/webserver_mode_dropdown_setting.jsx
index 9fdbccd2c..e9ddee677 100644
--- a/webapp/components/admin_console/webserver_mode_dropdown_setting.jsx
+++ b/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
 };