[MM-36421] Replace server tabs with dropdown menu (#1647)

* WIP

* WIP

* PoC for dropdown - logic stuff

* Most of the logic for the dropdown

* Working dropdown menu to pick servers

* Mentions, unreads and expired working. Many styles are working.

* Some more styles

* Dark mode and other stuff

* Some cleanup

* Generate build

* PR feedback

* More PR feedback

src/main/preload/dropdown.js

@@ -0,0 +1,45 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+'use strict';
+
+import {ipcRenderer} from 'electron';
+
+import {
+    UPDATE_TEAMS_DROPDOWN,
+    REQUEST_TEAMS_DROPDOWN_INFO,
+    RECEIVE_DROPDOWN_MENU_SIZE,
+    SEND_DROPDOWN_MENU_SIZE,
+    SWITCH_SERVER,
+    CLOSE_TEAMS_DROPDOWN,
+    SHOW_NEW_SERVER_MODAL,
+} from 'common/communication';
+
+console.log('preloaded for the dropdown!');
+
+window.addEventListener('message', async (event) => {
+    switch (event.data.type) {
+    case REQUEST_TEAMS_DROPDOWN_INFO:
+        ipcRenderer.send(REQUEST_TEAMS_DROPDOWN_INFO);
+        break;
+    case SEND_DROPDOWN_MENU_SIZE:
+        ipcRenderer.send(RECEIVE_DROPDOWN_MENU_SIZE, event.data.data.width, event.data.data.height);
+        break;
+    case SWITCH_SERVER:
+        ipcRenderer.send(SWITCH_SERVER, event.data.data);
+        break;
+    case SHOW_NEW_SERVER_MODAL:
+        ipcRenderer.send(SHOW_NEW_SERVER_MODAL);
+        break;
+    case CLOSE_TEAMS_DROPDOWN:
+        ipcRenderer.send(CLOSE_TEAMS_DROPDOWN);
+        break;
+    default:
+        console.log(`got a message: ${event}`);
+        console.log(event);
+    }
+});
+
+ipcRenderer.on(UPDATE_TEAMS_DROPDOWN, (event, teams, activeTeam, darkMode, expired, mentions, unreads) => {
+    window.postMessage({type: UPDATE_TEAMS_DROPDOWN, data: {teams, activeTeam, darkMode, expired, mentions, unreads}}, window.location.href);
+});

src/main/preload/loadingScreenPreload.js

@@ -6,7 +6,13 @@
 
 import {ipcRenderer} from 'electron';
 
-import {RECEIVED_LOADING_SCREEN_DATA, GET_LOADING_SCREEN_DATA, LOADING_SCREEN_ANIMATION_FINISHED, TOGGLE_LOADING_SCREEN_VISIBILITY} from 'common/communication';
+import {
+    RECEIVED_LOADING_SCREEN_DATA,
+    GET_LOADING_SCREEN_DATA,
+    LOADING_SCREEN_ANIMATION_FINISHED,
+    TOGGLE_LOADING_SCREEN_VISIBILITY,
+    CLOSE_TEAMS_DROPDOWN,
+} from 'common/communication';
 
 console.log('preloaded for the loading screen!');
 
@@ -31,3 +37,7 @@ ipcRenderer.on(GET_LOADING_SCREEN_DATA, (_, result) => {
 ipcRenderer.on(TOGGLE_LOADING_SCREEN_VISIBILITY, (_, toggle) => {
     window.postMessage({type: TOGGLE_LOADING_SCREEN_VISIBILITY, data: toggle}, window.location.href);
 });
+
+window.addEventListener('click', () => {
+    ipcRenderer.send(CLOSE_TEAMS_DROPDOWN);
+});

src/main/preload/mattermost.js

@@ -9,7 +9,7 @@
 import {ipcRenderer, webFrame} from 'electron';
 import log from 'electron-log';
 
-import {NOTIFY_MENTION, IS_UNREAD, UNREAD_RESULT, SESSION_EXPIRED, SET_SERVER_NAME, REACT_APP_INITIALIZED, USER_ACTIVITY_UPDATE} from 'common/communication';
+import {NOTIFY_MENTION, IS_UNREAD, UNREAD_RESULT, SESSION_EXPIRED, SET_SERVER_NAME, REACT_APP_INITIALIZED, USER_ACTIVITY_UPDATE, CLOSE_TEAMS_DROPDOWN} from 'common/communication';
 
 const UNREAD_COUNT_INTERVAL = 1000;
 const CLEAR_CACHE_INTERVAL = 6 * 60 * 60 * 1000; // 6 hours
@@ -205,4 +205,8 @@ setInterval(() => {
     webFrame.clearCache();
 }, CLEAR_CACHE_INTERVAL);
 
+window.addEventListener('click', () => {
+    ipcRenderer.send(CLOSE_TEAMS_DROPDOWN);
+});
+
 /* eslint-enable no-magic-numbers */