Connect: Prepare keyboard shortcuts configuration (#22193)

* Make naming around keyboard shortcuts more consistent

Previously, we used words like: "key", "type", "shortcut" which were really confusing (and I wrote this code), because it was hard to tell what exactly they describe.
From now, we will use only "accelerator" (borrowed from Electron) and "action" words.
For example, in a shortcut "Command+1": "tab-1":
- "Command+1" is "accelerator"
- "tab-1" is "action"

* Use "+" instead of "-" as a separator

With "-" we are not able to use this symbol as a valid key code.

* Rename some config keys to follow the same naming pattern

* Rename keyboard shortcuts to match config keys

* Extract `mapAcceleratorsToActions` to a function

* Rename other "keyboard shortcuts" to "accelerators" and "actions"

web/packages/teleterm/src/services/config/configService.ts

@@ -35,55 +35,55 @@ const createAppConfigSchema = (platform: Platform) => {
   return z.object({
     'usageReporting.enabled': z.boolean().default(false),
     'keymap.tab1': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-1'])
+      z.string().default(defaultKeymap['tab1'])
     ),
     'keymap.tab2': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-2'])
+      z.string().default(defaultKeymap['tab2'])
     ),
     'keymap.tab3': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-3'])
+      z.string().default(defaultKeymap['tab3'])
     ),
     'keymap.tab4': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-4'])
+      z.string().default(defaultKeymap['tab4'])
     ),
     'keymap.tab5': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-5'])
+      z.string().default(defaultKeymap['tab5'])
     ),
     'keymap.tab6': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-6'])
+      z.string().default(defaultKeymap['tab6'])
     ),
     'keymap.tab7': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-7'])
+      z.string().default(defaultKeymap['tab7'])
     ),
     'keymap.tab8': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-8'])
+      z.string().default(defaultKeymap['tab8'])
     ),
     'keymap.tab9': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-9'])
+      z.string().default(defaultKeymap['tab9'])
     ),
-    'keymap.tabClose': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-close'])
+    'keymap.closeTab': omitStoredConfigValue(
+      z.string().default(defaultKeymap['closeTab'])
     ),
-    'keymap.tabNew': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-new'])
+    'keymap.newTab': omitStoredConfigValue(
+      z.string().default(defaultKeymap['newTab'])
     ),
-    'keymap.tabPrevious': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-previous'])
+    'keymap.previousTab': omitStoredConfigValue(
+      z.string().default(defaultKeymap['previousTab'])
     ),
