PLT-2713/PLT-6028 Added System Users list to System Console (#5882)

* PLT-2713 Added ability for admins to list users not in any team

* Updated style of unit test

* Split SearchableUserList to give better control over its properties

* Added users without any teams to the user store

* Added ManageUsers page

* Renamed ManageUsers to SystemUsers

* Added ability to search by user id in SystemUsers page

* Added SystemUsersDropdown

* Removed unnecessary injectIntl

* Created TeamUtils

* Reduced scope of system console heading CSS

* Added team filter to TeamAnalytics page

* Updated admin console sidebar

* Removed unnecessary TODO

* Removed unused reference to deleted modal

* Fixed system console sidebar not scrolling on first load

* Fixed TeamAnalytics page not rendering on first load

* Fixed chart.js throwing an error when switching between teams

* Changed TeamAnalytics header to show the team's display name

* Fixed appearance of TeamAnalytics and SystemUsers on small screen widths

* Fixed placement of 'No users found' message

* Fixed teams not appearing in SystemUsers on first load

* Updated user count text for SystemUsers

* Changed search by id fallback to trigger less often

* Fixed SystemUsers list items not updating when searching

* Fixed localization strings for SystemUsers page

1 files changed, 25 insertions, 4 deletions

diff --git a/webapp/components/analytics/line_chart.jsx b/webapp/components/analytics/line_chart.jsx
index aa603d819..5ae80f9e9 100644
--- a/webapp/components/analytics/line_chart.jsx
+++ b/webapp/components/analytics/line_chart.jsx
@@ -21,14 +21,33 @@ export default class LineChart extends React.Component {
         this.initChart();
     }
 
+    componentWillUpdate(nextProps) {
+        const willHaveData = nextProps.data && nextProps.data.labels.length > 0;
+        const hasChart = Boolean(this.chart);
+
+        if (!willHaveData && hasChart) {
+            // Clean up the rendered chart before we render and destroy its context
+            this.chart.destroy();
+            this.chart = null;
+        }
+    }
+
     componentDidUpdate(prevProps) {
-        if (!Utils.areObjectsEqual(prevProps.data, this.props.data) || !Utils.areObjectsEqual(prevProps.options, this.props.options)) {
-            this.initChart(true);
+        if (Utils.areObjectsEqual(prevProps.data, this.props.data) && Utils.areObjectsEqual(prevProps.options, this.props.options)) {
+            return;
+        }
+
+        const hasData = this.props.data && this.props.data.labels.length > 0;
+        const hasChart = Boolean(this.chart);
+
+        if (hasData) {
+            // Update the rendered chart or initialize it as necessary
+            this.initChart(hasChart);
         }
     }
 
     componentWillUnmount() {
-        if (this.chart && this.refs.canvas) {
+        if (this.chart) {
             this.chart.destroy();
         }
     }
@@ -37,9 +56,11 @@ export default class LineChart extends React.Component {
         if (!this.refs.canvas) {
             return;
         }
+
         var el = ReactDOM.findDOMNode(this.refs.canvas);
         var ctx = el.getContext('2d');
-        this.chart = new Chart(ctx, {type: 'line', data: this.props.data, options: this.props.options || {}}); //eslint-disable-line new-cap
+        this.chart = new Chart(ctx, {type: 'line', data: this.props.data, options: this.props.options || {}}); // eslint-disable-line new-cap
+
         if (update) {
             this.chart.update();
         }