Make everything use the KeyBindingManager (#7907)

src/components/views/settings/IntegrationManager.tsx

@@ -18,10 +18,11 @@ import React from 'react';
 
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
-import { Key } from "../../../Keyboard";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ActionPayload } from '../../../dispatcher/payloads';
 import Spinner from "../elements/Spinner";
+import { getKeyBindingsManager } from "../../../KeyBindingsManager";
+import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 
 interface IProps {
     // false to display an error saying that we couldn't connect to the integration manager
@@ -65,10 +66,13 @@ export default class IntegrationManager extends React.Component<IProps, IState>
     }
 
     private onKeyDown = (ev: KeyboardEvent): void => {
-        if (ev.key === Key.ESCAPE) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.props.onFinished();
+        const action = getKeyBindingsManager().getAccessibilityAction(ev);
+        switch (action) {
+            case KeyBindingAction.Escape:
+                ev.stopPropagation();
+                ev.preventDefault();
+                this.props.onFinished();
+                break;
         }
     };
 

src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx

@@ -35,8 +35,8 @@ const getKeyboardShortcutValue = (name: string): KeyBindingConfig => {
     return getKeyboardShortcuts()[name]?.default;
 };
 
-const getKeyboardShortcutDisplayName = (name: string): string => {
-    const keyboardShortcutDisplayName = getKeyboardShortcuts()[name]?.displayName as string;
+const getKeyboardShortcutDisplayName = (name: string): string | null => {
+    const keyboardShortcutDisplayName = getKeyboardShortcuts()[name]?.displayName;
     return keyboardShortcutDisplayName && _t(keyboardShortcutDisplayName);
 };
 
@@ -93,8 +93,11 @@ const visibleCategories = Object.entries(CATEGORIES).filter(([categoryName]) =>
     categoryName !== CategoryName.LABS || SdkConfig.get()['showLabsSettings']);
 
 const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => {
+    const displayName = getKeyboardShortcutDisplayName(name);
+    if (!displayName) return null;
+
     return <div className="mx_KeyboardShortcut_shortcutRow">
-        { getKeyboardShortcutDisplayName(name) }
+        { displayName }
         <KeyboardShortcut name={name} />
     </div>;
 };
@@ -105,6 +108,8 @@ interface IKeyboardShortcutSectionProps {
 }
 
 const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ categoryName, category }) => {
+    if (!category.categoryLabel) return null;
+
     return <div className="mx_SettingsTab_section" key={categoryName}>
         <div className="mx_SettingsTab_subheading">{ _t(category.categoryLabel) }</div>
         <div> { category.settingNames.map((shortcutName) => {