Add a keyboard shortcut to toggle hidden event visibility when labs a…

…re enabled.

Notes: The keyboard shortcut is control (or cmd) shift h.
Signed-off-by: Katarzyna Stachura <uwunyaa@outlook.com>

src/KeyBindingsDefaults.ts

@@ -22,9 +22,11 @@ import {
     NavigationAction,
     RoomAction,
     RoomListAction,
+    LabsAction,
 } from "./KeyBindingsManager";
 import { isMac, Key } from "./Keyboard";
 import SettingsStore from "./settings/SettingsStore";
+import SdkConfig from "./SdkConfig";
 
 const messageComposerBindings = (): KeyBinding<MessageComposerAction>[] => {
     const bindings: KeyBinding<MessageComposerAction>[] = [
@@ -411,10 +413,28 @@ const navigationBindings = (): KeyBinding<NavigationAction>[] => {
     ];
 };
 
+const labsBindings = (): KeyBinding<LabsAction>[] => {
+    if (!SdkConfig.get()['showLabsSettings']) {
+        return [];
+    }
+
+    return [
+        {
+            action: LabsAction.ToggleHiddenEventVisibility,
+            keyCombo: {
+                key: Key.H,
+                ctrlOrCmd: true,
+                shiftKey: true,
+            },
+        },
+    ];
+};
+
 export const defaultBindingsProvider: IKeyBindingsProvider = {
     getMessageComposerBindings: messageComposerBindings,
     getAutocompleteBindings: autocompleteBindings,
     getRoomListBindings: roomListBindings,
     getRoomBindings: roomBindings,
     getNavigationBindings: navigationBindings,
+    getLabsBindings: labsBindings,
 };

src/KeyBindingsManager.ts

@@ -125,6 +125,12 @@ export enum NavigationAction {
     SelectNextUnreadRoom = 'SelectNextUnreadRoom',
 }
 
+/** Actions only available when labs are enabled */
+export enum LabsAction {
+    /** Toggle visibility of hidden events */
+    ToggleHiddenEventVisibility = 'ToggleHiddenEventVisibility',
+}
+
 /**
  * Represent a key combination.
  *
@@ -213,6 +219,7 @@ export interface IKeyBindingsProvider {
     getRoomListBindings: KeyBindingGetter<RoomListAction>;
     getRoomBindings: KeyBindingGetter<RoomAction>;
     getNavigationBindings: KeyBindingGetter<NavigationAction>;
+    getLabsBindings: KeyBindingGetter<LabsAction>;
 }
 
 export class KeyBindingsManager {
@@ -264,6 +271,10 @@ export class KeyBindingsManager {
     getNavigationAction(ev: KeyboardEvent | React.KeyboardEvent): NavigationAction | undefined {
         return this.getAction(this.bindingsProviders.map(it => it.getNavigationBindings), ev);
     }
+
+    getLabsAction(ev: KeyboardEvent | React.KeyboardEvent): LabsAction | undefined {
+        return this.getAction(this.bindingsProviders.map(it => it.getLabsBindings), ev);
+    }
 }
 
 const manager = new KeyBindingsManager();

src/accessibility/KeyboardShortcuts.ts

@@ -24,6 +24,7 @@ export enum Categories {
     ROOM_LIST = "Room List",
     ROOM = "Room",
     AUTOCOMPLETE = "Autocomplete",
+    LABS = "Labs",
 }
 
 export enum Modifiers {
@@ -276,6 +277,18 @@ export const shortcuts: Record<Categories, IShortcut[]> = {
             description: _td("Cancel autocomplete"),
         },
     ],
+
+    // SdkConfig isn't initialized here, so add labs shortcuts unconditionally. The logic whether they should be visible
+    // and enabled belongs in other places anyway.
+    [Categories.LABS]: [
+        {
+            keybinds: [{
+                modifiers: [CMD_OR_CTRL, Modifiers.SHIFT],
+                key: Key.H,
+            }],
+            description: _td("Toggle visibility of hidden events"),
+        },
+    ],
 };
 
 export const registerShortcut = (category: Categories, defn: IShortcut) => {

src/components/structures/LoggedInView.tsx

@@ -29,6 +29,7 @@ import { fixupColorFonts } from '../../utils/FontManager';
 import dis from '../../dispatcher/dispatcher';
 import { IMatrixClientCreds } from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
+import { SettingLevel } from "../../settings/SettingLevel";
 import ResizeHandle from '../views/elements/ResizeHandle';
 import { CollapseDistributor, Resizer } from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
@@ -47,7 +48,7 @@ import { IOOBData, IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
 import { ICollapseConfig } from "../../resizer/distributors/collapse";
 import HostSignupContainer from '../views/host_signup/HostSignupContainer';
-import { getKeyBindingsManager, NavigationAction, RoomAction } from '../../KeyBindingsManager';
+import { getKeyBindingsManager, NavigationAction, RoomAction, LabsAction } from '../../KeyBindingsManager';
 import { IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
 import { replaceableComponent } from "../../utils/replaceableComponent";
@@ -531,6 +532,33 @@ class LoggedInView extends React.Component<IProps, IState> {
                 // if we do not have a handler for it, pass it to the platform which might
                 handled = PlatformPeg.get().onKeyDown(ev);
         }
+
+        // Handle labs actions here, as they apply within the same scope
+        if (!handled) {
+            const labsAction = getKeyBindingsManager().getLabsAction(ev);
+            switch (labsAction) {
+                case LabsAction.ToggleHiddenEventVisibility: {
+                    const hiddenEventVisibility = SettingsStore.getValueAt(
+                        SettingLevel.DEVICE,
+                        'showHiddenEventsInTimeline',
+                        undefined,
+                        false,
+                    );
+                    SettingsStore.setValue(
+                        'showHiddenEventsInTimeline',
+                        undefined,
+                        SettingLevel.DEVICE,
+                        !hiddenEventVisibility,
+                    );
+                    handled = true;
+                    break;
+                }
+                default:
+                    // if we do not have a handler for it, pass it to the platform which might
+                    handled = PlatformPeg.get().onKeyDown(ev);
+            }
+        }
+
         if (handled) {
             ev.stopPropagation();
             ev.preventDefault();

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

@@ -21,6 +21,7 @@ import React from "react";
 import { Categories, DIGITS, IShortcut, Modifiers, shortcuts } from "../../../../../accessibility/KeyboardShortcuts";
 import { isMac, Key } from "../../../../../Keyboard";
 import { _t, _td } from "../../../../../languageHandler";
+import SdkConfig from "../../../../../SdkConfig";
 
 // TS: once languageHandler is TS we can probably inline this into the enum
 _td("Alt");
@@ -33,6 +34,7 @@ _td("Calls");
 _td("Composer");
 _td("Room List");
 _td("Autocomplete");
+_td("Labs");
 
 const categoryOrder = [
     Categories.COMPOSER,
@@ -43,6 +45,11 @@ const categoryOrder = [
     Categories.CALLS,
 ];
 
+// Add the labs category if they're enabled
+if (SdkConfig.get()['showLabsSettings']) {
+    categoryOrder.push(Categories.LABS);
+}
+
 const modifierIcon: Record<string, string> = {
     [Modifiers.COMMAND]: "⌘",
 };

src/i18n/strings/en_EN.json

@@ -1442,6 +1442,7 @@
     "Composer": "Composer",
     "Room List": "Room List",
     "Autocomplete": "Autocomplete",
+    "Labs": "Labs",
     "Page Up": "Page Up",
     "Page Down": "Page Down",
     "Esc": "Esc",
@@ -1450,7 +1451,6 @@
     "End": "End",
     "[number]": "[number]",
     "Keyboard": "Keyboard",
-    "Labs": "Labs",
     "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.": "Feeling experimental? Labs are the best way to get things early, test out new features and help shape them before they actually launch. <a>Learn more</a>.",
     "Ignored/Blocked": "Ignored/Blocked",
     "Error adding ignored user/server": "Error adding ignored user/server",
@@ -3408,5 +3408,6 @@
     "Open this settings tab": "Open this settings tab",
     "Go to Home View": "Go to Home View",
     "Move autocomplete selection up/down": "Move autocomplete selection up/down",
-    "Cancel autocomplete": "Cancel autocomplete"
+    "Cancel autocomplete": "Cancel autocomplete",
+    "Toggle visibility of hidden events": "Toggle visibility of hidden events"
 }