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/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
     }