[MM-36428][MM-36434][MM-36435] Keyboard navigation and menu updates for new tab/dropdown layout (#1695)

* [MM-36428][MM-36434][MM-36435] Keyboard navigation and menu updates for new tab/dropdown layout

* Shortcuts for Windows/Linux

* Update config.yml

* Fixed up the shortcuts

* Fixed the new server modal popping up where there are GPO teams only

.circleci/config.yml

@@ -449,7 +449,7 @@ workflows:
             branches:
               only:
                 - /^release-\d+(\.\d+){1,2}(-rc.*)?/
-                - pull/1691
+                - pull/1695
 
       - store_artifacts:
           # for master/PR builds

src/common/communication.ts

@@ -23,6 +23,7 @@ export const UPDATE_TEAMS = 'update-teams';
 export const DARK_MODE_CHANGE = 'dark_mode_change';
 export const GET_DARK_MODE = 'get-dark-mode';
 export const USER_ACTIVITY_UPDATE = 'user-activity-update';
+export const UPDATE_SHORTCUT_MENU = 'update-shortcut-menu';
 
 export const LOAD_RETRY = 'load_retry';
 export const LOAD_SUCCESS = 'load_success';

src/main/main.ts

@@ -7,7 +7,7 @@ import fs from 'fs';
 
 import path from 'path';
 
-import electron, {BrowserWindow, IpcMainEvent, IpcMainInvokeEvent, Rectangle} from 'electron';
+import electron, {BrowserWindow, globalShortcut, IpcMainEvent, IpcMainInvokeEvent, Rectangle} from 'electron';
 import isDev from 'electron-is-dev';
 import installExtension, {REACT_DEVELOPER_TOOLS} from 'electron-devtools-installer';
 import log from 'electron-log';
@@ -39,6 +39,8 @@ import {
     SWITCH_TAB,
     SHOW_EDIT_SERVER_MODAL,
     SHOW_REMOVE_SERVER_MODAL,
+    UPDATE_SHORTCUT_MENU,
+    OPEN_TEAMS_DROPDOWN,
 } from 'common/communication';
 import Config from 'common/config';
 import {getDefaultTeamWithTabsFromTeam} from 'common/tabs/TabView';
@@ -96,6 +98,7 @@ let appVersion = null;
 let config: Config;
 let authManager: AuthManager;
 let certificateManager: CertificateManager;
+let didCheckForAddServerModal = false;
 
 /**
  * Main entry point for the application, ensures that everything initializes in the proper order
@@ -233,6 +236,7 @@ function initializeInterCommunicationEventListeners() {
     ipcMain.on(NOTIFY_MENTION, handleMentionNotification);
     ipcMain.handle('get-app-version', handleAppVersion);
     ipcMain.on('update-menu', handleUpdateMenuEvent);
+    ipcMain.on(UPDATE_SHORTCUT_MENU, handleUpdateShortcutMenuEvent);
     ipcMain.on(FOCUS_BROWSERVIEW, WindowManager.focusBrowserView);
 
     if (process.platform !== 'darwin') {
@@ -301,6 +305,14 @@ function handleConfigSynchronize() {
         WindowManager.sendToRenderer(RELOAD_CONFIGURATION);
     }
 
+    if (process.platform === 'win32' && !didCheckForAddServerModal && typeof config.registryConfigData !== 'undefined') {
+        didCheckForAddServerModal = true;
+        if (config.teams.length === 0) {
+            handleNewServerModal();
+        }
+    }
+
+    ipcMain.emit('update-menu', true, config);
     ipcMain.emit(EMIT_CONFIGURATION, true, config.data);
 }
 
@@ -646,8 +658,11 @@ function initializeAfterAppReady() {
 
     WindowManager.showMainWindow(deeplinkingURL);
 
-    if (config.teams.length === 0) {
+    // only check for non-Windows, as with Windows we have to wait for GPO teams
-        WindowManager.showSettingsWindow();
+    if (process.platform !== 'win32' || typeof config.registryConfigData !== 'undefined') {
+        if (config.teams.length === 0) {
+            handleNewServerModal();
+        }
     }
 
     criticalErrorHandler.setMainWindow(WindowManager.getMainWindow()!);
@@ -722,6 +737,10 @@ function initializeAfterAppReady() {
         // is the requesting url trusted?
         callback(urlUtils.isTrustedURL(requestingURL, config.teams));
     });
+
+    globalShortcut.register(`${process.platform === 'darwin' ? 'Cmd+Ctrl' : 'Ctrl+Shift'}+S`, () => {
+        ipcMain.emit(OPEN_TEAMS_DROPDOWN);
+    });
 }
 
 //
@@ -761,6 +780,10 @@ function handleUpdateMenuEvent(event: IpcMainEvent, menuConfig: Config) {
     }
 }
 
+function handleUpdateShortcutMenuEvent(event: IpcMainEvent) {
+    handleUpdateMenuEvent(event, config);
+}
+
 async function handleSelectDownload(event: IpcMainInvokeEvent, startFrom: string) {
     const message = 'Specify the folder where files will download';
     const result = await dialog.showOpenDialog({defaultPath: startFrom || config.downloadLocation,

src/main/menus/app.ts

@@ -3,9 +3,9 @@
 // See LICENSE.txt for license information.
 'use strict';
 
-import {app, Menu, MenuItemConstructorOptions, MenuItem, session, shell, WebContents, webContents} from 'electron';
+import {app, ipcMain, Menu, MenuItemConstructorOptions, MenuItem, session, shell, WebContents, webContents} from 'electron';
 
-import {ADD_SERVER} from 'common/communication';
+import {SHOW_NEW_SERVER_MODAL} from 'common/communication';
 import Config from 'common/config';
 
 import * as WindowManager from '../windows/windowManager';
@@ -44,7 +44,7 @@ function createTemplate(config: Config) {
         platformAppMenu.push({
             label: 'Sign in to Another Server',
             click() {
-                WindowManager.sendToRenderer(ADD_SERVER);
+                ipcMain.emit(SHOW_NEW_SERVER_MODAL);
             },
         });
     }
@@ -151,7 +151,7 @@ function createTemplate(config: Config) {
             }
         },
     }, {
-        label: 'Developer Tools for Current Server',
+        label: 'Developer Tools for Current Tab',
         click() {
             WindowManager.openBrowserViewDevTools();
         },
@@ -206,22 +206,35 @@ function createTemplate(config: Config) {
             role: 'close',
             accelerator: 'CmdOrCtrl+W',
         }, separatorItem, ...teams.slice(0, 9).sort((teamA, teamB) => teamA.order - teamB.order).map((team, i) => {
-            return {
+            const items = [];
+            items.push({
                 label: team.name,
-                accelerator: `CmdOrCtrl+${i + 1}`,
+                accelerator: `${process.platform === 'darwin' ? 'Cmd+Ctrl' : 'Ctrl+Shift'}+${i + 1}`,
                 click() {
                     WindowManager.switchServer(team.name);
                 },
-            };
+            });
-        }), separatorItem, {
+            if (WindowManager.getCurrentTeamName() === team.name) {
-            label: 'Select Next Server',
+                team.tabs.slice(0, 9).sort((teamA, teamB) => teamA.order - teamB.order).forEach((tab, i) => {
+                    items.push({
+                        label: `    ${tab.name}`, // TODO
+                        accelerator: `CmdOrCtrl+${i + 1}`,
+                        click() {
+                            WindowManager.switchTab(team.name, tab.name);
+                        },
+                    });
+                });
+            }
+            return items;
+        }).flat(), separatorItem, {
+            label: 'Select Next Tab',
             accelerator: 'Ctrl+Tab',
             click() {
                 WindowManager.selectNextTab();
             },
             enabled: (teams.length > 1),
         }, {
-            label: 'Select Previous Server',
+            label: 'Select Previous Tab',
             accelerator: 'Ctrl+Shift+Tab',
             click() {
                 WindowManager.selectPreviousTab();

src/main/windows/windowManager.ts

@@ -7,7 +7,16 @@ import log from 'electron-log';
 
 import {CombinedConfig} from 'types/config';
 
-import {MAXIMIZE_CHANGE, HISTORY, GET_LOADING_SCREEN_DATA, REACT_APP_INITIALIZED, LOADING_SCREEN_ANIMATION_FINISHED, FOCUS_THREE_DOT_MENU, GET_DARK_MODE} from 'common/communication';
+import {
+    MAXIMIZE_CHANGE,
+    HISTORY,
+    GET_LOADING_SCREEN_DATA,
+    REACT_APP_INITIALIZED,
+    LOADING_SCREEN_ANIMATION_FINISHED,
+    FOCUS_THREE_DOT_MENU,
+    GET_DARK_MODE,
+    UPDATE_SHORTCUT_MENU,
+} from 'common/communication';
 import urlUtils from 'common/utils/url';
 
 import {getTabViewName} from 'common/tabs/TabView';
@@ -30,6 +39,7 @@ type WindowManagerStatus = {
     config?: CombinedConfig;
     viewManager?: ViewManager;
     teamDropdown?: TeamDropdownView;
+    currentServerName?: string;
 };
 
 const status: WindowManagerStatus = {};
@@ -338,6 +348,7 @@ function initializeViewManager() {
         status.viewManager = new ViewManager(status.config, status.mainWindow);
         status.viewManager.load();
         status.viewManager.showInitial();
+        status.currentServerName = status.config.teams.find((team) => team.order === 0)?.name;
     }
 }
 
@@ -348,9 +359,11 @@ export function switchServer(serverName: string) {
         log.error('Cannot find server in config');
         return;
     }
+    status.currentServerName = serverName;
     const lastActiveTab = server.tabs[server.lastActiveTab || 0];
     const tabViewName = getTabViewName(serverName, lastActiveTab.name);
     status.viewManager?.showByName(tabViewName);
+    ipcMain.emit(UPDATE_SHORTCUT_MENU);
 }
 
 export function switchTab(serverName: string, tabName: string) {
@@ -503,3 +516,7 @@ export function selectPreviousTab() {
 function handleGetDarkMode() {
     return status.config?.darkMode;
 }
+
+export function getCurrentTeamName() {
+    return status.currentServerName;
+}

src/renderer/components/MainPage.tsx

@@ -400,6 +400,7 @@ export default class MainPage extends React.PureComponent<Props, State> {
                         <DotsVerticalIcon/>
                     </button>
                     <TeamDropdownButton
+                        isDisabled={this.state.modalOpen}
                         activeServerName={this.state.activeServerName}
                         totalMentionCount={totalMentionCount}
                         hasUnreads={totalUnreadCount > 0}

src/renderer/components/TeamDropdownButton.tsx

@@ -10,6 +10,7 @@ import '../css/components/TeamDropdownButton.scss';
 import '../css/compass-icons.css';
 
 type Props = {
+    isDisabled?: boolean;
     activeServerName: string;
     totalMentionCount: number;
     hasUnreads: boolean;
@@ -18,7 +19,7 @@ type Props = {
 }
 
 const TeamDropdownButton: React.FC<Props> = (props: Props) => {
-    const {activeServerName, totalMentionCount, hasUnreads, isMenuOpen, darkMode} = props;
+    const {isDisabled, activeServerName, totalMentionCount, hasUnreads, isMenuOpen, darkMode} = props;
 
     const handleToggleButton = (event: React.MouseEvent<HTMLButtonElement>) => {
         event.preventDefault();
@@ -41,7 +42,9 @@ const TeamDropdownButton: React.FC<Props> = (props: Props) => {
 
     return (
         <button
+            disabled={isDisabled}
             className={classNames('TeamDropdownButton', {
+                disabled: isDisabled,
                 isMenuOpen,
                 darkMode,
             })}

src/renderer/css/components/TeamDropdownButton.scss

@@ -7,7 +7,11 @@
     align-items: center;
     font-family: Open Sans;
 
-    &:hover {
+    &.disabled {
+        opacity: 0.5;
+    }
+
+    &:not(.disabled):hover {
         background-color: #f4f4f4;
 
         .TeamDropdownButton__badge-count, .TeamDropdownButton__badge-unreads {
@@ -15,7 +19,7 @@
         }
     }
 
-    &:focus, &.isMenuOpen {
+    &:not(.disabled):focus, &.isMenuOpen {
         background-color: #fff;
 
         .TeamDropdownButton__badge-count, .TeamDropdownButton__badge-unreads {

src/renderer/dropdown.tsx

@@ -48,12 +48,19 @@ function getStyle(style?: DraggingStyle | NotDraggingStyle) {
     return style;
 }
 class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
+    buttonRefs: Map<number, HTMLButtonElement>;
+    addServerRef: React.RefObject<HTMLButtonElement>;
+    focusedIndex: number | null;
+
     constructor(props: Record<string, never>) {
         super(props);
         this.state = {
             isAnyDragging: false,
         };
+        this.focusedIndex = null;
 
+        this.buttonRefs = new Map();
+        this.addServerRef = React.createRef();
         window.addEventListener('message', this.handleMessageEvent);
     }
 
@@ -137,6 +144,7 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
     componentDidMount() {
         window.postMessage({type: REQUEST_TEAMS_DROPDOWN_INFO}, window.location.href);
         window.addEventListener('click', this.closeMenu);
+        window.addEventListener('keydown', this.handleKeyboardShortcuts);
     }
 
     componentDidUpdate() {
@@ -145,6 +153,53 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
 
     componentWillUnmount() {
         window.removeEventListener('click', this.closeMenu);
+        window.removeEventListener('keydown', this.handleKeyboardShortcuts);
+    }
+
+    setButtonRef = (teamIndex: number, refMethod?: (element: HTMLButtonElement) => any) => {
+        return (ref: HTMLButtonElement) => {
+            this.addButtonRef(teamIndex, ref);
+            refMethod?.(ref);
+        };
+    }
+
+    addButtonRef = (teamIndex: number, ref: HTMLButtonElement | null) => {
+        if (ref) {
+            this.buttonRefs.set(teamIndex, ref);
+            ref.addEventListener('focusin', () => {
+                this.focusedIndex = teamIndex;
+            });
+            ref.addEventListener('blur', () => {
+                this.focusedIndex = null;
+            });
+        }
+    }
+
+    handleKeyboardShortcuts = (event: KeyboardEvent) => {
+        if (event.key === 'ArrowDown') {
+            if (this.focusedIndex === null) {
+                this.focusedIndex = 0;
+            } else {
+                this.focusedIndex = (this.focusedIndex + 1) % this.buttonRefs.size;
+            }
+            this.buttonRefs.get(this.focusedIndex)?.focus();
+        }
+        if (event.key === 'ArrowUp') {
+            if (this.focusedIndex === null || this.focusedIndex === 0) {
+                this.focusedIndex = this.buttonRefs.size - 1;
+            } else {
+                this.focusedIndex = (this.focusedIndex - 1) % this.buttonRefs.size;
+            }
+            this.buttonRefs.get(this.focusedIndex)?.focus();
+        }
+        if (event.key === 'Escape') {
+            this.closeMenu();
+        }
+        this.buttonRefs.forEach((button, index) => {
+            if (event.key === String(index + 1)) {
+                button.focus();
+            }
+        });
     }
 
     handleClickOnDragHandle = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -238,7 +293,7 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
                                                         anyDragging: this.state.isAnyDragging,
                                                         active: this.isActiveTeam(team),
                                                     })}
-                                                    ref={provided.innerRef}
+                                                    ref={this.setButtonRef(orderedIndex, provided.innerRef)}
                                                     {...provided.draggableProps}
                                                     onClick={this.selectServer(team)}
                                                     style={getStyle(provided.draggableProps.style)}
@@ -284,6 +339,9 @@ class TeamDropdown extends React.PureComponent<Record<string, never>, State> {
                 <hr className='TeamDropdown__divider'/>
                 {this.state.enableServerManagement &&
                     <button
+                        ref={(ref) => {
+                            this.addButtonRef(this.state.orderedTeams?.length || 0, ref);
+                        }}
                         className='TeamDropdown__button addServer'
                         onClick={this.addServer}
                     >