[MM-38310][MM-38313][MM-38315] Fixed some issues caused by having multiple tabs (#1722)

* [MM-38313][MM-38315] Fixed some issues caused by having multiple tabs

* [MM-38310] Make sure notification navigates to correct tab

src/common/communication.ts

@@ -68,7 +68,7 @@ export const SESSION_EXPIRED = 'session_expired';
 export const UPDATE_TRAY = 'update_tray';
 export const UPDATE_BADGE = 'update_badge';
 
-export const SET_VIEW_NAME = 'set-view-name';
+export const SET_VIEW_OPTIONS = 'set-view-name';
 export const REACT_APP_INITIALIZED = 'react-app-initialized';
 
 export const TOGGLE_BACK_BUTTON = 'toggle-back-button';

src/common/tabs/BaseTabView.ts

@@ -20,4 +20,7 @@ export default abstract class BaseTabView implements TabView {
     get type(): TabType {
         throw new Error('Not implemented');
     }
+    get shouldNotify(): boolean {
+        return false;
+    }
 }

src/common/tabs/MessagingTabView.ts

@@ -12,4 +12,8 @@ export default class MessagingTabView extends BaseTabView {
     get type(): TabType {
         return TAB_MESSAGING;
     }
+
+    get shouldNotify(): boolean {
+        return true;
+    }
 }

src/common/tabs/TabView.ts

@@ -20,6 +20,7 @@ export interface TabView {
     get name(): string;
     get type(): TabType;
     get url(): URL;
+    get shouldNotify(): boolean;
 }
 
 export function getDefaultTeamWithTabsFromTeam(team: Team) {

src/main/main.ts

@@ -42,6 +42,7 @@ import {
     SHOW_REMOVE_SERVER_MODAL,
     UPDATE_SHORTCUT_MENU,
     OPEN_TEAMS_DROPDOWN,
+    SET_ACTIVE_VIEW,
 } from 'common/communication';
 import Config from 'common/config';
 import {MattermostServer} from 'common/servers/MattermostServer';
@@ -241,6 +242,7 @@ function initializeInterCommunicationEventListeners() {
     ipcMain.on('update-menu', handleUpdateMenuEvent);
     ipcMain.on(UPDATE_SHORTCUT_MENU, handleUpdateShortcutMenuEvent);
     ipcMain.on(FOCUS_BROWSERVIEW, WindowManager.focusBrowserView);
+    ipcMain.on(SET_ACTIVE_VIEW, handleUpdateLastActiveTab);
 
     if (process.platform !== 'darwin') {
         ipcMain.on('open-app-menu', handleOpenAppMenu);
@@ -948,3 +950,14 @@ function resizeScreen(browserWindow: BrowserWindow) {
     browserWindow.on('restore', handle);
     handle();
 }
+function handleUpdateLastActiveTab(event: IpcMainEvent, serverName: string, viewName: string) {
+    const teams = config.teams;
+    teams.forEach((team) => {
+        if (team.name === serverName) {
+            const viewIndex = team?.tabs.findIndex((tab) => tab.name === viewName);
+            team.lastActiveTab = viewIndex;
+        }
+    });
+    config.set('teams', teams);
+}
+

src/main/notifications/index.ts

@@ -8,6 +8,7 @@ import {MentionData} from 'types/notification';
 import {ServerFromURL} from 'types/utils';
 
 import {PLAY_SOUND} from 'common/communication';
+import {TAB_MESSAGING} from 'common/tabs/TabView';
 
 import * as windowManager from '../windows/windowManager';
 
@@ -52,7 +53,7 @@ export function displayMention(title: string, body: string, channel: {id: string
 
     mention.on('click', () => {
         if (serverName) {
-            windowManager.switchServer(serverName);
+            windowManager.switchTab(serverName, TAB_MESSAGING);
             webcontents.send('notification-clicked', {channel, teamId, url});
         }
     });

src/main/preload/mattermost.js

@@ -17,7 +17,7 @@ import {
     IS_UNREAD,
     UNREAD_RESULT,
     SESSION_EXPIRED,
-    SET_VIEW_NAME,
+    SET_VIEW_OPTIONS,
     REACT_APP_INITIALIZED,
     USER_ACTIVITY_UPDATE,
     CLOSE_TEAMS_DROPDOWN,
@@ -31,6 +31,7 @@ let appVersion;
 let appName;
 let sessionExpired;
 let viewName;
+let shouldSendNotifications;
 
 console.log('Preload initialized');
 
@@ -120,8 +121,10 @@ window.addEventListener('message', ({origin, data = {}} = {}) => {
     // it will be captured by itself too
         break;
     case 'dispatch-notification': {
+        if (shouldSendNotifications) {
             const {title, body, channel, teamId, url, silent, data: messageData} = message;
             ipcRenderer.send(NOTIFY_MENTION, title, body, channel, teamId, url, silent, messageData);
+        }
         break;
     }
     case 'browser-history-push': {
@@ -179,8 +182,9 @@ ipcRenderer.on(IS_UNREAD, (event, favicon, server) => {
     }
 });
 
-ipcRenderer.on(SET_VIEW_NAME, (_, name) => {
+ipcRenderer.on(SET_VIEW_OPTIONS, (_, name, shouldNotify) => {
     viewName = name;
+    shouldSendNotifications = shouldNotify;
 });
 
 function getUnreadCount() {

src/main/views/MattermostView.ts

@@ -18,7 +18,7 @@ import {
     IS_UNREAD,
     UNREAD_RESULT,
     TOGGLE_BACK_BUTTON,
-    SET_VIEW_NAME,
+    SET_VIEW_OPTIONS,
     LOADSCREEN_END,
 } from 'common/communication';
 
@@ -97,7 +97,7 @@ export class MattermostView extends EventEmitter {
         }
 
         this.view.webContents.on('did-finish-load', () => {
-            this.view.webContents.send(SET_VIEW_NAME, this.tab.name);
+            this.view.webContents.send(SET_VIEW_OPTIONS, this.tab.name, this.tab.shouldNotify);
         });
 
         this.contextMenu = new ContextMenu({}, this.view);

src/main/views/viewManager.ts

@@ -242,18 +242,15 @@ export class ViewManager {
         }
     }
 
-    findByWebContent(webContentId: number) {
+    findViewByWebContent(webContentId: number) {
         let found = null;
-        let serverName;
         let view;
-        const entries = this.views.entries();
+        const entries = this.views.values();
 
-        for ([serverName, view] of entries) {
+        for (view of entries) {
-            if (typeof serverName !== 'undefined') {
             const wc = view.getWebContents();
             if (wc && wc.id === webContentId) {
-                    found = serverName;
+                found = view;
-                }
             }
         }
         return found;

src/main/windows/windowManager.ts

@@ -420,8 +420,14 @@ export function updateLoadingScreenDarkMode(darkMode: boolean) {
     }
 }
 
+export function getViewNameByWebContentsId(webContentsId: number) {
+    const view = status.viewManager?.findViewByWebContent(webContentsId);
+    return view?.name;
+}
+
 export function getServerNameByWebContentsId(webContentsId: number) {
-    return status.viewManager?.findByWebContent(webContentsId);
+    const view = status.viewManager?.findViewByWebContent(webContentsId);
+    return view?.tab.server.name;
 }
 
 export function close() {

src/renderer/components/MainPage.tsx

@@ -102,7 +102,7 @@ export default class MainPage extends React.PureComponent<Props, State> {
         this.threeDotMenu = React.createRef();
 
         const firstServer = this.props.teams.find((team) => team.order === 0);
-        const firstTab = firstServer?.tabs.find((tab) => tab.order === (firstServer.lastActiveTab || 0)) || firstServer?.tabs[0];
+        const firstTab = firstServer?.tabs.find((tab, index) => index === (firstServer.lastActiveTab || 0)) || firstServer?.tabs[0];
 
         this.state = {
             activeServerName: firstServer?.name,

src/renderer/components/TabBar.tsx

@@ -101,7 +101,7 @@ export default class TabBar extends React.PureComponent<Props> {
                                 as='li'
                                 id={`teamTabItem${index}`}
                                 draggable={false}
-                                title={tab.name}
+                                title={getTabDisplayName(tab.name as TabType)}
                                 className={classNames('teamTabItem', {
                                     active: this.props.activeTabName === tab.name,
                                     dragging: snapshot.isDragging,