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/components/user_settings/custom_theme_chooser.jsx

@@ -3,6 +3,7 @@
 
 import 'bootstrap-colorpicker';
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {Popover, OverlayTrigger} from 'react-bootstrap';
 import {defineMessages, FormattedMessage, intlShape, injectIntl} from 'react-intl';
@@ -444,8 +445,8 @@ class CustomThemeChooser extends React.Component {
 
 CustomThemeChooser.propTypes = {
     intl: intlShape.isRequired,
-    theme: React.PropTypes.object.isRequired,
-    updateTheme: React.PropTypes.func.isRequired
+    theme: PropTypes.object.isRequired,
+    updateTheme: PropTypes.func.isRequired
 };
 
 export default injectIntl(CustomThemeChooser);

webapp/components/user_settings/desktop_notification_settings.jsx

@@ -7,6 +7,8 @@ import SettingItemMax from 'components/setting_item_max.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
@@ -451,13 +453,13 @@ export default class DesktopNotificationSettings extends React.Component {
 }
 
 DesktopNotificationSettings.propTypes = {
-    activity: React.PropTypes.string.isRequired,
-    sound: React.PropTypes.string.isRequired,
-    duration: React.PropTypes.string.isRequired,
-    updateSection: React.PropTypes.func,
-    setParentState: React.PropTypes.func,
-    submit: React.PropTypes.func,
-    cancel: React.PropTypes.func,
-    error: React.PropTypes.string,
-    active: React.PropTypes.bool
+    activity: PropTypes.string.isRequired,
+    sound: PropTypes.string.isRequired,
+    duration: PropTypes.string.isRequired,
+    updateSection: PropTypes.func,
+    setParentState: PropTypes.func,
+    submit: PropTypes.func,
+    cancel: PropTypes.func,
+    error: PropTypes.string,
+    active: PropTypes.bool
 };

webapp/components/user_settings/email_notification_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.
 
@@ -15,12 +17,12 @@ import {Preferences} from 'utils/constants.jsx';
 
 export default class EmailNotificationSetting extends React.Component {
     static propTypes = {
-        activeSection: React.PropTypes.string.isRequired,
-        updateSection: React.PropTypes.func.isRequired,
-        enableEmail: React.PropTypes.bool.isRequired,
-        onChange: React.PropTypes.func.isRequired,
-        onSubmit: React.PropTypes.func.isRequired,
-        serverError: React.PropTypes.string
+        activeSection: PropTypes.string.isRequired,
+        updateSection: PropTypes.func.isRequired,
+        enableEmail: PropTypes.bool.isRequired,
+        onChange: PropTypes.func.isRequired,
+        onSubmit: PropTypes.func.isRequired,
+        serverError: PropTypes.string
     };
 
     constructor(props) {

webapp/components/user_settings/manage_languages.jsx

@@ -9,6 +9,7 @@ import Constants from 'utils/constants.jsx';
 
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 import {updateUser} from 'actions/user_actions.jsx';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 export default class ManageLanguage extends React.Component {
@@ -132,6 +133,6 @@ export default class ManageLanguage extends React.Component {
 }
 
 ManageLanguage.propTypes = {
-    user: React.PropTypes.object.isRequired,
-    updateSection: React.PropTypes.func.isRequired
+    user: PropTypes.object.isRequired,
+    updateSection: PropTypes.func.isRequired
 };

webapp/components/user_settings/premade_theme_chooser.jsx

@@ -5,6 +5,8 @@ import $ from 'jquery';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class PremadeThemeChooser extends React.Component {
@@ -58,6 +60,6 @@ export default class PremadeThemeChooser extends React.Component {
 }
 
 PremadeThemeChooser.propTypes = {
-    theme: React.PropTypes.object.isRequired,
-    updateTheme: React.PropTypes.func.isRequired
+    theme: PropTypes.object.isRequired,
+    updateTheme: PropTypes.func.isRequired
 };

webapp/components/user_settings/user_settings.jsx

@@ -9,6 +9,8 @@ import GeneralTab from './user_settings_general';
 import DisplayTab from './user_settings_display.jsx';
 import AdvancedTab from './user_settings_advanced.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class UserSettings extends React.Component {
@@ -111,12 +113,12 @@ export default class UserSettings extends React.Component {
 }
 
 UserSettings.propTypes = {
-    activeTab: React.PropTypes.string,
-    activeSection: React.PropTypes.string,
-    updateSection: React.PropTypes.func,
-    updateTab: React.PropTypes.func,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired,
-    setEnforceFocus: React.PropTypes.func.isRequired,
-    setRequireConfirm: React.PropTypes.func.isRequired
+    activeTab: PropTypes.string,
+    activeSection: PropTypes.string,
+    updateSection: PropTypes.func,
+    updateTab: PropTypes.func,
+    closeModal: PropTypes.func.isRequired,
+    collapseModal: PropTypes.func.isRequired,
+    setEnforceFocus: PropTypes.func.isRequired,
+    setRequireConfirm: PropTypes.func.isRequired
 };

webapp/components/user_settings/user_settings_advanced.jsx

@@ -14,6 +14,8 @@ import {FormattedMessage} from 'react-intl';
 
 const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class AdvancedSettingsDisplay extends React.Component {
@@ -586,10 +588,10 @@ export default class AdvancedSettingsDisplay extends React.Component {
 }
 
 AdvancedSettingsDisplay.propTypes = {
-    user: React.PropTypes.object,
-    updateSection: React.PropTypes.func,
-    updateTab: React.PropTypes.func,
-    activeSection: React.PropTypes.string,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired
+    user: PropTypes.object,
+    updateSection: PropTypes.func,
+    updateTab: PropTypes.func,
+    activeSection: PropTypes.string,
+    closeModal: PropTypes.func.isRequired,
+    collapseModal: PropTypes.func.isRequired
 };

webapp/components/user_settings/user_settings_display.jsx

@@ -29,6 +29,8 @@ function getDisplayStateFromStores() {
     };
 }
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class UserSettingsDisplay extends React.Component {
@@ -902,12 +904,12 @@ export default class UserSettingsDisplay extends React.Component {
 }
 
 UserSettingsDisplay.propTypes = {
-    user: React.PropTypes.object,
-    updateSection: React.PropTypes.func,
-    updateTab: React.PropTypes.func,
-    activeSection: React.PropTypes.string,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired,
-    setRequireConfirm: React.PropTypes.func.isRequired,
-    setEnforceFocus: React.PropTypes.func.isRequired
+    user: PropTypes.object,
+    updateSection: PropTypes.func,
+    updateTab: PropTypes.func,
+    activeSection: PropTypes.string,
+    closeModal: PropTypes.func.isRequired,
+    collapseModal: PropTypes.func.isRequired,
+    setRequireConfirm: PropTypes.func.isRequired,
+    setEnforceFocus: PropTypes.func.isRequired
 };

webapp/components/user_settings/user_settings_general/user_settings_general.jsx

@@ -76,19 +76,21 @@ const holders = defineMessages({
     }
 });
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 class UserSettingsGeneralTab extends React.Component {
     static propTypes = {
         intl: intlShape.isRequired,
-        user: React.PropTypes.object.isRequired,
-        updateSection: React.PropTypes.func.isRequired,
-        updateTab: React.PropTypes.func.isRequired,
-        activeSection: React.PropTypes.string.isRequired,
-        closeModal: React.PropTypes.func.isRequired,
-        collapseModal: React.PropTypes.func.isRequired,
-        actions: React.PropTypes.shape({
-            getMe: React.PropTypes.func.isRequired
+        user: PropTypes.object.isRequired,
+        updateSection: PropTypes.func.isRequired,
+        updateTab: PropTypes.func.isRequired,
+        activeSection: PropTypes.string.isRequired,
+        closeModal: PropTypes.func.isRequired,
+        collapseModal: PropTypes.func.isRequired,
+        actions: PropTypes.shape({
+            getMe: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/user_settings/user_settings_modal.jsx

@@ -49,6 +49,8 @@ const holders = defineMessages({
     }
 });
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 class UserSettingsModal extends React.Component {
@@ -279,8 +281,8 @@ class UserSettingsModal extends React.Component {
 
 UserSettingsModal.propTypes = {
     intl: intlShape.isRequired,
-    show: React.PropTypes.bool.isRequired,
-    onModalDismissed: React.PropTypes.func.isRequired
+    show: PropTypes.bool.isRequired,
+    onModalDismissed: PropTypes.func.isRequired
 };
 
 export default injectIntl(UserSettingsModal);

webapp/components/user_settings/user_settings_notifications.jsx

@@ -97,6 +97,8 @@ function getNotificationsStateFromStores() {
     };
 }
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class NotificationsTab extends React.Component {
@@ -896,11 +898,11 @@ NotificationsTab.defaultProps = {
     activeTab: ''
 };
 NotificationsTab.propTypes = {
-    user: React.PropTypes.object,
-    updateSection: React.PropTypes.func,
-    updateTab: React.PropTypes.func,
-    activeSection: React.PropTypes.string,
-    activeTab: React.PropTypes.string,
-    closeModal: React.PropTypes.func.isRequired,
-    collapseModal: React.PropTypes.func.isRequired
+    user: PropTypes.object,
+    updateSection: PropTypes.func,
+    updateTab: PropTypes.func,
+    activeSection: PropTypes.string,
+    activeTab: PropTypes.string,
+    closeModal: PropTypes.func.isRequired,
+    collapseModal: PropTypes.func.isRequired
 };

webapp/components/user_settings/user_settings_security/user_settings_security.jsx

@@ -15,6 +15,7 @@ import Constants from 'utils/constants.jsx';
 import {updatePassword, getAuthorizedApps, deactivateMfa, deauthorizeOAuthApp} from 'actions/user_actions.jsx';
 
 import $ from 'jquery';
+import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage, FormattedTime, FormattedDate} from 'react-intl';
 import {browserHistory, Link} from 'react-router/es6';
@@ -23,15 +24,15 @@ import icon50 from 'images/icon50x50.png';
 
 export default class SecurityTab extends React.Component {
     static propTypes = {
-        user: React.PropTypes.object,
-        activeSection: React.PropTypes.string,
-        updateSection: React.PropTypes.func,
-        updateTab: React.PropTypes.func,
-        closeModal: React.PropTypes.func.isRequired,
-        collapseModal: React.PropTypes.func.isRequired,
-        setEnforceFocus: React.PropTypes.func.isRequired,
-        actions: React.PropTypes.shape({
-            getMe: React.PropTypes.func.isRequired
+        user: PropTypes.object,
+        activeSection: PropTypes.string,
+        updateSection: PropTypes.func,
+        updateTab: PropTypes.func,
+        closeModal: PropTypes.func.isRequired,
+        collapseModal: PropTypes.func.isRequired,
+        setEnforceFocus: PropTypes.func.isRequired,
+        actions: PropTypes.shape({
+            getMe: PropTypes.func.isRequired
         }).isRequired
     }
 

webapp/components/user_settings/user_settings_theme.jsx

@@ -21,6 +21,8 @@ import {FormattedMessage} from 'react-intl';
 
 import {ActionTypes, Constants, Preferences} from 'utils/constants.jsx';
 
+import PropTypes from 'prop-types';
+
 import React from 'react';
 
 export default class ThemeSetting extends React.Component {
@@ -353,8 +355,8 @@ export default class ThemeSetting extends React.Component {
 }
 
 ThemeSetting.propTypes = {
-    selected: React.PropTypes.bool.isRequired,
-    updateSection: React.PropTypes.func.isRequired,
-    setRequireConfirm: React.PropTypes.func.isRequired,
-    setEnforceFocus: React.PropTypes.func.isRequired
+    selected: PropTypes.bool.isRequired,
+    updateSection: PropTypes.func.isRequired,
+    setRequireConfirm: PropTypes.func.isRequired,
+    setEnforceFocus: PropTypes.func.isRequired
 };