-    'keymap.tabNext': omitStoredConfigValue(
-      z.string().default(defaultKeymap['tab-next'])
+    'keymap.nextTab': omitStoredConfigValue(
+      z.string().default(defaultKeymap['nextTab'])
     ),
-    'keymap.toggleConnections': omitStoredConfigValue(
-      z.string().default(defaultKeymap['toggle-connections'])
+    'keymap.openConnections': omitStoredConfigValue(
+      z.string().default(defaultKeymap['openConnections'])
     ),
-    'keymap.toggleClusters': omitStoredConfigValue(
-      z.string().default(defaultKeymap['toggle-clusters'])
+    'keymap.openClusters': omitStoredConfigValue(
+      z.string().default(defaultKeymap['openClusters'])
     ),
-    'keymap.toggleIdentity': omitStoredConfigValue(
-      z.string().default(defaultKeymap['toggle-identity'])
+    'keymap.openProfiles': omitStoredConfigValue(
+      z.string().default(defaultKeymap['openProfiles'])
     ),
     'keymap.openQuickInput': omitStoredConfigValue(
-      z.string().default(defaultKeymap['open-quick-input'])
+      z.string().default(defaultKeymap['openQuickInput'])
     ),
     /**
      * This value can be provided by the user and is unsanitized. This means that it cannot be directly interpolated
@@ -106,87 +106,86 @@ export type AppConfig = z.infer<ReturnType<typeof createAppConfigSchema>>;
  * Command-Control-Option-Shift for macOS
  * Ctrl-Alt-Shift for other platforms
  */
-export type KeyboardShortcutType =
-  | 'tab-1'
-  | 'tab-2'
-  | 'tab-3'
-  | 'tab-4'
-  | 'tab-5'
-  | 'tab-6'
-  | 'tab-7'
-  | 'tab-8'
-  | 'tab-9'
-  | 'tab-close'
-  | 'tab-new'
-  | 'tab-previous'
-  | 'tab-next'
-  | 'open-quick-input'
-  | 'toggle-connections'
-  | 'toggle-clusters'
-  | 'toggle-identity';
+export type KeyboardShortcutAction =
+  | 'tab1'
+  | 'tab2'
+  | 'tab3'
+  | 'tab4'
+  | 'tab5'
+  | 'tab6'
+  | 'tab7'
+  | 'tab8'
+  | 'tab9'
+  | 'closeTab'
+  | 'newTab'
+  | 'previousTab'
+  | 'nextTab'
+  | 'openQuickInput'
+  | 'openConnections'
+  | 'openClusters'
+  | 'openProfiles';
 
-export type KeyboardShortcutsConfig = Record<KeyboardShortcutType, string>;
 const getDefaultKeymap = (platform: Platform) => {
   switch (platform) {
     case 'win32':
       return {
-        'tab-1': 'Ctrl-1',
-        'tab-2': 'Ctrl-2',
-        'tab-3': 'Ctrl-3',
-        'tab-4': 'Ctrl-4',
-        'tab-5': 'Ctrl-5',
-        'tab-6': 'Ctrl-6',
-        'tab-7': 'Ctrl-7',
-        'tab-8': 'Ctrl-8',
-        'tab-9': 'Ctrl-9',
-        'tab-close': 'Ctrl-W',
-        'tab-new': 'Ctrl-T',
-        'tab-previous': 'Ctrl-Shift-Tab',
-        'tab-next': 'Ctrl-Tab',
-        'open-quick-input': 'Ctrl-K',
-        'toggle-connections': 'Ctrl-P',
-        'toggle-clusters': 'Ctrl-E',
-        'toggle-identity': 'Ctrl-I',
+        tab1: 'Ctrl+1',
+        tab2: 'Ctrl+2',
+        tab3: 'Ctrl+3',
+        tab4: 'Ctrl+4',
+        tab5: 'Ctrl+5',
+        tab6: 'Ctrl+6',
+        tab7: 'Ctrl+7',
+        tab8: 'Ctrl+8',
+        tab9: 'Ctrl+9',
+        closeTab: 'Ctrl+W',
+        newTab: 'Ctrl+T',
+        previousTab: 'Ctrl+Shift+Tab',
+        nextTab: 'Ctrl+Tab',
+        openQuickInput: 'Ctrl+K',
+        openConnections: 'Ctrl+P',
+        openClusters: 'Ctrl+E',
+        openProfiles: 'Ctrl+I',
       };
     case 'linux':
       return {
-        'tab-1': 'Alt-1',
-        'tab-2': 'Alt-2',
-        'tab-3': 'Alt-3',
-        'tab-4': 'Alt-4',
-        'tab-5': 'Alt-5',
-        'tab-6': 'Alt-6',
-        'tab-7': 'Alt-7',
-        'tab-8': 'Alt-8',
-        'tab-9': 'Alt-9',
-        'tab-close': 'Ctrl-W',
-        'tab-new': 'Ctrl-T',
-        'tab-previous': 'Ctrl-Shift-Tab',
-        'tab-next': 'Ctrl-Tab',
-        'open-quick-input': 'Ctrl-K',
-        'toggle-connections': 'Ctrl-P',
-        'toggle-clusters': 'Ctrl-E',
-        'toggle-identity': 'Ctrl-I',
+        tab1: 'Alt+1',
+        tab2: 'Alt+2',
+        tab3: 'Alt+3',
+        tab4: 'Alt+4',
+        tab5: 'Alt+5',
+        tab6: 'Alt+6',
+        tab7: 'Alt+7',
+        tab8: 'Alt+8',
+        tab9: 'Alt+9',
+        closeTab: 'Ctrl+W',
+        newTab: 'Ctrl+T',
+        previousTab: 'Ctrl+Shift+Tab',
+        nextTab: 'Ctrl+Tab',
+        openQuickInput: 'Ctrl+K',
+        openConnections: 'Ctrl+P',
+        openClusters: 'Ctrl+E',
+        openProfiles: 'Ctrl+I',
       };
     case 'darwin':
       return {
-        'tab-1': 'Command-1',
-        'tab-2': 'Command-2',
-        'tab-3': 'Command-3',
-        'tab-4': 'Command-4',
-        'tab-5': 'Command-5',
-        'tab-6': 'Command-6',
-        'tab-7': 'Command-7',
-        'tab-8': 'Command-8',
-        'tab-9': 'Command-9',
-        'tab-close': 'Command-W',
-        'tab-new': 'Command-T',
-        'tab-previous': 'Control-Shift-Tab',
-        'tab-next': 'Control-Tab',
-        'open-quick-input': 'Command-K',
-        'toggle-connections': 'Command-P',
-        'toggle-clusters': 'Command-E',
-        'toggle-identity': 'Command-I',
+        tab1: 'Command+1',
+        tab2: 'Command+2',
+        tab3: 'Command+3',
+        tab4: 'Command+4',
+        tab5: 'Command+5',
+        tab6: 'Command+6',
+        tab7: 'Command+7',
+        tab8: 'Command+8',
+        tab9: 'Command+9',
+        closeTab: 'Command+W',
+        newTab: 'Command+T',
+        previousTab: 'Control+Shift+Tab',
+        nextTab: 'Control+Tab',
+        openQuickInput: 'Command+K',
+        openConnections: 'Command+P',
+        openClusters: 'Command+E',
+        openProfiles: 'Command+I',
       };
   }
 };

web/packages/teleterm/src/ui/Documents/KeyboardShortcutsPanel.tsx

@@ -21,31 +21,31 @@ import styled from 'styled-components';
 
 import Document from 'teleterm/ui/Document';
 import { useKeyboardShortcutFormatters } from 'teleterm/ui/services/keyboardShortcuts';
-import { KeyboardShortcutType } from 'teleterm/services/config';
+import { KeyboardShortcutAction } from 'teleterm/services/config';
 
 export function KeyboardShortcutsPanel() {
-  const { getShortcut } = useKeyboardShortcutFormatters();
+  const { getAccelerator } = useKeyboardShortcutFormatters();
 
-  const items: { title: string; shortcutKey: KeyboardShortcutType }[] = [
+  const items: { title: string; shortcutAction: KeyboardShortcutAction }[] = [
     {
       title: 'Open New Tab',
-      shortcutKey: 'tab-new',
+      shortcutAction: 'newTab',
     },
     {
       title: 'Go To Next Tab',
-      shortcutKey: 'tab-next',
+      shortcutAction: 'nextTab',
     },
     {
       title: 'Open Connections',
-      shortcutKey: 'toggle-connections',
+      shortcutAction: 'openConnections',
     },
     {
       title: 'Open Clusters',
-      shortcutKey: 'toggle-clusters',
+      shortcutAction: 'openClusters',
     },
     {
       title: 'Open Profiles',
-      shortcutKey: 'toggle-identity',
+      shortcutAction: 'openProfiles',
     },
   ];
 
@@ -55,25 +55,25 @@ export function KeyboardShortcutsPanel() {
         {items.map(item => (
           <Entry
             title={item.title}
-            shortcut={getShortcut(item.shortcutKey, {
+            accelerator={getAccelerator(item.shortcutAction, {
               useWhitespaceSeparator: true,
             })}
-            key={item.shortcutKey}
+            key={item.shortcutAction}
           />
         ))}
       </Grid>
     </Document>
   );
 }
 
-function Entry(props: { title: string; shortcut: string }) {
+function Entry(props: { title: string; accelerator: string }) {
   return (
     <>
       <Text textAlign="right" color="light" typography="subtitle1" py="4px">
         {props.title}
       </Text>
       <MonoText bg="primary.main" textAlign="left" px="12px" py="4px">
-        {props.shortcut}
+        {props.accelerator}
       </MonoText>
     </>
   );

web/packages/teleterm/src/ui/QuickInput/useQuickInput.ts

@@ -29,7 +29,7 @@ import {
   Suggestion,
 } from 'teleterm/ui/services/quickInput/types';
 import { routing } from 'teleterm/ui/uri';
-import { KeyboardShortcutType } from 'teleterm/services/config';
+import { KeyboardShortcutAction } from 'teleterm/services/config';
 
 import { assertUnreachable, retryWithRelogin } from '../utils';
 
@@ -67,14 +67,15 @@ export default function useQuickInput() {
         });
       }
     }
+
     get();
   }, [parseResult]);
 
   const hasSuggestions =
     suggestionsAttempt.status === 'success' &&
     suggestionsAttempt.data.length > 0;
-  const openQuickInputShortcutKey: KeyboardShortcutType = 'open-quick-input';
-  const { getShortcut } = useKeyboardShortcutFormatters();
+  const openQuickInputShortcutAction: KeyboardShortcutAction = 'openQuickInput';
+  const { getAccelerator } = useKeyboardShortcutFormatters();
 
   const onFocus = (e: any) => {
     if (e.relatedTarget) {
@@ -162,7 +163,7 @@ export default function useQuickInput() {
   };
 
   useKeyboardShortcuts({
-    [openQuickInputShortcutKey]: () => {
+    [openQuickInputShortcutAction]: () => {
       quickInputService.show();
     },
   });
@@ -193,7 +194,7 @@ export default function useQuickInput() {
     onInputChange: quickInputService.setInputValue,
     onHide: quickInputService.hide,
     onShow: quickInputService.show,
-    keyboardShortcut: getShortcut(openQuickInputShortcutKey),
+    keyboardShortcut: getAccelerator(openQuickInputShortcutAction),
   };
 }
 

web/packages/teleterm/src/ui/TabHost/TabHost.test.tsx

@@ -67,12 +67,12 @@ function getTestSetup({ documents }: { documents: Document[] }) {
     // @ts-expect-error we don't provide entire config
     getShortcutsConfig() {
       return {
-        'tab-close': 'Command-W',
-        'tab-new': 'Command-T',
-        'open-quick-input': 'Command-K',
-        'toggle-connections': 'Command-P',
-        'toggle-clusters': 'Command-E',
-        'toggle-identity': 'Command-I',
+        closeTab: 'Command-W',
+        newTab: 'Command-T',
+        openQuickInput: 'Command-K',
+        openConnections: 'Command-P',
+        openClusters: 'Command-E',
+        openProfiles: 'Command-I',
       };
     },
   };

web/packages/teleterm/src/ui/TabHost/TabHost.tsx

@@ -51,7 +51,7 @@ export function TabHost({ ctx }: { ctx: IAppContext }) {
     localClusterUri:
       ctx.workspacesService.getActiveWorkspace()?.localClusterUri,
   });
-  const { getLabelWithShortcut } = useKeyboardShortcutFormatters();
+  const { getLabelWithAccelerator } = useKeyboardShortcutFormatters();
 
   useTabShortcuts({
     documentsService,
@@ -108,8 +108,8 @@ export function TabHost({ ctx }: { ctx: IAppContext }) {
           onMoved={handleTabMoved}
           disableNew={false}
           onNew={openClusterTab}
-          newTabTooltip={getLabelWithShortcut('New Tab', 'tab-new')}
-          closeTabTooltip={getLabelWithShortcut('Close', 'tab-close')}
+          newTabTooltip={getLabelWithAccelerator('New Tab', 'newTab')}
+          closeTabTooltip={getLabelWithAccelerator('Close', 'closeTab')}
         />
       </Flex>
       <DocumentsRenderer />