PLT-4167 Team Sidebar (#4569)

* PLT-4167 Team Sidebar

* Address feedback from PM

* change route from my_members to members

* bug fixes

* Updating styles for teams sidebar (#4681)

* Added PM changes

* Fix corner cases

* Addressing feedback

* use two different endpoints

* Bug fixes

* Rename model and client functions, using preferences to store last team and channel viewed

* Fix mobile notification count and closing the team sidebar

* unit test, fixed bad merge and retrieve from cached when available

* bug fixes

* use id for last channel in preferences, query optimization

* Updating multi team css (#4830)

3 files changed, 84 insertions, 4 deletions

diff --git a/webapp/utils/async_client.jsx b/webapp/utils/async_client.jsx
index 9bcb4e07f..2d8e76fc2 100644
--- a/webapp/utils/async_client.jsx
+++ b/webapp/utils/async_client.jsx
@@ -166,12 +166,21 @@ export function updateLastViewedAt(id, active) {
         channelId,
         isActive,
         () => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_PREFERENCE,
+                preference: {
+                    category: 'last',
+                    name: TeamStore.getCurrentId(),
+                    value: channelId
+                }
+            });
+
             callTracker[`updateLastViewed${channelId}`] = 0;
             ErrorStore.clearLastError();
         },
         (err) => {
             callTracker[`updateLastViewed${channelId}`] = 0;
-            var count = ErrorStore.getConnectionErrorCount();
+            const count = ErrorStore.getConnectionErrorCount();
             ErrorStore.setConnectionErrorCount(count + 1);
             dispatchError(err, 'updateLastViewedAt');
         }
@@ -203,6 +212,14 @@ export function setLastViewedAt(lastViewedAt, id) {
         channelId,
         lastViewedAt,
         () => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_PREFERENCE,
+                preference: {
+                    category: 'last',
+                    name: TeamStore.getCurrentId(),
+                    value: channelId
+                }
+            });
             callTracker[`setLastViewedAt${channelId}${lastViewedAt}`] = 0;
             ErrorStore.clearLastError();
         },
@@ -847,6 +864,61 @@ export function getTeamMember(teamId, userId) {
     );
 }
 
+export function getMyTeamMembers() {
+    const callName = 'getMyTeamMembers';
+    if (isCallInProgress(callName)) {
+        return;
+    }
+
+    callTracker[callName] = utils.getTimestamp();
+    Client.getMyTeamMembers(
+        (data) => {
+            callTracker[callName] = 0;
+
+            const members = {};
+            for (const member of data) {
+                members[member.team_id] = member;
+            }
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_MY_TEAM_MEMBERS_UNREAD,
+                team_members: members
+            });
+        },
+        (err) => {
+            callTracker[callName] = 0;
+            dispatchError(err, 'getMyTeamMembers');
+        }
+    );
+}
+
+export function getMyTeamsUnread(teamId) {
+    const members = TeamStore.getMyTeamMembers();
+    if (members.length > 1) {
+        const callName = 'getMyTeamsUnread';
+        if (isCallInProgress(callName)) {
+            return;
+        }
+
+        callTracker[callName] = utils.getTimestamp();
+        Client.getMyTeamsUnread(
+            teamId,
+            (data) => {
+                callTracker[callName] = 0;
+
+                AppDispatcher.handleServerAction({
+                    type: ActionTypes.RECEIVED_MY_TEAMS_UNREAD,
+                    team_members: data
+                });
+            },
+            (err) => {
+                callTracker[callName] = 0;
+                dispatchError(err, 'getMyTeamsUnread');
+            }
+        );
+    }
+}
+
 export function getTeamStats(teamId) {
     const callName = `getTeamStats${teamId}`;
     if (isCallInProgress(callName)) {
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 40d3482d6..133b824ff 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -139,6 +139,7 @@ export const ActionTypes = keyMirror({
     RECEIVED_ALL_TEAMS: null,
     RECEIVED_ALL_TEAM_LISTINGS: null,
     RECEIVED_MY_TEAM_MEMBERS: null,
+    RECEIVED_MY_TEAMS_UNREAD: null,
     RECEIVED_MEMBERS_IN_TEAM: null,
     RECEIVED_TEAM_STATS: null,
 
@@ -202,6 +203,7 @@ export const SocketEvents = {
     DIRECT_ADDED: 'direct_added',
     NEW_USER: 'new_user',
     LEAVE_TEAM: 'leave_team',
+    UPDATE_TEAM: 'update_team',
     USER_ADDED: 'user_added',
     USER_REMOVED: 'user_removed',
     USER_UPDATED: 'user_updated',
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 8d899b5ca..a96c791c7 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -104,7 +104,9 @@ export function notifyMe(title, body, channel, teamId, duration, silent) {
                     var notification = new Notification(title, {body, tag: body, icon: icon50, requireInteraction: notificationDuration === 0, silent});
                     notification.onclick = () => {
                         window.focus();
-                        if (channel) {
+                        if (channel && channel.type === Constants.DM_CHANNEL) {
+                            browserHistory.push(TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name);
+                        } else if (channel) {
                             browserHistory.push(TeamStore.getTeamUrl(teamId) + '/channels/' + channel.name);
                         } else if (teamId) {
                             browserHistory.push(TeamStore.getTeamUrl(teamId) + '/channels/town-square');
@@ -491,6 +493,8 @@ export function applyTheme(theme) {
         changeCss('.sidebar--left .nav li.active a:before, .app__body .modal .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder);
         changeCss('.sidebar--left .sidebar__divider:before', 'background:' + changeOpacity(theme.sidebarTextActiveBorder, 0.5));
         changeCss('.sidebar--left .sidebar__divider', 'color:' + theme.sidebarTextActiveBorder);
+        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container.active:before', 'background:' + theme.sidebarTextActiveBorder);
+        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container.unread:before', 'background:' + theme.sidebarTextActiveBorder);
     }
 
     if (theme.sidebarTextActiveColor) {
@@ -501,13 +505,13 @@ export function applyTheme(theme) {
     if (theme.sidebarHeaderBg) {
         changeCss('.sidebar--left .team__header, .app__body .sidebar--menu .team__header, .app__body .post-list__timestamp > div', 'background:' + theme.sidebarHeaderBg);
         changeCss('.app__body .modal .modal-header', 'background:' + theme.sidebarHeaderBg);
-        changeCss('.app__body #navbar .navbar-default', 'background:' + theme.sidebarHeaderBg);
+        changeCss('.app__body .multi-teams .team-sidebar, .app__body #navbar .navbar-default', 'background:' + theme.sidebarHeaderBg);
         changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'background:' + theme.sidebarHeaderBg);
         changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + theme.sidebarHeaderBg);
     }
 
     if (theme.sidebarHeaderTextColor) {
-        changeCss('.sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor);
+        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn, .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body .sidebar-header-dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor);
         changeCss('.sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8));
         changeCss('.sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor);
@@ -534,11 +538,13 @@ export function applyTheme(theme) {
     if (theme.mentionBj) {
         changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'background:' + theme.mentionBj);
         changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj + '!important;');
+        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj + '!important;');
     }
 
     if (theme.mentionColor) {
         changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor);
         changeCss('.sidebar--left .badge', 'color:' + theme.mentionColor + '!important;');
+        changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor + '!important;');
     }
 
     if (theme.centerChannelBg) {